jp-railway/pages/staffHome/filesonic.vue

<template>
	<view>
		<u-navbar title="分享空间"></u-navbar>
		<!-- 图片 -->
		<view class="image" v-if="false">
			<u-image width="100%" height="200rpx" :src="src" border-radius="16"></u-image>
		</view>

		<!-- 分享内容 -->
		<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">
							{{item.createName}}
						</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="tag status" style="color: #19be6b;" @click="delShare(item.id)" v-if="item.status!=1">
						<u>点击删除</u>
					</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"  style="margin-left: 18rpx;"
						v-if="item.status==1" @click="gotoUrl('pages/staffHome/filesonicInfo?id='+item.id)" >
							<view class="icon">
								<u-icon name="photo" size="38"></u-icon>
								
							</view>
							<view class="number"> 查看</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="(item,i) in item.listShareLikes" :key="i">
							{{i==0?' ':', '}}{{item.userName}}
						</span>
						<span v-show="item.likesNum>item.listShareLikes.length">...</span>
					</view>
					<view  class="messageList" v-show="item.listShareComment.length">
						<view class="messageItem" v-for="(item,i) in item.listShareComment"  :key="i" >
							<span class="mItemTitle">{{item.userName}}：</span>
							<span class="mItemBody">{{item.content}}</span>
						</view>
						<view class="messageItemEnd" v-show="item.commentNum>item.listShareComment.length" >最多显示20条评论</view>
					</view>
					
				</view>
	



			</view>



		</view>
		<u-divider :isnone="list.length==0" v-if="list.length==recordsTotal" nonetext="没有找到相关内容"
			border-color="#CFD2D5">已经到底了</u-divider>

		<view class="bottom" @click="issueMethod()">
			<img src="../../assets/img/riFill-camera-fill@2x.png">
		</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 {
		isWeiXin
	} from '@/apis/utils'
	export default {
		data() {
			return {
				listForm: {
					pageIndex: 1,
					pageSize: 5,

				},
				playurl: "",
				list: [],
				recordsTotal: 0,
				tabList: [],
				current: 0,
				showMessage:false,
				showMessageItem:{},
				showMessageId:'',
				content:"",
			}
		},
		onLoad(op) {
			this.carhelp.set("addShare", 0);
			if ((process.env.NODE_ENV === "development") || isWeiXin()) {
				this.getList()
			} else {
				alert("请使用微信打开本页面")
			}

			//this.dataList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		onShow() {
			console.log("onShow")
			if (this.carhelp.get("addShare")) {
				this.listForm.pageIndex = 1;
				this.getList()
			}

		},
		methods: {
			showMessageBtn(item){
				this.showMessage=true;
				this.showMessageId=item.id;
				this.showMessageItem=item
				this.content=""
			},
			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
					})
					
					//this.getNewsCommentsList(true)
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			delShare(id) {
				uni.showModal({
					title: '提示',
					content: '是否删除分享？',

					success: res => {
						if (res.confirm) {
							this.delShareApi(id)
						} else if (res.cancel) {
							//('用户点击取消');
						}
					}
				});
			},
			delShareApi(id) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.delShare({
					shareId: id
				}).then((res) => {

					uni.showToast({
						title: "删除成功",
						icon: "none"
					})

					this.listForm.pageIndex = 1;
					this.getList()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
					this.listForm.pageIndex = 1;
					this.getList()
				})
			},
			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"
					})
				}

			},
			issueMethod(id) {

				var userInfo = this.carhelp.getPersonInfo()

				if (!userInfo) {
					uni.showModal({
						title: "提示",
						content: "未登录,登录后参与分享活动",
						confirmText: "前往登录",
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/index'
								})
							}
						}
					})
				} else {
					if (id) {
						this.gotoUrl('pages/mine/issue?id=' + id)
					} else {
						this.gotoUrl('pages/mine/issue?nic=1')
					}

				}


			},
			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
				})
			},
			ckItem(item) {

			},
			dataList() {


				API.dataList("活动类型").then((res) => {

					this.tabList = [{
							id: '',
							name: '全部'
						},
						...res.data
					]

				}).catch(error => {

				})
			},
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.pageList(this.listForm).then((res) => {
					this.carhelp.set("addShare", 0);
					uni.hideLoading();
					var list = res.data.data;


					if (this.listForm.pageIndex == 1) {
						this.list = list;
					} else {
						this.list = [
							...this.list,
							...list
						];
					}
					this.recordsTotal = res.data.recordsTotal;

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.listForm.pageIndex += 1;
				this.getList();
			},
			change(index) {
				this.current = index;

				this.listForm.pageIndex = 1;
				this.listForm.type = this.tabList[index].id
				this.getList()
			}
		}
	}
</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;
				.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;

		.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>