msb-mca
/
shop-pc
2.1k
2
Code Issues Pull Requests Projects Releases Wiki Activity

修改评论数量,点击追评的效果

Browse Source
feature/comment-0624-ch
ch 2 years ago
parent e771928e88
commit 91812512bc
6 changed files with 50 additions and 51 deletions
Show Stats Download Patch File Download Diff File

51
components/BsCommentInfo.vue
Unescape View File

@ -2,12 +2,12 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-24 11:43:04 * @Date: 2022-06-24 11:43:04
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-28 21:34:32 * @LastEditTime: 2022-06-29 11:52:30
* @Description: file content * @Description: file content
--> -->
<template> <template>
<div class="comment-info"> <div class="comment-info">
<div class="side-user" v-if="type == 'detail'"> <div class="side-user" v-if="source == 'detail'">
<el-avatar :size="55" :src="commentDetail.userAvatar" /> <el-avatar :size="55" :src="commentDetail.userAvatar" />
<p>{{commentDetail.userName}}</p> <p>{{commentDetail.userName}}</p>
</div> </div>
@ -30,7 +30,7 @@
<!-- 追评 --> <!-- 追评 -->
<UiButton class="follow-btn" type="yellow_line" radius="4px" <UiButton class="follow-btn" type="yellow_line" radius="4px"
v-if="isCanFollowComment && !showFollowForm" @click="handleShowFollowForm">发起追评</UiButton> v-if="isCanFollowComment && !showFollowForm" @click="showFollowForm = true">发起追评</UiButton>
<BsCommentSubmit v-if="showFollowForm && !followComment" :type="COMMENT.TYPE.FOLLOW_COMMENT" <BsCommentSubmit v-if="showFollowForm && !followComment" :type="COMMENT.TYPE.FOLLOW_COMMENT"
:commentDetail="commentDetail" @submit="handleSubmitFollow"/> :commentDetail="commentDetail" @submit="handleSubmitFollow"/>
@ -41,7 +41,7 @@
<div class="operation"> <div class="operation">
<div> <div>
<span class="operation--chat" @click="answerVisible = !answerVisible"> <span class="operation--chat" @click="answerVisible = !answerVisible">
<template v-if="answerCommentList.length">{{answerCount}}条</template>评论 <template v-if="commentDetail.replyCount">{{commentDetail.replyCount}}条</template>评论
</span> </span>
<span class="operation--show" v-if="answerCommentList.length" @click="answerVisible = !answerVisible"> <span class="operation--show" v-if="answerCommentList.length" @click="answerVisible = !answerVisible">
{{answerVisible ? '收起' : '展开'}} {{answerVisible ? '收起' : '展开'}}
@ -52,7 +52,7 @@
<!-- 评论内容 --> <!-- 评论内容 -->
<div class="answer" v-if="showAnswerBox"> <div class="answer" v-if="showAnswerBox">
<b class="answer--title">全部评论({{answerCount}})</b> <b class="answer--title">全部评论({{commentDetail.replyCount}})</b>
<ul> <ul>
<li class="answer--item" v-if="commentDetail.merchantComment"> <li class="answer--item" v-if="commentDetail.merchantComment">
<div class="answer--name"><b>{{commentDetail.merchantComment.userName}}：</b><span>{{commentDetail.merchantComment.createTime}}</span></div> <div class="answer--name"><b>{{commentDetail.merchantComment.userName}}：</b><span>{{commentDetail.merchantComment.createTime}}</span></div>
@ -93,9 +93,16 @@ import {COMMENT} from '@/constants'
export default { export default {
components: { BsCommentFollowInfo, UiImgs, UiButton, BsCommentSubmit }, components: { BsCommentFollowInfo, UiImgs, UiButton, BsCommentSubmit },
props:{ props:{
type:{ // 来源 comment从我的订单来是需要操作评价，detail游客从商品中来只要显示评价详情
source:{
type : String, type : String,
default : 'detail' // comment默认显示评价状态，follow默认追评状态 detail 查看状态 default : 'comment'
},
// 是否默认打开追评，只有在无追评时有用
isFollowForm : {
type : Boolean,
default : false,
require : true
}, },
commentDetail : { commentDetail : {
type : Object, type : Object,
@ -111,7 +118,7 @@ export default {
answer : null, answer : null,
isLike : false, isLike : false,
usefulCount : 0, usefulCount : 0,
showFollowForm : this.type === 'follow' ? true : false, showFollowForm : this.isFollowForm,
followComment : this.commentDetail.followComment || null followComment : this.commentDetail.followComment || null
} }
@ -120,13 +127,6 @@ export default {
showAnswerBox(){ showAnswerBox(){
return (this.commentDetail.merchantComment || this.answerVisible) ? true : false return (this.commentDetail.merchantComment || this.answerVisible) ? true : false
}, },
answerCount(){
let count = this.answerCommentList.length;
if(this.commentDetail.merchantComment){
count += 1;
}
return count
},
answerPlaceholder (){ answerPlaceholder (){
return this.answer ? `回复：${this.answer.userName}` : '说点什么吧？' return this.answer ? `回复：${this.answer.userName}` : '说点什么吧？'
}, },
@ -136,15 +136,10 @@ export default {
}, },
/** /**
* 是否需要显示追评按钮 * 是否需要显示追评按钮
* 如果是在订单里进来的，则只要判断没有追评则显示 * 如果是在订单里进来的，且没有追评则显示
* 如果在商品中看则需要这条评论是不是当前登录用户评论的，如果是则也可以追评
*/ */
isCanFollowComment(){ isCanFollowComment(){
let status = false; let status = (!this.followComment && this.source === 'comment')
const userId = this.$store.state.userInfo.id;
if(!this.followComment && (this.type !== 'detail' || this.commentDetail.userId === userId)){
status = true;
}
return status; return status;
} }
}, },
@ -165,18 +160,6 @@ export default {
*/ */
handleSubmit(result){ handleSubmit(result){
this.$emit('submit', result) this.$emit('submit', result)
},
/**
* 点击追评
*/
handleShowFollowForm(){
if(this.type !== 'detail'){
this.showFollowForm = true;
}else{
this.$router.push(`/account/comment?commentId=${this.commentDetail.id}`);
}
}, },
/** /**
* 追评提交成功，抛出事件，方便父组件做数据处理 * 追评提交成功，抛出事件，方便父组件做数据处理

10
pages/account/comment/index.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-27 11:46:34 * @Date: 2022-06-27 11:46:34
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-28 22:07:23 * @LastEditTime: 2022-06-29 11:53:25
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -15,7 +15,7 @@
<div class="title">商品评价</div> <div class="title">商品评价</div>
<div class="ctx"> <div class="ctx">
<UiLoading v-if="loading"></UiLoading> <UiLoading v-if="loading"></UiLoading>
<BsCommentInfo v-else :type="orderId ? 'comment' : 'follow'" v-for="(item, idx) in list" :key="idx" <BsCommentInfo v-else source="comment" :isFollowForm="isFollow" v-for="(item, idx) in list" :key="idx"
:commentDetail="item" @submit="handleSubmitComment($event, idx)" :commentDetail="item" @submit="handleSubmitComment($event, idx)"
@submitFollow="handleSubmitFollow($event, idx)"/> @submitFollow="handleSubmitFollow($event, idx)"/>
</div> </div>
@ -34,9 +34,11 @@ import BsCommentInfo from '../../../components/BsCommentInfo.vue';
export default { export default {
components: { BsCommentInfo }, components: { BsCommentInfo },
data(){ data(){
let query = this.$route.query;
return { return {
orderId: this.$route.query.orderId, isFollow : query.follow ? true : false, // 是否自动打开追评
commentId : this.$route.query.commentId, orderId: query.orderId,
commentId : query.commentId,
list:[], list:[],
loading : true loading : true
} }

4
pages/account/index/order/list/index.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-04 20:47:29 * @Date: 2022-05-04 20:47:29
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-28 21:48:56 * @LastEditTime: 2022-06-29 11:50:49
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -59,7 +59,7 @@
<UiButton type="yellow_gradual" v-if="item.orderStatus === 5" <UiButton type="yellow_gradual" v-if="item.orderStatus === 5"
@click="$router.push(`/account/comment?orderId=${item.orderId}`)">去评价</UiButton> @click="$router.push(`/account/comment?orderId=${item.orderId}`)">去评价</UiButton>
<UiButton type="yellow_gradual" v-if="item.orderStatus === 6" <UiButton type="yellow_gradual" v-if="item.orderStatus === 6"
@click="$router.push(`/account/comment?orderId=${item.orderId}`)">去追评</UiButton> @click="$router.push(`/account/comment?orderId=${item.orderId}&follow=true`)">去追评</UiButton>
<router-link class="link-btn" :to="`./detail?id=${item.orderId}`" v-if="item.orderStatus >= 4">查看物流</router-link> <router-link class="link-btn" :to="`./detail?id=${item.orderId}`" v-if="item.orderStatus >= 4">查看物流</router-link>
</td> </td>

4
pages/goods/detail/module/Comment.vue
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-24 14:39:38 * @Date: 2022-06-24 14:39:38
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-28 21:51:09 * @LastEditTime: 2022-06-29 11:58:11
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -35,7 +35,7 @@
</span> </span>
</div> </div>
</div> </div>
<BsCommentInfo v-for="item in list" :key="item.id" :commentDetail="item"/> <BsCommentInfo v-for="item in list" :key="item.id" :commentDetail="item" source="detail"/>
</template> </template>
</div> </div>

20
plugins/api/comment.js
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-20 11:38:48 * @Date: 2022-06-20 11:38:48
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-25 17:49:58 * @LastEditTime: 2022-06-29 11:55:10
* @Description: file content * @Description: file content
*/ */
@ -14,11 +14,17 @@ import ENV from '../config/env';
const BASE_URL = `${ENV.base_url}/mall/comment`; const BASE_URL = `${ENV.base_url}/mall/comment`;
/** /**
* 根据商品获取评论列表 * 根据商品获取评论列表未
* @param {*} param0 * @param {*} param0
*/ */
export const ApiGetCommentList = (params) => export const ApiGetCommentList = (params) =>
ToAsyncAwait(axios.get(`${BASE_URL}/app/comment`, {params})); ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/comment`, {
params: {
...params,
notVerifyToken : true
}
}));
/** /**
* 根据商品获取评论总数 * 根据商品获取评论总数
* @param {*} param0 * @param {*} param0
@ -42,13 +48,17 @@ export const ApiGetOrderCommentDetail = ({orderId}) =>
* @param {*} param0 * @param {*} param0
*/ */
export const ApiGetProductSatisfaction = ({productId}) => export const ApiGetProductSatisfaction = ({productId}) =>
ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/comment/getProductSatisfaction/${productId}`)); ToAsyncAwait(axios.get(`${BASE_URL}/app/comment/getProductSatisfaction/${productId}`));
/** /**
* 获取评论详情 * 获取评论详情
* @param {*} param0 * @param {*} param0
*/ */
export const ApiGetCommentDetail = ({commentId}) => export const ApiGetCommentDetail = ({commentId}) =>
ToAsyncAwait(axios.get(`${BASE_URL}/app/comment/getCommentDetail/${commentId}`)); ToAsyncAwait(axiosTk.get(`${BASE_URL}/app/comment/getCommentDetail/${commentId}`, {
params: {
notVerifyToken : true
}
}));
/** /**
* 新增评论 * 新增评论
* @param {*} param0 * @param {*} param0

12
plugins/axiosTk.js
Unescape View File

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-04 17:11:07 * @Date: 2022-05-04 17:11:07
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-10 14:26:57 * @LastEditTime: 2022-06-29 11:16:31
* @Description: file content * @Description: file content
*/ */
import { CreateUUID } from "@/plugins/utils"; import { CreateUUID } from "@/plugins/utils";
@ -23,10 +23,14 @@ export default function ({$axios, store, route, req}, inject) {
$axiosTk.defaults.timeout = 3000; $axiosTk.defaults.timeout = 3000;
$axiosTk.onRequest( config =>{ $axiosTk.onRequest( config =>{
config.headers.uid = uuid; config.headers.uid = uuid;
if(!store.state.token){ if (config.headers.notVerifyToken) {
location.href = '/'; if(!store.state.token){
return Promise.reject({message : '要先登录才能操作哦~'}); location.href = '/';
return Promise.reject({message : '要先登录才能操作哦~'});
}
delete config.headers.notVerifyToken;
} }
config.headers.Authorization = store.state.token; config.headers.Authorization = store.state.token;
return config; return config;
}); });

Write Preview
Loading…
Cancel
Save