465 lines
13 KiB
Vue
465 lines
13 KiB
Vue
<template>
|
|
<view class="evaluation" v-if="!loading">
|
|
<view
|
|
class="evaluation-item"
|
|
v-for="(item, index) in orderDetail.orderSkus"
|
|
:key="index"
|
|
>
|
|
<!--商品信息-->
|
|
<view class="product-info">
|
|
<image
|
|
class="product-image"
|
|
mode="aspectFill"
|
|
:src="item.skuImage"
|
|
></image>
|
|
<view class="product-content">
|
|
<text class="product-name in2line">{{ item.skuName }}</text>
|
|
<text class="product-sku-name">{{ item.skuName || singleSkuText }}</text>
|
|
<text class="product-price" :class="'text-' + themeColor.name"
|
|
>{{ moneySymbol }}{{ item.price }}</text
|
|
>
|
|
* {{ item.num }}
|
|
</view>
|
|
</view>
|
|
<!--整体评价-->
|
|
<view class="product-rate" v-if="evaluationType !== 'add'">
|
|
整体评价
|
|
<view class="product-rate-wrapper">
|
|
<rf-rate
|
|
size="22"
|
|
:value="item.scores || 5"
|
|
:index="index"
|
|
@change="handleScoreChange"
|
|
:margin="8"
|
|
class="rate"
|
|
:active-color="themeColor.color"
|
|
></rf-rate>
|
|
</view>
|
|
</view>
|
|
|
|
<!--上传图片-->
|
|
<view class="rf-uploader">
|
|
<view class="uni-uploader">
|
|
<view class="uni-uploader-body">
|
|
<view class="uni-uploader__files">
|
|
<view v-for="(image, i) in imageList[index]" :key="i">
|
|
<view class="uni-uploader__file" style="position: relative;">
|
|
<image class="uni-uploader__img" :src="image"></image>
|
|
<view class="close-view" @tap="close(i, index)">x</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="uni-uploader__input-box"
|
|
v-if="imageList[index].length < 8"
|
|
>
|
|
<view
|
|
class="uni-uploader__input"
|
|
@tap="uploadImage(index)"
|
|
></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--详细描述信息-->
|
|
<view class="product-textarea">
|
|
<textarea
|
|
class="textarea"
|
|
maxlength="140"
|
|
v-model="content"
|
|
placeholder-style="color:#ccc; font-size: 24upx"
|
|
placeholder="宝贝满足您的期待吗？说说您的使用心得，分享给您想买的他们吧"
|
|
/>
|
|
|
|
<view class="anonymous" v-if="evaluationType !== 'add'">
|
|
<switch
|
|
:color="themeColor.color"
|
|
:checked="is_anonymous == 1"
|
|
@change="handleAnonymousChange"
|
|
style="transform:scale(0.7)"
|
|
/>
|
|
<text class="spec-color">{{
|
|
parseInt(is_anonymous, 10) === 1 ? '匿名' : '不匿名'
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
<!--发表评价-->
|
|
<button class="confirm-btn" :class="'bg-' + themeColor.name" @tap="handleEvaluate(item, index)">
|
|
{{ evaluationType === 'add' ? '我要追评' : '发表评价' }}
|
|
</button>
|
|
</view>
|
|
<rf-empty info="暂无待评价商品" v-if="orderDetail.orderSkus.length === 0"></rf-empty>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* @des 发表评价
|
|
*
|
|
* @author 237524947@qq.com
|
|
* @date 2019-11-27 14:32
|
|
* @copyright 2019
|
|
*/
|
|
import rfRate from '@/components/rf-rate/rf-rate';
|
|
import { evaluateCreate, evaluateAgain, uploadImage, orderProductIndex } from '@/api/userInfo';
|
|
import { queryorderforevaluation, addorderevaluation } from '@/api/product';
|
|
|
|
export default {
|
|
components: { rfRate },
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
orderDetail: {},
|
|
token: null,
|
|
content: '',
|
|
pics: [],
|
|
isAgree: false,
|
|
storeName: '',
|
|
orderSkus: [],
|
|
skuIds: [],
|
|
spuIds: [],
|
|
evaluate_content: ['描述相符', '卖家服务', '物流服务'],
|
|
stars: [0, 1, 2, 3, 4],
|
|
score: 0,
|
|
scores: [5, 5, 5],
|
|
skuStars: [0, 1, 2, 3, 4],
|
|
skuscore: 0,
|
|
skuScores: [],
|
|
commentDescs: [],
|
|
evaluationType: null,
|
|
imageList: [],
|
|
// 评论表单
|
|
is_anonymous: '1',
|
|
moneySymbol: this.moneySymbol,
|
|
orderId: '',
|
|
singleSkuText: this.singleSkuText
|
|
};
|
|
},
|
|
computed: {
|
|
// 限制140字
|
|
wordLimit() {
|
|
return index => {
|
|
return 140 - this.orderDetail.orderSkus[index].content.length;
|
|
};
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.initData(options);
|
|
},
|
|
methods: {
|
|
// 数据初始化
|
|
async initData(options) {
|
|
|
|
this.evaluationType = options.type;
|
|
if (options.data) {
|
|
this.orderDetail.orderSkus.push(JSON.parse(options.data));
|
|
|
|
this.orderDetail.orderSkus.forEach(item => {
|
|
this.imageList.push([]);
|
|
item.content = '';
|
|
item.scores = 5;
|
|
});
|
|
this.loading = false;
|
|
} else if (options.order_id) {
|
|
this.orderId = options.order_id;
|
|
this.getOrderProductList();
|
|
}
|
|
let title = '发表评价';
|
|
if (options.type === 'add') {
|
|
title = '追加评价';
|
|
}
|
|
// 设置标题
|
|
uni.setNavigationBarTitle({
|
|
title
|
|
});
|
|
},
|
|
async getOrderProductList() {
|
|
await this.$http
|
|
.get(queryorderforevaluation, { orderId: this.orderId, is_evaluate: 0 })
|
|
.then(async r => {
|
|
this.loading = false;
|
|
this.orderDetail = r;
|
|
for (let i = 0; i < r.orderSkus.length; i++) {
|
|
this.skuIds[i] = r.orderSkus[i].skuId;
|
|
this.spuIds[i] = r.orderSkus[i].spuId;
|
|
this.skuScores[i] = 5;
|
|
this.imageList[i] = [];
|
|
}
|
|
this.storeName= r.storeName;
|
|
this.orderSkus= r.orderSkus;
|
|
this.skuScores= this.skuScores;
|
|
|
|
|
|
|
|
});
|
|
this.loading = false;
|
|
},
|
|
// 评分监听事件
|
|
handleScoreChange(e) {
|
|
this.productList[e.index].scores = e.value;
|
|
},
|
|
// 监听是否匿名
|
|
handleAnonymousChange(e) {
|
|
if (e.detail.value) {
|
|
this.is_anonymous = 1;
|
|
} else {
|
|
this.is_anonymous = 0;
|
|
}
|
|
},
|
|
// 删除已选中图片
|
|
close(e, index) {
|
|
this.imageList[index].splice(e, 1);
|
|
},
|
|
// 监听图片上传
|
|
uploadImage(index) {
|
|
// 从相册选择6张图
|
|
const _this = this;
|
|
uni.chooseImage({
|
|
count: 6,
|
|
sizeType: ['original', 'compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: async function(res) {
|
|
await _this.handleUploadFile(res.tempFilePaths, index);
|
|
}
|
|
});
|
|
},
|
|
// 依次上传图片
|
|
async handleUploadFile(data, index) {
|
|
data.forEach(item => {
|
|
this.$http
|
|
.upload(uploadImage, { filePath: item, image: 'file' })
|
|
.then(async r => {
|
|
this.imageList[index].push(r);
|
|
});
|
|
});
|
|
|
|
},
|
|
// 提交评价
|
|
async handleEvaluate(item, index) {
|
|
const params = {};
|
|
if (this.evaluationType !== 'add') {
|
|
let data = [];
|
|
data.push({
|
|
order_product_id: item.id,
|
|
is_anonymous: this.is_anonymous,
|
|
covers: this.imageList[index],
|
|
scores: item.scores,
|
|
content: item.content
|
|
});
|
|
params.evaluate = JSON.stringify(data);
|
|
let commentParams = {};
|
|
commentParams.orderId = this.orderId;
|
|
commentParams.storeComment = {};
|
|
commentParams.storeComment.descScore = item.scores;
|
|
commentParams.storeComment.sellerScore = item.scores;
|
|
commentParams.storeComment.logisticsScore = item.scores;
|
|
commentParams.comments = new Array();
|
|
for (let i = 0; i < this.orderDetail.orderSkus.length; i++) {
|
|
|
|
let comment = {};
|
|
comment.skuId = this.skuIds[i];
|
|
comment.spuId = this.spuIds[i];
|
|
comment.score = this.skuScores[i];
|
|
comment.comment = this.content;
|
|
comment.isAnonymous = this.isAgree ? "1" : "0";
|
|
comment.commentPics = this.getCommentPics(this.imageList[i]);
|
|
commentParams.comments.push(comment);
|
|
}
|
|
|
|
this.handleEvaluateCreate(commentParams);
|
|
} else {
|
|
let commentParams = {};
|
|
commentParams.orderId = this.orderId;
|
|
commentParams.storeComment = {};
|
|
commentParams.storeComment.descScore = item.scores;
|
|
commentParams.storeComment.sellerScore = item.scores;
|
|
commentParams.storeComment.logisticsScore = item.scores;
|
|
commentParams.comments = new Array();
|
|
for (let i = 0; i < this.orderDetail.orderSkus.length; i++) {
|
|
|
|
let comment = {};
|
|
comment.skuId = this.skuIds[i];
|
|
comment.spuId = this.spuIds[i];
|
|
comment.score = this.skuScores[i];
|
|
comment.comment = this.content;
|
|
comment.isAnonymous = this.isAgree ? "1" : "0";
|
|
comment.commentPics = this.getCommentPics(this.imageList[i]);
|
|
commentParams.comments.push(comment);
|
|
}
|
|
this.handleEvaluateAgain(commentParams);
|
|
}
|
|
},
|
|
getCommentPics(pics) {
|
|
let commentPics = [];
|
|
pics.forEach(pic => {
|
|
commentPics.push({
|
|
url: pic
|
|
});
|
|
});
|
|
return commentPics;
|
|
},
|
|
// 发表评价
|
|
async handleEvaluateCreate(params) {
|
|
await this.$http.post(`${addorderevaluation}`, params).then(r => {
|
|
//成功返回1 失败返回0 -1 订单不存在 -2 订单状态错误
|
|
if(r==1){
|
|
this.$mHelper.toast('评价成功');
|
|
let route = '/pages/order/order?state=-1';
|
|
this.$mRouter.push({ route });
|
|
|
|
}else if(r==-1){
|
|
this.$mHelper.toast('订单不存在');
|
|
}else if(r==-2){
|
|
this.$mHelper.toast('订单状态错误');
|
|
}else if(r==0){
|
|
this.$mHelper.toast('失败');
|
|
}
|
|
|
|
});
|
|
},
|
|
// 追加评价
|
|
async handleEvaluateAgain(params) {
|
|
await this.$http
|
|
.post(
|
|
`${evaluateAgain}?order_product_id=${params.order_product_id}`,
|
|
params
|
|
)
|
|
.then(() => {
|
|
this.$mRouter.back();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: $page-color-base;
|
|
}
|
|
.evaluation {
|
|
margin-bottom: $spacing-lg;
|
|
.evaluation-item {
|
|
margin: $spacing-base;
|
|
padding: $spacing-lg;
|
|
background-color: $color-white;
|
|
border-radius: 12upx;
|
|
box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.05);
|
|
}
|
|
.product-info {
|
|
display: flex;
|
|
.product-image {
|
|
width: 200upx;
|
|
height: 150upx;
|
|
}
|
|
.product-content {
|
|
flex: 1;
|
|
margin-left: 20upx;
|
|
.product-name {
|
|
font-size: $font-base;
|
|
color: $font-color-dark;
|
|
line-height: 32upx;
|
|
min-height: 60upx;
|
|
}
|
|
.product-sku-name {
|
|
display: block;
|
|
font-size: $font-base;
|
|
color: $font-color-dark;
|
|
}
|
|
}
|
|
}
|
|
.product-rate {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $font-lg;
|
|
color: $font-color-dark;
|
|
padding: 20upx 0;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
.product-rate-wrapper {
|
|
margin-top: $spacing-sm;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.product-textarea {
|
|
margin-top: 20upx;
|
|
height: 360upx;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
.textarea {
|
|
width: 100%;
|
|
}
|
|
.tips {
|
|
position: absolute;
|
|
bottom: 10upx;
|
|
right: 0;
|
|
font-size: $font-sm;
|
|
color: $font-color-light;
|
|
.f {
|
|
color: $uni-color-success;
|
|
}
|
|
.s {
|
|
color: $uni-color-primary;
|
|
}
|
|
}
|
|
.anonymous {
|
|
color: $font-color-light;
|
|
font-size: $font-sm;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
.upload-image {
|
|
overflow: hidden;
|
|
margin: 40upx 0;
|
|
.upload-image-wrapper {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 200upx;
|
|
height: 200upx;
|
|
padding: 10upx;
|
|
margin: 10upx;
|
|
.image {
|
|
display: inline-block;
|
|
width: 180upx;
|
|
height: 180upx;
|
|
}
|
|
.image-close {
|
|
position: absolute;
|
|
top: -10upx;
|
|
right: -10upx;
|
|
}
|
|
}
|
|
.add {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
width: 180upx;
|
|
height: 180upx;
|
|
text-align: center;
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
font-size: 88upx;
|
|
color: $font-color-base;
|
|
font-weight: 100;
|
|
}
|
|
}
|
|
.confirm-btn {
|
|
width: 630upx;
|
|
height: 76upx;
|
|
line-height: 76upx;
|
|
border-radius: 50px;
|
|
margin-top: 50upx;
|
|
font-size: $font-lg;
|
|
&:after {
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
.uni-uploader__file {
|
|
width: 190upx;
|
|
height: 190upx;
|
|
}
|
|
.uni-uploader__input-box {
|
|
width: 188upx;
|
|
height: 188upx;
|
|
}
|
|
}
|
|
</style>
|