zh_order_food_xcx/pages-school/school-circle.vue

<template>
	<view class="school-circle iPhone-bottom flex-common-css box-border-box ">
		<image class="circle-add" src="@/static/img/school/add.png" mode="" @click="add()"></image>

		<view class="bg-box"></view>
		
		<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
			<template>
				<view slot="custom" class="align-items-center">
					<uni-icons type="left" size="20" @click="toBack()"></uni-icons>
					<view class="w-390 text-overflow-ellipsis-one fs-36 fw-400">{{schoolData.school_name}}</view>
				</view>
			</template>
		</Nav>
		
		<view class="ts-box mt-24 align-items-center box-border-box plr-12 mb-20">
			<image src="@/static/img/school/ts.png" mode=""></image>
			<view class="fs-26 fw-400 fc-FB3D03">警惕骗钱骗色，保护自身安全，不轻信陌生人</view>
		</view>
		
		<view class="nav-box display-flex box-border-box mb-20">
			<view class="nav-item view-nowrap" @click="selectTopicId(item.id)"
			:class="fromData.topic_id == item.id?'h130':''" v-for="(item,i) in classList" :key="i">
				<image v-if="item.id == 0" class="nav-icon" src="@/static/img/school/icon.png" mode=""></image>
				<image v-else class="nav-icon" :src="item.image" mode=""></image>
				<view class="fs-24 plr-24 " :class="fromData.topic_id==item.id?'fw-600 fc-41ABF5':''">{{item.name}}</view>
				<image v-if="fromData.topic_id == item.id" class="nav-bg" src="@/static/img/school/bg.png" mode=""></image>
			</view>
		</view>
		
		<view class="flex-justify-space type-box mb-24">
			<view class="display-flex">
				<view @click="selectOrderBuy(1)" class="box-1" :class="fromData.orderBy == 1?'box-s':''">最新</view>
				<view @click="selectOrderBuy(2)" class="box-1" :class="fromData.orderBy == 2?'box-s':''">最热</view>
				<view @click="selectOrderBuy(3)" class="box-1" :class="fromData.orderBy == 3?'box-s':''">评论最多</view>
			</view>
			<view class="box-2 fs-24 fc-41ABF5" @click="toSelectSchool()">逛其他学校</view>
		</view>
		
		
		<view v-if="list.length === 0" class="scroll-view-css">
			<EnBlank :customSrc='true'>
				<template v-slot:blankImg>
					<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
				</template>
			</EnBlank>
		</view>
		
		<scroll-view v-else scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="card-box box-border-box p-24 bgc-f flex-justify-space" v-for="(item,i) in list" :key="i" @click.stop="toDet(item)">
				<image class="card-head" :src="item.head_img" mode="scaleToFill"></image>
				<view class="flex-1">
					<view class="card-1 flex-justify-space mb-16">
						<view class="">
							<view class="w-400 fs-28 fw-600 mb-8">{{item.nickname}}</view>
							<view class="fs-24 fc-9">{{item.created_date}}</view>
						</view>
						<view class="">
							<image @click.stop="openRepot(item)" class="dian-img" src="@/static/img/school/dian.png" mode=""></image>
							<view class="align-items-center">
								<image class="hot-img" src="@/static/img/school/hot.png" mode=""></image>
								<view class="fs-26 fw-400 fc-9">{{item.heat}}</view>
							</view>
						</view>
					</view>
					<view class="card-2 fs-30 fw-400 mb-16">
						{{item.content}}
					</view>
					<view class="card-3 flex-wrap-wrap mb-32">
						<image class="card-3-img" :src="item" v-for="(item,i) in item.image" mode="scaleToFill"></image>
					</view>
					<view class="card-4 flex-wrap-wrap mb-40">
						<view class="">{{item.school_name}}</view>
						<view class="">{{item.topic_name}}</view>
					</view>
					
					<view class="card-5 flex-justify-space">
						<view class="align-items-center"></view>
						<view class="align-items-center" @click.stop="handUp(1,item)">
							<uni-icons type="hand-up" size="22" :color="item.is_like==1?'#FD5C02':'#999'"></uni-icons>
							<view class="fs-24 " :class="item.is_like==1?'fc-FD5C02':'fc-9'">{{item.like}}</view>
						</view>
						<view class="align-items-center" @click.stop="openMsg(item,0)">
							<image src="@/static/img/school/info.png" mode=""></image>
							<view class="fs-24 fc-9">{{item.remark}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		
		
		
		<uni-popup ref="popup" type="bottom">
			<view class="pop-box pop-h-30 box-border-box p-24">
				<view class="head-pop flex-justify-space align-items-center mb-24">
					<uni-icons @click.stop="closePop(1)" type="closeempty" size="24"></uni-icons>
					<view class="fs-36 fc-0 fw-600">请输入举报内容</view>
					<view class="fs-28 fw-600 fc-41ABF5">确定</view>
				</view>
				<view class="scroll-view-css">
					<textarea style="height: 100%;" v-model="reportData.content" class=" fs-24" :maxlength='50' placeholder='请输入举报内容'></textarea>
				</view>
				<view @click.stop="closePop(2)" class="b-bottom text-align-center fs-32 fw-600 fc-f">确认举报</view>
			</view>
		</uni-popup>
		
		
		<uni-popup ref="popmsg" type="bottom">
			<view class="pop-box pop-msg box-border-box p-24">
				<!-- 输入框 -->
				<view class="pop-input" v-if="isShowIpnut">
					
					<view class="head-pop flex-justify-space align-items-center mb-24 box-border-box p-24">
						<view class="fs-28 fw-600 fc-41ABF5" ></view>
						<view class="fs-36 fc-0 fw-600">评论</view>
						<uni-icons @click.stop="closeInput()" type="closeempty" size="24"></uni-icons>
					</view>
					<view class="scroll-view-css">
						<view class="bgc-f box-border-box p-32">
							<view class="fs-34 fw-600 mb-20">评论</view>
							<textarea v-model="msgData.content" maxlength="100" class=" fs-24" placeholder='友善评论，文明发言'></textarea>
						</view>
					</view>
					<view class="box-border-box p-24">
						<view class="save-box" @click.stop="save()">评论</view>
					</view>
					
				</view>
				<!-- ----- -->
				<view class="head-pop flex-justify-space align-items-center mb-24">
					<view class=""></view>
					<view class="fs-36 fc-0 fw-600">评论内容</view>
					<uni-icons @click.stop="closeMsg()" type="closeempty" size="24"></uni-icons>
				</view>
				
				<view v-if="remarkData.list.length === 0" class="scroll-view-css">
					<EnBlank :customSrc='true'>
						<template v-slot:blankImg>
							<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
						</template>
					</EnBlank>
				</view>
				
				<view v-else class="scroll-view-css box-border-box plr-24">
					<view class="list-box flex-justify-space" v-for="(item,i) in remarkData.list" :key="i"> 
						<image class="list-box-img" :src="item.head_img" mode="scaleToFill"></image>
						<view class="flex-1 p-b-20">
							<view class=" flex-justify-space">
								<view class=" b-b-F9F9F9 mr-20">
									<view class="fs-28 fw-400 fc-9 mb-8 align-items-center">
										{{item.nickname}} 
										<span v-if="item.is_author == 1" class='only-box text-align-center fs-24 fc-41ABF5 ml-10'>作者</span>
										<view class="ml-10" v-if="item.is_self == 1" @click="delInfo(item)">
											<uni-icons  type="trash" size="18"></uni-icons>
										</view>
										
									</view>
									<view class="fs-30 fw-400 mb-8" @click.stop="openInput(1,item)">
										{{item.content}}
									</view>
									<view class="fs-24 fw-400 fc-9 mb-8">{{item.created_date}}</view>	
								</view>
								<view class="display-flex" @click.stop="handUp(2,item)">
									<uni-icons type="hand-up" size="20" :color="item.is_like==1?'#FD5C02':'#999'"></uni-icons>
									<view class="fs-24 fw-400 mt-5" :class="item.is_like==1?'fc-FD5C02':'fc-9'">{{item.like}}</view>
								</view>
							</view>
							<view v-if="item.isOpen" class="fs-24 fc-6 text-align-center mb-12" @click="openReply(1,item,i)">展开更多评论</view>
							<!-- 回复 -->
							<view class="" v-if="item.replyList.length > 0">
								<view class="list-box flex-justify-space" v-for="(info,index) in item.replyList" :key="index">
									<image class="list-box-img" :src="info.head_img" mode="scaleToFill"></image>
									<view class="flex-1">
										<view class=" flex-justify-space">
											<view class="p-b-20 b-b-F9F9F9 mr-20">
												<view class="fs-28 fw-400 fc-9 mb-8 align-items-center">
													{{info.nickname}} 
													<span v-if="info.is_author == 1" class='only-box text-align-center fs-24 fc-41ABF5 ml-10'>作者</span>
													<view class="ml-10" v-if="info.is_self == 1" @click="delInfo(info)">
														<uni-icons  type="trash" size="18"></uni-icons>
													</view>
												</view>
												<view class="fs-30 fw-400 mb-8"  @click.stop="openInput(2,info)">
													{{info.content}}
												</view>
												<view class="fs-24 fw-400 fc-9 mb-8">2021-04-17 15:53</view>	
											</view>
											<view class="display-flex" @click.stop="handUp(2,info)">
												<uni-icons type="hand-up" size="20" :color="info.is_like==1?'#FD5C02':'#999'"></uni-icons>
												<view class="fs-24 fw-400 mt-5" :class="info.is_like==1?'fc-FD5C02':'fc-9'">{{info.like}}</view>
											</view>
										</view>
									</view>
								</view>
								<view v-if="item.replyList.length < item.count" class="fs-24 fc-6 text-align-center mb-12" @click="openReply(2,item,index)">展开更多评论</view>
							</view>
							
						</view>
					</view>
					<view v-if="remarkData.list.length < remarkData.total" class="text-align-center fs-26" @click="scrolltolowerList">加载更多评论</view>
				</view>
				
				<view class="input-box text-align-left fs-28 fc-9 box-border-box plr-24" @click.stop="openInput(0,'')">友善评论，文明发言</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {getAlumniList,setAlumniLike,getRemarkList,alumniReport,setCreateRemark,setRemarkLike,delRemark} from '@/api/alumni.js';
	import {getTopic} from '@/api/category.js';
	import tools from '@/service/tools';
	
	export default {
		components:{EnBlank},
		data(){
			return{
				isShowIpnut:false,
				
				classList:[],
				
				total:0,
				list:[],
				fromData:{
					topic_id:0,
					orderBy:1,//1最新 2最热 3最多评论
					school_id:'',
					page:1,
				},
				isAJAX:false,
				
				schoolData:{
					school_name:'',
				},
				// 举报
				reportData:{
					news_id:'',
					content:'',
				},
				// 一级评论
				remarkData:{
					remark_id:'',
					news_id:'',
					total:0,
					list:[],
					page:1,
				},
				// 发起评论
				msgData:{
					news_id:'',
					remark_id:'',
					content:'',
					reply_id:'',
				},
				
				// 回复评论
				replyData:{
					page:1,
				},
				
			}
		},
		onShow(){
			let circleSchoolId = uni.getStorageSync('circleSchoolId');
			let schoolName = uni.getStorageSync('school_name');
			let circleSchoolName = uni.getStorageSync('circleSchoolName');
			this.schoolData.school_name = circleSchoolId?circleSchoolName:schoolName;
			
			this.classList = [];
			this.getTopic();
			
			this.list = [];
			this.fromData.page = 1;
			this.getList();
		},
		methods:{
			toBack(){
				tools.leftClick()
			},
			toSelectSchool(){
				uni.navigateTo({
					url:'/pages-address/select-school?type=2'
				})
			},
			getTopic(){
				getTopic().then((res)=>{
					if(res.code === 1){
						this.classList = res.data;
						this.classList.unshift({name:'全部贴子',id:0});
					}
				})
			},
			
			selectOrderBuy(type){
				if(this.fromData.orderBy != type){
					this.fromData.orderBy = type;
					this.list = [];
					this.fromData.page = 1;
					this.getList();
				}
			},
			selectTopicId(id){
				if(this.fromData.topic_id != id){
					this.fromData.topic_id = id;
					this.list = [];
					this.fromData.page = 1;
					this.getList();
				}
			},
			
			getList(){
				this.fromData.school_id = uni.getStorageSync('school_id');
				getAlumniList(this.fromData).then((res)=>{
					if(res.code === 1){
						this.list = [...this.list,...res.data.items];
						this.total = res.data.total;
					}
				})
			},
			
			scrolltolower(){
				if(this.list.length < this.total){
					this.fromData.page += 1;
					this.getList();
				}
			},
			
			// 点赞
			handUp(type,item){
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				let is_like = item.is_like == 1?0:1;
				if(type == 1){
					// 点赞贴子
					setAlumniLike({news_id:item.news_id,is_like:is_like}).then((res)=>{
						this.handUpFun(res,item,is_like)
					})
				}else{
					// 点赞评论
					setRemarkLike({news_id:item.news_id,is_like:is_like,remark_id:item.id}).then((res)=>{
						this.handUpFun(res,item,is_like)
					})
				}
			},
			// 点赞公共回复
			handUpFun(res,item,is_like){
				if(res.code === 1){
					item.is_like = is_like;
					if(is_like == 0){
						item.like -= 1
					}else{
						item.like += 1
					}
					this.isAJAX = false;
					tools.success(res.msg);
				}else{
					this.isAJAX = false;
					tools.error(res.msg);
				}
			},
			// 获取回复列表
			openReply(type,item){
				// type 1获取其他 2加载更多
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				if(type == 1){
					item.replyList = [];
					this.replyData.page = 1;
				}else{
					this.replyData.page += 1;
				}

				getRemarkList({news_id:item.news_id,remark_id:item.id,page:this.replyData.page}).then((res)=>{
					if(res.code === 1){
						this.isAJAX = false;
						item.replyList = [...item.replyList,...res.data.items];
						item.isOpen = false;
					}else{
						this.isAJAX = false;
						tools.error(res.msg)
					}
				})
			},
			// 打开评论
			openMsg(item){
				this.remarkData.news_id = item.news_id;
				this.msgData.news_id = item.news_id;
				this.remarkData.remark_id = 0;
				this.getMsg();
			},
			// 获取评论
			getMsg(){
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				getRemarkList({news_id:this.remarkData.news_id,remark_id:this.remarkData.remark_id,page:this.remarkData.page}).then((res)=>{
					if(res.code === 1){
						this.isAJAX = false;
						this.remarkData.list = [...this.remarkData.list,...res.data.items];
						this.remarkData.total = res.data.total;
						this.remarkData.list.forEach((v)=>{
							v.replyList = [];
							if(v.count > 0){
								v.isOpen = true;
							}
						})
						this.$refs.popmsg.open();
					}else{
						this.isAJAX = false;
						tools.error(res.msg)
					}
				})
			},
			// 加载更多评论
			scrolltolowerList(){
				if(this.remarkData.list.length < this.remarkData.total){
					this.remarkData.page += 1;
					this.getMsg();
				}
			},
			// 关闭评论
			closeMsg(){
				this.$refs.popmsg.close();
				this.remarkData.list = [];
				this.remarkData.page = 1;
				this.msgData.news_id = '';
				this.remarkData.remark_id = '';
			},
			openInput(type,item){
				if(type == 0){
					this.msgData.remark_id = 0;
				}else if(type == 1){
					this.msgData.remark_id = item.id;
					this.msgData.reply_id = item.m_id;
				}else{
					this.msgData.remark_id = item.remark_id;
					this.msgData.reply_id = item.m_id;
				}
				this.isShowIpnut = true;
			},
			closeInput(){
				this.isShowIpnut = false;
				this.msgData.remark_id = '';
				this.msgData.content = '';
				this.msgData.reply_id = '';
			},
			save(){
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				setCreateRemark(this.msgData).then((res)=>{
					if(res.code == 1){
						tools.success('评论成功')
						setTimeout(()=>{
							this.isAJAX = false;
							this.closeInput()
							if(this.msgData.remark_id == 0){
								this.remarkData.list = [];
								this.remarkData.page = 1;
								this.getMsg();
								this.list = [];
								this.fromData.page = 1;
								this.getList();
							}else{
								this.remarkData.list = [];
								this.remarkData.page = 1;
								this.getMsg();
							}
						},1500)
					}else{
						this.isAJAX = false;
						tools.error(res.msg)
					}
				})
			},
			
			delInfo(item){
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				delRemark({remark_id:item.id}).then((res)=>{
					if(res.code === 1){
						tools.success('删除成功')
						setTimeout(()=>{
							this.isAJAX = false;
							this.remarkData.list = [];
							this.remarkData.page = 1;
							this.getMsg();
							this.list = [];
							this.fromData.page = 1;
							this.getList();
						},1500)
					}else{
						this.isAJAX = false;
						tools.error(res.msg)
					}
				})
			},
			
			// 添加贴子
			add(){
				uni.navigateTo({
					url:"/pages-school/add-circle"
				})
			},
			// 打开举报
			openRepot(item){
				this.reportData.news_id = item.news_id;
				this.$refs.popup.open();
			},
			// 举报
			closePop(type){
				if(type === 1){
					this.reportData.news_id = '';
					this.reportData.content = '';
					this.$refs.popup.close();
				}else{
					if(this.isAJAX){
						return
					}
					this.isAJAX = true;
					alumniReport(this.reportData).then((res)=>{
						if(res.code === 1){
							tools.success(res.msg)
							setTimeout(()=>{
								this.isAJAX = false;
								this.closePop(1);
							},1000)
						}else{
							tools.error(res.msg);
							this.isAJAX = false;;
						}
					})
				}
			},
			
			toDet(item){
				uni.navigateTo({
					url:"/pages-school/circle-info?news_id=" + item.news_id
				})
			},
			
			
		},
	}
</script>

<style scoped lang="scss">
	.input-box{
		width: 100%;
		height: 80rpx;
		background: #F2F2F2;
		border-radius: 200rpx;
		line-height: 80rpx;
	}
	.b-bottom{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient( 105deg, #57CAFF 0%, #41ABF5 100%);
		border-radius: 200rpx;
	}
	
	.school-circle{
		padding-left: 24rpx;
		padding-right: 24rpx;
		position: relative;
		
		
		.pop-h-20{
			height: 18vh !important;
		}
		
		.pop-h-30{
			height: 30vh !important;
		}
		.pop-box{
			
			width: 100%;
			height: 50vh;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			.item-box{
				width: 100%;
				height: 92rpx;
				
				border-radius: 200rpx;
				line-height: 92rpx;
				text-align: center;
				margin-bottom: 24rpx;
			}
		}
		.pop-msg{
			height: 70vh;
			position: relative;
			.pop-input{
				position: absolute;
				width: 100%;
				height: 70vh;
				background-color: #fff;
				bottom: 0;
				left: 0;
				border-top: 1rpx solid #ccc;
				border-radius: 20rpx 20rpx 0 0;
				display: flex;
				flex-direction: column;
				.save-box{
					text-align: center;
					line-height: 88rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #FFFFFF;
					width: 100%;
					height: 80rpx;
					border-radius: 200rpx;
					background: linear-gradient( 105deg, #57CAFF 0%, #41ABF5 100%);
				}
			}
			.head-pop{
				padding-bottom: 34rpx !important;
				border-bottom: 1rpx solid #F2F2F2;
			}
			.list-box{
				.list-box-img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}
				.only-box{
					padding: 4rpx 16rpx;
					background: rgba(65,171,245,0.1);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
				.msg-img{
					width: 144rpx;
					height: 144rpx;
					border-radius: 12rpx;
					margin-right:5rpx;
					margin-bottom: 5rpx;
				}
					
				.msg-img:nth-child(3n){
					margin-right: 0rpx;
				}
				.msg-img-1{
					width: 100rpx !important;
					height: 100rpx !important;
				}
			}
		}
		
		.circle-add{
			width: 88rpx;
			height: 88rpx;
			position: absolute;
			right: 0;
			bottom: 20vh;
			z-index: 2;
		}
		.w-400{
			width: 400rpx;
		}
		.bg-box{
			width: 100%;
			height: 260rpx;
			filter: blur(80rpx);
			background: linear-gradient(to right,#E1F2FD,#E0F3FA,#DBF8EF);
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.ts-box{
			width: 100%;
			height: 72rpx;
			background: linear-gradient( 180deg, #FFDBD0 0%, #FFFFFF 100%);
			border-radius: 16rpx;
			image{
				width: 44rpx;
				height: 44rpx;
				margin-right: 8rpx;
			}
		}
		.nav-box{
			width: 100%;
			overflow-x: scroll;
			.h130{
				height: 130rpx !important;
			}
			.nav-item{
				margin-right: 12rpx;
				width: 144rpx;
				height: 114rpx;
				text-align: center;
				border-radius: 20rpx;
				position: relative;
				.nav-icon{
					width: 64rpx;
					height: 64rpx;
					margin: 12rpx auto 0 auto;
				}
				.nav-bg{
					width: 144rpx;
					height: 130rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: -1;
				}
			}
		}
		.type-box{
			.box-s{
				font-weight: 600 !important;
				color: #41ABF5;
				background: #E0F1FF !important; 
				box-sizing: border-box;
				border: 1rpx solid #70C0F8;
			}
			.box-1{
				padding: 8rpx 32rpx;
				margin-right: 20rpx;
				background-color: #fff;
				border-radius: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
			}
			.box-2{
				width: 168rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 1rpx solid #41ABF5;
			}
		}
		.card-box{
			width: 100%;
			min-height: 100rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.card-head{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}
			.dian-img{
				width: 30rpx;
				height: 6rpx;
				margin-bottom: 24rpx;
				margin-left: auto;
			}
			.hot-img{
				width: 40rpx;
				height: 40rpx;
				margin-left: auto;
			}
			.card-3{
				.card-3-img{
					width: 182rpx;
					height: 182rpx;
					border-radius: 12rpx;
					margin-right: 6rpx;
					margin-bottom: 6rpx;
				}
				.card-3-img:nth-child(3n){
					margin-right: 0rpx;
				}
			}
			.card-4{
				view{
					padding: 4rpx 16rpx;
					background: #F2F2F2;
					border-radius: 200rpx;
					font-size: 24rpx;
					color: #999;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
				}
			}
			.card-5{
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
</style>