From ae16e0e26eecccb1c2d88375ab461b0d69b161ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E5=9F=8E?=
 <141405260+17521612761@users.noreply.github.com>
Date: Tue, 17 Dec 2024 10:40:21 +0800
Subject: [PATCH] =?UTF-8?q?uniapp=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CoreShop/core/models/goods.ts             |   2 +-
 .../goods-detail-evaluate.scss                |  13 +
 .../goods-detail-evaluate.vue                 |  18 +-
 .../CoreShop/pages/goods/comment.vue          | 252 ++++++++++--------
 4 files changed, 168 insertions(+), 117 deletions(-)

diff --git a/CoreCms.Net.Uni-App/CoreShop/core/models/goods.ts b/CoreCms.Net.Uni-App/CoreShop/core/models/goods.ts
index 398ee6df..f821149a 100644
--- a/CoreCms.Net.Uni-App/CoreShop/core/models/goods.ts
+++ b/CoreCms.Net.Uni-App/CoreShop/core/models/goods.ts
@@ -74,7 +74,7 @@ export interface GoodsPictureListType {
 	goodsId ?: number;
 	id ?: number;
 	images ?: string | null;
-	imagesArr ?: Array<string> | string | null;
+	imagesArr ?: Array<string>;
 	isDisplay ?: boolean;
 	mobile ?: string;
 	nickName ?: string;
diff --git a/CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-evaluate/goods-detail-evaluate.scss b/CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-evaluate/goods-detail-evaluate.scss
index 68683039..21d7050c 100644
--- a/CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-evaluate/goods-detail-evaluate.scss
+++ b/CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-evaluate/goods-detail-evaluate.scss
@@ -47,6 +47,19 @@
 				font-size: 27rpx;
 				color: #aaaaaa;
 			}
