You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
597 lines
13 KiB
597 lines
13 KiB
<!--
|
|
* @FileDescription:商品评价和问答
|
|
* @Author: kahu
|
|
* @Date: 2022/11/7
|
|
* @LastEditors: kahu
|
|
* @LastEditTime: 2022/11/7
|
|
-->
|
|
<template>
|
|
<div class="content">
|
|
<view class="evaQaTab flex-items flex-sp-around">
|
|
<view
|
|
:class="{active: activeTab === 1}"
|
|
class="evaBtn"
|
|
@click="activeTab = 1"
|
|
>
|
|
<view class="tabTit">{{$t('page.goodsevaluation')}}（{{ commentList.length }}）</view>
|
|
</view>
|
|
<view
|
|
:class="{active: activeTab === 2}"
|
|
class="qaBtn"
|
|
@click="activeTab = 2"
|
|
>
|
|
<view class="tabTit">{{$t('client.commodityqa')}}（{{ problemsTotal }}）</view>
|
|
</view>
|
|
</view>
|
|
<!-- 评价 -->
|
|
<!-- <view class="borRig-line-20"></view>-->
|
|
<view
|
|
class="evaluate-box flex-start flex-column"
|
|
v-show="activeTab === 1"
|
|
>
|
|
<view
|
|
class="evaluateTag-box"
|
|
v-if="commentList.length>0"
|
|
>
|
|
<!-- <view class="evaluateTag-text">
|
|
{{$t('common.all')}}({{ commentList.length }})
|
|
</view>-->
|
|
</view>
|
|
<view
|
|
class="evaluate-contentbox mar-top-30"
|
|
v-for="(commentItem, commentIndex) in commentList.slice(0,2)"
|
|
:key="commentIndex"
|
|
>
|
|
<view class="evaluate-content flex-items flex-row flex-sp-between">
|
|
<view class="flex-items">
|
|
<image
|
|
class="user-headSmallImg"
|
|
:src="commentItem.headImage"
|
|
></image>
|
|
<label class="fs28 font-color-252744 mar-left-10">{{ commentItem.name }}</label>
|
|
</view>
|
|
<label class="font-color-90919C fs24">{{ commentItem.createTime }}</label>
|
|
</view>
|
|
<view class="evaluateDes-box">
|
|
<label class="evaluateDes">{{ commentItem.comment }}</label>
|
|
</view>
|
|
<view
|
|
class="item-image-box"
|
|
v-if="commentItem.image"
|
|
>
|
|
<view
|
|
v-for="(imgItem, imgIndex) in (commentItem.image.split(',')||[])"
|
|
:key="imgIndex"
|
|
>
|
|
<image
|
|
@click="handlePreviewImage(commentList[commentIndex].images,imgIndex)"
|
|
class="img-item"
|
|
:src="imgItem"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="item-like-box"
|
|
v-if="commentItem.addComment !== ''"
|
|
>
|
|
<view class="addEvaluate">
|
|
<view>追加评价：{{ commentItem.addComment }}</view>
|
|
<view
|
|
class="item-image-box"
|
|
v-if="commentItem.addImages"
|
|
>
|
|
<view
|
|
v-for="(itemAddImg, imgIndex) in commentItem.addImages"
|
|
:key="imgIndex"
|
|
>
|
|
<image
|
|
@click="handlePreviewImage(commentList[commentIndex].addImages,imgIndex)"
|
|
class="img-item"
|
|
:src="itemAddImg"
|
|
>
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="like-box">
|
|
<image
|
|
class="like-img"
|
|
@click="handlePraise(commentItem,0)"
|
|
src="http://36.138.125.206:8081/ceres-local-file/image/evaluate_like_active.png"
|
|
v-if="commentItem.ifLike === 1"
|
|
></image>
|
|
<image
|
|
class="like-img"
|
|
@click="handlePraise(commentItem,1)"
|
|
src="http://36.138.125.206:8081/ceres-local-file/image/evaluate_like_normal.png"
|
|
v-else
|
|
></image>
|
|
<view class="like-num">{{ commentItem.likes }}</view>
|
|
</view>
|
|
<view class="item-line"></view>
|
|
</view>
|
|
<view
|
|
class="moreBox"
|
|
style="margin-top: 30rpx"
|
|
v-if="commentList.length>0"
|
|
@click="handleJumpToComments"
|
|
>
|
|
<label class="fs28">查看全部</label>
|
|
<image
|
|
class="evaluateAllArrow-icon mar-left-10"
|
|
src="http://36.138.125.206:8081/ceres-local-file/image/btn_common_forward.png"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<!-- 问答 -->
|
|
<!-- <view class="borRig-line-20"></view>-->
|
|
<view
|
|
class="questions"
|
|
v-show="activeTab === 2"
|
|
>
|
|
<view class="questionInfo flex-items flex-row flex-sp-between">
|
|
<view class="infoTit">宝贝好不好，问问已买过的人</view>
|
|
<view
|
|
class="putQuestion"
|
|
@click="handleJumpToQuestion"
|
|
>去提问
|
|
</view>
|
|
</view>
|
|
<view class="listBox">
|
|
<QuestionsAndAnswersList
|
|
:product-info="productInfo"
|
|
:problems-list="problemsList"
|
|
/>
|
|
<view
|
|
class="moreBox"
|
|
v-if="problemsList.length>0"
|
|
@click="handleJumpAllAnswer"
|
|
>
|
|
<label class="fs28">查看全部</label>
|
|
<image
|
|
class="evaluateAllArrow-icon mar-left-10"
|
|
src="http://36.138.125.206:8081/ceres-local-file/image/btn_common_forward.png"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const NET = require('../../../utils/request')
|
|
const API = require('../../../config/api')
|
|
import lodash from 'lodash'
|
|
import QuestionsAndAnswersList from "./QuestionsAndAnswersList";
|
|
|
|
export default {
|
|
name: "GoodEvaluateAndQuestion",
|
|
components: {QuestionsAndAnswersList},
|
|
data() {
|
|
return {
|
|
// 当前选中的tab
|
|
activeTab: 1, // 1评价 2问答
|
|
problemsList: [], // 问题列表
|
|
problemsTotal:0 //问题总数
|
|
}
|
|
},
|
|
props: {
|
|
commentList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
productInfo: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.handleGetProblemList()
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取问答数据
|
|
* @return {Promise<void>}
|
|
*/
|
|
async handleGetProblemList() {
|
|
if(!this.productInfo.productId){
|
|
return
|
|
}
|
|
const res = await NET.request(API.getProblems, {
|
|
productId: this.productInfo.productId,
|
|
page: 1,
|
|
pageSize: 2
|
|
}, 'GET')
|
|
this.problemsList = res.data.list
|
|
this.problemsTotal = res.data.total
|
|
},
|
|
|
|
/**
|
|
* 放大查看照片
|
|
* @param dataList 所有照片
|
|
* @param currentIndex 选中索引
|
|
*/
|
|
handlePreviewImage(dataList, currentIndex) {
|
|
uni.previewImage({
|
|
current: dataList[currentIndex],
|
|
urls: dataList
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 点赞
|
|
* @param commentItem 当前评论项
|
|
* @param action 0取消1点赞
|
|
*/
|
|
handlePraise: lodash.debounce(async function (commentItem, actionType) {
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: '提交中...',
|
|
})
|
|
try {
|
|
await NET.request(API.LikeOrUnLikeComment, {
|
|
commentId: commentItem.commentId,
|
|
ifLike: actionType
|
|
}, 'POST')
|
|
if (commentItem.ifLike === 1) {
|
|
commentItem.ifLike = 0
|
|
commentItem.likes--
|
|
} else {
|
|
commentItem.ifLike = 1
|
|
commentItem.likes++
|
|
}
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
}, 500),
|
|
|
|
/**
|
|
* 跳转到全部评论
|
|
*/
|
|
handleJumpToComments() {
|
|
this.$jump('/pages_category_page1/goodsModule/evaluateList?commentList=' + JSON.stringify(this.commentList))
|
|
},
|
|
|
|
/**
|
|
* 跳转到提问
|
|
*/
|
|
handleJumpToQuestion() {
|
|
const paramObj = Object.assign({}, this.productInfo, {
|
|
questionNumber: this.problemsList.length,
|
|
images: this.productInfo.images[0],
|
|
})
|
|
this.$jump('/pages_category_page1/goodsModule/putQuestions', paramObj)
|
|
},
|
|
|
|
/**
|
|
* 跳转到该商品下所有问答
|
|
*/
|
|
handleJumpAllAnswer() {
|
|
const paramObj = Object.assign({}, this.productInfo, {
|
|
images: this.productInfo.images[0]
|
|
})
|
|
this.$jump('/pages_category_page1/goodsModule/answerList', paramObj)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
scoped
|
|
>
|
|
.evaQaTab {
|
|
height: 110rpx;
|
|
line-height: 82rpx;
|
|
border-bottom: #EEEEEE solid 1rpx;
|
|
font-size: 32rpx;
|
|
color: #90919C;
|
|
background-color: #FAFAFA;
|
|
|
|
.evaBtn {
|
|
width: 50%;
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
&:before {
|
|
content: '';
|
|
width: 1rpx;
|
|
height: 42rpx;
|
|
background: #EEEEEE;
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 35rpx;
|
|
}
|
|
}
|
|
|
|
.qaBtn {
|
|
width: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
.tabTit {
|
|
display: inline-block;
|
|
height: 110rpx;
|
|
line-height: 110rpx;
|
|
}
|
|
|
|
.active {
|
|
color: #252744;
|
|
font-weight: bold;
|
|
|
|
.tabTit {
|
|
border-bottom: 6rpx solid #252744;
|
|
}
|
|
}
|
|
}
|
|
|
|
.questions {
|
|
background-color: #FAFAFA;
|
|
.questionInfo {
|
|
padding: 0 30upx;
|
|
min-height: 150upx;
|
|
|
|
.infoTit {
|
|
font-size: 28rpx;
|
|
color: #252744;
|
|
}
|
|
|
|
.putQuestion {
|
|
width: 155rpx;
|
|
height: 64rpx;
|
|
background: #252744;
|
|
line-height: 64upx;
|
|
border-radius: 32rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #FAFAFA;
|
|
position: relative;
|
|
|
|
/* &:before {
|
|
content: '';
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
background: url("http://36.138.125.206:8081/ceres-local-file/static/images/arrow.png") no-repeat center center;
|
|
background-size: contain;
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
}*/
|
|
}
|
|
}
|
|
|
|
.listBox {
|
|
padding: 0 30upx;
|
|
border-bottom: 20rpx solid #D3D4DE;
|
|
|
|
.itemBox {
|
|
padding-bottom: 30upx;
|
|
border-bottom: 1upx solid #EEEEEE;
|
|
margin-bottom: 30upx;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.itemAsk {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 42upx;
|
|
|
|
i {
|
|
font-style: normal;
|
|
width: 38upx;
|
|
height: 38upx;
|
|
line-height: 38upx;
|
|
background: #C5AA7B;
|
|
display: block;
|
|
margin-right: 30upx;
|
|
font-size: 24upx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
|
|
span {
|
|
font-size: 28upx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.answer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30upx;
|
|
|
|
.answerBox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
i {
|
|
font-style: normal;
|
|
width: 38upx;
|
|
height: 38upx;
|
|
line-height: 38upx;
|
|
background: #C5AA7B;
|
|
display: block;
|
|
text-align: center;
|
|
margin-right: 30upx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
span {
|
|
font-size: 26upx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.answerBtn {
|
|
width: 130upx;
|
|
height: 50upx;
|
|
line-height: 50upx;
|
|
border: #333333 2rpx solid;
|
|
text-align: center;
|
|
color: #333;
|
|
font-size: 24upx;
|
|
}
|
|
}
|
|
|
|
.seeAll {
|
|
margin-left: 68upx;
|
|
font-size: 28upx;
|
|
color: #C5AA7B;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.evaluate-box {
|
|
background-color: #FAFAFA;
|
|
border-bottom: 20rpx solid #D3D4DE;
|
|
//margin-top: 20rpx;
|
|
|
|
.evaluate {
|
|
width: 690upx;
|
|
padding: 20upx 0;
|
|
border-bottom: 1upx solid #EDEDED;
|
|
}
|
|
|
|
.evaluateTitle-box {
|
|
width: 690upx;
|
|
border-bottom: 1upx solid #EDEDED;
|
|
padding-bottom: 20upx;
|
|
}
|
|
|
|
.evaluateAllArrow-icon {
|
|
width: 12upx;
|
|
height: 21upx;
|
|
}
|
|
|
|
.evaluateTag-box {
|
|
margin-top: 10upx;
|
|
margin-left: 10upx;
|
|
padding-bottom: 10upx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.evaluateTag-text {
|
|
background-color: #F4F4F4;
|
|
border-radius: 6upx;
|
|
padding: 16upx 14upx;
|
|
color: #656565;
|
|
margin-left: 20upx;
|
|
margin-top: 20upx;
|
|
}
|
|
}
|
|
|
|
.evaluate-contentbox {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
margin-left: 30upx;
|
|
// border-bottom: 1upx solid #EDEDED;
|
|
//padding-bottom: 50upx;
|
|
|
|
.evaluate-content {
|
|
width: 670rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.user-headSmallImg {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.evaluateDes-box {
|
|
width: 670rpx;
|
|
margin-top: 30rpx;
|
|
|
|
.evaluateDes {
|
|
width: 670rpx;
|
|
font-size: 28rpx;
|
|
color: #252744;
|
|
}
|
|
}
|
|
|
|
.addEvaluate {
|
|
padding-top: 30upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.item-image-box {
|
|
width: 700upx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
.img-item {
|
|
width: 223upx;
|
|
height: 223upx;
|
|
border-radius: 10upx;
|
|
margin-right: 10upx;
|
|
margin-top: 10upx;
|
|
}
|
|
}
|
|
|
|
|
|
.item-line {
|
|
width: 690upx;
|
|
height: 1px;
|
|
background: #EEEEEE;
|
|
margin-top: 20upx;
|
|
}
|
|
|
|
.item-like-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 690upx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.like-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-top: 30upx;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-right: 50upx;
|
|
|
|
.like-img {
|
|
width: 28rpx;
|
|
height: 26rpx;
|
|
}
|
|
|
|
.like-num {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #252744;
|
|
margin-left: 20upx;
|
|
}
|
|
}
|
|
|
|
.moreBox {
|
|
width: 200rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
margin: 0 auto 30rpx auto;
|
|
border: 1px solid #545784;
|
|
border-radius: 32rpx;
|
|
color: #252744;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 10rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
</style>
|