feature/comment-0620-ch
ch
3 years ago
parent
e814e1aa0c
commit
8891cc6734
@ -0,0 +1,50 @@
|
|||||||
|
/*
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-20 11:38:48
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-22 20:53:16
|
||||||
|
* @Description: file content
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {ToAsyncAwait, MsbRequest, MsbRequestTk} from '@/common/utils';
|
||||||
|
|
||||||
|
const BASE_URL = '/mall/comment';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据商品获取评论列表
|
||||||
|
* @param {*} param0
|
||||||
|
*/
|
||||||
|
export const ApiGetCommentList = (params) =>
|
||||||
|
ToAsyncAwait(MsbRequest.get(`${BASE_URL}/app/comment`, params));
|
||||||
|
/**
|
||||||
|
* 根据商品获取评论总数
|
||||||
|
* @param {*} param0
|
||||||
|
*/
|
||||||
|
export const ApiGetCommentCount = ({productId}) =>
|
||||||
|
ToAsyncAwait(MsbRequest.get(`${BASE_URL}/app/comment/getAllCommentCountByProductId/${productId}`));
|
||||||
|
/**
|
||||||
|
* 根据商品获取标签评论总数
|
||||||
|
* @param {*} param0
|
||||||
|
*/
|
||||||
|
export const ApiGetCommentTabCount = ({productId}) =>
|
||||||
|
ToAsyncAwait(MsbRequest.get(`${BASE_URL}/app/comment/listCommentLabel/${productId}`));
|
||||||
|
/**
|
||||||
|
* 获取订单评论详情
|
||||||
|
* @param {*} param0
|
||||||
|
*/
|
||||||
|
export const ApiGetOrderCommentDetail = ({orderId}) =>
|
||||||
|
ToAsyncAwait(MsbRequestTk.get(`${BASE_URL}/app/comment/listOrderCommentByOrderId/${orderId}`));
|
||||||
|
/**
|
||||||
|
* 获取评论详情
|
||||||
|
* @param {*} param0
|
||||||
|
*/
|
||||||
|
export const ApiGetCommentDetail = ({commentId}) =>
|
||||||
|
ToAsyncAwait(MsbRequest.get(`${BASE_URL}/app/comment/getCommentDetail/${commentId}`));
|
||||||
|
/**
|
||||||
|
* 新增评论
|
||||||
|
* @param {*} param0
|
||||||
|
*/
|
||||||
|
export const ApiPostComment = (data) =>
|
||||||
|
ToAsyncAwait(MsbRequestTk.post(`${BASE_URL}/app/comment`, data));
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
/*
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-20 11:10:23
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-22 18:05:27
|
||||||
|
* @Description: file content
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
TYPE : {
|
||||||
|
// 评价
|
||||||
|
COMMENT: 1,
|
||||||
|
// 追评
|
||||||
|
FOLLOW_COMMENT: 2,
|
||||||
|
// 回复
|
||||||
|
ANSWER: 3,
|
||||||
|
},
|
||||||
|
// 是否显示
|
||||||
|
DISPLAY: {
|
||||||
|
SHOW: 1,
|
||||||
|
HIDE : 0
|
||||||
|
},
|
||||||
|
// 用户类型
|
||||||
|
USER_TYPE: {
|
||||||
|
STORE : 1,
|
||||||
|
USER : 2
|
||||||
|
},
|
||||||
|
// 是否默认评价
|
||||||
|
IS_DEFAULT_COMMENT: {
|
||||||
|
YES: 1,
|
||||||
|
NOT : 0
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-23 10:40:04
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 10:48:48
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view class="follow">
|
||||||
|
<view class="follow--title">{{day}}追评:</view>
|
||||||
|
<view class="follow--ctx">{{followComment.commentContent}}</view>
|
||||||
|
<view class="follow--img" v-if="imgs.length">
|
||||||
|
<image class="follow--img-item" v-for="(item, idx) in imgs" :src="item" :key="idx" @click="preview(idx)" mode="aspectFit"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props : {
|
||||||
|
followComment : {
|
||||||
|
type : Object,
|
||||||
|
default : () => ({})
|
||||||
|
},
|
||||||
|
commentTime : {
|
||||||
|
type : String,
|
||||||
|
default : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
day(){
|
||||||
|
const followTime = (new Date(this.followComment.createTime)).getTime();
|
||||||
|
const commentTime = (new Date(this.commentTime)).getTime();
|
||||||
|
const day = Math.floor((followTime - commentTime) / (24 * 60 * 60 * 1000));
|
||||||
|
return day > 0 ? `${day}天后` : `当天`;
|
||||||
|
},
|
||||||
|
|
||||||
|
imgs (){
|
||||||
|
let urls = this.followComment.pictureUrl || '';
|
||||||
|
return urls ? urls.split(',') : [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.follow{
|
||||||
|
margin-top: 40rpx;
|
||||||
|
&--title{
|
||||||
|
color: $color-yellow3;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
&--ctx{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 46rpx;
|
||||||
|
}
|
||||||
|
&--img{
|
||||||
|
|
||||||
|
margin-top: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
&-item{
|
||||||
|
width: 210rpx;
|
||||||
|
height: 210rpx;
|
||||||
|
margin:20rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-20 14:30:45
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 16:26:33
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view class="goods">
|
||||||
|
<image class="goods--img" :src="goods.productPicture" mode="aspectFit" ></image>
|
||||||
|
<view class="goods--ctx">
|
||||||
|
<view class="goods--title">{{ goods.productName }}</view>
|
||||||
|
<view class="goods--footer">
|
||||||
|
<view class="goods--sku">{{ goods.skuName }}</view>
|
||||||
|
<view><slot name="btns"></slot></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props : {
|
||||||
|
goods : {
|
||||||
|
type : Object,
|
||||||
|
default : ()=>({})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.goods {
|
||||||
|
display: flex;
|
||||||
|
&--img {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
&--ctx{
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
&--title{
|
||||||
|
font-size: 28rpx;
|
||||||
|
overflow:hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
}
|
||||||
|
&--footer{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
&--sku{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-21 15:50:01
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-22 17:49:10
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="top">
|
||||||
|
<u-rate count="5" size="30rpx" :value="commentDetail.commentScore" activeColor="#FFA35B" readonly inactiveColor="#DDD"></u-rate>
|
||||||
|
<text class="top--time">{{ commentDetail.createTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="ctx">{{ commentDetail.commentContent }}</view>
|
||||||
|
<view class="img" v-if="imgs.length">
|
||||||
|
<image class="img--item" v-for="(item, idx) in imgs" :src="item" :key="idx" @click="preview(idx)" mode="aspectFit"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props : {
|
||||||
|
commentDetail : {
|
||||||
|
type : Object,
|
||||||
|
default : () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data:{
|
||||||
|
curPreview : -1
|
||||||
|
},
|
||||||
|
computed : {
|
||||||
|
imgs (){
|
||||||
|
let urls = this.commentDetail.pictureUrl || '';
|
||||||
|
return urls ? urls.split(',') : [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
preview(idx){
|
||||||
|
this.$store.commit('SET_COMMENT_PREVIEW', this.commentDetail);
|
||||||
|
this.$Router.push({
|
||||||
|
path : '/goodsCommentPreview',
|
||||||
|
query : {
|
||||||
|
idx
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.top{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
&--time{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ctx{
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 46rpx;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.img{
|
||||||
|
margin-top: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
&--item{
|
||||||
|
width: 210rpx;
|
||||||
|
height: 210rpx;
|
||||||
|
margin:20rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-21 15:59:23
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-21 16:05:16
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view class="merchant">
|
||||||
|
<view class="merchant--title">
|
||||||
|
<text class="merchant--name">{{merchantComment.userName}}</text>
|
||||||
|
<text class="merchant--time">{{merchantComment.createTime}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="merchant--ctx">{{merchantComment.commentContent}}</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props : {
|
||||||
|
merchantComment : {
|
||||||
|
type : Object,
|
||||||
|
default : () => ({})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.merchant{
|
||||||
|
margin-top: 40rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
background: #F5F5F5;
|
||||||
|
&--title{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
&--time{
|
||||||
|
color: #999;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
&--ctx,&--name{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,130 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-20 16:36:14
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 16:56:09
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="rate" v-if="type === COMMENT.TYPE.COMMENT">
|
||||||
|
<text class="rate--title">满意度评分</text>
|
||||||
|
<u-rate :count="5" v-model="rate" size="47rpx" activeColor="#FFA35B" inactiveColor="#DDD"></u-rate>
|
||||||
|
<text class="rate--desc">满意</text>
|
||||||
|
</view>
|
||||||
|
<textarea class="textarea" placeholder="从多个维度评价，可以帮助更多想买的人哦~"
|
||||||
|
:maxlength="500" v-model="commentContent"></textarea>
|
||||||
|
<u-upload class="upload"
|
||||||
|
@afterRead="handleUpdateImg" @delete="handleDelImg"
|
||||||
|
:fileList="fileList" :maxCount="6" :previewFullImage="true">
|
||||||
|
</u-upload>
|
||||||
|
<view class="footer">
|
||||||
|
<UiButton type="solid" :disable="isVerify" @click="handleSubmit">发表评价</UiButton>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import UiButton from '@/components/UiButton.vue';
|
||||||
|
import {ApiPostComment} from '@/common/api/comment';
|
||||||
|
import COMMENT from '@/common/dicts/comment';
|
||||||
|
import {uploadFileOss} from '@/common/utils';
|
||||||
|
export default {
|
||||||
|
components: { UiButton },
|
||||||
|
props:{
|
||||||
|
type : {
|
||||||
|
type : String | Number,
|
||||||
|
default : COMMENT.TYPE.COMMENT
|
||||||
|
},
|
||||||
|
commentDetail : {
|
||||||
|
type : Object,
|
||||||
|
default : ()=> ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
COMMENT,
|
||||||
|
rate : 0,
|
||||||
|
commentContent : '',
|
||||||
|
fileList : []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
isVerify(){
|
||||||
|
if(this.type === COMMENT.TYPE.COMMENT){
|
||||||
|
return !this.rate;
|
||||||
|
}else{
|
||||||
|
return !this.commentContent;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isEdit (){
|
||||||
|
return (this.rate || this.commentContent || this.fileList.length > 0) ? true : false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
isEdit(){
|
||||||
|
this.$emit('editChang',this.isEdit)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
async handleSubmit(){
|
||||||
|
let data = {
|
||||||
|
commentContent : this.commentContent,
|
||||||
|
commentType : this.type,
|
||||||
|
orderProductId : this.commentDetail.orderProductId,
|
||||||
|
pictureUrl : this.fileList.map(i => i.url).join(',')
|
||||||
|
}
|
||||||
|
if(this.type === COMMENT.TYPE.COMMENT){
|
||||||
|
data.productId = this.commentDetail.productId;
|
||||||
|
data.commentScore = this.rate;
|
||||||
|
}else if(this.type === COMMENT.TYPE.FOLLOW_COMMENT){
|
||||||
|
data.originId = data.parentId = this.commentDetail.id;
|
||||||
|
}
|
||||||
|
const {error, result} = await ApiPostComment(data);
|
||||||
|
if(error){
|
||||||
|
uni.$u.toast(error.message);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.$emit('submit',result);
|
||||||
|
},
|
||||||
|
async handleUpdateImg(val){
|
||||||
|
const {error, result} = await uploadFileOss(val.file, {
|
||||||
|
configId : 'account-comment',
|
||||||
|
serviceName : 'comment'
|
||||||
|
})
|
||||||
|
if(error){
|
||||||
|
uni.$u.toast(error);
|
||||||
|
}
|
||||||
|
this.fileList.push({url : result});
|
||||||
|
},
|
||||||
|
handleDelImg(target){
|
||||||
|
this.fileList.splice(target.index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.rate{
|
||||||
|
display: flex;
|
||||||
|
margin: 50rpx 0;
|
||||||
|
align-items: center;
|
||||||
|
&--title{
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
&--desc{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-left: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.textarea{
|
||||||
|
height: 200rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-21 16:01:19
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-22 16:05:27
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view class="thumb">
|
||||||
|
<view class="thumb--item">
|
||||||
|
<u-icon name="thumb-up"></u-icon>
|
||||||
|
<text>2</text>
|
||||||
|
</view>
|
||||||
|
<view class="thumb--item" @click="$Router.push(`/goodsCommentDetail?id=${commentDetail.id}`)">
|
||||||
|
<u-icon name="chat"></u-icon>
|
||||||
|
<text>{{answerCount}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props : {
|
||||||
|
commentDetail : {
|
||||||
|
type : Object,
|
||||||
|
default : ()=>({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed : {
|
||||||
|
answerCount (){
|
||||||
|
const arr = this.commentDetail.answerCommentList || []
|
||||||
|
return arr.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.thumb{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
&--item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 50rpx;
|
||||||
|
text{
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-21 22:27:52
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-21 22:29:18
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view class="comment-user">
|
||||||
|
<image class="comment-user--avatr" :src="userData.userAvatar" shape="circle"/>
|
||||||
|
<view>
|
||||||
|
<view class="comment-user--name">{{userData.userName}}</view>
|
||||||
|
<text class="comment-user--sku">已购买{{userData.skuName}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props : {
|
||||||
|
userData : {
|
||||||
|
type : Object,
|
||||||
|
default : ()=> ({})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.comment-user{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
&--avatr{
|
||||||
|
width: 71rpx;
|
||||||
|
height: 71rpx;
|
||||||
|
margin-right: 17rpx;
|
||||||
|
}
|
||||||
|
&--name{
|
||||||
|
margin-top: 5rpx;
|
||||||
|
}
|
||||||
|
&--sku{
|
||||||
|
margin-top: 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,209 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-21 18:19:13
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 16:10:21
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="box">
|
||||||
|
<BsCommentUserInfo :userData="detail"/>
|
||||||
|
<BsCommentInfo :commentDetail="detail"/>
|
||||||
|
<BsCommentFollowInfo v-if="detail.followComment" :followComment="detail.followComment" :commentTime="detail.createTime"/>
|
||||||
|
<BsCommentGoodsInfo class="goods-info" :goods="detail"/>
|
||||||
|
</view>
|
||||||
|
<view class="reply-title">全部评论( {{answerCount}}条)</view>
|
||||||
|
<view class="reply">
|
||||||
|
<template v-if="answerCount">
|
||||||
|
<view class="reply--item" v-for="item in detail.answerCommentList" :key="item.id" @click="handleAnswer(item)">
|
||||||
|
<view class="reply--title">
|
||||||
|
<text>
|
||||||
|
{{item.userName}} {{item.parentId !== detail.id ? ` 回复 ${item.parentUserName}` : ''}}
|
||||||
|
</text>
|
||||||
|
<text>{{item.createTime}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="reply--ctx">{{item.commentContent}}</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<BsEmpty v-else tips="还没有人评论哦，快来抢沙发~"/>
|
||||||
|
</view>
|
||||||
|
<view class="footer">
|
||||||
|
<view v-if="!detail.followComment && detail.userId === $store.state.userInfo.id"
|
||||||
|
@click="$Router.push(`/commentSubmitFollow?id=${commentId}`)">追评</view>
|
||||||
|
<view @click="isShowAnswer = true">评论</view>
|
||||||
|
<view>有用</view>
|
||||||
|
</view>
|
||||||
|
<template v-if="isShowAnswer" >
|
||||||
|
<view class="reply-comment--bg" @click="handleHideAnswer"></view>
|
||||||
|
<view class="reply-comment">
|
||||||
|
<view class="reply-comment--box">
|
||||||
|
<input class="reply-comment--input" maxlength="500" v-model="commentContent" :placeholder="placeholder" />
|
||||||
|
<UiButton type="gradual" @click="handleSubmit">发表</UiButton>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BsCommentGoodsInfo from '../../../components/BsCommentGoodsInfo.vue'
|
||||||
|
import BsCommentInfo from '../../../components/BsCommentInfo.vue'
|
||||||
|
import BsCommentUserInfo from '../../../components/BsCommentUserInfo.vue'
|
||||||
|
import UiButton from '../../../components/UiButton.vue'
|
||||||
|
import {ApiGetCommentDetail, ApiPostComment} from '@/common/api/comment'
|
||||||
|
import {HandleApiError} from '@/common/utils'
|
||||||
|
import COMMENT from '@/common/dicts/comment'
|
||||||
|
import BsEmpty from '../../../components/BsEmpty.vue'
|
||||||
|
import BsCommentFollowInfo from '../../../components/BsCommentFollowInfo.vue'
|
||||||
|
export default {
|
||||||
|
components: { BsCommentGoodsInfo, BsCommentInfo, UiButton, BsCommentUserInfo, BsEmpty, BsCommentFollowInfo },
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
isShowAnswer : false,
|
||||||
|
answer : null,
|
||||||
|
commentId : this.$Route.query.id,
|
||||||
|
detail : {},
|
||||||
|
commentContent : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
placeholder(){
|
||||||
|
return this.answer ? `回复：${this.answer.userName}` : '说点什么吧？'
|
||||||
|
},
|
||||||
|
answerCount(){
|
||||||
|
return this.detail.answerCommentList ? this.detail.answerCommentList.length : 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow(){
|
||||||
|
this.getDetail();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
|
||||||
|
async getDetail(){
|
||||||
|
const {error, result} = await ApiGetCommentDetail({
|
||||||
|
commentId : this.commentId
|
||||||
|
});
|
||||||
|
if(!HandleApiError(error,'getDetail')){
|
||||||
|
this.detail = result;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async handleSubmit(){
|
||||||
|
let data = {
|
||||||
|
commentContent : this.commentContent,
|
||||||
|
commentType : COMMENT.TYPE.ANSWER,
|
||||||
|
// orderProductId : this.detail.orderProductId,
|
||||||
|
originId : this.detail.id,
|
||||||
|
parentId : this.answer ? this.answer.id : this.detail.id
|
||||||
|
}
|
||||||
|
const {error, result} = await ApiPostComment(data);
|
||||||
|
if(!HandleApiError(error,'getDetail')){
|
||||||
|
this.detail.answerCommentList.push({
|
||||||
|
...result,
|
||||||
|
userName : this.$store.state.userInfo.nickname,
|
||||||
|
parentName: this.answer ? this.answer.userName : ''
|
||||||
|
});
|
||||||
|
this.commentContent = '';
|
||||||
|
uni.$u.toast('评论成功！')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleAnswer(item){
|
||||||
|
this.isShowAnswer = true;
|
||||||
|
this.answer = item;
|
||||||
|
},
|
||||||
|
handleHideAnswer(...e){
|
||||||
|
this.isShowAnswer = false;
|
||||||
|
this.answer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
page{
|
||||||
|
background: $color-grey1;
|
||||||
|
padding-bottom: 140rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box{
|
||||||
|
background: $color-grey0;
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
.goods-info{
|
||||||
|
margin-top: 30rpx;
|
||||||
|
border: 1px solid #f8f8f8;
|
||||||
|
}
|
||||||
|
.reply-title{
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
margin-bottom:1rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
}
|
||||||
|
.reply{
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
&--item{
|
||||||
|
border-bottom: 1px solid $color-grey1;
|
||||||
|
padding-top: 40rpx;
|
||||||
|
}
|
||||||
|
&--title{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
text{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&--ctx{
|
||||||
|
margin: 26rpx 0;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
height: 124rpx;
|
||||||
|
position: fixed;
|
||||||
|
bottom: var(--window-bottom);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
background: #fff;
|
||||||
|
border-top: 1px solid #f8f8f8;
|
||||||
|
|
||||||
|
}
|
||||||
|
.reply-comment--bg{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-comment{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 2;
|
||||||
|
background: #fff;
|
||||||
|
height: 124rpx;
|
||||||
|
padding: 24rpx 40rpx;
|
||||||
|
border-top: 1px solid #f8f8f8;
|
||||||
|
&--box{
|
||||||
|
display: flex;
|
||||||
|
background: #F5F5F5;
|
||||||
|
border-radius: 38rpx;
|
||||||
|
}
|
||||||
|
&--input{
|
||||||
|
flex: 1;
|
||||||
|
padding:0 20rpx 0 40rpx;
|
||||||
|
height: 76rpx;
|
||||||
|
line-height: 76rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,192 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-21 16:51:03
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 11:14:27
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="header">
|
||||||
|
<view class="tab">
|
||||||
|
<view class="tab--item" :class="{'tab--item__active' : tabActive == i.labelType}"
|
||||||
|
v-for="i in tabs" :key="i.labelType" @click="handleChangeTab(i)">
|
||||||
|
{{i.labelName}}({{i.commentCount}})
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view @click="sortChange">
|
||||||
|
<image v-if="timeSortType" class="header--sort" src="@/static/comment/sort_active.png"/>
|
||||||
|
<image v-else class="header--sort" src="@/static/comment/sort.png"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="comment" v-for="item in list" :key="item.id" @click="$Router.push(`/goodsCommentDetail?id=${item.id}`)">
|
||||||
|
<BsCommentUserInfo :userData="item"/>
|
||||||
|
<BsCommentInfo :commentDetail="item"/>
|
||||||
|
<BsCommentFollowInfo :commentTime="item.createTime" :followComment="item.followComment"/>
|
||||||
|
<BsCommentThumbup :commentDetail="item"/>
|
||||||
|
</view>
|
||||||
|
<u-loadmore :status="loadingStatus" v-if="loadingStatus === 'loading'"/>
|
||||||
|
<view class="other" v-if="otherCount" @click="$Router.push(`/goodsCommentOtherList?id=${productId}`)">
|
||||||
|
已折叠{{otherCount}}条帮助不大的评价
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BsCommentInfo from '../../../components/BsCommentInfo.vue'
|
||||||
|
import BsCommentUserInfo from '../../../components/BsCommentUserInfo.vue'
|
||||||
|
import {ApiGetCommentList, ApiGetCommentCount, ApiGetCommentTabCount} from '@/common/api/comment';
|
||||||
|
import {HandleApiError} from '@/common/utils'
|
||||||
|
import BsCommentFollowInfo from '../../../components/BsCommentFollowInfo.vue';
|
||||||
|
import BsCommentThumbup from '../../../components/BsCommentThumbup.vue';
|
||||||
|
export default {
|
||||||
|
components: { BsCommentInfo, BsCommentUserInfo, BsCommentFollowInfo, BsCommentThumbup },
|
||||||
|
data (){
|
||||||
|
return {
|
||||||
|
list : [],
|
||||||
|
pageIndex : 1,
|
||||||
|
pageSize : 10,
|
||||||
|
productId : this.$Route.query.id,
|
||||||
|
loadingStatus : 'loading',
|
||||||
|
otherCount : 0,
|
||||||
|
timeSortType : false,
|
||||||
|
tabActive : -1,
|
||||||
|
tabs : [
|
||||||
|
{
|
||||||
|
labelName : '全部',
|
||||||
|
labelType : -1,
|
||||||
|
commentCount : 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(){
|
||||||
|
this.getList();
|
||||||
|
this.getTabCount();
|
||||||
|
this.getCount()
|
||||||
|
},
|
||||||
|
onReachBottom(){
|
||||||
|
this.next();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
async getList(){
|
||||||
|
this.loadingStatus = 'loading';
|
||||||
|
const {error, result} = await ApiGetCommentList({
|
||||||
|
pageIndex : 1,
|
||||||
|
length : this.pageSize,
|
||||||
|
productId : this.productId,
|
||||||
|
commentLabel : this.tabActive == -1 ? null : this.tabActive,
|
||||||
|
sortType : this.timeSortType ? 2 : 1,
|
||||||
|
isContent : true
|
||||||
|
});
|
||||||
|
if(!HandleApiError(error, 'getList')){
|
||||||
|
this.list = result.records;
|
||||||
|
// 标记是否为最后一页
|
||||||
|
if(result.records.length < this.pageSize){
|
||||||
|
this.loadingStatus = 'nomore';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getTabCount (){
|
||||||
|
const {error, result} = await ApiGetCommentTabCount({
|
||||||
|
productId : this.productId
|
||||||
|
});
|
||||||
|
if(!HandleApiError(error, 'getTabCount')){
|
||||||
|
this.tabs = this.tabs.concat(result);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getCount(){
|
||||||
|
const {error, result} = await ApiGetCommentCount({
|
||||||
|
productId : this.productId
|
||||||
|
});
|
||||||
|
if(!HandleApiError(error, 'getCount')){
|
||||||
|
this.otherCount = result.defaultCommentCount;
|
||||||
|
this.$set(this.tabs[0],'commentCount', result.allCommentCount)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calcDay(item, createTime){
|
||||||
|
const followTime = (new Date(item.createTime)).getTime();
|
||||||
|
const commentTime = (new Date(createTime)).getTime();
|
||||||
|
const day = Math.floor((followTime - commentTime) / (24 * 60 * 60 * 1000));
|
||||||
|
return day > 0 ? `${day}天后` : `当天`;
|
||||||
|
},
|
||||||
|
sortChange(){
|
||||||
|
this.timeSortType = !this.timeSortType;
|
||||||
|
this.list = [];
|
||||||
|
this.pageIndex = 1;
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
handleChangeTab(item){
|
||||||
|
this.tabActive = item.labelType;
|
||||||
|
this.pageIndex = 1;
|
||||||
|
this.list = [];
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
next(){
|
||||||
|
if(this.loadingStatus === 'nomore'){
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
this.pageIndex++;
|
||||||
|
this.getList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
page{
|
||||||
|
background: $color-grey1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.header{
|
||||||
|
background: $color-grey0;
|
||||||
|
height: 79rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
.tab{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
&--item{
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 75rpx;
|
||||||
|
margin-right: 64rpx;
|
||||||
|
&__active{
|
||||||
|
border-bottom: 4rpx solid $color-yellow3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&--sort{
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.comment{
|
||||||
|
margin-top:20rpx ;
|
||||||
|
background: $color-grey0;
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.follow{
|
||||||
|
margin-top: 40rpx;
|
||||||
|
&--title{
|
||||||
|
color: $color-yellow3;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
&--ctx{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 46rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.other{
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
margin: 40rpx 0 20rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
background:url('@/static/common/arrow.png') no-repeat right center;
|
||||||
|
background-size: 10rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-21 16:51:03
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 10:52:02
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="comment" v-for="item in list" :key="item.id" @click="$Router.push(`/goodsCommentDetail?id${item.id}`)">
|
||||||
|
<BsCommentUserInfo :userData="item"/>
|
||||||
|
<BsCommentInfo :commentDetail="item"/>
|
||||||
|
<BsCommentThumbup :commentDetail="item"/>
|
||||||
|
</view>
|
||||||
|
<u-loadmore :status="loadingStatus" v-if="loadingStatus === 'loading'"/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BsCommentInfo from '../../../components/BsCommentInfo.vue'
|
||||||
|
import BsCommentUserInfo from '../../../components/BsCommentUserInfo.vue'
|
||||||
|
import {ApiGetCommentList, ApiGetCommentCount, ApiGetCommentTabCount} from '@/common/api/comment';
|
||||||
|
import {HandleApiError} from '@/common/utils'
|
||||||
|
export default {
|
||||||
|
components: { BsCommentInfo, BsCommentUserInfo },
|
||||||
|
data (){
|
||||||
|
return {
|
||||||
|
list : [],
|
||||||
|
pageIndex : 1,
|
||||||
|
pageSize : 10,
|
||||||
|
productId : this.$Route.query.id,
|
||||||
|
loadingStatus : 'loading'
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(){
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
onReachBottom(){
|
||||||
|
this.next();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
async getList(){
|
||||||
|
this.loadingStatus = 'loading';
|
||||||
|
const {error, result} = await ApiGetCommentList({
|
||||||
|
pageIndex : 1,
|
||||||
|
length : this.pageSize,
|
||||||
|
productId : this.productId,
|
||||||
|
sortType : 1,
|
||||||
|
isContent : false
|
||||||
|
});
|
||||||
|
if(!HandleApiError(error, 'getList')){
|
||||||
|
this.list = result.records;
|
||||||
|
// 标记是否为最后一页
|
||||||
|
if(result.records.length < this.pageSize){
|
||||||
|
this.loadingStatus = 'nomore';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
next(){
|
||||||
|
if(this.loadingStatus === 'nomore'){
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
this.pageIndex++;
|
||||||
|
this.getList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
page{
|
||||||
|
background: $color-grey1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.header{
|
||||||
|
background: $color-grey0;
|
||||||
|
height: 79rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
.tab{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
&--item{
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 75rpx;
|
||||||
|
margin-right: 64rpx;
|
||||||
|
&__active{
|
||||||
|
border-bottom: 4rpx solid $color-yellow3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.comment{
|
||||||
|
margin-top:20rpx ;
|
||||||
|
background: $color-grey0;
|
||||||
|
padding: 40rpx;
|
||||||
|
}
|
||||||
|
.other{
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
margin: 40rpx 0 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-22 15:15:22
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 14:23:27
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view class="preview">
|
||||||
|
<view class="preview--top">
|
||||||
|
{{current + 1}}/{{imgs.length}}
|
||||||
|
</view>
|
||||||
|
<u-swiper :list="imgs" :current="current" @change="handleChange" :autoplay="false" />
|
||||||
|
<view class="preview--footer">
|
||||||
|
<BsCommentUserInfo :userData="data"/>
|
||||||
|
<view>
|
||||||
|
<view class="top">
|
||||||
|
<u-rate count="5" size="30rpx" :value="data.commentScore" activeColor="#FFA35B" readonly inactiveColor="#DDD"></u-rate>
|
||||||
|
<text class="top--time">{{ data.createTime }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="ctx">{{ data.commentContent }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BsCommentUserInfo from '@/components/BsCommentUserInfo.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { BsCommentUserInfo },
|
||||||
|
data (){
|
||||||
|
return {
|
||||||
|
data : this.$store.state.comment_preview,
|
||||||
|
current : Number(this.$Route.query.idx)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed : {
|
||||||
|
imgs(){
|
||||||
|
const arr = this.data.pictureUrl || [];
|
||||||
|
return arr.split(',')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow(){
|
||||||
|
if(!this.data.id){
|
||||||
|
this.$Router.back();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleChange(idx){
|
||||||
|
this.current = idx.current
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
page{
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.preview{
|
||||||
|
&--top{
|
||||||
|
color: #fff;
|
||||||
|
height: 44px;
|
||||||
|
padding: 0 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: var(--window-top);
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-21 16:23:27
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 14:30:28
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<UiWhiteBox @click="handleJumpCmment">
|
||||||
|
<view class="comment-title">
|
||||||
|
<text class="comment-title--left">用户评价({{count}})</text>
|
||||||
|
<text class="comment-title--right">查看全部</text>
|
||||||
|
</view>
|
||||||
|
<view class="comment-ctx" v-if="commentList && commentList.length">
|
||||||
|
<BsCommentInfo class="comment-ctx--item" v-for="item in commentList"
|
||||||
|
:commentDetail="item" :key="item.id"/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</UiWhiteBox>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BsCommentInfo from '../../../../components/BsCommentInfo.vue'
|
||||||
|
import UiCell from '../../../../components/UiCell.vue'
|
||||||
|
import UiWhiteBox from '../../../../components/UiWhiteBox.vue'
|
||||||
|
export default {
|
||||||
|
components: { BsCommentInfo, UiCell, UiWhiteBox },
|
||||||
|
props : {
|
||||||
|
count : {
|
||||||
|
type : Number,
|
||||||
|
default : 0
|
||||||
|
},
|
||||||
|
productId : {
|
||||||
|
type : Number | String,
|
||||||
|
default : 0
|
||||||
|
},
|
||||||
|
commentList : {
|
||||||
|
type : Array,
|
||||||
|
default : () => ([])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleJumpCmment(){
|
||||||
|
let url = '/goodsCommentOtherList'
|
||||||
|
if(this.commentList.length){
|
||||||
|
url = '/goodsCommentList'
|
||||||
|
}
|
||||||
|
this.$Router.push({
|
||||||
|
path : url,
|
||||||
|
query : {
|
||||||
|
id : this.productId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.comment-title{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding:30rpx;
|
||||||
|
align-items: center;
|
||||||
|
&--left{
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
&--right{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
background: url('@/static/common/arrow.png') no-repeat right center;
|
||||||
|
background-size: 10rpx;
|
||||||
|
padding-right: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.comment-ctx{
|
||||||
|
padding: 0 30rpx;
|
||||||
|
&--item{
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-20 14:55:54
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 17:11:51
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="box" v-for="(item, idx) in list" :key="item.productId">
|
||||||
|
<!-- {{item.isEdit}} -->
|
||||||
|
<BsCommentGoodsInfo :goods="item" />
|
||||||
|
<!-- <SubmitComment v-if="!item.id" :commentDetail="item" @submit="submitComment($event,idx)"/> -->
|
||||||
|
|
||||||
|
<BsCommentSubmit v-if="!item.id" :commentDetail="item" :type="COMMENT.TYPE.COMMENT"
|
||||||
|
@submit="submitComment($event,idx)" @editChang="editChange($event, idx)"/>
|
||||||
|
<!-- 已评价过显示详情 -->
|
||||||
|
<template v-else>
|
||||||
|
<BsCommentInfo :commentDetail="item"/>
|
||||||
|
<SubmitFollowComment :commentDetail="item"
|
||||||
|
@submit="submitFollowComment($event, idx)"
|
||||||
|
@editChange="editChange($event, idx)" />
|
||||||
|
<BsCommentMerchant v-if="item.merchantComment" :merchantComment="item.merchantComment"/>
|
||||||
|
<BsCommentThumbup :commentDetail="item"/>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { ApiGetOrderCommentDetail } from "@/common/api/comment";
|
||||||
|
import UiWhiteBox from "@/components/UiWhiteBox.vue";
|
||||||
|
import UiButton from "@/components/UiButton.vue";
|
||||||
|
import BsCommentSubmit from "@/components/BsCommentSubmit.vue";
|
||||||
|
import BsCommentGoodsInfo from '@/components/BsCommentGoodsInfo.vue';
|
||||||
|
import BsCommentInfo from '@/components/BsCommentInfo.vue';
|
||||||
|
import BsCommentMerchant from '@/components/BsCommentMerchant.vue';
|
||||||
|
import BsCommentThumbup from '@/components/BsCommentThumbup.vue';
|
||||||
|
import SubmitFollowComment from './modules/SubmitFollowComment.vue';
|
||||||
|
import COMMENT from '@/common/dicts/comment';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
UiWhiteBox,
|
||||||
|
UiButton,
|
||||||
|
BsCommentSubmit,
|
||||||
|
BsCommentGoodsInfo,
|
||||||
|
BsCommentInfo,
|
||||||
|
BsCommentMerchant,
|
||||||
|
BsCommentThumbup,
|
||||||
|
SubmitFollowComment,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
COMMENT,
|
||||||
|
list: [],
|
||||||
|
orderId: this.$Route.query.orderId,
|
||||||
|
showFollowComment: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getCommentDetail();
|
||||||
|
},
|
||||||
|
onBackPress(){
|
||||||
|
alert(2222)
|
||||||
|
const flag = this.list.find(i => i.isEdit == true);
|
||||||
|
alert(1111)
|
||||||
|
if(flag){
|
||||||
|
uni.showModal({
|
||||||
|
content : '您正在进行商品评价，退出后评价的内容将不保存',
|
||||||
|
cancelTxt : '我再想想',
|
||||||
|
cancelColor : '#999',
|
||||||
|
confirmColor : '#3A83FB',
|
||||||
|
success: async ({confirm}) => {
|
||||||
|
if(confirm){
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getCommentDetail() {
|
||||||
|
const { error, result } = await ApiGetOrderCommentDetail({
|
||||||
|
orderId: this.orderId,
|
||||||
|
});
|
||||||
|
if (error) {
|
||||||
|
uni.$u.toast(error.message);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.list = result;
|
||||||
|
},
|
||||||
|
submitComment(result, idx){
|
||||||
|
this.$set(this.list, idx, {...this.list[idx],...result});
|
||||||
|
},
|
||||||
|
editChange(isEdit, idx){
|
||||||
|
this.$set(this.list[idx], 'isEdit', isEdit);
|
||||||
|
},
|
||||||
|
submitFollowComment(result, idx){
|
||||||
|
this.$set(this.list[idx],'followComment',{
|
||||||
|
...this.list[idx].followComment,
|
||||||
|
...result
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
beforeRouteLeave(to, from, next){
|
||||||
|
console.log(to,from,'beforeRouteLeavebeforeRouteLeave')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background: $color-grey1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box{
|
||||||
|
background: $color-grey0;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
padding:40rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-20 16:36:14
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 11:41:09
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="rate">
|
||||||
|
<text class="rate--title">满意度评分</text>
|
||||||
|
<u-rate :count="5" v-model="rate" size="47rpx" activeColor="#FFA35B" inactiveColor="#DDD"></u-rate>
|
||||||
|
<text class="rate--desc">满意</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<textarea class="textarea" placeholder="从多个维度评价，可以帮助更多想买的人哦~"
|
||||||
|
:maxlength="500" v-model="commentContent"></textarea>
|
||||||
|
<u-upload class="upload"
|
||||||
|
@afterRead="handleUpdateImg" @delete="handleDelImg"
|
||||||
|
:fileList="fileList" :maxCount="6" :previewFullImage="true">
|
||||||
|
</u-upload>
|
||||||
|
</view>
|
||||||
|
<view class="footer">
|
||||||
|
<UiButton type="solid" :disable="!rate" @click="handleSubmit">发表评价</UiButton>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import UiButton from '@/components/UiButton.vue';
|
||||||
|
import {ApiPostComment} from '@/common/api/comment';
|
||||||
|
import COMMENT from '@/common/dicts/comment';
|
||||||
|
import {uploadFileOss} from '@/common/utils';
|
||||||
|
export default {
|
||||||
|
components: { UiButton },
|
||||||
|
props:{
|
||||||
|
commentDetail : {
|
||||||
|
type : Object,
|
||||||
|
default : ()=> ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
rate : 0,
|
||||||
|
commentContent : '',
|
||||||
|
fileList : []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
async handleSubmit(){
|
||||||
|
let data = {
|
||||||
|
commentScore : this.rate,
|
||||||
|
commentContent : this.commentContent,
|
||||||
|
commentType : COMMENT.TYPE.COMMENT,
|
||||||
|
orderProductId : this.commentDetail.orderProductId,
|
||||||
|
productId : this.commentDetail.productId,
|
||||||
|
pictureUrl : this.fileList.map(i => i.url).join(',')
|
||||||
|
}
|
||||||
|
const {error, result} = await ApiPostComment(data);
|
||||||
|
if(error){
|
||||||
|
uni.$u.toast(error.message);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.$emit('submit',result);
|
||||||
|
},
|
||||||
|
async handleUpdateImg(val){
|
||||||
|
const {error, result} = await uploadFileOss(val.file, {
|
||||||
|
configId : 'account-comment',
|
||||||
|
serviceName : 'comment'
|
||||||
|
})
|
||||||
|
if(error){
|
||||||
|
uni.$u.toast(error);
|
||||||
|
}
|
||||||
|
this.fileList.push({url : result});
|
||||||
|
},
|
||||||
|
handleDelImg(target){
|
||||||
|
this.fileList.splice(target.index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.rate{
|
||||||
|
display: flex;
|
||||||
|
margin: 50rpx 0;
|
||||||
|
align-items: center;
|
||||||
|
&--title{
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
&--desc{
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-left: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.textarea{
|
||||||
|
height: 200rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-20 16:36:41
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 16:46:04
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view class="follow">
|
||||||
|
<BsCommentFollowInfo v-if="commentDetail.followComment"
|
||||||
|
:followComment="commentDetail.followComment" :commentTime="commentDetail.createTime"/>
|
||||||
|
<template v-else>
|
||||||
|
<UiButton type="primaryLine" @click="showInput = true" v-if="!showInput">发表追评</UiButton>
|
||||||
|
<template v-else>
|
||||||
|
<BsCommentSubmit :commentDetail="commentDetail" :type="COMMENT.TYPE.FOLLOW_COMMENT"
|
||||||
|
@submit="handleSubmit" @editChang="handleEditChange"/>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import UiButton from '@/components/UiButton.vue'
|
||||||
|
import BsCommentFollowInfo from '@/components/BsCommentFollowInfo.vue';
|
||||||
|
import BsCommentSubmit from '@/components/BsCommentSubmit.vue';
|
||||||
|
import COMMENT from '@/common/dicts/comment';
|
||||||
|
export default {
|
||||||
|
components: { UiButton, BsCommentFollowInfo, BsCommentSubmit },
|
||||||
|
props : {
|
||||||
|
commentDetail : {
|
||||||
|
type : Object,
|
||||||
|
default : () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
showInput : false,
|
||||||
|
COMMENT,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
async handleSubmit(data){
|
||||||
|
this.$emit('submit',data);
|
||||||
|
},
|
||||||
|
handleEditChange(data){
|
||||||
|
this.$emit('editChange',data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.follow{
|
||||||
|
margin-top: 40rpx;
|
||||||
|
&--title{
|
||||||
|
color: $color-yellow3;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
&--ctx{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 46rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,156 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-21 18:19:13
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 16:14:08
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="goods-info">
|
||||||
|
<BsCommentGoodsInfo :goods="detail"/>
|
||||||
|
</view>
|
||||||
|
<view class="box">
|
||||||
|
<BsCommentUserInfo :userData="detail"/>
|
||||||
|
<BsCommentInfo :commentDetail="detail"/>
|
||||||
|
<BsCommentSubmit :commentDetail="detail" :type="COMMENT.TYPE.FOLLOW_COMMENT" @submit="handleSubmit"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BsCommentGoodsInfo from '../../../components/BsCommentGoodsInfo.vue'
|
||||||
|
import BsCommentInfo from '../../../components/BsCommentInfo.vue'
|
||||||
|
import BsCommentUserInfo from '../../../components/BsCommentUserInfo.vue'
|
||||||
|
import UiButton from '../../../components/UiButton.vue'
|
||||||
|
import {ApiGetCommentDetail, ApiPostComment} from '@/common/api/comment'
|
||||||
|
import {HandleApiError} from '@/common/utils'
|
||||||
|
import COMMENT from '@/common/dicts/comment'
|
||||||
|
import BsCommentSubmit from '../../../components/BsCommentSubmit.vue'
|
||||||
|
export default {
|
||||||
|
components: { BsCommentGoodsInfo, BsCommentInfo, UiButton, BsCommentUserInfo, BsCommentSubmit },
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
COMMENT,
|
||||||
|
isShowAnswer : false,
|
||||||
|
answer : null,
|
||||||
|
commentId : this.$Route.query.id,
|
||||||
|
detail : {},
|
||||||
|
commentContent : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
placeholder(){
|
||||||
|
return this.answer ? `回复：${this.answer.userName}` : '说点什么吧？'
|
||||||
|
},
|
||||||
|
answerCount(){
|
||||||
|
return this.detail.answerCommentList ? this.detail.answerCommentList.length : 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.getDetail();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
async getDetail(){
|
||||||
|
const {error, result} = await ApiGetCommentDetail({
|
||||||
|
commentId : this.commentId
|
||||||
|
});
|
||||||
|
if(!HandleApiError(error,'getDetail')){
|
||||||
|
this.detail = result;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async handleSubmit(){
|
||||||
|
this.$Router.replace('/commentSuccess');
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
page{
|
||||||
|
background: $color-grey1;
|
||||||
|
padding-bottom: 140rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.goods-info{
|
||||||
|
padding: 40rpx 40rpx 0;
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
background: $color-grey0;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
.reply-title{
|
||||||
|
height: 70rpx;
|
||||||
|
line-height: 70rpx;
|
||||||
|
margin-bottom:1rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
}
|
||||||
|
.reply{
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
&--item{
|
||||||
|
border-bottom: 1px solid $color-grey1;
|
||||||
|
padding-top: 40rpx;
|
||||||
|
}
|
||||||
|
&--title{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
text{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&--ctx{
|
||||||
|
margin: 26rpx 0;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
height: 124rpx;
|
||||||
|
position: fixed;
|
||||||
|
bottom: var(--window-bottom);
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
background: #fff;
|
||||||
|
border-top: 1px solid #f8f8f8;
|
||||||
|
|
||||||
|
}
|
||||||
|
.reply-comment--bg{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-comment{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 2;
|
||||||
|
background: #fff;
|
||||||
|
height: 124rpx;
|
||||||
|
padding: 24rpx 40rpx;
|
||||||
|
border-top: 1px solid #f8f8f8;
|
||||||
|
&--box{
|
||||||
|
display: flex;
|
||||||
|
background: #F5F5F5;
|
||||||
|
border-radius: 38rpx;
|
||||||
|
}
|
||||||
|
&--input{
|
||||||
|
flex: 1;
|
||||||
|
padding:0 20rpx 0 40rpx;
|
||||||
|
height: 76rpx;
|
||||||
|
line-height: 76rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-06-21 15:32:28
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-06-23 16:56:34
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="main">
|
||||||
|
<image class="icon" src="@/static/order/paySuccess.png"/>
|
||||||
|
<view class="title">评价成功</view>
|
||||||
|
<view class="btns">
|
||||||
|
<UiButton class="btn" @click="$Router.back()">返回</UiButton>
|
||||||
|
</view>
|
||||||
|
<view class="await">
|
||||||
|
<view class="await--title">这些宝贝还在等你的评价哦~</view>
|
||||||
|
<BsCommentGoodsInfo class="await--goods" :goods="item" v-for="item in goodsList" :key="item.productId">
|
||||||
|
<UiButton slot="btns" size="small" type="primaryLine">评价</UiButton>
|
||||||
|
</BsCommentGoodsInfo>
|
||||||
|
</view>
|
||||||
|
<view class="recommend-title">为您推荐</view>
|
||||||
|
<BsChoiceGoods></BsChoiceGoods>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import UiButton from '@/components/UiButton.vue'
|
||||||
|
import BsChoiceGoods from '../../../components/BsChoiceGoods.vue';
|
||||||
|
import {ApiGetCommentOrderDetailList} from '@/common/api/order';
|
||||||
|
import {HandleApiError} from '@/common/utils'
|
||||||
|
import BsCommentGoodsInfo from '../../../components/BsCommentGoodsInfo.vue';
|
||||||
|
export default {
|
||||||
|
components: { UiButton, BsChoiceGoods, BsCommentGoodsInfo },
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
goodsList : []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(){
|
||||||
|
this.getAwaitGoodsList();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
async getAwaitGoodsList (){
|
||||||
|
const {error, result} = await ApiGetCommentOrderDetailList({
|
||||||
|
length:2,
|
||||||
|
pageIndex : 1
|
||||||
|
});
|
||||||
|
if(!HandleApiError(error, 'getAwaitGoodsList')){
|
||||||
|
this.goodsList = result.map(item => {
|
||||||
|
return {
|
||||||
|
productPicture : item.productImageUrl,
|
||||||
|
productName : item.productName,
|
||||||
|
skuName : item.skuDescribe || '第三课时'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.main {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
width: 400rpx;
|
||||||
|
height: 256rpx;
|
||||||
|
margin: 169rpx auto 42rpx;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: $font-size-lg;
|
||||||
|
line-height: 44rpx;
|
||||||
|
color: $color-grey6;
|
||||||
|
}
|
||||||
|
.desc{
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
line-height: 34rpx;
|
||||||
|
color: $color-grey4;
|
||||||
|
}
|
||||||
|
.btns{
|
||||||
|
margin: 74rpx 105rpx 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.await{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
background: $color-grey0;
|
||||||
|
&--title{
|
||||||
|
text-align: left;
|
||||||
|
padding: 40rpx;
|
||||||
|
border-bottom: 1px solid #f8f8f8;
|
||||||
|
}
|
||||||
|
&--goods{
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.recommend-title{
|
||||||
|
font-size: $font-size-lg;
|
||||||
|
text-align: center;
|
||||||
|
margin: 51rpx auto 30rpx auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 500rpx;
|
||||||
|
&::after,&::before{
|
||||||
|
display: inline-block;
|
||||||
|
content: '';
|
||||||
|
width: 160rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
background: linear-gradient(90deg, $color-grey3 0%, rgba(204, 204, 204, 0) 100%);
|
||||||
|
|
||||||
|
}
|
||||||
|
&::before{
|
||||||
|
|
||||||
|
background: linear-gradient(270deg, $color-grey3 0%, rgba(204, 204, 204, 0) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
After Width: | Height: | Size: 341 B |
|
After Width: | Height: | Size: 341 B |
Loading…
Reference in new issue