shop-app/src/pages/goods/comment/detail.vue

<!--
 * @Author: ch
 * @Date: 2022-06-21 18:19:13
 * @LastEditors: ch
 * @LastEditTime: 2022-06-30 11:11:33
 * @Description: file content
-->
<template>
	<view>
		<view class="box">
			<BsCommentUserInfo :userData="detail"/>
			<BsCommentInfo :commentDetail="detail"/>
			<BsCommentFollowInfo v-if="detail.followComment" :commentDetail="detail"/>
			<BsCommentGoodsInfo class="goods-info" :goods="detail" />
		</view>
		<view class="reply-title">全部评论( {{detail.replyCount}}条)</view>
		<view class="reply">
			<template v-if="detail.replyCount">
				<view class="reply--item" v-for="item in detail.answerCommentList" :key="item.id" @click="handleAnswer(item)">
					<view class="reply--title">
						<text>
							{{item.userName}} {{item.parentId !== detail.id ? ` 回复 ${item.parentUserName}` : ''}}
						</text>
						<text>{{item.createTime}}</text>
					</view>
					<view class="reply--ctx">{{item.commentContent}}</view>
				</view>
			</template>
			<BsEmpty v-else tips="还没有人评论哦，快来抢沙发~"/>
		</view>
		<view class="footer">
			<view class="footer--item" v-if="!detail.followComment && detail.userId === $store.state.userInfo.id" 
				@click="$Router.push(`/comment?commentId=${commentId}&follow=true`)">
				<u-icon name="chat" size="28rpx"></u-icon>
				追评
			</view>
			<view  class="footer--item" @click="isShowAnswer = true">
				<u-icon name="chat" size="28rpx"></u-icon>
				评论
			</view>
			<view class="footer--item" :class="{'footer--item__active' : isLike}" @click="handleUseful">
				<u-icon name="thumb-up" size="28rpx" :color="isLike ? '#FF875B' : ''"></u-icon>
				有用<template v-if="detail.usefulCount">({{detail.usefulCount}})</template>
			</view>
		</view>
		<template v-if="isShowAnswer" >
			<view class="reply-comment--bg" @click="handleHideAnswer"></view>
			<view class="reply-comment">
				<view class="reply-comment--box">
					<input class="reply-comment--input" maxlength="500" v-model="commentContent" :placeholder="placeholder" />
					<UiButton type="gradual" :disable="!commentContent.trim()" @click="handleSubmit">发表</UiButton>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
import BsCommentGoodsInfo from '../../../components/BsCommentGoodsInfo.vue'
import BsCommentInfo from '../../../components/BsCommentInfo.vue'
import BsCommentUserInfo from '../../../components/BsCommentUserInfo.vue'
import UiButton from '../../../components/UiButton.vue'
import {ApiGetCommentDetail, ApiPostComment, ApiPutCommentUseful} from '@/common/api/comment'
import {HandleApiError, Debounce} from '@/common/utils'
import COMMENT from '@/common/dicts/comment'
import BsEmpty from '../../../components/BsEmpty.vue'
import BsCommentFollowInfo from '../../../components/BsCommentFollowInfo.vue'
export default {
	components: { BsCommentGoodsInfo, BsCommentInfo, UiButton, BsCommentUserInfo, BsEmpty, BsCommentFollowInfo },
	data(){
		return {
			isShowAnswer : false,
			answer : null,
			commentId : this.$Route.query.id,
			detail : {},
			commentContent : '',
			isLike : false
		}
	},
	computed:{
		placeholder(){
			return this.answer ? `回复：${this.answer.userName}` : '说点什么吧？'
		},
		replyCount(){
			
		}
	},
	onShow(){
		this.getDetail();
	},
	methods:{
		
		async getDetail(){
			const {error, result} = await ApiGetCommentDetail({
				commentId : this.commentId
			});
			if(!HandleApiError(error,'getDetail')){
				this.detail = result;
				this.isLike = result.isLike || false;
				this.detail.usefulCount = this.detail.usefulCount || 0;
				this.detail.replyCount = this.detail.replyCount || 0;
				if(result.merchantComment){
					this.detail.answerCommentList.unshift({
						...result.merchantComment,
						parentId : result.id
					})
				}
			}
		},
		async handleSubmit(){
			let data = {
				commentContent : this.commentContent,
				commentType : COMMENT.TYPE.ANSWER,
				originId : this.detail.id,
				parentId : this.answer ? this.answer.id : this.detail.id
			}
			const {error, result} = await ApiPostComment(data);
			if(!HandleApiError(error)){
				this.detail.answerCommentList.push({
					...result, 
					userName : this.$store.state.userInfo.nickname,
					parentName: this.answer ? this.answer.userName : ''
				});
				this.commentContent = '';
				this.detail.replyCount++;
				uni.$u.toast('评论成功！');
			}
		},
		handleAnswer(item){
			this.isShowAnswer = true;
			this.answer = item;
		},
		handleHideAnswer(...e){
			this.isShowAnswer = false;
			this.answer = null;
		},

		handleUseful(){
			this.isLike = !this.isLike
			if(this.isLike){
				this.detail.usefulCount++;
			}else{
				this.detail.usefulCount--;
			}
			if(!this.debounce){
				this.debounce = Debounce(this.updateUseFul, 500);
			}
			this.debounce();
		},
		async updateUseFul(){
			if(this.isLike === this.detail.isLike){
				return false
			}
			const {error, result} = await ApiPutCommentUseful({
				commentId : this.detail.id,
				isLike : this.isLike
			});
			
		}
	}
}
</script>
<style lang="scss">
page{
	background: $color-grey1;
	padding-bottom: 140rpx;
}
</style>
<style lang="scss" scoped>
.box{
	background: $color-grey0;
	padding: 40rpx;
}
.goods-info{
	margin-top: 30rpx;
	border: 1px solid #f8f8f8;
}
.reply-title{
	height: 70rpx;
	line-height: 70rpx;
	margin-bottom:1rpx;
	margin-top: 20rpx;
	background: #fff;
	padding: 0 40rpx;
}
.reply{
	background: #fff;
	padding: 0 40rpx;
	overflow: hidden;
	&--item{
		border-bottom: 1px solid $color-grey1;
		padding-top: 40rpx;
	}
	&--title{
		display: flex;
		justify-content: space-between;
		text{
			color: #999;
		}
	}
	&--ctx{
		margin: 26rpx 0;
		line-height: 36rpx;
		word-break: break-all;
	}
}
.footer{
	height: 124rpx;
	position: fixed;
	bottom: var(--window-bottom);
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #fff;
	border-top: 1px solid #f8f8f8;
	&--item{
		display: flex;
		align-items: center;
		&__active{
			color: $color-yellow3;
		}
	}
}
.reply-comment--bg{
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

.reply-comment{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background: #fff;
	height: 124rpx;
	padding: 24rpx 40rpx;
	border-top: 1px solid #f8f8f8;
	&--box{
		display: flex;
		background: #F5F5F5;
		border-radius: 38rpx;
	}
	&--input{
		flex: 1;
		padding:0 20rpx 0 40rpx;
		height: 76rpx;
		line-height: 76rpx;
		
	}
}

</style>