mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 19:03:27 +08:00
Merge branch 'dev' into 'master'
uniapp【优化】：商品详情评论显示图片 See merge request jianweie/coreshoppro!108
This commit is contained in:
花城
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user