商品评价

feature/comment-0624-ch
ch 2 years ago
parent e78c41f6c2
commit a93838e595

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 756 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 762 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 850 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 613 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 375 B

@ -2,58 +2,80 @@
* @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-27 10:35:22 * @LastEditTime: 2022-06-27 18:06:10
* @Description: file content * @Description: file content
--> -->
<template> <template>
<div class="comment-info"> <div class="comment-info">
<div class="side"> <div class="side-user" v-if="type == '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>
<div class="side-product" v-else>
<img :src="commentDetail.productPicture"/>
<p>{{commentDetail.productName}}</p>
<span>{{commentDetail.skuName}}</span>
</div>
<main> <main>
<div class="top"> <BsCommentSubmit v-if="!commentDetail.id" :commentDetail="commentDetail" @submit="handleSubmit"/>
<el-rate :value="commentDetail.commentScore" disabled/> <template v-else>
<span class="time">{{commentDetail.createTime}}</span> <div class="top">
</div> <el-rate :value="commentDetail.commentScore" disabled/>
<p class="sku">已购买{{commentDetail.skuName}}</p> <span class="time">{{commentDetail.createTime}}</span>
<div class="ctx">{{commentDetail.commentContent}}</div>
<UiImgs v-if="imgs.length" :list="imgs" class="imgs" />
<BsCommentFollowInfo v-if="commentDetail.followComment" :followComment="commentDetail.followComment" :commentTime="commentDetail.commentTime"/>
<div class="operation">
<div>
<span class="operation--chat" @click="answerVisible = !answerVisible">
<template v-if="answerCommentList.length">{{answerCount}}</template>
</span>
<span class="operation--show" v-if="answerCommentList.length" @click="answerVisible = !answerVisible">
{{answerVisible ? '收起' : '展开'}}
</span>
</div> </div>
<span class="operation--thumb" :class="{'operation--thumb__active':isLike}" @click="handleUseful">{{usefulCount || ''}}</span> <p class="sku">已购买{{commentDetail.skuName}}</p>
</div> <div class="ctx">{{commentDetail.commentContent}}</div>
<div class="answer" v-if="showAnswerBox"> <!-- 图片预览 -->
<b class="answer--title">全部评论({{answerCount}})</b> <UiImgs v-if="imgs.length" :list="imgs" class="imgs" />
<ul>
<li class="answer--item" v-if="commentDetail.merchantComment"> <!-- 追评 -->
<div class="answer--name"><b>{{commentDetail.merchantComment.userName}}</b><span>{{commentDetail.merchantComment.createTime}}</span></div> <UiButton class="follow-btn" type="yellow_line" radius="4px"
<p class="answer--ctx">{{commentDetail.merchantComment.commentContent}}</p> v-if="isCanFollowComment && !showFollowForm" @click="handleShowFollowForm">发起追评</UiButton>
</li> <BsCommentSubmit v-if="showFollowForm && !followComment" :type="COMMENT.TYPE.FOLLOW_COMMENT"
<li class="answer--item" v-for="(item, idx) in answerCommentList" :key="idx"> :commentDetail="commentDetail" @submit="handleSubmitFollow"/>
<div class="answer--name">
<b>{{item.userName}} {{item.parentId !== commentDetail.id ? ` 回复 ${item.parentUserName}` : ''}}</b> <BsCommentFollowInfo v-if="followComment"
<span>{{item.createTime}}</span> :followComment="followComment" :commentTime="commentDetail.commentTime"/>
</div>
<p class="answer--ctx">{{item.commentContent}}</p> <!-- 点赞评论Bar -->
<span class="answer--answer" @click="handleAnswer(item)"></span> <div class="operation">
</li> <div>
</ul> <span class="operation--chat" @click="answerVisible = !answerVisible">
<div v-if="answerVisible" class="answer--form"> <template v-if="answerCommentList.length">{{answerCount}}</template>
<input v-model="answerContent" class="answer--input" @keydown="handleClearAnswer" :placeholder="answerPlaceholder"/> </span>
<UiButton :disabled="!answerContent" @click="handleSubmit" <span class="operation--show" v-if="answerCommentList.length" @click="answerVisible = !answerVisible">
radius="4px" class="answer--btn" type="red_panel">发表</UiButton> {{answerVisible ? '收起' : '展开'}}
</span>
</div>
<span class="operation--thumb" :class="{'operation--thumb__active':isLike}" @click="handleUseful">{{usefulCount || ''}}</span>
</div> </div>
</div>
<BsCommentSubmit v-if="!commentDetail.id" :commentDetail="commentDetail"/> <!-- 评论内容 -->
<div class="answer" v-if="showAnswerBox">
<b class="answer--title">全部评论({{answerCount}})</b>
<ul>
<li class="answer--item" v-if="commentDetail.merchantComment">
<div class="answer--name"><b>{{commentDetail.merchantComment.userName}}</b><span>{{commentDetail.merchantComment.createTime}}</span></div>
<p class="answer--ctx">{{commentDetail.merchantComment.commentContent}}</p>
</li>
<li class="answer--item" v-for="(item, idx) in answerCommentList" :key="idx">
<div class="answer--name">
<b>{{item.userName}} {{item.parentId !== commentDetail.id ? ` 回复 ${item.parentUserName}` : ''}}</b>
<span>{{item.createTime}}</span>
</div>
<p class="answer--ctx">{{item.commentContent}}</p>
<span class="answer--answer" @click="handleAnswer(item)"></span>
</li>
</ul>
<div v-if="answerVisible" class="answer--form">
<input v-model="answerContent" class="answer--input"
@keydown="handleClearAnswer" :placeholder="answerPlaceholder"/>
<UiButton :disabled="!answerContent" @click="handleSubmitAnswer"
radius="4px" class="answer--btn" type="red_panel">发表</UiButton>
</div>
</div>
</template>
</main> </main>
</div> </div>
@ -65,12 +87,13 @@ import {Debounce } from '@/plugins/utils';
import UiImgs from './UiImgs.vue'; import UiImgs from './UiImgs.vue';
import UiButton from './UiButton.vue'; import UiButton from './UiButton.vue';
import BsCommentSubmit from './BsCommentSubmit.vue'; import BsCommentSubmit from './BsCommentSubmit.vue';
import {COMMENT} from '@/constants'
export default { export default {
components: { BsCommentFollowInfo, UiImgs, UiButton, BsCommentSubmit }, components: { BsCommentFollowInfo, UiImgs, UiButton, BsCommentSubmit },
props:{ props:{
type:{ type:{
type : String, type : String,
default : 'detail' //edit detail default : 'detail' // commentfollow detail
}, },
commentDetail : { commentDetail : {
type : Object, type : Object,
@ -79,12 +102,15 @@ export default {
}, },
data(){ data(){
return { return {
answerCommentList : [], COMMENT,
answerCommentList : this.commentDetail.answerCommentList || [],
answerVisible : false, answerVisible : false,
answerContent : '', answerContent : '',
answer : null, answer : null,
isLike : false, isLike : false,
usefulCount : 0 usefulCount : 0,
showFollowForm : this.type === 'follow' ? true : false,
followComment : this.commentDetail.followComment || null
} }
}, },
@ -105,10 +131,24 @@ export default {
imgs (){ imgs (){
let imgs = this.commentDetail.pictureUrl; let imgs = this.commentDetail.pictureUrl;
return imgs ? imgs.split(',') : []; return imgs ? imgs.split(',') : [];
},
/**
* 是否需要显示追评按钮
* 如果是在订单里进来的则只要判断没有追评则显示
* 如果在商品中看则需要这条评论是不是当前登录用户评论的如果是则也可以追评
*/
isCanFollowComment(){
let status = false;
const userId = this.$store.state.userInfo.id;
if(!this.followComment && (this.type !== 'detail' || this.commentDetail.userId === userId)){
status = true;
}
return status;
} }
}, },
watch:{ watch:{
commentDetail(){ commentDetail(){
this.followComment = this.commentDetail.followComment;
this.answerCommentList = this.commentDetail.answerCommentList || []; this.answerCommentList = this.commentDetail.answerCommentList || [];
this.isLike = this.commentDetail.isLike; this.isLike = this.commentDetail.isLike;
this.usefulCount = this.commentDetail.usefulCount; this.usefulCount = this.commentDetail.usefulCount;
@ -118,15 +158,46 @@ export default {
this.answerCommentList = this.commentDetail.answerCommentList || []; this.answerCommentList = this.commentDetail.answerCommentList || [];
}, },
methods : { methods : {
/**
* 评价成功后抛出事件方便父组件做数据处理
*/
handleSubmit(result){
this.$emit('submit', result)
},
/**
* 点击追评
*/
handleShowFollowForm(){
if(this.type !== 'detail'){
this.showFollowForm = true;
}else{
this.$router.push(`/account/comment?commentId=${this.commentDetail.id}`);
}
},
/**
* 追评提交成功抛出事件方便父组件做数据处理
*/
handleSubmitFollow(result){
this.followComment = result;
},
handleAnswer (item){ handleAnswer (item){
this.answer = item; this.answer = item;
}, },
/**
* 有回复用户时取消回复对象
* 输入框没有内容后再按一次退格删除回复对象直接回复评价
*/
handleClearAnswer(e){ handleClearAnswer(e){
if(e.code === 'Backspace' && !this.answerContent && this.answer){ if(e.code === 'Backspace' && !this.answerContent && this.answer){
this.answer = null; this.answer = null;
} }
}, },
async handleSubmit(){ /**
* 评论回复请求成功往列表添加一条记录
*/
async handleSubmitAnswer(){
let data = { let data = {
commentContent : this.answerContent, commentContent : this.answerContent,
commentType : 3, commentType : 3,
@ -147,6 +218,9 @@ export default {
this.answerContent = ''; this.answerContent = '';
this.$message.success('评论成功!'); this.$message.success('评论成功!');
}, },
/**
* 点击点赞做防抖处理
*/
handleUseful(){ handleUseful(){
this.isLike = !this.isLike this.isLike = !this.isLike
if(this.isLike){ if(this.isLike){
@ -159,6 +233,9 @@ export default {
} }
this.debounce(); this.debounce();
}, },
/**
* 更新点赞请求
*/
async updateUseFul(){ async updateUseFul(){
if(this.isLike === this.commentDetail.isLike){ if(this.isLike === this.commentDetail.isLike){
return false return false
@ -182,9 +259,35 @@ export default {
flex: 1; flex: 1;
} }
} }
.side{ .side-user{
width: 170px; width: 170px;
text-align: center; text-align: center;
p{
margin-top: 10px;
@include ellipses(2)
}
}
.side-product{
width: 230px;
padding: 0 45px;
text-align: left;
img{
width: 140px;
height: 140px;
object-fit: contain;
}
p{
margin-top: 10px;
@include ellipses(2);
}
span{
margin-top: 5px;
display: block;
color: #999;
font-size: 12px;
}
} }
.top{ .top{
display: flex; display: flex;
@ -203,6 +306,9 @@ export default {
.imgs{ .imgs{
margin-top: 10px; margin-top: 10px;
} }
.follow-btn{
margin-top:30px
}
.follow{ .follow{
margin-top: 30px; margin-top: 30px;
&--title{ &--title{

@ -2,16 +2,16 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-25 15:29:43 * @Date: 2022-06-25 15:29:43
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-27 09:50:29 * @LastEditTime: 2022-06-27 17:27:36
* @Description: file content * @Description: file content
--> -->
<template> <template>
<div class="submit"> <div class="submit">
<p class="rate-box"> <p class="rate-box" v-if="type === COMMENT.TYPE.COMMENT">
<b>满意度评分</b> <b>满意度评分</b>
<el-rate v-model="rate"></el-rate> <el-rate v-model="rate"></el-rate>
<span>满意</span> <span>{{reteDesc}}</span>
</p> </p>
<el-input type="textarea" class="textarea" placeholder="从多个维度评价,可以帮助更多想买的人哦~" <el-input type="textarea" class="textarea" placeholder="从多个维度评价,可以帮助更多想买的人哦~"
v-model="commentContent" show-word-limit :maxlength="500" :rows="6"/> v-model="commentContent" show-word-limit :maxlength="500" :rows="6"/>
@ -25,20 +25,20 @@
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
<p class="upload-txt">我要晒图</p> <p class="upload-txt">我要晒图</p>
</el-upload> </el-upload>
<UiButton class="upload-btn" @click="handleSubmit"></UiButton> <UiButton class="upload-btn" :disabled="isDisabled" @click="handleSubmit"></UiButton>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {ApiPostComment} from '@/plugins/api/comment'; import {ApiPostComment} from '@/plugins/api/comment';
import {ApiPostGetOssConfig} from '@/plugins/api/oss'; import {ApiPostGetOssConfig} from '@/plugins/api/oss';
import {COMMENT} from '@/constants' import {COMMENT} from '@/constants';
export default { export default {
props : { props : {
type : { type : {
type : String, type : String | Number,
default : 1 default : COMMENT.TYPE.COMMENT
}, },
commentDetail : { commentDetail : {
type : Object, type : Object,
@ -47,13 +47,29 @@ export default {
}, },
data(){ data(){
return { return {
rate: 0, COMMENT,
rate: 5,
commentContent : '', commentContent : '',
uploadData : {}, uploadData : {},
uploadAction : '', uploadAction : '',
fileList : [] fileList : []
} }
}, },
computed:{
reteDesc(){
return COMMENT.RATE_LEVEL[this.rate];
},
isDisabled(){
let status = false
if(this.type === COMMENT.TYPE.COMMENT){
status = !this.rate || !this.commentContent
}
if(this.type === COMMENT.TYPE.FOLLOW_COMMENT){
status = !this.commentContent;
}
return status;
}
},
methods : { methods : {
async handleSubmit(){ async handleSubmit(){
let data = { let data = {
@ -62,18 +78,18 @@ export default {
orderProductId : this.commentDetail.orderProductId, orderProductId : this.commentDetail.orderProductId,
pictureUrl : this.fileList.map(i => i.url).join(',') pictureUrl : this.fileList.map(i => i.url).join(',')
} }
console.log(this.commentDetail);
if(this.type === COMMENT.TYPE.COMMENT){ if(this.type === COMMENT.TYPE.COMMENT){
data.productId = this.commentDetail.productId; data.productId = this.commentDetail.productId;
data.commentScore = this.rate; data.commentScore = this.rate;
}else if(this.type === COMMENT.TYPE.FOLLOW_COMMENT){ }else if(this.type === COMMENT.TYPE.FOLLOW_COMMENT){
data.originId = data.parentId = this.commentDetail.id; data.originId = data.parentId = this.commentDetail.id;
} }
const {error, result} = await ApiPostComment(data); const result = data
if(error){ // const {error, result} = await ApiPostComment(data);
this.$message.error(error.message); // if(error){
return false; // this.$message.error(error.message);
} // return false;
// }
this.$emit('submit',result); this.$emit('submit',result);
}, },
@ -133,7 +149,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.rate-box{ .rate-box{
display: flex; display: flex;
margin-top: 30px; b{
font-weight: normal;
margin-right: 10px;
color: #666;
}
span{
color: #FF6A19;
margin-left: 10px;
}
} }
.textarea{ .textarea{
height: 138px; height: 138px;

@ -2,12 +2,11 @@
* @Author: ch * @Author: ch
* @Date: 2022-06-24 19:07:45 * @Date: 2022-06-24 19:07:45
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-27 10:37:12 * @LastEditTime: 2022-06-27 16:54:25
* @Description: file content * @Description: file content
--> -->
<template> <template>
<div class="preview-imgs"> <div class="preview-imgs">
{{imgs}}
<ul> <ul>
<li v-for="(i, idx) in list" :key="idx" :class="{'active' : curIndex == idx}" > <li v-for="(i, idx) in list" :key="idx" :class="{'active' : curIndex == idx}" >
<img :src="i" @click="curIndex = idx"/> <img :src="i" @click="curIndex = idx"/>
@ -31,7 +30,6 @@ export default {
data(){ data(){
return { return {
curIndex : -1, curIndex : -1,
// imgs : ['https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/mall-product/product/cscs.png','https://img.alicdn.com/imgextra/i3/859515618/O1CN01Y1K5fp1rN5qfdxCtL_!!859515618.jpg']
} }
}, },
methods:{ methods:{

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-17 18:17:00 * @Date: 2022-05-17 18:17:00
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-06-27 09:45:38 * @LastEditTime: 2022-06-27 16:20:31
* @Description: file content * @Description: file content
*/ */
/** /**
@ -18,6 +18,9 @@ const ORDER_STATUS = {
WAIT_PAY: 1, // 待付款 WAIT_PAY: 1, // 待付款
WAIT_SEND: 3, //待发货 WAIT_SEND: 3, //待发货
WAIT_RECEIVE: 4, // 待收货 WAIT_RECEIVE: 4, // 待收货
WAIT_COMMENT: 5,//评价
FINISH: 6,
FINISH_FOLLOW_COMMENT : 7
}; };
// 性别 // 性别
@ -46,6 +49,13 @@ const COMMENT = {
FOLLOW_COMMENT: 2, FOLLOW_COMMENT: 2,
// 回复 // 回复
ANSWER: 3, ANSWER: 3,
},
RATE_LEVEL: {
1 : '很不满意',
2 : '不太满意',
3 : '一般',
4 : '满意',
5 : '非常满意'
} }
} }

@ -0,0 +1,132 @@
<!--
* @Author: ch
* @Date: 2022-06-27 11:46:34
* @LastEditors: ch
* @LastEditTime: 2022-06-27 18:54:51
* @Description: file content
-->
<template>
<div class="main">
<div class="tab">
<router-link class="tab--link" to="/account/home">个人中心</router-link>
<router-link class="tab--link" to="/account/order/list">我的订单</router-link>
<span>商品评价</span>
</div>
<div class="title">商品评价</div>
<div class="ctx">
<UiLoading v-if="loading"></UiLoading>
<BsCommentInfo v-else :type="orderId ? 'comment' : 'follow'" v-for="(item, idx) in list" :key="idx"
:commentDetail="item" @submit="handleSubmitComment($event, idx)"
@submitFollow="handleSubmitFollow($event, idx)"/>
</div>
</div>
</template>
<script>
import {
ApiGetOrderCommentDetail,
ApiGetCommentTabCount,
ApiGetProductSatisfaction,
ApiGetCommentCount,
ApiGetCommentDetail
} from "@/plugins/api/comment";
import {COMMENT} from '@/constants'
import BsCommentInfo from '../../../components/BsCommentInfo.vue';
export default {
components: { BsCommentInfo },
data(){
return {
orderId: this.$route.query.orderId,
commentId : this.$route.query.commentId,
list:[],
loading : true
}
},
mounted(){
if(this.orderId){
this.getOrderCommentDetail();
}else if(this.commentId){
this.getCommentDetail()
}
},
methods:{
/**
* 按订单查询评价详情
*/
async getOrderCommentDetail() {
this.loading = true;
const { error, result } = await ApiGetOrderCommentDetail({
orderId: this.orderId,
});
this.loading = false;
if (error) {
this.$message.warning(error.message);
return false;
}
this.list = result;
},
async getCommentDetail(){
this.loading = true;
const {error, result} = await ApiGetCommentDetail({
commentId : this.commentId
});
this.loading = false;
if (error) {
this.$message.warning(error.message);
return false;
}
this.list = [result];
},
/**
* 提交评论成功事件
* 如果还有未评论的则弹窗提示并更新当前行的数据
* 如果是最好一条产品评论则跳到评论成功页
*/
handleSubmitComment(result, idx){
this.$set(this.list, idx, {...this.list[idx],...result});
if(this.list.findIndex(i => !i.id) > 0){
this.$message.success('评论成功~');
}else{
this.$router.replace('/account/comment/success');
}
},
}
}
</script>
<style lang="scss" scoped>
.main{
@include layout-box;
margin-bottom: 32px;
}
.tab{
margin: 10px 0;
height: 40px;
line-height: 40px;
color: #999;
&--link{
background: url('@/assets/img/comment/right.png') no-repeat right center;
padding-right: 15px;
margin-right: 10px;
background-size: 5px;
color: #666;
}
}
.title{
width: 100%;
height: 40px;
line-height: 40px;
background: #f7f7f7;
border: 1px solid #f2f2f2;
padding: 0 16px;
font-size: 14px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #666666;
display: flex;
justify-content: space-between;
}
.ctx{
border: 1px solid #f2f2f2;
border-top: 0;
}
</style>

@ -0,0 +1,97 @@
<!--
* @Author: ch
* @Date: 2022-05-08 01:11:33
* @LastEditors: ch
* @LastEditTime: 2022-06-27 19:13:06
* @Description: file content
-->
<template>
<div>
<div class="main">
<img class="icon" src="@/assets/img/order/pay_success.png" />
<p>评价成功</p>
<div>
<UiButton type="grey" @click="$router.back()" :radius="true">返回</UiButton>
</div>
<div>
<b class="product-title">这些宝贝还在等你得评价哦~</b>
<ul class="product">
<li v-for="(item, idx) in list" :key="idx">
<img :src="item.productPicture"/>
<p>{{item.productName}}</p>
<UiButton type="grey">立即评价</UiButton>
</li>
</ul>
</div>
</div>
<BsChosen class="chosen"/>
</div>
</template>
<script>
import UiButton from '@/components/UiButton.vue';
import {ApiGetOrderPaySatus} from '@/plugins/api/order';
export default {
components: { UiButton },
data(){
return {
orderId : this.$route.query.orderId,
list : [{"id":null,"originId":null,"parentId":null,"userId":null,"userName":null,"commentContent":null,"isShow":null,"createTime":null,"commentType":null,"userAvatar":null,"productId":139,"orderProductId":1075,"skuName":"","productName":"订单设置测试","productPicture":"https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/mall-product/product/cscs.png","pictureUrl":null,"commentScore":null,"isLike":null,"usefulCount":null,"followComment":null,"answerCommentList":null,"merchantComment":null},{"id":null,"originId":null,"parentId":null,"userId":null,"userName":null,"commentContent":null,"isShow":null,"createTime":null,"commentType":null,"userAvatar":null,"productId":73,"orderProductId":1076,"skuName":"L,黄","productName":"测试数据(勿拍)","productPicture":"https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/mall-product/productcute.jpg","pictureUrl":null,"commentScore":null,"isLike":null,"usefulCount":null,"followComment":null,"answerCommentList":null,"merchantComment":null}]
}
},
mounted(){
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.main{
@include layout-box;
text-align: center;
padding: 100px 0 40px;
}
.icon{
width: 239px;
}
b{
display: block;
}
p{
margin: 10px 0 25px 0;
color: #999;
}
button{
margin: 0 10px 30px;
}
.product-title{
height: 40px;
line-height: 40px;
text-align: left;
background: #F7F7F7;
font-weight: normal;
color: #666;
padding: 0 16px;
}
.product{
display: flex;
// justify-content: flex-start;
li{
margin:40px 0 0 48px;
width: 140px;
img{
width: 140px;
height: 140px;
object-fit: contain;
}
p{
@include ellipses(2);
height: 40px;
margin: 10px 0;
}
}
}
</style>

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-04 17:27:37 * @Date: 2022-05-04 17:27:37
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-04 17:27:39 * @LastEditTime: 2022-06-27 11:30:24
* @Description: file content * @Description: file content
--> -->
@ -81,15 +81,22 @@ export default {
}, },
{ {
key: "progressCount", key: "progressCount",
label: "退款/售后", label: "待评价",
icon: getOrderTypeIcon("icon-order4"), icon: getOrderTypeIcon("icon-order4"),
path: `/account/order/list?type=${ORDER_STATUS.WAIT_COMMENT}`,
count: 0,
},
{
key: "progressCount",
label: "退款/售后",
icon: getOrderTypeIcon("icon-order5"),
path: "/account/order/saleAfter/list", path: "/account/order/saleAfter/list",
count: 0, count: 0,
}, },
{ {
key: "", key: "",
label: "全部订单", label: "全部订单",
icon: getOrderTypeIcon("icon-order5"), icon: getOrderTypeIcon("icon-order6"),
path: "/account/order/list", path: "/account/order/list",
}, },
], ],
@ -180,8 +187,8 @@ export default {
border: 2px solid #ffffff; border: 2px solid #ffffff;
} }
img { img {
width: 54px; width: 50px;
height: 54px; height: 50px;
} }
} }
} }

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2022-05-09 14:41:37 * @Date: 2022-05-09 14:41:37
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-16 18:27:52 * @LastEditTime: 2022-06-27 18:13:43
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -13,6 +13,7 @@
<div class="operation--btns"> <div class="operation--btns">
<!-- 已发货可以确认收货 --> <!-- 已发货可以确认收货 -->
<UiButton v-if="orderInfo.orderStatus === 4" type="yellow_gradual" :radius="true" @click="receive"></UiButton> <UiButton v-if="orderInfo.orderStatus === 4" type="yellow_gradual" :radius="true" @click="receive"></UiButton>
<UiButton v-if="orderInfo.orderStatus === 5" type="yellow_gradual" :radius="true" @click="handelComment"></UiButton>
<!-- 待支付可以取消支付订单 --> <!-- 待支付可以取消支付订单 -->
<template v-if="orderInfo.orderStatus === 1"> <template v-if="orderInfo.orderStatus === 1">
<UiButton type="yellow_gradual" :radius="true" @click="payVisible = true">去支付</UiButton> <UiButton type="yellow_gradual" :radius="true" @click="payVisible = true">去支付</UiButton>
@ -127,11 +128,21 @@ export default {
uni.$toast(error.message); uni.$toast(error.message);
return false; return false;
} }
this.$message({
type: 'success', this.handelComment()
message: '成功收货!' // this.$message({
}); // type: 'success',
this.emitStatus() // message: '!'
// });
// this.emitStatus()
});
},
handelComment(){
this.$router.push({
path : '/account/tradeSuccess',
query : {
orderId : this.orderInfo.orderId
}
}); });
}, },
emitStatus(){ emitStatus(){

@ -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-05-16 17:51:43 * @LastEditTime: 2022-06-27 15:28:13
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -55,11 +55,10 @@
<UiButton type="yellow_gradual" @click="pay(item)"></UiButton> <UiButton type="yellow_gradual" @click="pay(item)"></UiButton>
<span class="link-btn" @click="cancelPay(item)"></span> <span class="link-btn" @click="cancelPay(item)"></span>
</template> </template>
<router-link :to="`./detail?id=${item.orderId}`" v-if="item.orderStatus > 4"></router-link> <router-link :to="`./detail?id=${item.orderId}`" v-if="item.orderStatus >= 4"></router-link>
<template v-if="item.orderStatus === 4"> <UiButton type="yellow_gradual" v-if="item.orderStatus === 4" @click="receive(item)"></UiButton>
<UiButton type="yellow_gradual" @click="receive(item)"></UiButton> <UiButton type="yellow_gradual" v-if="item.orderStatus === 5"
<router-link class="link-btn" :to="`./detail?id=${item.orderId}`">查看物流</router-link> @click="$router.push(`/account/comment?orderId=${item.orderId}`)">去评价</UiButton>
</template>
</td> </td>
</template> </template>
</tr> </tr>
@ -165,11 +164,17 @@ export default {
this.$$message.error(error.message); this.$$message.error(error.message);
return false; return false;
} }
this.$message({ this.$router.push({
type: 'success', path : '/account/tradeSuccess',
message: '成功收货!' query : {
orderId : item.orderId
}
}); });
this.reloadData() // this.$message({
// type: 'success',
// message: '!'
// });
// this.reloadData();
}); });
}, },
handleDetail(id){ handleDetail(id){

@ -2,7 +2,7 @@
* @Author: ch * @Author: ch
* @Date: 2019-01-01 08:04:09 * @Date: 2019-01-01 08:04:09
* @LastEditors: ch * @LastEditors: ch
* @LastEditTime: 2022-05-11 21:34:49 * @LastEditTime: 2022-06-27 11:38:50
* @Description: file content * @Description: file content
--> -->
<template> <template>
@ -30,6 +30,7 @@ export default {
{label : '待付款', value : 1, code: 'unpaidCount'}, {label : '待付款', value : 1, code: 'unpaidCount'},
{label : '待发货', value : 3, code: 'waitDeliveryCount'}, {label : '待发货', value : 3, code: 'waitDeliveryCount'},
{label : '待收货', value : 4, code: 'deliveredCount'}, {label : '待收货', value : 4, code: 'deliveredCount'},
{label : '待评价', value : 5, code: 'waitComment'},
] ]
} }
}, },

@ -0,0 +1,59 @@
<!--
* @Author: ch
* @Date: 2022-05-08 01:11:33
* @LastEditors: ch
* @LastEditTime: 2022-06-27 15:37:53
* @Description: file content
-->
<template>
<div>
<div class="main">
<img class="icon" src="@/assets/img/order/pay_success.png" />
<!-- <b>交易成功</b> -->
<p>交易成功</p>
<div>
<UiButton type="grey" @click="$router.replace(`/`)" :radius="true">返回首页</UiButton>
<UiButton type="yellow_gradual" @click="$router.replace(`./comment?orderId=${orderId}`)" :radius="true">去评价</UiButton>
</div>
</div>
<BsChosen class="chosen"/>
</div>
</template>
<script>
import UiButton from '@/components/UiButton.vue';
import {ApiGetOrderPaySatus} from '@/plugins/api/order';
export default {
components: { UiButton },
data(){
return {
orderId : this.$route.query.orderId
}
},
mounted(){
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.main{
@include layout-box;
text-align: center;
padding: 100px 0 40px;
}
.icon{
width: 239px;
}
b{
display: block;
}
p{
margin: 10px 0 25px 0;
color: #999;
}
button{
margin: 0 10px 30px;
}
</style>
Loading…
Cancel
Save