zh_order_food_xcx/pages-my/my-publish.vue

<template>
	<view class="flex-common-css">
		<Nav title="我的发布" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css content-box box-sizing-border"
			@scrolltolower="scrolltolower">
			<view v-if="listData.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 class="item-box box-sizing-border b-rad-20 mb-20 bgc-f flex-justify-space"
				v-for="(item,index) in listData" :key="index" @click="goToUrl(item)">
				<image class="item-head-img flex-shrink0 b-rad-50 mr-16" :src="item.head_img" mode="aspectFill"></image>
				<view class="itme-right common-view-css">
					<view class="item-name flex-justify-space mb-16">
						<view class="">
							<view class="mb-4 fc-3 fs-28">
								{{item.nickname}}
							</view>
							<view class="fs-24 fc-9">
								{{item.created_date}}
							</view>
						</view>
						<view class="align-items-center">
							<image class="rd-img mr-8" src="@/static/img/my/rd.png" mode=""></image>
							<view class="fs-26 fc-9">
								{{item.heat}}
							</view>
						</view>
					</view>
					<view class="text-overflow-ellipsis-t fs-30 fc-3 mb-16">
						{{item.content}}
					</view>
					<view class="item-img-box mb-20 align-items-center flex-wrap-wrap">
						<image class="b-rad-12" v-for="imgUrl in item.image" :src="imgUrl" mode="aspectFill"
							:class="item.image.length==1?'item-img-one':item.image.length==2?'item-img-two':'item-img-three'">
						</image>
					</view>
					<view class="align-items-center mb-40">
						<view class="label-box align-items-center mr-20 b-rad-200 bgc-F2F2F2">
							<image class="wz mr-8" src="@/static/img/my/wz.png" mode=""></image>
							<view class="fs-24 fc-9">
								{{item.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">
								{{item.topic_name}}
							</view>
						</view>
					</view>
					<view class="flex-justify-space">
						<view class="align-items-center" @click.stop="handUp(1,item)">
							<uni-icons class="mr-8" type="hand-up" size="22"
								:color="item.is_like==1?'#FD5C02':'#999'"></uni-icons>
							<view class="fs-24 fc-9">
								{{item.like}}
							</view>
						</view>
						<view class="align-items-center" @click.stop="openMsg(item,0)">
							<image class="but-icons mr-8" src="@/static/img/my/hf.png" mode=""></image>
							<view class="fs-24 fc-9">
								{{item.remark}}
							</view>
						</view>
						<uni-icons color="#999999" type="trash" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</scroll-view>
		<movable-area class="add-box" v-show="false">
			<movable-view direction="all" y="300">
				<view class="add-but b-rad-50 text-align-center" @click="addInfo()">
					<uni-icons type="plusempty" color="#fff" size="30"></uni-icons>
				</view>
			</movable-view>
		</movable-area>
		<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)">展开更多评论</view>
							<!-- 回复 -->
							<view class="mb-16" 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=" 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">{{info.created_date}}</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)">展开更多评论</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 {
		alumnMyAlumni,
		setAlumniLike,
		getRemarkList,
	} from "@/api/alumni.js"
	import tools from "@/service/tools";
	export default {
		components: {
			EnBlank
		},
		data() {
			return {
				listData: [],
				isShowIpnut: false,
				// 一级评论
				remarkData: {
					remark_id: '',
					news_id: '',
					total: 0,
					list: [],
					page: 1,
				},
				// 发起评论
				msgData: {
					news_id: '',
					remark_id: '',
					content: '',
					reply_id: '',
				},
				// 回复评论
				replyData: {
					page: 1,
				},
				isAJAX: false,
				total: 0,
			};
		},
		onLoad(data) {},
		mounted() {
			this.alumnMyAlumni()
		},
		methods: {
			goToUrl() {

			},
			// 点赞
			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)
					})
				}
			},
			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;
			},
			// 打开评论
			openMsg(item) {
				this.remarkData.news_id = item.news_id;
				this.msgData.news_id = item.news_id;
				this.remarkData.remark_id = 0;
				this.getMsg();
			},
			// 获取回复列表
			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)
					}
				})
			},
			// 获取评论
			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)
					}
				})
			},
			scrolltolower() {
				console.log('触底');
			},
			alumnMyAlumni() {
				alumnMyAlumni({
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.listData.push(res.data.items)
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content-box {
		padding: 20rpx 24rpx;
	}

	.item-box {
		padding: 24rpx;
	}

	.item-name {
		align-items: flex-start;
	}

	.item-head-img {
		width: 80rpx;
		height: 80rpx;
	}

	.rd-img {
		width: 40rpx;
		height: 40rpx;
	}

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

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

	.but-icons {
		width: 40rpx;
		height: 40rpx;
	}

	.item-img-box {
		width: calc(100% + 6rpx);
	}

	.item-img-one {
		width: 360rpx;
		height: 360rpx;
	}

	.item-img-two {
		width: 276rpx;
		height: 276rpx;
		margin: 0 6rpx 0 0;
	}

	.item-img-three {
		width: 182rpx;
		height: 182rpx;
		margin: 0 6rpx 6rpx 0;
	}

	.add-box {
		position: fixed;
		right: 98rpx;
		top: 10vh;
		max-width: 88rpx;
		height: 80vh;
		z-index: 999;
	}

	.add-but {
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(284deg, #0290FC 0%, #01D8FF 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;
		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;
			}
		}
	}
</style>