Merge pull request '小程序评论列表制作和对接' (#70) from Brunch_DBK into main

order-app/src/api/order.js

@@ -7,4 +7,7 @@ export const getOrderListApi = (parm) => {
 }
 export const cancelOrderApi = (parm) => {
 	return http.post("/wxapi/order/cancelOrder", parm)
+}
+export const commentListApi = (parm) => {
+	return http.get("/wxapi/comment/commentList", parm)
 }

order-app/src/pages/detail/detail.vue

@@ -27,36 +27,32 @@
 			评论
 		</view>
 	</view>
-	<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
+	<swiper :style="{height:swiperHeight+'px'}" class="swiper-box" :current="swiperCurrent"
+		@animationfinish="animationfinish">
 		<swiper-item class="swiper-item">
 			<scroll-view scroll-y style="height: 100%;width: 100%;">
-				<view class="page-box">
+				<view id="content-wrap0" class="page-box">
 					<u-parse :html="content"></u-parse>
 				</view>
 			</scroll-view>
 		</swiper-item>
 		<swiper-item class="swiper-item">
 			<scroll-view scroll-y style="height: 100%;width: 100%;">
-				<view class="page-box">
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
-					我是内容二
+				<view id="content-wrap1" class="page-box">
+					<view class="comment" v-for="(res, index) in commentList" :key="res.id">
+						<view class="left">
+							<image :src="http.baseUrl+res.avatarUrl" mode="aspectFill"></image>
+						</view>
+						<view class="right">
+							<view class="top">
+								<view class="name">{{ res.nickName }}</view>
+							</view>
+							<view class="content">{{ res.commentText }}</view>
+							<view class="bottom">
+								{{ res.createTime }}
+							</view>
+						</view>
+					</view>
 				</view>
 			</scroll-view>
 		</swiper-item>
@@ -81,9 +77,12 @@
 </template>
 
 <script setup>
+	import http from '../../common/http.js'
 	import {
 		computed,
-		ref
+		ref,
+		getCurrentInstance,
+		nextTick
 	} from 'vue';
 	import {
 		onLoad
@@ -91,12 +90,16 @@
 	import {
 		carStore
 	} from '../../store/car.js'
+	import {
+		commentListApi
+	} from '../../api/order.js'
 	import {
 		orderStore
 	} from '../../store/order.js'
 	import {
 		userLogin
 	} from '../../api/user.js'
+	const instance = getCurrentInstance()
 	//获取store
 	const store = carStore()
 	const ostore = orderStore()
@@ -127,8 +130,20 @@
 	const price = ref(0)
 	//单位
 	const goodsUnit = ref('')
+	//购物车的数据类型
+	const carData = ref({
+		flag: true,
+		goodsName: "",
+		goodsUnit: '',
+		goodsId: '',
+		num: 1,
+		specsName: '',
+		price: '',
+		goodsImage: ''
+	})
 	//规格
 	const specs = ref([])
+	const commentList = ref()
 	//规格点击事件
 	const change = (index, item) => {
 		current.value = index
@@ -136,25 +151,40 @@
 		carData.value.price = item.goodsPrice
 		carData.value.specsName = item.specsName
 	}
+	//获取评论数据
+	const getCommentList = async () => {
+		let res = await commentListApi({
+			goodsId: carData.value.goodsId
+		})
+		console.log(res)
+		if (res && res.code == 200) {
+			commentList.value = res.data
+		}
+	}
 	//详情tab
 	const swiperCurrent = ref(0)
 	const dx = ref(0)
 	const tabIndex = ref(0)
-	//购物车的数据类型
-	const carData = ref({
-		flag: true,
-		goodsName: "",
-		goodsUnit: '',
-		goodsId: '',
-		num: 1,
-		specsName: '',
-		price: '',
-		goodsImage: ''
-	})
+
+	const swiperHeight = ref(0)
+	const currentIndex = ref(0)
+	const setSwiperHeight = () => {
+		let element = "#content-wrap" + currentIndex.value;
+		let query = uni.createSelectorQuery().in(instance);
+		query.select(element).boundingClientRect();
+		query.exec((res) => {
+			console.log(res)
+			if (res && res[0]) {
+				swiperHeight.value = res[0].height;
+			}
+		});
+	}
 	// tab栏内容切换
 	const tabClick = (index) => {
 		tabIndex.value = index;
 		swiperCurrent.value = index;
+		currentIndex.value = index;
+		setSwiperHeight()
 	}
 	//加入购物车
 	const addCar = () => {
@@ -192,52 +222,25 @@
 	}
 	onLoad((options) => {
 		userLogin()
-		// const goods = JSON.parse(options.goods)
-		// swipperList.value = goods.goodsImage.split(',')
-		// console.log(goods)
-		// goodsUnit.value = goods.goodsUnit
-		// title.value = goods.goodsName
-		// price.value = goods.specs[0].goodsPrice
-		// specs.value = goods.specs
-		// content.value = goods.goodsDesc
-		// //设置购物车数据
-		// carData.value.goodsId = goods.goodsId
-		// carData.value.goodsName = goods.goodsName
-		// carData.value.goodsUnit = goods.goodsUnit
-		// carData.value.specsName = goods.specs[0].specsName
-		// carData.value.price = goods.specs[0].goodsPrice
-		// carData.value.goodsImage = goods.goodsImage.split(',')[0]
-		// 添加错误处理
-		try {
-			// 先解码，再解析
-			const decodedGoods = decodeURIComponent(options.goods);
-			const goods = JSON.parse(decodedGoods);
-
-			swipperList.value = goods.goodsImage.split(',')
-			console.log(goods)
-			goodsUnit.value = goods.goodsUnit
-			title.value = goods.goodsName
-			price.value = goods.specs[0].goodsPrice
-			specs.value = goods.specs
-			content.value = goods.goodsDesc
-			//设置购物车数据
-			carData.value.goodsId = goods.goodsId
-			carData.value.goodsName = goods.goodsName
-			carData.value.goodsUnit = goods.goodsUnit
-			carData.value.specsName = goods.specs[0].specsName
-			carData.value.price = goods.specs[0].goodsPrice
-			carData.value.goodsImage = goods.goodsImage.split(',')[0]
-		} catch (error) {
-			console.error('解析商品数据失败:', error)
-			uni.showToast({
-				title: '商品信息加载失败',
-				icon: 'none'
-			})
-			// 可以选择返回上一页
-			setTimeout(() => {
-				uni.navigateBack()
-			}, 1500)
-		}
+		const goods = JSON.parse(options.goods)
+		swipperList.value = goods.goodsImage.split(',')
+		console.log(goods)
+		goodsUnit.value = goods.goodsUnit
+		title.value = goods.goodsName
+		price.value = goods.specs[0].goodsPrice
+		specs.value = goods.specs
+		content.value = goods.goodsDesc
+		//设置购物车数据
+		carData.value.goodsId = goods.goodsId
+		carData.value.goodsName = goods.goodsName
+		carData.value.goodsUnit = goods.goodsUnit
+		carData.value.specsName = goods.specs[0].specsName
+		carData.value.price = goods.specs[0].goodsPrice
+		carData.value.goodsImage = goods.goodsImage.split(',')[0]
+		getCommentList()
+		nextTick(() => {
+			setSwiperHeight()
+		})
 	})
 </script>
 
@@ -400,4 +403,97 @@
 	.page-box {
 		padding: 20rpx;
 	}
+
+	.comment {
+		display: flex;
+		padding: 30rpx;
+
+		.left {
+			image {
+				width: 64rpx;
+				height: 64rpx;
+				border-radius: 50%;
+				background-color: #f2f2f2;
+			}
+		}
+
+		.right {
+			flex: 1;
+			padding-left: 20rpx;
+			font-size: 30rpx;
+
+			.top {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 10rpx;
+
+				.name {
+					color: #5677fc;
+				}
+
+				.like {
+					display: flex;
+					align-items: center;
+					color: #9a9a9a;
+					font-size: 26rpx;
+
+					.num {
+						margin-right: 4rpx;
+						color: #9a9a9a;
+					}
+				}
+
+				.highlight {
+					color: #5677fc;
+
+					.num {
+						color: #5677fc;
+					}
+				}
+			}
+
+			.content {
+				margin-bottom: 10rpx;
+			}
+
+			.reply-box {
+				background-color: rgb(242, 242, 242);
+				border-radius: 12rpx;
+
+				.item {
+					padding: 20rpx;
+					border-bottom: solid 2rpx $u-border-color;
+
+					.username {
+						font-size: 24rpx;
+						color: #999999;
+					}
+				}
+
+				.all-reply {
+					padding: 20rpx;
+					display: flex;
+					color: #5677fc;
+					align-items: center;
+
+					.more {
+						margin-left: 6rpx;
+					}
+				}
+			}
+
+			.bottom {
+				margin-top: 20rpx;
+				display: flex;
+				font-size: 24rpx;
+				color: #9a9a9a;
+
+				.reply {
+					color: #5677fc;
+					margin-left: 10rpx;
+				}
+			}
+		}
+	}
 </style>