wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 19:53:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

uniapp【优化】：商品详情评论显示图片

Browse Source
This commit is contained in:
花城
2024-12-17 10:40:21 +08:00
parent 74b43485c9
commit ae16e0e26e
4 changed files with 168 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CoreCms.Net.Uni-App/CoreShop/core/models/goods.ts
View File

@@ -74,7 +74,7 @@ export interface GoodsPictureListType {
goodsId ?: number; goodsId ?: number;
id ?: number; id ?: number;
images ?: string | null; images ?: string | null;
imagesArr ?: Array<string> | string | null; imagesArr ?: Array<string>;
isDisplay ?: boolean; isDisplay ?: boolean;
mobile ?: string; mobile ?: string;
nickName ?: string; nickName ?: string;

13
CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-evaluate/goods-detail-evaluate.scss
View File

@@ -47,6 +47,19 @@
font-size: 27rpx; font-size: 27rpx;
color: #aaaaaa; 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 { .sellerContent {
font-size: 27rpx; font-size: 27rpx;
margin-top: 15rpx; margin-top: 15rpx;

18
CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-evaluate/goods-detail-evaluate.vue
View File

@@ -16,9 +16,13 @@
<view class="content">{{ item.contentBody }}</view> <view class="content">{{ item.contentBody }}</view>
<view class="time">{{ item.createTime }} </view> <view class="time">{{ item.createTime }} </view>
<view class="addon">{{ item.addon }}</view> <view class="addon">{{ item.addon }}</view>
<view class="sellerContent"> <view class="img-box" v-if="item.imagesArr?.length > 0">
商家回复：{{item.sellerContent}} <image v-for="cell,idx in item.imagesArr" @click="handlePreviewImg(item.imagesArr,idx)" :key="cell" class="img"
</view> :src="cell" mode="aspectFill"></image>
</view>
<view class="sellerContent" v-if="item.sellerContent">
商家回复：{{item.sellerContent}}
</view>
</view> </view>
</view> </view>
<view v-else class="p-b-20 p-l-30"> <view v-else class="p-b-20 p-l-30">
@@ -44,6 +48,14 @@
const hanldeClickViewMore = () => { const hanldeClickViewMore = () => {
handleRouteNavigateTo(`/pages/goods/comment?id=${props.id}`); handleRouteNavigateTo(`/pages/goods/comment?id=${props.id}`);
} }
/** 预览图片 */
const handlePreviewImg = (urls : Array<string>,current:number) => {
uni.previewImage({
urls,
current,
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

252
CoreCms.Net.Uni-App/CoreShop/pages/goods/comment.vue
View File

@@ -1,133 +1,159 @@
<template> <template>
<coreshop-page title="评论列表" mode="left"> <coreshop-page title="评论列表" mode="left">
<view class="p-25"> <view class="p-25">
<view class="evaluate-box" v-if="state.commentsList.length > 0"> <view class="evaluate-box" v-if="state.commentsList.length > 0">
<view class="item" v-for="item in state.commentsList" :key="item.id"> <view class="item" v-for="item in state.commentsList" :key="item.id">
<view class="name-box"> <view class="name-box">
<view class="avatar"> <view class="avatar">
<image class="img" :src="item.avatarImage"></image> <image class="img" :src="item.avatarImage"></image>
<view class="name">{{ item.nickName }}</view> <view class="name">{{ item.nickName }}</view>
</view> </view>
<uv-rate :count="5" v-model="item.score" readonly activeColor="#D33123"></uv-rate> <uv-rate :count="5" v-model="item.score" readonly activeColor="#D33123"></uv-rate>
</view> </view>
<view class="content">{{ item.contentBody }}</view> <view class="content">{{ item.contentBody }}</view>
<view class="time">{{ item.createTime }} </view> <view class="time">{{ item.createTime }} </view>
<view class="addon">{{ item.addon }}</view> <view class="addon">{{ item.addon }}</view>
<view class="sellerContent"> <view class="img-box" v-if="item.imagesArr?.length > 0">
商家回复：{{item.sellerContent}} <image v-for="cell,idx in item.imagesArr" @click="handlePreviewImg(item.imagesArr,idx)" :key="cell" class="img"
</view> :src="cell" mode="aspectFill"></image>
</view> </view>
<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view> <view class="sellerContent" v-if="item.sellerContent">
</view> 商家回复：{{item.sellerContent}}
<view v-else class="layout-empty-box"> </view>
<coreshop-empty :mode="EmptyEnum.data" text="暂无评价"></coreshop-empty> </view>
</view> <view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
</view> </view>
</coreshop-page> <view v-else class="layout-empty-box">
<coreshop-empty :mode="EmptyEnum.data" text="暂无评价"></coreshop-empty>
</view>
</view>
</coreshop-page>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { reactive } from 'vue'; import { reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'; import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import type { Response, GoodsPictureType } from '@/core/models'; import type { Response, GoodsPictureType } from '@/core/models';
import { queryGoodsComment } from '@/core/api'; import { queryGoodsComment } from '@/core/api';
import { EmptyEnum } from '@/core/enum'; import { EmptyEnum } from '@/core/enum';
interface QueryParams { interface QueryParams {
id : number; id : number;
} }
const state = reactive<{ const state = reactive<{
commentsList : Array<any>; commentsList : Array<any>;
totalPages : number; totalPages : number;
page : number; page : number;
limit : number; limit : number;
id : number; id : number;
}>({ }>({
commentsList: [], commentsList: [],
totalPages: 1, totalPages: 1,
page: 1, page: 1,
limit: 10, limit: 10,
id: 0, id: 0,
}) })
onLoad((query : QueryParams) => { onLoad((query : QueryParams) => {
state.id = query.id; state.id = query.id;
getGoodsComment() getGoodsComment()
}); });
onReachBottom(() => { onReachBottom(() => {
if (state.totalPages > state.page) { if (state.totalPages > state.page) {
state.page++; state.page++;
getGoodsComment(); getGoodsComment();
} }
}) })
/** 获取商品评价 */ /** 获取商品评价 */
const getGoodsComment = async () => { const getGoodsComment = async () => {
const goodsComment : Response<GoodsPictureType> = await queryGoodsComment({ const goodsComment : Response<GoodsPictureType> = await queryGoodsComment({
id: state.id, id: state.id,
limit: 10, limit: 10,
page: 1 page: 1
}); });
if (goodsComment.status) { if (goodsComment.status) {
state.totalPages = goodsComment.data.totalPages; state.totalPages = goodsComment.data.totalPages;
state.commentsList = state.commentsList.concat(goodsComment?.data?.list); state.commentsList = state.commentsList.concat(goodsComment?.data?.list);
} }
} }
/** 预览图片 */
const handlePreviewImg = (urls : Array<string>,current:number) => {
uni.previewImage({
urls,
current,
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.evaluate-box { .evaluate-box {
.item { .item {
padding: 20rpx; padding: 20rpx;
background-color: #fff; background-color: #fff;
margin-bottom: 20rpx; margin-bottom: 20rpx;
border-radius: 15rpx; border-radius: 15rpx;
.name-box { .name-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.avatar { .avatar {
display: flex; display: flex;
align-items: center; align-items: center;
.img { .img {
display: block; display: block;
width: 50rpx; width: 50rpx;
height: 50rpx; height: 50rpx;
border-radius: 50%; border-radius: 50%;
} }
.name { .name {
font-size: 27rpx; font-size: 27rpx;
margin-left: 10rpx; margin-left: 10rpx;
} }
} }
} }
.content { .content {
font-size: 27rpx; font-size: 27rpx;
padding: 10rpx 0; padding: 10rpx 0;
} }
.time, .time,
.addon { .addon {
margin-bottom: 10rpx; margin-bottom: 10rpx;
font-size: 27rpx; font-size: 27rpx;
color: #aaaaaa; color: #aaaaaa;
} }
.sellerContent { .img-box {
font-size: 27rpx; display: flex;
margin-top: 15rpx; align-items: center;
} flex-wrap: wrap;
}
}
.no-evaluate { .img {
font-size: 27rpx; width: 100rpx;
color: #aaa; 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> </style>