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

<template>
	<view class="container">
		<!-- 骨架屏 -->
		<Skeleton el-color="#f1f3f4" bg-color="#fff" :loading="loading" :animation="true"></Skeleton>
		<global-loading />
		<view class="u-skeleton">
			<!-- 我的评论 -->
			<view class="evaluateTitle-box flex-row-plus flex-sp-around u-skeleton-fillet">
				<view class="allEvaluate" :class="{ 'evaluateTitle-on': evaluateTitleFlag == 1 }" @click="evaluateTitleClick(1)">
					全部评价({{ myCommentList.total || 0 }})
				</view>
				<view class="centerLine">|</view>
				<view :class="{ 'evaluateTitle-on': evaluateTitleFlag == 2 }" @click="evaluateTitleClick(2)">
					有图({{ myCommentList.imageTotal || 0 }})
				</view>
			</view>
			<view v-if="evaluateTitleFlag == 1" class="mar-top-20">
				<template>
					<view
						v-for="(item, index) in commentVOList" :key="index" class="evaluate-contentbox u-skeleton-fillet"
						@click="commentDetails(index)"
					>
						<view class="evaluate-content flex-items flex-row flex-sp-between ">
							<view class="flex-items">
								<image v-if="item.headImage" class="user-headSmallImg u-skeleton-circle" :src="item.headImage"></image>
								<image v-else class="user-headSmallImg u-skeleton-circle" src="../../static/images/origin/storeLogo.png">
								</image>
								<view class="skuValue u-skeleton-fillet">
									<label v-if="item.name" class="fs28">{{ item.name }}</label>
									<label v-else class="fs28">匿名</label>
									<view class="fs22 font-color-999 mar-top-10">
										{{ item.value }}
									</view>
								</view>
							</view>
							<view v-if="item.addComment == ''" class="addCommentsBut" @click.stop="addCommentsClick(index)">追加评价</view>
						</view>
						<view class="fs26 pad-topbot-20 u-skeleton-fillet" style="margin-top: 10rpx">{{ item.comment }}</view>
						<view v-if="item.image" class="evaluateImg-box">
							<view v-for="(cItem, index) in commentImgData(item.image)" :key="index">
								<image class="evaluate-Img" :src="cItem"></image>
							</view>
						</view>
						<view v-if="item.addComment" class="addComments-box flex-column-plus">
							<label class="font-color-C5AA7B mar-top-30">用户追评</label>
							<label class="mar-top-20">{{ item.addComment }}</label>
							<view v-if="item.addImage" class="evaluateImg-box mar-top-20">
								<view v-for="(dItem, index) in commentImgData(item.addImage)" :key="index">
									<image class="evaluate-Img" :src="dItem"></image>
								</view>
							</view>
						</view>
						<view class="goodsDes-box u-skeleton-fillet flex-column-plus mar-top-30">
							<view class="flex-row-plus" @click.stop="goGoodsDetails(item.shopId, item.productId, item.skuId)">
								<image class="goodsDes-img default-img" :src="item.productImage"></image>
								<view class="goodsDesText-box">
									<label class="fs26 goodsDes-text">{{ item.productName }}</label>
									<view class="mar-top-70">
										<label>¥ {{ item.productPrice }}</label>
									</view>
								</view>
							</view>
						</view>
						<view class="flex-items flex-row mar-top-30 flex-sp-between">
							<view class="font-color-999 fs22">{{ item.createTime }}</view>
							<view class="praise-box flex-items flex-row">
								<image
									v-if="item.ifLike" class="praise-icon" src="../../static/images/origin/praiseActiveIcon.png"
									@click.stop="zanTap(index, item.commentId, 0)"
								></image>
								<image
									v-else class="praise-icon" src="../../static/images/origin/addPraiseIcon.png"
									@click.stop="zanTap(index, item.commentId, 1)"
								></image>
								<label class="mar-left-10">{{ item.likes }}</label>
							</view>
						</view>
					</view>
				</template>
				<view v-if="evaluateEmpty" class="emptyOrder-box flex-items-plus flex-column">
					<image class="emptyOrder-img" src="../../static/images/origin/bgnull.png"></image>
					<label class="font-color-999 fs26 mar-top-30">你还没有评论哦～</label>
				</view>
			</view>
			<view v-if="evaluateTitleFlag == 2" class="mar-top-20">
				<template>
					<view v-for="(item, index) in commentVOList" :key="index" class="evaluate-contentbox">
						<view class="evaluate-content flex-column" @click="commentDetails(index)">
							<view class="flex-items">
								<image v-if="item.headImage" class="user-headSmallImg" :src="item.headImage"></image>
								<image v-else class="user-headSmallImg" src="../../static/images/origin/storeLogo.png">
								</image>
								<label v-if="item.name" class="fs28 mar-left-20">{{ item.name }}</label>
								<label v-else class="fs28 mar-left-20">匿名</label>
							</view>
							<view class="fs22 font-color-999 mar-top-10">
								{{ item.value }}
							</view>
							<view class="fs26 pad-topbot-20">{{ item.comment }}</view>
							<view v-if="item.image" class="evaluateImg-box">
								<view v-for="(cItem, index) in commentImgData(item.image)" :key="index">
									<image class="evaluate-Img" :src="cItem"></image>
								</view>
							</view>
							<view v-if="item.addComment" class="addComments-box flex-column-plus">
								<label class="font-color-C5AA7B mar-top-30">用户追评</label>
								<label class="mar-top-20">{{ item.addComment }}</label>
								<view v-if="item.addImage" class="evaluateImg-box mar-top-20">
									<view v-for="(dItem, index) in commentImgData(item.addImage)" :key="index">
										<image class="evaluate-Img" :src="dItem"></image>
									</view>
								</view>
							</view>

							<view class="flex-items flex-row mar-top-30 flex-sp-between">
								<view class="font-color-999 fs22">{{ item.createTime }}</view>
								<view class="praise-box flex-items flex-row">
									<image
										v-if="item.ifLike" class="praise-icon" src="../../static/images/origin/praiseActiveIcon.png"
										@click.stop="zanTap(index, item.commentId, 0)"
									></image>
									<image
										v-else class="praise-icon" src="../../static/images/origin/praiseIcon.png"
										@click.stop="zanTap(index, item.commentId, 1)"
									></image>
									<label class="mar-left-10">{{ item.likes }}</label>
								</view>
							</view>
						</view>
					</view>
				</template>
				<view v-if="evaluateEmpty" class="emptyOrder-box flex-items-plus flex-column">
					<image class="emptyOrder-img" src="../../static/images/origin/bgnull.png"></image>
					<label class="font-color-999 fs26 mar-top-30">你还没有评论哦～</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Skeleton from '../../components/Skeleton'
