jp-railway/pages/staffHome/filesonicInfo.vue

<template>
	<view>
		<u-navbar title="详情"  :isBack="back" ></u-navbar>
		<share-server ref="share"  ></share-server>
		
		<!-- 分享内容 -->
		<view class="share-content">
			<view class="item" v-for="(item,i) in list" :key="i" @click="ckItem(item)">
				<view class="infos">
					<view class="person">
						<view class="photo">
							<img v-if="item.regUser&&item.regUser.headImg" :src="item.regUser.headImg" alt="">
							<u-avatar v-else size="64"></u-avatar>
						</view>
						<view class="name" v-if="item.regUser">
							{{item.regUser.name}}
						</view>
					</view>
					<view class="date">
						{{item.createTime}}
					</view>
				</view>
				<view class="share-text">
					<textarea placeholder="记录点滴生活..." disabled="disabled" :auto-height="true" style="width:auto"
						v-model="item.synopsis" readonly maxlength="200" name="" id=""></textarea>
		
				</view>
				<view class="pictures">
					<template v-for="(pic,i2) in item.listShareFiles" v-if="pic.url">
						<image class="img" v-if="pic.isPic" :key="i2" mode="aspectFill"
							@click="previewImage(item.listShareFiles,i2)" :src="pic.url" alt="">
		
							<video v-else :key="i2" :src="pic.url" :class="{videoplay:playurl==pic.url}"
								@play="playurl=pic.url" enable-danmu danmu-btn controls></video>
					</template>
		
		
				</view>
				<view class="tagMain">
					<view class="tag" v-if="!item.activityId" :class="item.activityId">
						<text class="status" style="color: red;"
							v-if="item.status!=1">[{{item.status==0?'审核中':''}}{{item.status==2?'审核不通过':''}}]</text>
		
					</view>
					<view class="tag" v-else :class="item.activityId" @click="issueMethod(item.activityId)">
						<text class="status" style="color: red;"
							v-if="item.status!=1">[{{item.status==0?'审核中':''}}{{item.status==2?'审核不通过':''}}]</text>
						<template>
		
							<text class="symbol">#</text>
							<text class="text">{{item.activityName}}</text>
							<text class="icon">
								<u-icon size="28" color="#cccccc" name="arrow-right"></u-icon>
							</text>
						</template>
					</view>
					
					<view class="likeMain">
						<view class="like" v-if="item.status==1" @click="changeLikes(item)" :class="{
								red:item.isLike
							}">
							<view class="icon">
								<u-icon name="thumb-up" size="38"></u-icon>
							</view>
							<view class="number">
								{{item.likesNum}}
							</view>
						</view>
						
						
						<view class="like"  style="margin-left: 18rpx;"
						v-if="item.status==1" @click="showMessageBtn(item)" >
							<view class="icon">
								<img  style="width: 40rpx; height: 48rpx;"
								src="../../assets/img/riLine-chat-4-line.svg"></img>
							</view>
							<view class="number"> 评论</view>
						</view>
						
						<view class="like" v-show="item.listShareLikes.length>20" style="margin-left: 18rpx;"
						 @click="showlike=!showlike" >
							<view class="icon">
								<u-icon name="chat" size="38"></u-icon>
								
							</view>
							<view class="number"> {{showlike?'收起':'展开'}}点赞</view>
						</view>
						
						
					</view>
					
				</view>
				<view  class="messageListMain" v-show="item.listShareLikes.length||item.listShareComment.length" >
					<view  class="mLikeList"  v-show="item.listShareLikes.length">
						<u-icon name="thumb-up" size="38"></u-icon>
						<span v-for="(itemlike,ilike) in item.listShareLikes" :key="ilike" v-show="showlike||ilike<=20">
							{{ilike==0?' ':', '}}{{itemlike.userName}}
						</span>
						<span v-show="item.listShareLikes.length>20&&!showlike">...</span>
					</view>
					<view  class="messageList" v-show="item.listShareComment.length">
						<view class="messageItem" v-for="(itemcom,ico) in item.listShareComment"  :key="ico" >
							<span class="mItemTitle">{{itemcom.userName}}
							<span class="mItemTitleColor" v-if="item.regUser&&userInfo&&(item.regUser.id==itemcom.userId)">[作者]</span>
							<span class="mItemTitleColor" v-else-if="item.regUser&&userInfo&&(itemcom.userId==userInfo.id)">[本人]</span>
							：</span>
							<span class="mItemBody">{{itemcom.content}}</span>
						</view>
					</view>
					
				</view>
			
		
		
		
			</view>
		
		
			
		</view>
		
		<u-popup v-model="showMessage" border-radius="34" mode="bottom" >
			<view class="showMessage">
				<view class="showMessage1"><h3>发表评论({{content.length}}/50)</h3></view>
				<view class="showMessage2">
					<textarea name="" id=""   style="  width:100%"
					v-model="content" maxlength="50"
					cols="30" rows="5" placeholder="填写内容"></textarea>
				</view>
				<view class="showMessage3">
					<u-button type="primary" @click="submitMessage()">提交</u-button>
				</view>
			</view>
					
			</u-popup>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/share.js'
	import ShareServer from '@/components/ShareServer.vue'
	
	export default {
		components: {
		  ShareServer
		},
		data() {
			return {
				userInfo:null,
				id:'',
				info:{},
				list: [],
				showMessage:false,
				showMessageItem:{},
				showMessageId:'',
				content:"",
				showlike:false,
			}
		},
		onLoad(op){
			if(op.back&&op.back=="share"){
				this.back=false
			}
			this.userInfo=this.carhelp.getPersonInfo()
			console.log(this.userInfo)
			if(op.id){
				this.id=op.id
				this.getInfo()
			}
			
		},
		methods: {
			ckItem(item) {
			
			},
			previewImage(img, i) {
				let imgs = [];
				img.forEach(it => {
					if (it.isPic) {
						imgs.push(it.url)
					}
				})
			
			
				uni.previewImage({
					//indicator:"default",
					indicator: "number",
					loop: true,
					urls: imgs,
					current: i
				})
			},
			submitMessage(){
				if(!this.content){
					uni.showToast({
						title: "请填写内容",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.createComment({
					shareId:this.showMessageId,
					content:this.content,
				}).then((res) => {
					
					uni.showToast({
						title: "提交成功",
						icon: "none"
					})
					this.showMessage=false
					//this.getInfo();
					var user=this.carhelp.getPersonInfo()
					
					this.showMessageItem.listShareComment.unshift({
						userName:user.name,
						content:this.content,
						userId:user.id
					})
					
					//this.getNewsCommentsList(true)
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			showMessageBtn(item){
				this.showMessage=true;
				this.showMessageId=item.id;
				this.showMessageItem=item
				this.content=""
			},
			changeLikes(info) {
				var userInfo = this.carhelp.getPersonInfo()
				if (!userInfo) {
					return
				}
			
			
				if (!info.isLike) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
			
			
					API.changeLikes({
						shareId: info.id
					}).then((res) => {
						info.isLike = true;
						info.likesNum++;
						var user=this.carhelp.getPersonInfo()
						
						info.listShareLikes.unshift({
							userName:user.name
						})
						uni.hideLoading();
						//this.getInfo(true)
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				} else {
					uni.showToast({
						title: "您已经点过赞了",
						icon: "none"
					})
				}
			
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.details({
					id:this.id
				}).then((res) => {
					
					
					
					uni.hideLoading();
					 var item=res.data.share
					 item.listShareLikes=res.data.likesList.data
					 item.listShareComment=res.data.commentList.data
					item.likesNum=res.data.likesList.data.length
					item.commentNum=res.data.commentList.data.length
					
					if(this.$refs.share&&item.regUser){
						this.$refs.share.setUrl("/pages/staffHome/filesonicInfo?back=share&id="+this.id);
						
						this.$refs.share.setTitle("来自"+item.regUser.name+"的分享",this.id);
						
					}
					// var share=res.data.share;
					// this.likesList=res.data.likesList;
					// this.commentList=res.data.commentList;
					 this.list=[item]
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.showMessage{
		padding: 60rpx 50rpx ;
		.showMessage2{
			background-color: #E5E7EA;
			margin: 40rpx 0;
			textarea{
				padding: 8rpx;
				border-radius:34px;
			}
		}
		
	}
	.messageListMain{
		border-radius: 4px;
		background-color: rgba(240, 240, 240, 1);
	
		color: #224466 ;
		.mLikeList{
			padding:16rpx;
			border-bottom: 1px solid rgba(222, 222, 222, 1);
		}
		.messageList{
			padding:16rpx;
			.messageItem{
				// display: flex;
				// flex-wrap: wrap;
				.mItemTitleColor{
					color:#03a9f4;
					margin-left: 8rpx;
				}
				.mItemBody{
					color: #101010;

				}
			}
			.messageItemEnd{
				text-align: center;
				    color: #9E9E9E;
			}
			
		}
	}
	
	
	.red {
		color: red !important;
	}

	.like {
		margin-top: 16rpx;
		line-height: 24px;
		display: flex;
		color:#224466 ;
		.number {
			margin-left: 16rpx;
		}
	}

	page {
		background-color: #fff;
		padding-bottom: 100px;
	}

	.image {
		padding: 0 32rpx;
		margin: 24rpx 0;
	}

	.tabs {
		background-color: rgba(255, 255, 255, 1);
		padding: 0 32rpx;

		/deep/.u-tab-item {
			flex: none !important;
			margin-right: 32rpx;
		}

		/deep/.u-tabs-scorll-flex {
			justify-content: start;
		}
	}

	// 分享内容
	.share-content {
		margin: 48rpx 32rpx 0 32rpx;
		  background: #fff;
		.item {
			padding-bottom: 32rpx;
			border-bottom: 1px solid rgba(232, 232, 232, 1);
			margin-top: 48rpx;
			font-family: 'Regular';

			.infos {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.person {
					display: flex;
					align-items: center;

					.photo {
						img {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50px;
						}
					}

					.name {
						color: rgba(51, 51, 51, 1);
						font-size: 16px;
						margin-left: 24rpx;
						font-family: 'Medium';
					}
				}
			}

			.share-text {
				margin-top: 24rpx;
				color: #101010;
				font-size: 16px;
				line-height: 22px;
			}

			.pictures {
				display: flex;
				justify-content: start;
				flex-wrap: wrap;
				margin-top: 16rpx;

				.videoplay {
					height: 400rpx;
				}

				video {
					width: 100%;

					height: 200rpx;
					border-radius: 16rpx;
					margin-bottom: 16rpx;
					margin-left: 16rpx;
				}

				.img {
					width: 31%;
					height: 216rpx;
					border-radius: 16rpx;
					margin-bottom: 16rpx;
					margin-left: 16rpx;
				}

				img {
					width: 31%;
					height: 216rpx;
					border-radius: 16rpx;
					margin-bottom: 16rpx;
					margin-left: 16rpx;
				}
			}

			.video {
				margin-top: 16rpx;

				uni-video {
					width: 100%;
					height: 380rpx;
					border-radius: 8px;
				}
			}

			.tagMain {
				display: flex;
				justify-content: space-between;
				.likeMain{
					display: flex;
				}
				.tag {
					margin-top: 16rpx;
					line-height: 24px;

					.symbol {
						color: rgba(31, 74, 153, 100);
						font-size: 16px
					}

					.text {
						color: rgba(31, 74, 153, 1);
						margin-left: 14rpx;
					}
				}
			}

		}

	}

	.item:last-of-type {
		border: none;
		margin-bottom: 26rpx;
	}

	.bottom {
		z-index: 999;
		background: linear-gradient(223.81deg, rgba(0, 90, 217, 1) 14.24%, rgba(0, 52, 148, 1) 86.67%);
		width: 104rpx;
		height: 104rpx;
		border-radius: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		right: 72rpx;
		bottom: 72rpx;

		img {
			width: 56rpx;
			height: 56rpx;

		}
	}
</style>