274 lines
6.6 KiB
Vue
274 lines
6.6 KiB
Vue
<template>
|
|
<view class="comment">
|
|
<view class="main-container">
|
|
<view class="goods-comment" v-for="(goods, index) in goodsList" :key="index">
|
|
<CommentView :goods="goods" :index="index" @setLocalImage="setLocalImage" @setContent="setContent" @setDescribe="setDescribe"></CommentView>
|
|
</view>
|
|
</view>
|
|
<view class="order-rate">
|
|
<view class="rate">
|
|
<view class="title">物流评分</view>
|
|
<u-rate :count="5" min-count="1" active-color="#FF780F" inactive-color="#CCCCCC" v-model="logistics" gutter="20" size="32"></u-rate>
|
|
</view>
|
|
<view class="rate">
|
|
<view class="title">服务态度</view>
|
|
<u-rate :count="5" min-count="1" v-model="service" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
|
|
</view>
|
|
</view>
|
|
<view class="write-btn" @click="submitComment">发表意见</view>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import CommentView from './commentItem';
|
|
import common from '@/static/js/common.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderId: '',
|
|
count: 3, // 最大图片数量
|
|
logistics: 1, // 物流服务
|
|
service: 1, // 服务态度
|
|
describe: [],
|
|
content: [],
|
|
imageList: [], // 本地图片路径
|
|
goodsList: [],
|
|
uploadImageList: [], // 线上图片名字
|
|
debounce: true, // 防止多次提交
|
|
}
|
|
},
|
|
components: {
|
|
CommentView
|
|
},
|
|
onLoad(option) {
|
|
this.orderId = option.oid;
|
|
this.getOrderInfo(option.oid);
|
|
},
|
|
methods: {
|
|
setLocalImage({ list, index }) {
|
|
this.imageList[index] = list;
|
|
},
|
|
setContent({ content, index }) {
|
|
this.content[index] = content;
|
|
},
|
|
setDescribe({ describe, index }) {
|
|
this.describe[index] = describe;
|
|
},
|
|
uploadImage() {
|
|
let allPromise = [];
|
|
this.imageList.forEach((img, index) => {
|
|
this.uploadImageList[index] = [];
|
|
img.forEach(filePath => {
|
|
let promise = common.uploadFile({
|
|
url: this.$u.http.config.baseUrl + '/Upload/uploadfile',
|
|
name: 'common',
|
|
filePath: filePath,
|
|
})
|
|
promise.then(result => {
|
|
this.uploadImageList[index].push(result.file_name);
|
|
})
|
|
allPromise.push(promise);
|
|
})
|
|
})
|
|
Promise.all(allPromise).then(() => {
|
|
this.addOrderEvaluate();
|
|
})
|
|
},
|
|
// 设初始值
|
|
setModelKey(data) {
|
|
data.forEach(() => {
|
|
this.content.push('');
|
|
this.describe.push(1);
|
|
this.imageList.push([]);
|
|
})
|
|
},
|
|
getOrderInfo(id) {
|
|
this.$u.api.getOrderInfo({
|
|
order_id: id,
|
|
}).then(res => {
|
|
if(res.errCode == 0) {
|
|
this.goodsList = res.data.extend_order_goods;
|
|
// this.goodsList = [{
|
|
// "rec_id": 14,
|
|
// "order_id": 13,
|
|
// "goods_id": 39,
|
|
// "goods_name": "自然堂 水润保湿两件套 补水保湿套装",
|
|
// "goods_price": "69.40",
|
|
// "goods_num": 1,
|
|
// "goods_image": "1_2017092202443553519.jpg",
|
|
// "goods_pay_price": "43.40",
|
|
// "store_id": 1,
|
|
// "buyer_id": 3,
|
|
// "goods_type": "1",
|
|
// "promotions_id": 0,
|
|
// "commis_rate": 0,
|
|
// "gc_id": 30
|
|
// },
|
|
// {
|
|
// "rec_id": 13,
|
|
// "order_id": 13,
|
|
// "goods_id": 113,
|
|
// "goods_name": "舒思盾经络按摩仪数码家用多功能针灸穴位电子理疗腰椎颈椎电疗仪",
|
|
// "goods_price": "168.00",
|
|
// "goods_num": 1,
|
|
// "goods_image": "1_2017092901414663050.jpg",
|
|
// "goods_pay_price": "106.00",
|
|
// "store_id": 1,
|
|
// "buyer_id": 3,
|
|
// "goods_type": "1",
|
|
// "promotions_id": 0,
|
|
// "commis_rate": 0,
|
|
// "gc_id": 72
|
|
// }];
|
|
this.setModelKey(this.goodsList);
|
|
}
|
|
})
|
|
},
|
|
verifyParams() {
|
|
let status = true;
|
|
this.goodsList.forEach((_, index) => {
|
|
if(this.$u.test.isEmpty(this.content[index])) {
|
|
this.$u.toast('内容不可为空');
|
|
status = false;
|
|
}
|
|
})
|
|
return status;
|
|
},
|
|
submitComment() {
|
|
// console.log(this.content);
|
|
// console.log(this.describe);
|
|
// console.log(this.imageList);
|
|
this.uploadImage();
|
|
},
|
|
addOrderEvaluate() {
|
|
if(!this.verifyParams()) return false;
|
|
if(!this.debounce) return false;
|
|
let files = [];
|
|
// console.log(this.uploadImageList);
|
|
this.uploadImageList.forEach((item, index) => {
|
|
// 赋默认值
|
|
files[index] = '';
|
|
// console.log(item);
|
|
item.forEach((img, idx) => {
|
|
if(idx < item.length-1) {
|
|
files[index] += img + ',';
|
|
} else {
|
|
files[index] += img;
|
|
}
|
|
})
|
|
})
|
|
let params = {
|
|
id: this.orderId,
|
|
content: this.content,
|
|
scores_one: this.logistics,
|
|
scores_two: this.service,
|
|
scores_three: this.describe,
|
|
};
|
|
if(files.length) {
|
|
Object.assign(params, { file: files })
|
|
}
|
|
// console.log(params);
|
|
this.$u.api.updateOrderEvaluate(params).then(res => {
|
|
if(res.errCode == 0) {
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
back: true,
|
|
})
|
|
} else {
|
|
this.$u.toast(res.message);
|
|
this.debounce = true;
|
|
}
|
|
})
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.comment {
|
|
min-height: calc(100vh - var(--window-top));
|
|
background-color: #ECECEC;
|
|
.main-container {
|
|
margin-bottom: 10rpx;
|
|
.goods-comment {
|
|
background-color: #ffffff;
|
|
padding: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
.goods-info {
|
|
display: flex;
|
|
margin-bottom: 40rpx;
|
|
> image {
|
|
width: 113rpx;
|
|
height: 106rpx;
|
|
border-radius: 5rpx;
|
|
margin-right: 20rpx;
|
|
background-color: antiquewhite;
|
|
}
|
|
.goods-text {
|
|
.goods-name {
|
|
width: 530rpx;
|
|
font-size: 28rpx;
|
|
color: rgba(0,0,51,1);
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.goods-spec {
|
|
max-width: 300rpx;
|
|
box-sizing: content-box;
|
|
padding: 10rpx 15rpx;
|
|
font-size: 24rpx;
|
|
color: rgba(153,153,153,1);
|
|
background:rgba(236,236,236,1);
|
|
border-radius: 6rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
textarea {
|
|
width: 100% !important;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
.slot-btn {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
background: rgba(236,236,236,1);
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
> image {
|
|
margin-top: 48rpx;
|
|
width: 54rpx;
|
|
height: 49rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.rate {
|
|
// background-color: #ffffff;
|
|
// padding: 33rpx 30rpx;
|
|
// > view {
|
|
display: flex;
|
|
&:not(:last-child) {
|
|
margin-bottom: 35rpx;
|
|
}
|
|
.title {
|
|
margin-right: 25rpx;
|
|
font-size: 28rpx;
|
|
color: rgba(51,51,51,1);
|
|
}
|
|
// }
|
|
}
|
|
.order-rate {
|
|
background-color: #ffffff;
|
|
padding: 33rpx 30rpx;
|
|
}
|
|
.write-btn {
|
|
margin: 120rpx auto 0;
|
|
width: 690rpx;
|
|
height: 98rpx;
|
|
background: rgba(255,120,15,1);
|
|
border-radius: 46rpx;
|
|
font-size: 36rpx;
|
|
color: rgba(255,255,255,1);
|
|
text-align: center;
|
|
line-height: 98rpx;
|
|
}
|
|
}
|
|
</style> |