const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
	components: { Skeleton },
	data() {
		return {
			loading: true,
			evaluateTitleFlag: 1,
			myCommentList: [],
			commentVOList: [],
			state: '',
			page: 1, // 当前页
			pageSize: 20, // 每页记录数
			loadingType: 0,
			topLeft: 0,
			evaluateEmpty: false
		}
	},
	onShow() {
		this.commentVOList = [{
			isLoading: true,
			name: '',
			comment: ''
		}, {
			isLoading: true,
			name: '',
			comment: ''
		}, {
			isLoading: true,
			name: '',
			comment: ''
		}, {
			isLoading: true,
			name: '',
			comment: ''
		}, {
			isLoading: true,
			name: '',
			comment: ''
		}]
		this.getMyCommentList()
	},
	// onLoad() {
	// 	this.getMyCommentList()
	// },
	onReachBottom() {
		if (this.loadingType == 1) {
			uni.stopPullDownRefresh()
		} else {
			this.page = this.page + 1
			this.getMyCommentList()
		}
	},
	onBackPress(e) {
		if (e.from === 'navigateBack') {
			return false
		}
		this.back()
		return true
	},
	methods: {
		goGoodsDetails(shopId, productId, skuId) {
			uni.navigateTo({
				url: 'goodsDetails?shopId=' + shopId + '&productId=' + productId + '&skuId=' + skuId
			})
		},
		back() {
			this.$switchTab('/pages/tabbar/user/index')
		},
		commentImgData(imgData) {
			let imgDataResult = []
			imgDataResult = imgData.split(',')
			return imgDataResult
		},
		evaluateTitleClick(type) {
			this.evaluateEmpty = false
			if (type == 1) {
				this.state = ''
			} else {
				this.state = '1'
			}
			this.page = 1
			this.commentVOList = []
			this.evaluateTitleFlag = type
			this.getMyCommentList()
		},
		// 我的评价列表
		getMyCommentList() {
			this.$showLoading()
			this.loading = true
			NET.request(API.MyCommentList, {
				page: this.page,
				pageSize: this.pageSize,
				state: this.state
			}, 'GET').then((res) => {
				uni.hideLoading()
				if (res.data.page.list.length == 0) {
					this.loadingType = 1
					this.page = this.page
				}
				this.myCommentList = res.data
				this.commentVOList = this.commentVOList.concat(res.data.page.list)
				this.commentVOList = this.commentVOList.filter((item) => !item.isLoading)
				if (this.commentVOList.length === 0) {
					this.evaluateEmpty = true
				}
			})
				.catch((res) => {
					uni.hideLoading()
					uni.showToast({
						title: res.data.message,
						duration: 2000,
						icon: 'none'
					})
				})
				.finally(() => {
					this.loading = false
					this.$hideLoading()
				})
		},
		// 点赞
		zanTap(index, likeId, actionType) {
			this.$showLoading()
			NET.request(API.LikeOrUnLikeComment, {
				commentId: likeId,
				ifLike: actionType
			}, 'POST').then((res) => {
				this.commentVOList[index].ifLike = !this.commentVOList[index].ifLike
				this.commentVOList[index].likes = this.commentVOList[index].ifLike ? this.commentVOList[index].likes + 1 : this.commentVOList[index].likes - 1
				// this.commentVOList = []
				// this.page = 1
				// this.getMyCommentList()
			})
				.catch((res) => {
					this.$hideLoading()
					// uni.hideLoading()
				})
		},
		commentDetails(id) {
			uni.setStorageSync('commentVOList', this.commentVOList[id])
			uni.navigateTo({
				url: 'evaluateDetails'
			})
		},
		// 追加评论
		addCommentsClick(id) {
			uni.setStorageSync('addCommentVOList', this.commentVOList[id])
			uni.navigateTo({
				url: 'addEvaluate?type=2'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #FFFFFF;
}

.container {
	.emptyOrder-box {
		margin-top: 70upx;

		.emptyOrder-img {
			margin-top: 45%;
			width: 113upx;
			height: 98upx;
		}
	}

	.evaluateTitle-box {
		color: #CCCCCC;
		margin-top: 26upx;
		border-bottom: 2rpx solid #F3F4F5;

		.evaluateTitle-on {
			padding-bottom: 20upx;
			border-bottom: 4upx solid #C5AA7B;
			color: #333333;
		}
	}

	.evaluate-contentbox {
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 30upx 30upx;
		margin: 10rpx 10rpx;
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #F3F4F5;

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

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

			.skuValue {
				text-align: left;
				padding-left: 30rpx;
			}
		}

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

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

			}
		}

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

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

.addCommentsBut {
	width: 140upx;
	height: 58upx;
	background: #333333;
	font-size: 26upx;
	line-height: 58upx;
	text-align: center;
	color: #C5AA7B;
}

.addCommentsBut1 {
	width: 140upx;
	height: 58upx;
	font-size: 26upx;
	background: #333333;
	line-height: 58upx;
	text-align: center;
}
</style>