tuanfeng-shop-user/pages_category_page1/goodsModule/evaluateDetails.vue

<template>
	<view class="container">
		<global-loading />

		<!-- 评论详情 -->
		<view class="evaluate-contentbox">
			<view class="evaluate-content flex-items flex-row flex-sp-between">
				<view class="flex-items">
					<image v-if="commentVOList.headImage" class="user-headSmallImg" :src="commentVOList.headImage"></image>
					<image v-else class="user-headSmallImg" src="../../static/images/origin/storeLogo.png"></image>
					<label v-if="commentVOList.name" class="fs28 mar-left-20">{{ commentVOList.name }}</label>
					<label v-else class="fs28 mar-left-20">匿名</label>
				</view>
				<label class="font-color-999 fs22">{{ commentVOList.createTime }}</label>
			</view>
			<view class="fs22 font-color-999 mar-top-10">
				{{ commentVOList.value }}
			</view>
			<view class="fs26 pad-topbot-20">{{ commentVOList.comment }}</view>
			<view v-if="commentVOList.image" class="evaluateImg-box">
				<view v-for="(cItem, index) in imageList" :key="index" @click="previewImg(1, index)">
					<image class="evaluate-Img" :src="cItem"></image>
				</view>
			</view>
			<view v-if="commentVOList.addComment" class="addComments-box flex-column-plus">
				<label class="font-color-C5AA7B mar-top-30">用户追评</label>
				<label class="mar-top-20">{{ commentVOList.addComment }}</label>
				<view v-if="commentVOList.addImage" class="evaluateImg-box mar-top-20">
					<view v-for="(dItem, index) in imgDataResult" :key="index" @click="previewImg(2, index)">
						<image class="evaluate-Img" :src="dItem"></image>
					</view>
				</view>
			</view>
			<view class="goodsDes-box flex-column-plus mar-top-30">
				<view class="flex-row-plus" @click="goGoodsDetails">
					<image class="goodsDes-img" :src="commentVOList.productImage"></image>
					<view class="goodsDesText-box">
						<label class="fs26 goodsDes-text">{{ commentVOList.productName }}</label>
						<view class="mar-top-70">
							<label>¥ {{ commentVOList.productPrice }}</label>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--    {{commentVOList}} -->
		<view class="linkBox">
			<view v-if="commentVOList.addComment != ''" class="butBox flex-row-plus">
				<view class="addPraise-box1 flex-items-plus" @click="zanTap">
					<image v-if="!commentVOList.ifLike" class="addPraise-icon" src="../../static/images/origin/addPraiseIcon.png" />
					<image v-else class="addPraise-icon" src="../../static/images/origin/addPraiseIcons.png" />
					<label class="mar-left-10" :class="[ commentVOList.ifLike ? 'font-color-FFEBC4' : 'font-color-DDD' ]">点赞</label>
				</view>
			</view>
			<view v-else class="butBox flex-row-plus">
				<view class="addComments-box flex-items-plus" @click="addCommentsClick()">
					<image class="addComments-cion" src="../../static/images/origin/addCommentsIcon.png"></image>
					<label class="mar-left-10 font-color-333">追加评价</label>
				</view>
				<view class="addPraise-box flex-items-plus" @click="zanTap">
					<image v-if="!commentVOList.ifLike" class="addPraise-icon" src="../../static/images/origin/addPraiseIcon.png" />
					<image v-else class="addPraise-icon" src="../../static/images/origin/addPraiseIcons.png" />
					<label class="mar-left-10" :class="[ commentVOList.ifLike ? 'font-color-FFEBC4' : 'font-color-DDD' ]">点赞</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
	data() {
		return {
			commentVOList: {},
			actionType: true,
			imgDataResult: [],
			imageList: []
		}
	},
	onLoad() {
		this.commentVOList = uni.getStorageSync('commentVOList')
		uni.removeStorageSync('commentVOList')
		this.commentImgData(this.commentVOList.image)
		this.imgDataResultData(this.commentVOList.addImage)
	},
	onBackPress(e) {
		if (e.from === 'navigateBack') {
			return false
		}
		this.back()
		return true
	},
	methods: {
		goGoodsDetails() {
			const shopId = this.commentVOList.shopId
			const productId = this.commentVOList.productId
			const skuId = this.commentVOList.skuId
			uni.navigateTo({
				url: 'goodsDetails?shopId=' + shopId + '&productId=' + productId + '&skuId=' + skuId
			})
		},
		back() {
			uni.navigateTo({
				url: 'userEvaluate'
			})
		},
		commentImgData(imgData) {
			this.imageList = imgData.split(',')
		},
		imgDataResultData(imgData) {
			this.imgDataResult = imgData.split(',')
		},
		// 点赞
		zanTap() {
			// uni.showLoading({
			//   title:''
			// })
			this.actionType = this.commentVOList.ifLike == 1 ? 0 : 1
			NET.request(API.LikeOrUnLikeComment, {
				commentId: this.commentVOList.commentId,
				ifLike: this.actionType
			}, 'POST').then((res) => {
				this.commentVOList.ifLike = !this.commentVOList.ifLike
				this.commentVOList.likes = this.commentVOList.ifLike ? this.commentVOList.likes + 1 : this.commentVOList.likes - 1
				if (this.actionType == 1) {
					uni.showToast({
						title: '点赞成功'
					})
				} else {
					uni.showToast({
						title: '已取消点赞',
						icon: 'none'
					})
				}
			})
				.catch((res) => {
					uni.hideLoading()
				})
				.finally(() => { uni.hideLoading() })
		},
		// 追加评论
		addCommentsClick() {
			uni.setStorageSync('addCommentVOList', this.commentVOList)
			uni.navigateTo({
				url: 'addEvaluate?type=2'
			})
		},
		// 查看图片
		// previewImg(img) {
		//   console.log(img, 'img')
		//   let imgsArray = [];
		//   imgsArray[0] = img
		//   uni.previewImage({
		//     current: 0,
		//     urls: imgsArray
		//   });
		// },
		// 预览图片多张
		previewImg(type, index) {
			const imgsArray = []
			if (type === 1) {
				for (let i = 0; i < this.imageList.length - 1; i++) {
					imgsArray.push(this.imageList[i])
				}
			} else {
				for (let i = 0; i < this.imgDataResult.length - 1; i++) {
					imgsArray.push(this.imgDataResult[i])
				}
			}
			uni.previewImage({
				current: index,
				urls: imgsArray
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	padding-bottom: 30upx;

	.evaluate-contentbox {
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 30upx 30upx;
		background-color: #FFFFFF;

		.evaluate-content {
			width: 670upx;
			display: flex;
			justify-content: space-between;

			.user-headSmallImg {
				width: 46upx;
				height: 46upx;
				border-radius: 50%;
			}
		}

		.evaluateImg-box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-left: -9upx;

			.evaluate-Img {
				width: 224upx;
				height: 224upx;
				border-radius: 10upx;
				margin-left: 9upx;
				margin-top: 9upx;
			}
		}

		.goodsDes-box {
			background-color: #F7F7F7;
			padding: 20upx 44upx 20upx 20upx;

			.goodsDes-img {
				width: 180upx;
				height: 180upx;
				border-radius: 10upx;
			}

			.goodsDesText-box {
				width: 416upx;
				margin-left: 30upx;
			}

			.addCommentsBut {
				width: 150upx;
				height: 56upx;
				border: 1upx solid #FF7800;
				border-radius: 28upx;
				font-size: 26upx;
				line-height: 56upx;
				text-align: center;
				color: #FF7800;
			}

			.praise-box {
				.praise-icon {
					width: 36upx;
					height: 36upx;
				}

			}
		}

		.addComments-box {
			border-top: 1upx solid #EEEEEE;
			margin-top: 35upx;
		}
	}

	.butBox {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;

		.addComments-box {
			height: 100upx;
			width: 330upx;
			background-color: #FFFFFF;
			color: #333333;
			border: 2rpx solid #333333;

			.addComments-cion {
				width: 50upx;
				height: 50upx;
			}
		}

		.addPraise-box {
			height: 100upx;
			width: 330upx;
			background: #333333;
			color: #FFFFFF;

			.addPraise-icon {
				width: 50upx;
				height: 50upx;
			}
		}

		.addPraise-box1 {
			height: 100upx;
			width: 690upx;
			background: #333333;
			color: #FFFFFF;

			.addPraise-icon {
				width: 50upx;
				height: 50upx;
			}
		}

	}
}

.linkBox {
	position: absolute;
	bottom: 20upx;
	width: 100%;
}
</style>