+            .img-box {
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+            
+                .img {
+                    width: 100rpx;
+                    height: 100rpx;
+                    border-radius: 10rpx;
+                    margin-right: 10rpx;
+                    margin-bottom: 10rpx;
+                }
+            }
 			.sellerContent {
 				font-size: 27rpx;
 				margin-top: 15rpx;
diff --git a/CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-evaluate/goods-detail-evaluate.vue b/CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-evaluate/goods-detail-evaluate.vue
index 20d40073..957f1c39 100644
--- a/CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-evaluate/goods-detail-evaluate.vue
+++ b/CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-evaluate/goods-detail-evaluate.vue
@@ -16,9 +16,13 @@
 				<view class="content">{{ item.contentBody }}</view>
 				<view class="time">{{ item.createTime }} </view>
 				<view class="addon">{{ item.addon }}</view>
-				<view class="sellerContent">
-					商家回复：{{item.sellerContent}}
-				</view>
+                <view class="img-box" v-if="item.imagesArr?.length > 0">
+                    <image v-for="cell,idx in item.imagesArr" @click="handlePreviewImg(item.imagesArr,idx)" :key="cell" class="img"
+                        :src="cell" mode="aspectFill"></image>
+                </view>
+                <view class="sellerContent" v-if="item.sellerContent">
+                    商家回复：{{item.sellerContent}}
+                </view>
 			</view>
 		</view>
 		<view v-else class="p-b-20 p-l-30">
@@ -44,6 +48,14 @@
 	const hanldeClickViewMore = () => {
 		handleRouteNavigateTo(`/pages/goods/comment?id=${props.id}`);
 	}
+    
+    /** 预览图片 */
+    const handlePreviewImg = (urls : Array<string>,current:number) => {
+        uni.previewImage({
+            urls,
+            current,
+        });
+    }
 </script>
 
 <style lang="scss" scoped>
diff --git a/CoreCms.Net.Uni-App/CoreShop/pages/goods/comment.vue b/CoreCms.Net.Uni-App/CoreShop/pages/goods/comment.vue
index f208446a..c4291af8 100644
--- a/CoreCms.Net.Uni-App/CoreShop/pages/goods/comment.vue
+++ b/CoreCms.Net.Uni-App/CoreShop/pages/goods/comment.vue
@@ -1,133 +1,159 @@
 <template>
-	<coreshop-page title="评论列表" mode="left">
-		<view class="p-25">
-			<view class="evaluate-box" v-if="state.commentsList.length > 0">
-				<view class="item" v-for="item in state.commentsList" :key="item.id">
-					<view class="name-box">
-						<view class="avatar">
-							<image class="img" :src="item.avatarImage"></image>
-							<view class="name">{{ item.nickName }}</view>
-						</view>
-						<uv-rate :count="5" v-model="item.score" readonly activeColor="#D33123"></uv-rate>
-					</view>
-					<view class="content">{{ item.contentBody }}</view>
-					<view class="time">{{ item.createTime }} </view>
-					<view class="addon">{{ item.addon }}</view>
-					<view class="sellerContent">
-						商家回复：{{item.sellerContent}}
-					</view>
-				</view>
-				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
-			</view>
-			<view v-else class="layout-empty-box">
-				<coreshop-empty :mode="EmptyEnum.data" text="暂无评价"></coreshop-empty>
-			</view>
-		</view>
-	</coreshop-page>
+    <coreshop-page title="评论列表" mode="left">
+        <view class="p-25">
+            <view class="evaluate-box" v-if="state.commentsList.length > 0">
+                <view class="item" v-for="item in state.commentsList" :key="item.id">
+                    <view class="name-box">
+                        <view class="avatar">
+                            <image class="img" :src="item.avatarImage"></image>
+                            <view class="name">{{ item.nickName }}</view>
+                        </view>
+                        <uv-rate :count="5" v-model="item.score" readonly activeColor="#D33123"></uv-rate>
+                    </view>
+                    <view class="content">{{ item.contentBody }}</view>
+                    <view class="time">{{ item.createTime }} </view>
+                    <view class="addon">{{ item.addon }}</view>
+                    <view class="img-box" v-if="item.imagesArr?.length > 0">
+                        <image v-for="cell,idx in item.imagesArr" @click="handlePreviewImg(item.imagesArr,idx)" :key="cell" class="img"
+                            :src="cell" mode="aspectFill"></image>
+                    </view>
+                    <view class="sellerContent" v-if="item.sellerContent">
+                        商家回复：{{item.sellerContent}}
+                    </view>
+                </view>
+                <view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
+            </view>
+            <view v-else class="layout-empty-box">
+                <coreshop-empty :mode="EmptyEnum.data" text="暂无评价"></coreshop-empty>
+            </view>
+        </view>
+    </coreshop-page>
 </template>
 <script setup lang="ts">
-	import { reactive } from 'vue';
-	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
-	import type { Response, GoodsPictureType } from '@/core/models';
-	import { queryGoodsComment } from '@/core/api';
-	import { EmptyEnum } from '@/core/enum';
+    import { reactive } from 'vue';
+    import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+    import type { Response, GoodsPictureType } from '@/core/models';
+    import { queryGoodsComment } from '@/core/api';
+    import { EmptyEnum } from '@/core/enum';
 
-	interface QueryParams {
-		id : number;
-	}
+    interface QueryParams {
+        id : number;
+    }
 
-	const state = reactive<{
-		commentsList : Array<any>;
-		totalPages : number;
-		page : number;
-		limit : number;
-		id : number;
-	}>({
-		commentsList: [],
-		totalPages: 1,
-		page: 1,
-		limit: 10,
-		id: 0,
-	})
+    const state = reactive<{
+        commentsList : Array<any>;
+        totalPages : number;
+        page : number;
+        limit : number;
+        id : number;
+    }>({
+        commentsList: [],
+        totalPages: 1,
+        page: 1,
+        limit: 10,
+        id: 0,
+    })
 
-	onLoad((query : QueryParams) => {
-		state.id = query.id;
-		getGoodsComment()
-	});
+    onLoad((query : QueryParams) => {
+        state.id = query.id;
+        getGoodsComment()
+    });
 
-	onReachBottom(() => {
-		if (state.totalPages > state.page) {
-			state.page++;
-			getGoodsComment();
-		}
-	})
+    onReachBottom(() => {
+        if (state.totalPages > state.page) {
+            state.page++;
+            getGoodsComment();
+        }
+    })
 
-	/** 获取商品评价 */
-	const getGoodsComment = async () => {
-		const goodsComment : Response<GoodsPictureType> = await queryGoodsComment({
-			id: state.id,
-			limit: 10,
-			page: 1
-		});
-		if (goodsComment.status) {
-			state.totalPages = goodsComment.data.totalPages;
-			state.commentsList = state.commentsList.concat(goodsComment?.data?.list);
-		}
-	}
+    /** 获取商品评价 */
+    const getGoodsComment = async () => {
+        const goodsComment : Response<GoodsPictureType> = await queryGoodsComment({
+            id: state.id,
+            limit: 10,
+            page: 1
+        });
+        if (goodsComment.status) {
+            state.totalPages = goodsComment.data.totalPages;
+            state.commentsList = state.commentsList.concat(goodsComment?.data?.list);
+        }
+    }
+
+    /** 预览图片 */
+    const handlePreviewImg = (urls : Array<string>,current:number) => {
+        uni.previewImage({
+            urls,
+            current,
+        });
+    }
 </script>
 <style lang="scss" scoped>
-	.evaluate-box {
-		.item {
-			padding: 20rpx;
-			background-color: #fff;
-			margin-bottom: 20rpx;
-			border-radius: 15rpx;
+    .evaluate-box {
+        .item {
+            padding: 20rpx;
+            background-color: #fff;
+            margin-bottom: 20rpx;
+            border-radius: 15rpx;
 
-			.name-box {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
+            .name-box {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
 
-				.avatar {
-					display: flex;
-					align-items: center;
+                .avatar {
+                    display: flex;
+                    align-items: center;
 
-					.img {
-						display: block;
-						width: 50rpx;
-						height: 50rpx;
-						border-radius: 50%;
-					}
+                    .img {
+                        display: block;
+                        width: 50rpx;
+                        height: 50rpx;
+                        border-radius: 50%;
+                    }
 
-					.name {
-						font-size: 27rpx;
-						margin-left: 10rpx;
-					}
-				}
+                    .name {
+                        font-size: 27rpx;
+                        margin-left: 10rpx;
+                    }
+                }
 
-			}
+            }
 
-			.content {
-				font-size: 27rpx;
-				padding: 10rpx 0;
-			}
+            .content {
+                font-size: 27rpx;
+                padding: 10rpx 0;
+            }
 
-			.time,
-			.addon {
-				margin-bottom: 10rpx;
-				font-size: 27rpx;
-				color: #aaaaaa;
-			}
+            .time,
+            .addon {
+                margin-bottom: 10rpx;
+                font-size: 27rpx;
+                color: #aaaaaa;
+            }
 
-			.sellerContent {
-				font-size: 27rpx;
-				margin-top: 15rpx;
-			}
-		}
-	}
+            .img-box {
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
 
-	.no-evaluate {
-		font-size: 27rpx;
-		color: #aaa;
-	}
+                .img {
+                    width: 100rpx;
+                    height: 100rpx;
+                    border-radius: 10rpx;
+                    margin-right: 10rpx;
+                    margin-bottom: 10rpx;
+                }
+            }
+
+            .sellerContent {
+                font-size: 27rpx;
+                margin-top: 15rpx;
+            }
+        }
+    }
+
+    .no-evaluate {
+        font-size: 27rpx;
+        color: #aaa;
+    }
 </style>
\ No newline at end of file