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

54
pages/goods_details/index.vue
View File

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