294 lines
8.1 KiB
Vue
294 lines
8.1 KiB
Vue
<template>
|
||
<view class="shop_comment" v-if="sumCount > 0" @click="evals()">
|
||
<view class="shop_comment_head">
|
||
<view class="shop_comment_head_title">商品评论({{sumCount >= 10000?'1万+':sumCount}})</view>
|
||
<view class="shop_comment_head_arrow">全部</view>
|
||
</view>
|
||
<view class="shop_comment_tag" v-if="reviewTags.length">
|
||
<view class="shop_comment_item" v-for="(item,index) in reviewTags" :key="index" @click.stop="evals(item.tag)">{{item.tag}}({{item.num}})</view>
|
||
</view>
|
||
<view class="shop_comment_cont">
|
||
<view class="shop_comment_cont_ul">
|
||
<view class="shop_comment_cont_l" v-if="productReply.nickname">
|
||
<image class="shop_comment_cont_userimg" :src="productReply.avatar" mode="widthFix"></image>
|
||
<view class="shop_comment_cont_username">{{productReply.nickname}}</view>
|
||
<view class="shop_comment_cont_amount">
|
||
<image class="shop_comment_cont_img" :src="productReply.evalImg" lazy-load mode="widthFix"></image>{{productReply.evalName}}
|
||
</view>
|
||
</view>
|
||
<view class="shop_comment_cont_ip"></view>
|
||
</view>
|
||
<view class="shop_comment_m">
|
||
<view class="shop_comment_title"><text>{{productReply.comment}}</text></view>
|
||
<view class="shop_comment_item" >
|
||
<image v-for="(img,index) in productReply.pics" :key="index" class="shop_comment_itemImg" :src="img" mode="widthFix" @click.stop="previewImage(index)"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 常见问题 -->
|
||
<view class="shop_comment" v-if="problemNum > 0" @click="faqList">
|
||
<view class="shop_comment_head">
|
||
<view class="shop_comment_head_title">常见问题({{problemNum}})</view>
|
||
<view class="shop_comment_head_arrow">全部</view>
|
||
</view>
|
||
<view class="faqlist">
|
||
<view class="shop_ask shop_padding"><text>{{productProblem.title}}</text></view>
|
||
<view class="shop_answer shop_padding"><text>{{productProblem.content}}</text></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed,ref,onMounted } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
import { replyconfig,replyproduct } from '@/server/api'
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const { token } = storeToRefs(counterStore);
|
||
const problemNum = ref(0);
|
||
const productProblem = ref({});
|
||
const productReply = ref({});
|
||
const replyChance = ref('');
|
||
const reviewTags = ref([]);
|
||
const picsCount = ref('');
|
||
const sumCount = ref(0);
|
||
const props = defineProps({
|
||
apiType:{
|
||
type:Number,
|
||
default:1 //1为首页5为热门推荐
|
||
}
|
||
})
|
||
const api_replyproduct=()=>{
|
||
return replyproduct(props.apiType).then(({data}) => {
|
||
problemNum.value = data.problemNum;
|
||
productProblem.value = data.productProblem;
|
||
if(data.sumCount){
|
||
if(data.productReply.score >= 4){
|
||
data.productReply.evalName = '好评';
|
||
data.productReply.evalImg = '../../static/eval/praise.png';
|
||
}else if(data.productReply.score > 2 && data.productReply.score < 4){
|
||
data.productReply.evalName = '中评';
|
||
data.productReply.evalImg = '../../static/eval/praise.png';
|
||
}else if(data.productReply.score <= 2){
|
||
data.productReply.evalName = '差评';
|
||
data.productReply.evalImg = '../../static/eval/praise.png';
|
||
}
|
||
}
|
||
productReply.value = data.productReply;
|
||
replyChance.value = data.replyChance;
|
||
}).catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const api_replyconfig=()=>{
|
||
return replyconfig(props.apiType).then(({data}) => {
|
||
reviewTags.value = data.reviewTags;
|
||
picsCount.value = data.picsCount;
|
||
sumCount.value = data.sumCount;
|
||
})
|
||
.then(()=>api_replyproduct())
|
||
.catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const previewImage=(i)=>{
|
||
uni.previewImage({
|
||
current: i,
|
||
urls:productReply.value.pics
|
||
});
|
||
};
|
||
const evals=(tag)=>{
|
||
let url = '';
|
||
if(tag){
|
||
url=`/shopProDetail/evallist/evallist?productId=${props.apiType}&tag=${tag}`
|
||
}else{
|
||
url=`/shopProDetail/evallist/evallist?productId=${props.apiType}`
|
||
}
|
||
console.log('url',url);
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
};
|
||
const faqList=()=>{
|
||
uni.navigateTo({
|
||
url:`/shopProDetail/faqList/faqList?productId=${props.apiType}`
|
||
})
|
||
}
|
||
//生命周期钩子
|
||
onMounted(() => {
|
||
api_replyconfig();
|
||
});
|
||
onPullDownRefresh(()=>{
|
||
api_replyconfig();
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
onReachBottom(()=>{})
|
||
</script>
|
||
<style lang="scss">
|
||
.shop_comment{
|
||
background: #FFFFFF;
|
||
margin: 20rpx 20rpx 0rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
|
||
.shop_comment_head{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 40rpx 20rpx 20rpx;
|
||
.shop_comment_head_title{
|
||
font-size: 30rpx;
|
||
color: #000000;
|
||
font-weight: 500;
|
||
}
|
||
.shop_comment_head_arrow{
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
position: relative;
|
||
}
|
||
.shop_comment_head_arrow::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 100%;
|
||
transform: translate3d(0, -50%, 0) rotate(45deg);
|
||
width: 13rpx;
|
||
height: 13rpx;
|
||
border-top: 3rpx solid #999999;
|
||
border-right: 3rpx solid #999999;
|
||
}
|
||
}
|
||
.shop_comment_tag{
|
||
display: flex;
|
||
overflow: hidden;
|
||
flex-wrap: wrap;
|
||
margin: 0rpx 20rpx 0rpx 20rpx;
|
||
border-bottom: 1rpx solid #f6f6f6;
|
||
.shop_comment_item{
|
||
padding: 0rpx 20rpx 0rpx 20rpx;
|
||
height: 45rpx;
|
||
background: #FFD7D7;
|
||
border-radius: 50rpx;
|
||
border: 1px solid #FFA0A0;
|
||
color: #FF5D5D;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 23rpx;
|
||
margin-right: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
.shop_comment_cont{
|
||
padding: 0rpx 20rpx 0rpx 20rpx;
|
||
.shop_comment_cont_ul{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0;
|
||
.shop_comment_cont_l{
|
||
display: flex;
|
||
align-items: center;
|
||
.shop_comment_cont_userimg{
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50rpx;
|
||
display: block;
|
||
background-color: #f6f6f6;
|
||
}
|
||
.shop_comment_cont_username{
|
||
color: #000000;
|
||
font-size: 26rpx;
|
||
margin-left: 15rpx;
|
||
}
|
||
.shop_comment_cont_amount{
|
||
margin-left: 10rpx;
|
||
width: 95rpx;
|
||
height: 37rpx;
|
||
background: linear-gradient(90deg,#FAEAD3 0%,#FED4AE 100%);
|
||
border-radius: 4rpx;
|
||
color: #745030;
|
||
font-size: 22rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.shop_comment_cont_img{
|
||
width: 23rpx;
|
||
height: 23rpx;
|
||
display: block;
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
.shop_comment_cont_ip{
|
||
color: #999;
|
||
font-size: 23rpx;
|
||
}
|
||
}
|
||
.shop_comment_m{
|
||
overflow: hidden;
|
||
.shop_comment_title{
|
||
font-size: 27rpx;
|
||
color: #333333;
|
||
}
|
||
.shop_comment_item{
|
||
margin: 20rpx 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.shop_comment_itemImg{
|
||
width: 155rpx;
|
||
height: 155rpx;
|
||
border-radius: 20rpx;
|
||
display: block;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.faqlist{
|
||
padding: 0rpx 20rpx 20rpx 20rpx;
|
||
.shop_ask{
|
||
font-size: 27rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
.shop_answer{
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
margin-top: 10rpx;
|
||
}
|
||
.shop_padding text{
|
||
vertical-align: middle;
|
||
}
|
||
.shop_ask::before {
|
||
vertical-align: middle;
|
||
content: "";
|
||
display: inline-block;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
background-image: url('../../static/shopdetail/ask.png');
|
||
background-size: cover;
|
||
margin-right: 10rpx; /* 调整图片与标题的间距 */
|
||
}
|
||
.shop_answer::before {
|
||
content: "";
|
||
display: inline-block;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
background-image: url('../../static/shopdetail/answer.png');
|
||
background-size: cover;
|
||
margin-right: 10rpx; /* 调整图片与标题的间距 */
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |