yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【商品详情】 

1. 接入评论逻辑
pull/1/MERGE
YunaiV 2023-06-10 00:17:07 +08:00
parent 8fbdec3738
commit 33311ae19c
3 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
api/product/comment.js Normal file
View File

@ -0,0 +1,15 @@
import request from "@/utils/request.js";
// 获得商品的评价统计
export function getCommentStatistics(spuId) {
return request.get('app-api/product/comment/statistics', {
spuId
});
}
// 获得最近的 n 条商品评价
export function getCommentList(spuId) {
return request.get('app-api/product/comment/list', {
spuId
});
}

61
components/userEvaluation/index.vue
View File

@ -1,39 +1,37 @@
<template> <template>
<view class="evaluateWtapper" v-if="reply.length > 0"> <view class="evaluateWtapper" v-if="reply.length > 0">
<view class="evaluateItem" v-for="(item, indexw) in reply" :key="indexw"> <view class="evaluateItem" v-for="(item, index) in reply" :key="index">
<view class="pic-text acea-row"> <view class="pic-text acea-row">
<view class="pictrue"> <view class="pictrue">
<image :src="item.avatar"></image> <image :src="item.userAvatar"></image>
</view> </view>
<view class="content"> <view class="content">
<view> <view>
<view class="acea-row row-between"> <view class="acea-row row-between">
<view class="acea-row"> <view class="acea-row">
<view class="name line1">{{ item.nickname }}</view> <view class="name line1">{{ item.userNickname }}</view>
<view class="start" :class="'star' + item.score"></view> <view class="start" :class="'star' + item.scores"></view>
</view> </view>
<view class="time">{{ item.createTime }}</view> <view class="time">{{ formatDate(item.createTime) }}</view>
</view> </view>
<view class="sku">规格：{{ item.sku?item.sku:'无' }}</view> <view class="sku">规格：{{ item.sku?item.sku:'无' }}</view>
</view> </view>
<view class="evaluate-infor">{{ item.content }}</view>
<view class="evaluate-infor">{{ item.comment }}</view> <view class="imgList acea-row" v-if="item.picUrls && item.picUrls.length > 0">
<view class="imgList acea-row" v-if="item.pics && item.pics.length && item.pics[0]"> <view class="pictrue" v-for="(picUrl, indexn) in item.picUrls" :key="indexn">
<view class="pictrue" v-for="(itemn, indexn) in item.pics" :key="indexn"> <image :src="picUrl" class="image" @click='getpreviewImage(index, indexn)'></image>
<image :src="itemn" class="image" @click='getpreviewImage(indexw, indexn)'></image>
</view> </view>
</view> </view>
<view class="reply" v-if="item.merchantReplyContent"> <view class="reply" v-if="item.replyContent">
<text class="font-color">店小二</text>：{{ item.merchantReplyContent }} <text class="font-color">店小二</text>：{{ item.replyContent }}
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import dayjs from "@/plugin/dayjs/dayjs.min.js";
export default { export default {
props: { props: {
reply: { reply: {
@ -47,10 +45,13 @@
methods: { methods: {
getpreviewImage: function(indexw, indexn) { getpreviewImage: function(indexw, indexn) {
uni.previewImage({ uni.previewImage({
urls: this.reply[indexw].pics, urls: this.reply[indexw].picUrls,
current: this.reply[indexw].pics[indexn] current: this.reply[indexw].picUrls[indexn]
}); });
} },
formatDate: function(date) {
return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
}
} }
} }
</script> </script>
@ -61,11 +62,11 @@
border-bottom-left-radius: 14rpx; border-bottom-left-radius: 14rpx;
border-bottom-right-radius: 14rpx; border-bottom-right-radius: 14rpx;
} }
.evaluateWtapper .evaluateItem~.evaluateItem { .evaluateWtapper .evaluateItem~.evaluateItem {
border-top: 1rpx solid #f5f5f5; border-top: 1rpx solid #f5f5f5;
} }
.evaluateWtapper .evaluateItem .pic-text { .evaluateWtapper .evaluateItem .pic-text {
font-size: 26rpx; font-size: 26rpx;
color: #282828; color: #282828;
@ -74,26 +75,26 @@
margin-left: 20rpx; margin-left: 20rpx;
} }
} }
.evaluateWtapper .evaluateItem .pic-text .pictrue { .evaluateWtapper .evaluateItem .pic-text .pictrue {
width: 62rpx; width: 62rpx;
height: 62rpx; height: 62rpx;
} }
.evaluateWtapper .evaluateItem .pic-text .pictrue image { .evaluateWtapper .evaluateItem .pic-text .pictrue image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
} }
.evaluateWtapper .evaluateItem .pic-text .name { .evaluateWtapper .evaluateItem .pic-text .name {
max-width: 450rpx; max-width: 450rpx;
} }
.evaluateWtapper .evaluateItem .time { .evaluateWtapper .evaluateItem .time {
font-size: 24rpx; font-size: 24rpx;
color: #999999; color: #999999;
} }
.sku{ .sku{
font-size: 24rpx; font-size: 24rpx;
@ -105,12 +106,12 @@
color: #333; color: #333;
margin-bottom: 14rpx; margin-bottom: 14rpx;
} }
.evaluateWtapper .evaluateItem .imgList {/* .evaluateWtapper .evaluateItem .imgList {/*
padding: 0 24rpx; padding: 0 24rpx;
margin-top: 16rpx; */ margin-top: 16rpx; */
} }
.evaluateWtapper .evaluateItem .imgList .pictrue { .evaluateWtapper .evaluateItem .imgList .pictrue {
width: 102rpx; width: 102rpx;
height: 102rpx; height: 102rpx;
@ -119,14 +120,14 @@
margin-bottom: 16rpx; margin-bottom: 16rpx;
/* margin: 0 0 15rpx 15rpx; */ /* margin: 0 0 15rpx 15rpx; */
} }
.evaluateWtapper .evaluateItem .imgList .pictrue image { .evaluateWtapper .evaluateItem .imgList .pictrue image {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #f7f7f7; background-color: #f7f7f7;
border-radius: 14rpx; border-radius: 14rpx;
} }
.evaluateWtapper .evaluateItem .reply { .evaluateWtapper .evaluateItem .reply {
font-size: 26rpx; font-size: 26rpx;
color: #454545; color: #454545;
@ -136,7 +137,7 @@
padding: 20rpx; padding: 20rpx;
position: relative; position: relative;
} }
.evaluateWtapper .evaluateItem .reply::before { .evaluateWtapper .evaluateItem .reply::before {
content: ""; content: "";
width: 0; width: 0;

54
pages/goods_details/index.vue
View File

@ -43,12 +43,6 @@
销量:{{ spu.salesCount}} {{ spu.unitName }} 销量:{{ spu.salesCount}} {{ spu.unitName }}
</view> </view>
</view> </view>
<!-- <view class='coupon acea-row row-between-wrapper' v-if="productInfo.give_integral > 0">
<view class='hide line1 acea-row'>
赠积分：
<view class='activity'>赠送 {{productInfo.give_integral}} 积分</view>
</view>
</view> -->
<!-- 优惠劵 TODO 芋艿：待接入 --> <!-- 优惠劵 TODO 芋艿：待接入 -->
<view v-if="coupon.list.length > 0 && type==='normal'" <view v-if="coupon.list.length > 0 && type==='normal'"
class='coupon acea-row row-between-wrapper' @click='couponTap'> class='coupon acea-row row-between-wrapper' @click='couponTap'>
@ -94,14 +88,13 @@
</view> </view>
<view class='iconfont icon-jiantou'></view> <view class='iconfont icon-jiantou'></view>
</view> </view>
<!-- 评论 TODO 芋艿：待完成 --> <!-- 评论 -->
<view class='userEvaluation' id="past1"> <view class='userEvaluation' id="past1">
<view class='title acea-row row-between-wrapper' <view class='title acea-row row-between-wrapper'
:style="replyCount==0?'border-bottom-left-radius:14rpx;border-bottom-right-radius:14rpx;':''"> :style="replyCount==0?'border-bottom-left-radius:14rpx;border-bottom-right-radius:14rpx;':''">
<view>用户评价<i>({{replyCount}})</i></view> <view>用户评价<i>({{replyCount}})</i></view>
<navigator class='praise' hover-class='none' <navigator class='praise' hover-class='none' :url='"/pages/users/goods_comment_list/index?productId="+id'>
:url='"/pages/users/goods_comment_list/index?productId="+id'> <i>好评</i>&nbsp;<text class='font-color'> {{ replyChance || 0 }}%</text>
<i>好评</i>&nbsp;<text class='font-color'>{{replyChance || 0}}%</text>
<text class='iconfont icon-jiantou'></text> <text class='iconfont icon-jiantou'></text>
</navigator> </navigator>
</view> </view>
@ -173,7 +166,7 @@
<!-- #endif --> <!-- #endif -->
<!-- 场景：普通订单 --> <!-- 场景：普通订单 -->
<block v-if="type === 'normal'"> <block v-if="type === 'normal'">
<!-- 收藏 TODO 芋艿：收藏逻辑 --> <!-- 收藏 -->
<view @click="setCollect" class='item'> <view @click="setCollect" class='item'>
<view class='iconfont icon-shoucang1' v-if="userCollect"></view> <view class='iconfont icon-shoucang1' v-if="userCollect"></view>
<view class='iconfont icon-shoucang' v-else></view> <view class='iconfont icon-shoucang' v-else></view>
@ -285,11 +278,7 @@
<script> <script>
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js' import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
import { import {
collectAdd, getProductGood
collectDel,
getReplyConfig,
getProductGood,
getReplyProduct
} from '@/api/store.js'; } from '@/api/store.js';
import { spread } from "@/api/user"; import { spread } from "@/api/user";
import { import {
@ -307,13 +296,14 @@
import parser from "@/components/jyf-parser/jyf-parser"; import parser from "@/components/jyf-parser/jyf-parser";
import * as ProductSpuApi from '@/api/product/spu.js'; import * as ProductSpuApi from '@/api/product/spu.js';
import * as ProductFavoriteApi from '@/api/product/favorite.js'; import * as ProductFavoriteApi from '@/api/product/favorite.js';
import * as ProductCommentApi from '@/api/product/comment.js';
import * as TradeCartApi from '@/api/trade/cart.js'; import * as TradeCartApi from '@/api/trade/cart.js';
import * as Util from '@/utils/util.js'; import * as Util from '@/utils/util.js';
import * as ProductUtil from '@/utils/product.js'; import * as ProductUtil from '@/utils/product.js';
// #ifdef MP // #ifdef MP
import { base64src } from '@/utils/base64src.js' import { base64src } from '@/utils/base64src.js'
import { getQrcode } from '@/api/api.js'; import { getQrcode } from '@/api/api.js';
import {createFavorite, deleteFavorite} from "../../api/product/favorite"; import {getCommentList} from "../../api/product/comment";
// #endif // #endif
const app = getApp(); const app = getApp();
export default { export default {
@ -331,7 +321,6 @@
// ========== 商品详情相关的变量 ========== // ========== 商品详情相关的变量 ==========
id: 0, // 商品 id id: 0, // 商品 id
type: "", // 商品展示类型；normal - 普通；video - 视频 type: "", // 商品展示类型；normal - 普通；video - 视频
productInfo: {}, // 商品详情 TODO 芋艿：准备移除
spu: {}, // 商品 SPU 详情 spu: {}, // 商品 SPU 详情
skuMap: [], // 商品 SKU Map skuMap: [], // 商品 SKU Map
attrValue: '', // 已选属性名的拼接，例如说 红色,大 这样的格式 attrValue: '', // 已选属性名的拼接，例如说 红色,大 这样的格式
@ -349,10 +338,10 @@
video: 'width:100%' video: 'width:100%'
}, },
// ========== 评价相关的变量 TODO ========== // ========== 评价相关的变量 ==========
replyCount: 0, // 总评论数量 TODO 芋艿：回复，待实现 replyCount: 0, // 总评论数量
reply: [], // 评论列表 replyChance: 0, // 好评率
replyChance: 0, // TODO 芋艿：评论相关，待接入 reply: [], // 评论列表
// ========== 收藏相关的变量 ========== // ========== 收藏相关的变量 ==========
userCollect: false, userCollect: false,
@ -526,7 +515,6 @@
let productInfo = res.data; let productInfo = res.data;
let spu = res.data; let spu = res.data;
let skus = res.data.skus; let skus = res.data.skus;
this.$set(this, 'productInfo', productInfo);
this.$set(this, 'spu', spu); this.$set(this, 'spu', spu);
this.$set(this.attr, 'properties', ProductUtil.convertProductPropertyList(skus)); this.$set(this.attr, 'properties', ProductUtil.convertProductPropertyList(skus));
this.$set(this, 'skuMap', ProductUtil.convertProductSkuMap(skus)); this.$set(this, 'skuMap', ProductUtil.convertProductSkuMap(skus));
@ -771,18 +759,22 @@
}); });
}, },
// ========== 评价相关的方法 TODO ========== // ========== 评价相关的方法 ==========
/**
* 获得商品评价列表
*/
getProductReplyList: function() { getProductReplyList: function() {
getReplyProduct(this.id).then(res => { ProductCommentApi.getCommentList(this.id).then(res => {
this.reply = res.data.productReply ? [res.data.productReply] : []; this.reply = res.data;
}) })
}, },
/**
* 获得商品评价统计
*/
getProductReplyCount: function() { getProductReplyCount: function() {
let that = this; ProductCommentApi.getCommentStatistics(this.id).then(res => {
getReplyConfig(that.id).then(res => { this.$set(this, 'replyChance', res.data.goodPercent);
that.$set(that, 'replyChance', res.data.replyChance * 100); this.$set(this, 'replyCount', res.data.allCount);
that.$set(that, 'replyCount', res.data.sumCount);
}); });
}, },