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">
						<img   v-if="pic.isPic" :key="i2"
						@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="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>
				
			
			</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>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/share.js'
 	import {
 		isWeiXin
 	} from '@/apis/utils'
	export default {
		data() {
			return {
				listForm:{
					pageIndex:1,
					pageSize:20,
					
				},
				playurl:"",
				list:[],
				recordsTotal:0,
				tabList: [],
				current: 0
			}
		},
		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: {
			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++;
						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>
	.red{
		color: red !important;
	}
	.like{
		margin-top: 16rpx;
		line-height: 24px;
		display: flex;
		.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;
				}
			}
			.video{
				margin-top: 16rpx;
				uni-video{
					width: 100%;
					height: 380rpx;
					border-radius: 8px;
				}
			}
			.tagMain{
				display: flex;
				justify-content: space-between;
				.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>