zhihuixiaoyuan2-ui/pages/trends/index.vue

<template>
  <view class="trend" :style="{height: `${windowHeight}px`}" @click="getComflag">
	<view class="trenda">
		<uni-nav-bar title="动态" :background-color="backgroundColor" :border="navborder" :leftWidth="leftwith+'rpx'" statusBar='true' fixed="true" >
			<!-- checkPermi(['xiaoYuan:notice:mylist']) -->
			<block slot="left">
				<!-- <view class="trend_top" @click="getMyTrend">
					<image :src="more"></image>
				</view> -->
				<view class="trend_top" @click="getMyTrend">我的动态</view>
			</block>
		</uni-nav-bar>
		<image :src="addimg" class="addimg" @click="getAdd" ></image>
		
		
		<block v-if="list.length">
			<view class="dtlist" v-for="(ite,idx) in list" :key="idx" @click="getDetail(ite.noticeId)">
				<view class="flext">
					<image v-if='ite.avatar' :src="baseUrl+ite.avatar" class="listl"></image>
					<image v-else :src="avatarimg" class="listl"></image>
					<view class="listr">
						<view class="top">
							<view class="f17 co16 fw5 flex0" v-if="ite.senderName">{{ite.senderName}}</view>
							<view class="f14 co6 flex1 ml6 txr" v-if="ite.schoolName">{{ite.schoolName}}</view>
						</view>
						<view>
							<view class="f15 co16 mb8" v-if="ite.noticeContent">{{ite.noticeContent}}</view>
							<view class="imgs" v-if="ite.photo">
								<image :src="baseUrl+pit" :class="ite.photo.length==0?'img1':''"  v-for="(pit,pid) in ite.photo" :key="pid" @click.stop="getPreview(ite.photo,pid)"></image>
							</view>
						</view>
						<view class="flexcj">
							<view class="f13 coa">{{ite.createTime}}</view>
							
							<view class="trsta flexc">
								<!-- <view class="trstal">
									<image :src="tricong"></image>
									<button open-type="share" class="sharebox" :data-id="ite.noticeId" :data-tit="ite.noticeContent" :data-img="ite.photo?ite.photo[0]:''"></button>
								</view> -->
								<view class="trstal" @click.stop="getPin(ite.noticeId,idx)">
									<image :src="triconb"></image>
									<!-- <view class="cir">2</view> -->
								</view>
								<view class="trstal" @click.stop="getZan(ite.noticeId,ite.prisedId,idx,2)">
									<image :src="tricone" v-if="ite.prisedId"></image>
									<image :src="triconc" v-else></image>
								</view>
								<view class="trstal" @click.stop="getZan(ite.noticeId,ite.collectId,idx,3)">
									<image :src="triconf" v-if="ite.collectId"></image>
									<image :src="tricond" v-else></image>
									
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 评论 -->
				<view class="trcom mt15" >
					<view class="trcomz flext" v-if="ite.prisedlist.length">
						<view class="trcoml">
							<image :src="triconc"></image>
						</view>
						<view class="trcomr lh20">
							<text v-for="(nite,cidx) in ite.prisedlist" :key="cidx">{{nite.name}}
							<block v-if="cidx!=ite.prisedlist.length-1">,</block>
							</text>
						</view>
					</view>
					<view v-if="ite.prisedlist.length&&ite.commentlist.length" class="trcomline"></view>
					<view class="trcomp flext" v-if="ite.commentlist.length">
						<view class="trcoml">
							<image :src="triconb"></image>
						</view>
						<view class="flex1">
							<view class="trcompr flext" v-for="(cite,cidx) in ite.commentlist" :key="cidx" @click.stop="getComFn(ite.noticeId,cite,idx)">
								<image v-if='cite.avatar' :src="baseUrl+cite.avatar" class="listl"></image>
								<image v-else :src="avatarimg" class="listl"></image>
								<view class="flex1">
									<view class="flexcj mb5">
										<view  class="f14 fw c37 lh20">{{cite.name}}</view>
										<!-- <view class="f13 co6">6月23日 14:15</view> -->
									</view>
									<view class="f14 co16 fw5 lh20">
										<block v-if="cite.huserid">回复<text class="c37">{{cite.husername}}：</text></block>
									{{cite.text}}</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
			</view>
			<view class="shax" v-if="wtdt">{{wtdt}}</view>
		</block>
		
		<block v-else>
			<no-data ></no-data>
		</block>
		<!-- 弹框 -->
		<view class="combox" v-if="comflag" @click.stop="btns" :style="{bottom: `${bottom}px`}">
			<view class="comboxl">
				<textarea :placeholder="placeholder" :hold-keyboard="comflag" :adjust-position="adjustpos" :auto-focus="comflag" v-model="comment" :auto-height="autoHeight" :cursor-spacing='curspac' fixed="true" :show-confirm-bar="confirmBar" ></textarea>
			</view>
			
			<view class="comboxr" @click="getSubmit">发送</view>
		</view>
	</view>
	<footers v-if="isfootflag" :footlist="footlist" :footerindex="footerindex" :color_checked="color_checked" :color_nochecked="color_nochecked" :isHomeIndex="true"></footers>
  </view>
