zh_order_food_xcx/pages-school/circle-info.vue

<template>
	<view class="circle-info-box iPhone-bottom flex-common-css box-border-box bgc-f">
		<view class="nav-box bgc-f">
			<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
				<template>
					<view slot="custom" class="display-flex ">
						<image class="nav-img" @click="toBack()" src="@/static/img/takeout/bg-back.png"
							mode="scaleToFill"></image>
						<view class="info-nav display-flex">
							<image :src="obj.head_img" mode=""></image>
							<view class="pb-5">
								<view class="fs-28 fw-600 w348 text-overflow-ellipsis-one">{{obj.nickname||''}}</view>
								<view class="fs-20 fc-9 fw-400 mb-10">{{obj.created_date||''}}</view>
							</view>
						</view>
					</view>
				</template>
			</Nav>
		</view>

		<scroll-view scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="box-border-box mb-26" v-if="obj.image.length > 0">
				<swiper class="swiper mb-32 " circular indicator-dots indicator-active-color="#4FB3EF" :autoplay="true"
					:interval="3000" :duration="500">
					<swiper-item v-for="(item,i) in obj.image" :key="i">
						<image class="swiper-item" :src="item" mode="aspectFit" @click="lookImg(i,item)"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="box-border-box bz-box bgc-f b-b-F9F9F9 mt-24 mb-32">
				<view class="fs-30 fw-600 mb-32 item-content">{{obj.content||''}}</view>
				<view class="card-4 flex-wrap-wrap">
					<view class="label-box align-items-center mr-20 b-rad-200 bgc-F2F2F2">
						<image class="wz mr-8" src="@/static/img/my/wz-two.png" mode=""></image>
						<view class="fs-24 fc-9">
							{{obj.school_name||''}}
						</view>
					</view>
					<view class="label-box align-items-center b-rad-200 bgc-F2F2F2">
						<image class="wz mr-8" src="@/static/img/my/ht.png" mode=""></image>
						<view class="fs-24 fc-9">
							{{obj.topic_name||''}}
						</view>
					</view>
				</view>
			</view>
			<view class="fs-32 fc-3 fw-600 mb-16 plr-32 box-border-box">
				评论<text class="fs-24 fc-9">({{obj.remark}})</text>
			</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>
			<view v-else class="pop-box pop-msg box-border-box p-24">
				<view class=" box-border-box plr-24">
					<view class="list-box flex-justify-space" v-for="(item,i) in 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>
									<view class="fs-30 fw-400 mb-8" @click.stop="openInput(1,item,i,i)">
										{{item.content}}
									</view>
									<view class="align-items-center mb-8">
										<view class="fs-24 fw-400 fc-9">{{item.created_date}}</view>
										<uni-icons class="ml-10" v-if="item.is_self == 1"
											@click="delInfo(item, i, 1, i)" type="trash" size="18"
											color="#BFBFBF"></uni-icons>
									</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)">展开更多评论
							</view>
							<!-- 回复 -->
							<view class="mb-16" v-if="item.count > 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=" b-b-F9F9F9 mr-20">
												<view class="fs-28 fw-400 fc-9 mb-8 align-items-center">
													<view class="">
														{{info.nickname}}
													</view>
													<span v-if="info.is_author == 1"
														class='only-box text-align-center flex-shrink0 fs-24 fc-41ABF5 ml-10'>作者</span>
												</view>
												<view class="fs-30 fw-400 mb-8" @click.stop="openInput(2,info,index,i)">
													{{info.content}}
												</view>
												<view class="align-items-center mb-8">
													<view class="fs-24 fw-400 fc-9 ">{{info.created_date}}</view>
													<uni-icons type="trash" size="18" class="ml-10"
														v-if="info.is_self == 1" @click="delInfo(info, index, 2 ,i)"
														color="#BFBFBF"></uni-icons>
												</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>0 && item.replyList.length < item.count  && item.count > 10"
									class="fs-24 fc-6 text-align-center mb-12" @click="openReply(2,item)">展开更多评论</view>
							</view>

						</view>
					</view>
				</view>
			</view>

		</scroll-view>

		<view class="card-5 align-items-center flex-justify-space box-border-box boder-b-t">
			<view class="input-box-box fs-28 fc-9 mr-20" @click.stop="openInput(0,'','','')">友善评论，文明发言</view>
			<!-- 			<input class="fs-input" :focus='focus' v-model="msgData.content" @click.stop="openInput(0,'','','')"
				type="text" @focus='inputFocus(true)' @blur='inputFocus(false)' /> -->
			<!-- 			<textarea class="fs-input fs-36 fc-3" :focus='focus' v-model="msgData.content"
				@click.stop="openInput(0,'','','')" @focus='inputFocus(true)' @blur='inputFocus(false)' auto-height /> -->
			<view class="display-flex flex-shrink0">
				<view class="align-items-center mr-20" @click.stop="handUp(1,obj)">
					<uni-icons type="hand-up" size="22" :color="obj.is_like==1?'#FD5C02':'#999'"></uni-icons>
					<view :class="obj.is_like==1?'fc-FD5C02':'fc-9'">
						点赞
					</view>
					<!-- <view class="fs-24 " :class="obj.is_like==1?'fc-FD5C02':'fc-9'">{{obj.like}}</view> -->
				</view>
				<view class="align-items-center" @click.stop="openRepot(obj)">
					<image src="@/static/img/school/info.png" mode=""></image>
					<view class="fs-24 fc-9">举报</view>
				</view>
			</view>
			<!-- <image v-else class="wh64" @click.stop="save()" src="@/static/img/school/fs.png" mode=""></image> -->
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="pop-input">
				<view class="text-align-right mb-20 fs-30 fc-41ABF5" @click.stop="save()">
					发送
				</view>
				<textarea class="fs-input fs-28 fc-3" :focus='focus' v-model="msgData.content" placeholder='友善评论，文明发言'
					maxlength="100" placeholder-class='fs-28 fc-9 fw-600' @focus='inputFocus(true)'
					@blur='inputFocus(false)' @keyboardheightchange='keyboardheightchange' />
				<view :style="[{'height': KeyboardHeight +'px'}]"> </view>
				<!-- 				<input class="fs-input" focus type="text" />
				<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="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>
		</uni-popup>

		<uni-popup ref="popupRepot" type="bottom">
			<view class="pop-box pop-h-30 box-border-box p-24" :style="'bottom:'+KeyboardHeight+'px;'">
				<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" @click.stop="closePop(2)">确定</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 fc-3 fw-600 fc-f">确认举报</view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {
		alumnInfo,
		getRemarkList,
		setAlumniLike,
		delRemark,
		setCreateRemark,
		setRemarkLike,
		alumniReport
	} from '@/api/alumni.js';
	import tools from "@/service/tools";
	export default {
		components: {
			EnBlank
		},
		data() {
			return {
				isAJAX: false,
				news_id: '',
				obj: {
					image: [],
				},
				list: [],
				page: 1,
				total: 0,

				// 发起评论
				msgData: {
					news_id: '',
					remark_id: '',
					content: '',
					reply_id: '',
				},
				// 回复评论
				replyData: {
					page: 1,
				},
				// 举报
				reportData: {
					news_id: '',
					content: '',
				},
				focus: false,
				msgType: 0, // 消息类型
				msgIndex: 0, // 列表一级索引
				msgI: 0,
				KeyboardHeight: 0, // 键盘高度
				// showKeyNum: 0, //键盘打开的次数
				remark: ''
			}
		},
		onLoad(e) {
			this.news_id = e.news_id;
			this.msgData.news_id = e.news_id;
			this.getInfo();
			this.getList();
			uni.onKeyboardHeightChange(res => {
				console.log('log', res);
				this.KeyboardHeight = res.height
			})
		},
		onUnload() {
			const circleDataUp = {}
			alumnInfo({
				news_id: this.news_id
			}).then((res) => {
				if (res.code === 1) {
					circleDataUp.news_id = res.data.news_id
					circleDataUp.like = res.data.like
					circleDataUp.remark = res.data.remark
					circleDataUp.heat = res.data.heat
					circleDataUp.is_like = res.data.is_like
					uni.$emit('circleDataUp', circleDataUp)
				}
			})
			// const circleDataUp = {
			// 	news_id: this.obj.news_id,
			// 	like: this.obj.like,
			// 	remark: list.length,
			// 	heat: this.obj.heat
			// }
			console.log("监听页面卸载");
		},
		methods: {
			// keyboardheightchange(e) {
			// 	this.keyboardHeight = e.detail.height;
			// 	console.log(this.keyboardHeight, '1111111111');
			// 	this.showKeyNum++;
			// 	setTimeout(() => {
			// 		uni.pageScrollTo({
			// 			scrollTop: 2000
			// 		});
			// 	}, 200)
			// },
			// hideBorad() {
			// 	this.showKeyNum = 2;
			// 	this.keyboardHeight = 0;
			// },
			inputFocus(type) {
				if (!type) {
					this.focus = false
					// this.hideBorad()
				}
				this.$forceUpdate()
			},
			lookImg(i, item) {
				tools.lookBigImg(i, item)
			},
			toBack() {
				tools.leftClick()
			},
			getInfo() {
				alumnInfo({
					news_id: this.news_id
				}).then((res) => {
					if (res.code === 1) {
						this.obj = res.data;
					} else {
						tools.error(res.msg, 1000)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			scrolltolower() {
				if (this.list.length < this.total) {
					this.page += 1;
					this.getList();
				}
			},
			getList() {
				getRemarkList({
					news_id: this.news_id,
					remark_id: 0,
					page: this.page
				}).then((res) => {
					if (res.code === 1) {
						this.list = [...this.list, ...res.data.items];
						this.total = res.data.total;
						this.list.forEach((v) => {
							v.replyList = [];
							if (v.count > 0) {
								v.isOpen = true;
							}
						})
					}
				})
			},
			// 获取回复列表
			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)
					}
				})
			},

			// 点赞
			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.postFun(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 (item.is_like == 0 && item.like > 0) {
						item.like -= 1
					} else {
						item.like += 1
					}
					this.isAJAX = false;
					tools.success(res.msg, 1000);
				} else {
					this.isAJAX = false;
					tools.error(res.msg);
				}
			},
			// 点赞帖子
			postFun(res, item, is_like) {
				console.log(res, item, is_like);
				if (res.code === 1) {
					item.is_like = is_like;
					this.isAJAX = false;
					tools.success(res.msg, 1000);
				} else {
					this.isAJAX = false;
					tools.error(res.msg);
				}
			},
			openInput(type, item, index, i) {
				console.log(index, i, '$$$$$$$$$$$$$$$$$');
				this.msgIndex = index
				this.msgType = type
				this.msgI = i
				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.$refs.popup.open();
				setTimeout(() => {
					this.focus = true
					// this.$forceUpdate()
				}, 500);

				// console.log(this.focus, '是否聚焦');
			},
			closeInput() {
				this.$refs.popup.close();
				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('评论成功', 1000)
						setTimeout(() => {
							this.isAJAX = false;
							this.closeInput()
							console.log(this.msgType)
							if (this.msgType == 0) {
								this.list.unshift(res.data)
								this.$forceUpdate()
							} else if (this.msgType == 1) {
								let replyList = []
									++this.list[this.msgI].count
								console.log(this.list[this.msgIndex], '二级');
								if (this.list[this.msgIndex].replyList) {
									this.list[this.msgIndex].replyList.push(res.data)
								} else {
									this.list[this.msgIndex].replyList = replyList
									this.list[this.msgIndex].replyList.push(res.data)
									this.$forceUpdate()
								}
							} else {
								console.log(this.list[this.msgIndex]);
								++this.list[this.msgI].count
								this.list[this.msgI].replyList.push(res.data)
								this.$forceUpdate()
							}
							console.log(this.list[this.msgIndex]);
							this.msgIndex = 0
							this.msgType = 0
							this.msgI = 0
							// this.list = [];
							// this.page = 1;
							// this.getList();
							this.getInfo();

							// remark
						}, 1500)
					} else {
						this.isAJAX = false;
						tools.error(res.msg)
					}
				})
			},
			delInfo(item, index, type, i) {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				delRemark({
					remark_id: item.id
				}).then((res) => {
					if (res.code === 1) {
						tools.success('删除成功', 1000)
						setTimeout(() => {
							this.isAJAX = false;
							console.log(this.list[i], '88888888888888888');
							--this.list[i].count
							if (type == 1) {
								this.list.splice(index, 1)
							} else {
								this.list[i].replyList.splice(index, 1)
							}
							// this.list = [];
							// this.page = 1;
							// this.getList();
							this.getInfo();
						}, 1500)
					} else {
						this.isAJAX = false;
						tools.error(res.msg)
					}
				})
			},

			// 打开举报
			openRepot(item) {
				this.reportData.news_id = item.news_id;
				this.$refs.popupRepot.open();
			},
			// 举报
			closePop(type) {
				if (type === 1) {
					this.reportData.news_id = '';
					this.reportData.content = '';
					this.$refs.popupRepot.close();
				} else {
					if (this.isAJAX) {
						return
					}
					this.isAJAX = true;
					alumniReport(this.reportData).then((res) => {
						if (res.code === 1) {
							tools.success(res.msg, 1000)
							setTimeout(() => {
								this.isAJAX = false;
								this.closePop(1);
							}, 1000)
						} else {
							tools.error(res.msg);
							this.isAJAX = false;;
						}
					})
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.item-content {
		word-wrap: break-word;
	}

	.label-box {
		padding: 0 12rpx;
		height: 38rpx;
		line-height: 38rpx;
	}

	.wz {
		width: 32rpx;
		height: 32rpx;
	}

	.fs-input {
		flex: 1;
		width: 100%;
		height: 170rpx !important;
		// line-height: 72rpx;
		background: #F2F2F2;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx 24rpx;
	}

	.wh64 {
		width: 68rpx;
		height: 68rpx;
	}

	.input-box-box {
		width: 436rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #F2F2F2;
		border-radius: 200rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	.circle-info-box {

		.boder-b-t {
			border-top: 1rpx solid #F2F2F2;
		}

		.card-5 {
			height: 98rpx;
			padding: 9rpx 24rpx 9rpx 32rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;

			}
		}

		.w348 {
			width: 348rpx;
		}

		.nav-box {
			z-index: 99;
			padding-bottom: 10rpx;

			.nav-img {
				width: 56rpx;
				height: 56rpx;
				margin-right: 30rpx;
			}

			.info-nav {
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
		}

		.swiper {
			width: 100%rpx;
			height: 920rpx;

			.swiper-item {
				width: 100%;
				height: 920rpx;
				// background-color: skyblue;
			}
		}

		.bz-box {
			padding: 0 32rpx 20rpx 32rpx;

			.card-4 {
				// view {
				// 	padding: 4rpx 16rpx;
				// 	background: #F2F2F2;
				// 	border-radius: 200rpx;
				// 	font-size: 24rpx;
				// 	color: #999;
				// 	margin-right: 20rpx;
				// 	margin-bottom: 10rpx;
				// }
			}
		}

		.pop-input {
			width: 100%;
			height: auto;
			background-color: #fff;
			border-top: 1rpx solid #ccc;
			padding: 15rpx 24rpx;
			box-sizing: border-box;
			// .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%);
			// }
		}

		.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;
			.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;
				}
			}
		}
	}
</style>