jiuyiUniapp/jiuyi2/pages/shop/commodity/evaluate.vue

<script setup>
	// 商品评价列表
	import {
		ref,
		reactive,
		nextTick,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad,
		onReady,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	// 
	import util from '@/common/js/util.js'
	// 接口地址
	import api from '@/api/index.js'
	const {
		proxy
	} = getCurrentInstance()
	const {
		userinfo
	} = useStore().state
	// 
	const typeList = ref([{
		text: '全部',
		param: {},
	}, {
		text: '最新',
		param: {
			isNew: 1,
		},
	}, {
		text: '有图',
		param: {
			isImage: 1,
		},
	}])
	// 当前选中
	const typeIndex = ref(0)
	// id
	const id = ref('')
	// 评论列表
	const comment = reactive({
		pageNum: 1,
		pageSize: 5,
		list: [],
	})

	onLoad((option) => {
		if (option.id) id.value = option.id

		// 获取商品评论
		getProComment()
	})

	onPullDownRefresh(() => {
		refreshList()
	})

	onReachBottom(() => {
		getMoreList()
	})

	// 重载
	function refreshList() {
		comment.pageNum = 1
		getProComment()
	}

	// 获取更多
	function getMoreList() {
		if (comment.total <= comment.list.length) return
		comment.pageNum++
		getProComment()
	}

	// 获取商品评论
	function getProComment() {
		api.shop.getProComment({
			query: {
				// 产品id
				productId: id.value,
				pageNum: comment.pageNum,
				pageSize: comment.pageSize,
				...typeList.value[typeIndex.value].param,
			}
		}).then(rs => {
			if (rs.code == 200) {
				// 页码
				if (comment.pageNum == 1) comment.list.length = 0
				// 列表
				comment.list.push(...rs.rows.map(item => {
					if(item.imageUrls) item.imageUrls = item.imageUrls.split(',')
					return item
				}))
				// 总数
				comment.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		}).finally(() => {
			uni.stopPullDownRefresh()
		})
	}

	/**
	 * 当前评论状态
	 * @param {Object} index
	 */
	function handleTypeIndex(index) {
		if (typeIndex.value === index) return
		typeIndex.value = index
		// 重载列表
		refreshList()
	}

	// 打开弹窗
	function open() {
		proxy.$refs.popup.open();
	}

	// 预览图片
	function preview(urls, current) {
		uni.previewImage({
			urls,
			current,
		})
	}
</script>

<template>
	<view class="app">
		<view class="typeList df ptb20 pl20 bfff f30">
			<view class="item df fdr aic mr20 ptb5 plr20 br4" :class="{'active': index === typeIndex}"
				v-for="(item, index) in typeList" :key="index" @click="handleTypeIndex(index)">
				<!-- <image class="icon mr10 wh30" v-if="item.icon" :src="item.icon" /> -->
				<text class="">{{ item.text }}</text>
			</view>
		</view>

		<view class="listBox f28">
			<view class="nomore mtb30" v-if="!comment.list[0]">暂无评论~</view>

			<view class="list df fdc mlr30" v-for="(item, index) in comment.list" :key="index">
				<!-- 评论的用户 -->
				<view class="userinfo rows mtb20 ">
					<image class="wh80 cir" :src="item.avatar" mode="aspectFill" />
					<view class="name f1 mlr20 c333 f34">{{ item.nickname }}</view>
					<!-- <uni-icons type="more-filled" color="#999" /> -->
				</view>

				<view class="content ml30 plr20 bfff br20">
					<!-- 款式日期 -->
					<view class="rows mtb20 c999">
						<view class="">款式：{{ item.sku }}</view>
						<view class="">{{ item.commentTime }}</view>
					</view>

					<!-- 评论内容 -->
					<view class="content mtb20 f30">{{item.content}}</view>

					<!-- 图片 -->
					<view class="images mtb20" v-if="item.imageUrls">
						<view class="item pr" @click="preview(item.imageUrls,secIndex)"
							v-for="(image, secIndex) in item.imageUrls" :key="secIndex">
							<image class="img pa br10" :src="image" mode="aspectFill" />
						</view>
					</view>

					<!-- 菜单 -->
					<view class="fn df jcr aic mtb20 c999" v-if="0">
						<!-- 点赞 -->
						<view class="ec-item df aic mr20">
							<uni-icons type="hand-up-filled" color="#FF0000" v-if="item.isLike == 1" />
							<uni-icons type="hand-up" color="#999" v-else />
							<view class="ml10">0</view>
						</view>

						<!-- 留言数 -->
						<view class="ec-item df aic mr20">
							<uni-icons type="chat" color="#999" />
							<view class="ml10">{{item.child.length}}</view>
						</view>
					</view>

					<!-- 子评论 -->
					<view class="child oh mtb20 plr20 br10">
						<view class="msg mtb10" v-for="(secItem,secIndex) in item.child" :key="secIndex">
							<text class="c666">{{secItem.nickname}}：</text>
							<text class="c333 ml5">{{secItem.content}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="nomore mtb30" v-if="comment.list[0]">暂无更多评论~</view>
		</view>
	</view>
</template>

<style lang="scss">
	.typeList {
		.item {
			color: #666;
			background-color: #FFF6EB;
			transition: .3s;

			&.active {
				color: #fff;
				background-color: #FF9B27;
			}
		}
	}

	// 图片
	.images {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 10rpx;

		.item {
			padding-bottom: 100%;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}


	// 子评论
	.child {
		background-color: #F4F4F4;
	}
</style>