</template>

<script>
	import config from '@/config'
	import {uploadmore,selectDictValue} from '@/utils/common.js'
	import footers from '@/components/footer/footer.vue'
	const baseUrl = config.baseUrl
  import {getNoticeList,getNoticeUpt,getNoticeDetail} from "@/api/mine/trends.js"
  import noData from "@/components/nodata/nodata.vue"
  import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  export default {
	  components:{
		  noData,footers
	  },
	data(){
		return{
			footlist:[
				{module:'home',title:'首页',icon_checked:require('@/static/images/tabbar/home_.png'),icon_nochecked:require('@/static/images/tabbar/home.png'),},
				{module:'work',title:'课表',icon_checked:require('@/static/images/tabbar/work_.png'),icon_nochecked:require('@/static/images/tabbar/work.png'),limit:'course:table:list'},
				{module:'trends',title:'动态',icon_checked:require('@/static/images/tabbar/trends_.png'),icon_nochecked:require('@/static/images/tabbar/trends.png'),limit:'xiaoYuan:notice:list'},
				{module:'mine',title:'我的',icon_checked:require('@/static/images/tabbar/mine_.png'),icon_nochecked:require('@/static/images/tabbar/mine.png')},
				],
			footerindex:'trends',
			isfootflag:true,
			color_checked :'161616',
			color_nochecked :'666666',
			more:require("@/static/images/more.png"),
			addimg:require("@/static/images/tadd.png"),
			delimg:require("@/static/images/tdel.png"),
			windowHeight: 0,
			wtopimg:require("@/static/images/wtop.png"),
			tapline:require("@/static/images/hline.png"), 
			tricona:require("@/static/images/tricoa.png"),
			triconb:require("@/static/images/tricob.png"),
			triconc:require("@/static/images/tricoc.png"),
			tricond:require("@/static/images/tricod.png"),
			tricone:require("@/static/images/tricoe.png"),
			triconf:require("@/static/images/tricof.png"),
			tricong:require("@/static/images/tricog.png"),
			backgroundColor:'#ffffff',
			navborder:false,
			leftwith:'200',
			pageSize: 10,
			pageNum: 1,
			reachflag:true,
			wtdt:'',
			list:[],
			file:[],
			baseUrl:'',
			zhtype:6,
			placeholder:'评论：',
			bottom:0,
			noticeId:'',//新闻id
			comment:'',//评论
			comflag:false,
			autoHeight:true,
			confirmBar:false,
			adrfixed:true,
			adjustpos:false,
			curspac:'0',//光标和键盘距离
			userId:this.$store.state.user.userId,
			name:this.$store.state.user.name,
			selectidx:0,//选择索引,
			huiflag:false,
			huserid:'',
			husername:'',
			avatarimg:require("@/static/images/profile.png"),
		}
	},
	computed: {
	  avatar() {
	    return this.$store.state.user.avatar
	  },
	},
	onUnload(){
		uni.$off('refreshdatalist')
	},
	onShow(){
		// #ifndef H5
		uni.onKeyboardHeightChange(res=> { //监听键盘高度变化
		    const res_keyboard = uni.getSystemInfoSync();
		    let key_height = res.height - (res_keyboard.screenHeight - res_keyboard.windowHeight)
		     this.bottom = `${ key_height>0 ? key_height : 0}`;
			 if(this.bottom==0){
				 this.comflag=false;
			 }
		})
		// #endif
		return
		var newArr=this.$store.state.user.refreshflag
		if(newArr&&newArr.length){
			if(newArr[2]){
				this.reachflag=true;
				this.pageNum=1;
				this.list=[];
				this.getDataFn();
				newArr[2]=false
				this.$store.dispatch('checkRefresh', newArr).then(() => {
					
				}).catch(() => {
				 
				})
			}
		}
	},
	onHide() {
	    // #ifndef H5
	    uni.offKeyboardHeightChange();  // 取消监听键盘高度变化事件，避免内存消耗
	    // #endif
	},
	onPullDownRefresh:function(){
	    this.reachflag=true;
	    this.pageNum=1;
	    this.list=[];
	    this.getDataFn();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onPageScroll(e) {
		this.comflag=false;
	},
	onLoad: function() {
		uni.$on('refreshdatalist',(e) => {
			this.reachflag=true;
			this.pageNum=1;
			this.list=[];
			this.getDataFn();
		})
		this.baseUrl=baseUrl;
		this.getDataFn();
		
	},
	mounted() {
		var systemInfo=uni.getSystemInfoSync();
		this.windowHeight=Number(systemInfo.windowHeight);
		
	},
	onReachBottom() {
		if (this.reachflag) {
			this.pageNum++
			this.getDataFn()
		}
	},
	onShareAppMessage(res) {
		this.comflag=false;
		if (res.from === 'button') {// 来自页面内分享按钮
		    var data=res.target.dataset;
			var newobj={
				title: data.tit||"智能校管家",
				path: '/mine/pages/trends/trenddetail?type=share&id='+data.id
			}
			if(data.img){
				newobj.imageUrl=this.baseUrl+data.img
			}
			return newobj
		}else{
			return {
			  title: '智能校管家',
			  path: '/pages/trends/index'
			}
		}
	},
	onShareTimeline(res) {
		console.log(res,888)
		// this.comflag=false;
		// if (res.from === 'button') {// 来自页面内分享按钮
		//     var data=res.target.dataset;
		// 	var newobj={
		// 		title: data.tit||"智能校管家",
		// 		path: '/mine/pages/trends/trenddetail?type=share&id='+data.id
		// 	}
		// 	if(data.img){
		// 		newobj.imageUrl=this.baseUrl+data.img
		// 	}
		// 	return newobj
		// }else{
		// 	return {
		// 	  title: '智能校管家',
		// 	  path: '/pages/trends/index'
		// 	}
		// }
	},
	methods:{
		checkPermi, checkRole,
		getShare(){
			
		},
		refreshdataFn(){
			this.reachflag=true;
			this.pageNum=1;
			this.list=[];
			this.getDataFn();
		},
		getDetail(id){
			this.comflag=false;
			this.$tab.navigateTo('/mine/pages/trends/trenddetail?id='+id)
		},
		getPreview(iurl,idx) {
			this.comflag=false;
			var newArr=[];
			iurl.forEach(ite=>{
				var ds=this.baseUrl+ite
				newArr.push(ds)
			})
			uni.previewImage({
				urls: newArr,
				current:idx,
				success: function(data) {
					
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			});
		},
		kaType(val,datas){
			var actions = [];
			Object.keys(datas).some((key) => {
				if (datas[key].userId == ('' + val)) {
					actions.push(datas[key].id);
					return true;
				}
			})
			return actions.join('');
		},
		getMyTrend(){
			 this.$tab.navigateTo('/mine/pages/trends/mytrends')
			 // this.$tab.navigateTo('/pages/trends/trendb')
		},
		 getAdd(){
			 this.$tab.navigateTo("/mine/pages/trends/addtrend?from=index") 
		 },
		 //评论
		 getComflag(){
			this.comflag=false 
		 },
		 btns(){
			 
		 },
		 getPin(notid,idx){
			 if((notid==this.noticeId)&&this.comflag){
				 this.comflag=false;
				 return
			 }
			 this.placeholder='评论：';
			 this.comflag=true;
			 this.huiflag=false;
			 this.selectidx=idx;
			 this.noticeId=notid;
		 },
		 //删除评论
		 getComFn(notid,ite,idx){
			 var that=this;
			this.comflag=false;
			 if(ite.userId==this.userId){
				 this.$modal.confirm('确定删除该条评论').then(() => {
				   that.getZan(notid,ite.id,idx,1)
				 })
			 }else{
				 this.placeholder='回复'+ite.name;
				 this.comflag=true;
				 this.selectidx=idx;
				 this.noticeId=notid;
				 this.huiflag=true;
				 this.huserid=ite.userId;
				 this.husername=ite.name;
			 }
		 },
		 getSubmit(){
			 var obj={
			 	text:this.comment,//1 点赞 0 取消
			 	userId:this.userId,
			 	name:this.name,
			 }
			 if(this.avatar){
				obj.avatar=this.avatar
			 }
			
			 // 判断是否是回复
			 if(this.huiflag){
				obj.huserid=this.huserid;
				obj.husername=this.husername;
			 }
			 var params={
			 	noticeId:this.noticeId,
			 	updateType:1,
			 	comment:JSON.stringify(obj)
			 }
			 getNoticeUpt(params).then(res=>{
			 	if(res.code==200){
					this.comment='';
					this.comflag=false;
					this.huiflag=false;
			 		this.getNoticeDetail(this.noticeId)
			 	}else{
			 		this.$toast(res.msg) 
			 	}			 
			 })
		 },
		 // 点赞
		 getZan(notid,id,idx,type){
			 this.comflag=false;
			 this.selectidx=idx;
			 var obj={
			 	type:1  ,//1 点赞 0 取消
			 	userId:this.userId,
				name:this.name,
			 }
			 var params={
			 	noticeId:notid,
			 	updateType:type,
			 }
			 if(type==2){
				params.prised=JSON.stringify(obj);
			 }else if(type==3){
				params.collect=JSON.stringify(obj);
			 }else if(type==1){
				params.comment=JSON.stringify(obj);
			 }
			 if(id){//删除
				params.deleteId=id;//取消才需要
			 }
			 getNoticeUpt(params).then(res=>{
				 if(res.code==200){
					 if(type==1&&id){
						 this.$toast("删除评论成功")
					 }else if(type==2){
						if(id){
							this.$toast("取消点赞")
						}else{
							this.$toast("点赞成功")
						 }
					 }else if(type==3){
						if(id){
							this.$toast("取消收藏") 
						}else{
							this.$toast("收藏成功")
						}
					 }
					 this.getNoticeDetail(notid)
				 }else{
					this.$toast(res.msg) 
				 }
			 })
		 },
		//详情
		getNoticeDetail(id){
			var idx=this.selectidx;
			getNoticeDetail(id).then(res=>{
				if(res.code==200){
					var datainfo=res.data
					if(res.data.image){
						datainfo.photo=res.data.image.split(',')
					}else{
						datainfo.photo=[];
					}
					// 点赞
					if(datainfo.prised){
						var prisedlist=JSON.parse(datainfo.prised);
						datainfo.prisedId=this.kaType(this.userId,prisedlist);
						datainfo.prisedlist=JSON.parse(datainfo.prised);
					}else{
						datainfo.prisedlist=[];
					}
					//收藏
					if(datainfo.collect){
						var collectlist=JSON.parse(datainfo.collect);
						datainfo.collectId=this.kaType(this.userId,collectlist);
					}
					//评论
					if(datainfo.comment){
						datainfo.commentlist=JSON.parse(datainfo.comment);
					}else{
						datainfo.commentlist=[];
					}
					
					var newArr=JSON.parse(JSON.stringify(this.list))
					newArr[idx]=JSON.parse(JSON.stringify(datainfo));
					this.list=newArr
				}else{
					// this.$toast(res.msg)
				}
			})
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
				noticeType:1
			}
			var role=this.$store.state.user.choseroles
			if(role!="school"){
				params['params[role]']=role
			}
			
			getNoticeList(params).then(res=>{
				if(res.code==200){
					if (res.rows.length < this.pageSize) {
						this.reachflag = false
						this.wtdt = '到底了~';
					} else {
						var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
						if (num < res.total) {
							this.reachflag = true
							this.wtdt = '上拉加载更多'
						} else {
							this.reachflag = false
							this.wtdt = '到底了~';
						}
					}
					var newArr=res.rows||[];
					if(newArr.length){
						newArr.forEach(ite=>{
							if(ite.image){
								ite.photo=ite.image.split(',')
							}else{
								ite.photo=[]
							}
							// 点赞处理
							if(ite.prised){
								var prisedlist=JSON.parse(ite.prised);
								ite.prisedId=this.kaType(this.userId,prisedlist);
								ite.prisedlist=JSON.parse(ite.prised);
							}else{
								ite.prisedlist=[]
							}
							//收藏
							if(ite.collect){
								var collectlist=JSON.parse(ite.collect);
								ite.collectId=this.kaType(this.userId,collectlist);
							}
							//评论
							if(ite.comment){
								ite.commentlist=JSON.parse(ite.comment)
							}else{
								ite.commentlist=[];
							}
							
						})
					}
					if (this.pageNum == 1) {
						this.list = newArr;
					} else {
						this.list = this.list.concat(newArr)
					}
				}else{
					this.$toast(res.msg)
				}
			})
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.trend{
	padding: 0rpx 24rpx 24rpx;box-sizing: border-box;
	// padding: 0rpx 24rpx 24rpx;display: flex;flex-direction: column;box-sizing: border-box;overflow: auto;
	.trenda{
		padding-bottom: 24rpx
	}
	.trend_top{display: flex;align-items: center;font-size: 30rpx;font-weight: 500;color: #4775EA;padding: 0 10rpx;
		image{width: 34rpx;height: 27rpx;}
	}
	.addimg{width: 136rpx;height: 136rpx;position: fixed;right: 0;bottom: 120rpx;border-radius: 50%;z-index: 4;}
	
	// 评论弹框
	.combox{position: fixed;left: 0;right: 0;bottom: 0;background: #E9E9E9;padding: 17rpx 24rpx;box-sizing: border-box;z-index: 5;
		display: flex;align-items: flex-end;overflow: hidden;
		.comboxl{flex: 1;min-height: 70rpx;background: #FFFFFF;border-radius: 10rpx;
			padding:15rpx 32rpx;box-sizing: border-box;line-height: 40rpx;
			textarea{width: 100%;font-size: 30rpx;color: #161616;}
		}
		.comboxr{width: 114rpx;height: 70rpx;background: #1f57e6;border-radius:10rpx;flex: 0 0 auto;font-size: 30rpx;font-weight: bold;
color: #FFFFFF;text-align: center;line-height: 70rpx;margin-left: 22rpx;}
	}
}
// 动态
.dtlist{width: 100%;margin-top: 24rpx;background: #FFFFFF;border-radius: 8rpx;padding: 28rpx 30rpx;box-sizing: border-box;
		.listl{width: 60rpx;height: 60rpx;margin-right: 20rpx;flex: 0 0 auto;border-radius:50%;}
		.listr{flex: 1;
			.top{min-height: 60rpx;display: flex;align-items: center;margin-bottom: 10rpx;
			}
			.imgs{display: flex;flex-wrap: wrap;padding-bottom: 16rpx;
				image{width: 180rpx;height: 180rpx;margin-bottom: 24rpx;margin-right: 10rpx;
				&:nth-of-type(3n){margin-right: 0;}
				&.img1{width: 100%;height: 290rpx;}
				}
				
			}
			.trsta{
				.trstal{width:48rpx ;height: 32rpx;display: flex;align-items: center;justify-content: center;position: relative;margin-left: 20rpx;
				.cir{min-width: 20rpx;height: 24rpx;line-height: 24rpx;font-size: 20rpx;color: #FFFFFF;
background: #DF1616;
border: 2rpx solid #FFFFFF;
border-radius: 6rpx;position: absolute;right: -50%;top: -50%;text-align: center;padding: 0 4rpx;box-sizing: border-box;}
				}
				image{width: 32rpx;height: 32rpx;}
				// 分享按钮
				.sharebox{position: absolute;left: 0;right: 0;top: 0;bottom: 0;opacity: 0;}
			}
		}
		.delbox{display: flex;align-items: center;font-size: 26rpx;color: #718DD4;
			image{width: 24rpx;height: 25rpx ;margin-right: 12rpx;}
		}
		
		.trcom{width: 100%;background: #ECECEC;
			.trcomz{padding: 24rpx 8rpx 8rpx 24rpx;
				.trcomr{display: flex;align-items: center;flex-wrap: wrap;
					image{width: 40rpx;height: 40rpx;margin: 0 16rpx 16rpx 0;border-radius: 50%;}
					}
			}
			.trcomline{width: 100%;border-bottom: 2rpx solid #DADADA;}
			.trcomp{padding: 24rpx 0 0 24rpx;
				.trcompr{padding: 0 24rpx 12rpx 0;border-bottom: 2rpx solid #DADADA;margin-bottom: 12rpx;
					&:last-of-type{border-bottom: none;}
					.listl{width: 40rpx;height: 40rpx;margin-right:12rpx;border-radius: 50%;flex: 0 0 auto;}
					
				}
			}
			.trcoml{flex: 0 0 auto;margin-right: 12rpx;width: 40rpx;height: 40rpx;display: flex;align-items: center;
				image{width: 26rpx;height: 26rpx;}
			}
		}
	}
</style>