You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
291 lines
6.5 KiB
291 lines
6.5 KiB
<template>
|
|
<view class="content">
|
|
<view class="content-top">
|
|
<view class="img-list">
|
|
<view class="img-list-item" v-for="item in info.orderItemList" :key="item.id">
|
|
<view class="img-list-item-gray">
|
|
<image class="img-list-item-l small-img" :src="item.productPic" mode="aspectFill"></image>
|
|
<view class="img-list-item-r small-right" @click="goodsDetail(item.productId)">
|
|
<view class="little-right-t">
|
|
<view class="goods-name list-goods-name">{{ item.productName }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="evaluate-num">
|
|
<view class="evaluate-num-t">商品评分</view>
|
|
<view class="evaluate-num-b">
|
|
<uni-rate value="2"></uni-rate>
|
|
<uniRate size="18" :id="item.productId" :value="score[item.productId]" @change="changeScore"></uniRate>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="evaluate-content">
|
|
<view class="evaluate-c-t"><textarea v-model="textarea[item.productId]" placeholder="宝贝满足你的期待吗? 说说你的使用心得" /></view>
|
|
<view class="evaluate-c-b">
|
|
<view class="goods-img-item" v-if="images[item.productId].length" v-for="(img, key) in images[item.productId]" :key="key">
|
|
<image class="del" mode="" @click="removeImg(item.productId, key)"></image>
|
|
<image class="" :src="img.url" mode="" @click="clickImg(img.url)"></image>
|
|
</view>
|
|
<view class="upload-img" v-show="isupload[item.productId]">
|
|
<image class="icon" mode="" @click="uploadImg(item.productId)"></image>
|
|
<view class="">上传照片</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="button-bottom">
|
|
<button class="btn btn-square btn-b" hover-class="btn-hover" @click="toEvaluate" :disabled="submitStatus" :loading="submitStatus">提交评论</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
|
import Api from '@/common/api';
|
|
|
|
import uniRate from '@/components/uni-rate/uni-rate.vue';
|
|
import { goods } from '@/config/mixins.js';
|
|
export default {
|
|
mixins: [goods],
|
|
components: {
|
|
mallplusCopyright,
|
|
uniRate
|
|
},
|
|
data() {
|
|
return {
|
|
orderId: 0,
|
|
info: {}, // 订单详情
|
|
images: [],
|
|
score: [], // 商品评价
|
|
textarea: [], // 商品评价信息
|
|
isupload: [], // 启/禁用 图片上传按钮
|
|
rate: 5,
|
|
submitStatus: false
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.orderId = options.order_id;
|
|
this.orderId
|
|
? this.orderInfo()
|
|
: this.$common.errorToShow('获取失败', () => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
});
|
|
},
|
|
computed: {
|
|
// 获取vuex中状态
|
|
maxUploadImg() {
|
|
return 1;
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取订单详情
|
|
async orderInfo() {
|
|
let params = { id: this.orderId };
|
|
this.orderInfo = await Api.apiCall('get', Api.order.orderDetail, params);
|
|
let images = [];
|
|
let textarea = [];
|
|
let upload = [];
|
|
let score = [];
|
|
|
|
this.orderInfo.orderItemList.forEach(item => {
|
|
if (item.type == 1) {
|
|
images[item.productId] = [];
|
|
textarea[item.productId] = '';
|
|
upload[item.productId] = true;
|
|
score[item.productId] = 5;
|
|
}
|
|
});
|
|
|
|
this.info = this.orderInfo;
|
|
|
|
this.images = images;
|
|
this.textarea = textarea;
|
|
this.score = score;
|
|
this.isupload = upload;
|
|
},
|
|
// 上传图片
|
|
uploadImg(key) {
|
|
this.$otherApi.uploadFiles(res => {
|
|
if (res.code == 200) {
|
|
let img = {
|
|
url: res.data,
|
|
id: res.data
|
|
};
|
|
this.images[key].push(img);
|
|
this.$common.successToShow(res.msg);
|
|
} else {
|
|
this.$common.errorToShow(res.msg);
|
|
}
|
|
});
|
|
},
|
|
|
|
// 删除图片
|
|
removeImg(id, key) {
|
|
this.images[id].splice(key, 1);
|
|
},
|
|
// 图片点击放大
|
|
clickImg(img) {
|
|
// 预览图片
|
|
uni.previewImage({
|
|
urls: img.split()
|
|
});
|
|
},
|
|
// 改变评分
|
|
changeScore(e) {
|
|
this.score[e.id] = e.value;
|
|
},
|
|
// 提交评价
|
|
async toEvaluate() {
|
|
this.submitStatus = true;
|
|
|
|
var myArray = new Array();
|
|
this.images.forEach((item, key) => {
|
|
let itemmm = {
|
|
goodsId: key,
|
|
images: item.url,
|
|
score: this.score[key],
|
|
textarea: this.textarea[key]
|
|
};
|
|
myArray.push(itemmm);
|
|
});
|
|
let params = {
|
|
orderId: this.orderId,
|
|
items: JSON.stringify(myArray)
|
|
};
|
|
uni.showLoading({
|
|
title: '请稍后'
|
|
});
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '评价成功'
|
|
});
|
|
}, 600);
|
|
|
|
let data = await Api.apiCall('post', Api.order.orderevaluate, params);
|
|
console.log(data);
|
|
if (data) {
|
|
// 更改订单列表页的订单状态
|
|
let pages = getCurrentPages(); // 当前页
|
|
let beforePage = pages[pages.length - 2]; // 上个页面
|
|
if (beforePage !== undefined && beforePage.route === 'pages/order/order') {
|
|
// #ifdef MP-WEIXIN
|
|
beforePage.$vm.isReload = true;
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
beforePage.isReload = true;
|
|
// #endif
|
|
|
|
// #ifdef MP-ALIPAY
|
|
beforePage.rootVM.isReload = true;
|
|
// #endif
|
|
}
|
|
this.submitStatus = false;
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
watch: {
|
|
images: {
|
|
handler() {
|
|
this.images.forEach((item, key) => {
|
|
this.isupload[key] = item.length > this.maxUploadImg ? false : true;
|
|
});
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.img-list-item {
|
|
padding: 30upx 20upx;
|
|
}
|
|
.img-list-item-gray {
|
|
background-color: #f7f7f7;
|
|
overflow: hidden;
|
|
padding: 18upx 20upx;
|
|
}
|
|
.small-right {
|
|
width: 520upx;
|
|
}
|
|
.evaluate-content {
|
|
background-color: #fff;
|
|
padding: 20upx 0upx;
|
|
}
|
|
.evaluate-c-t {
|
|
width: 100%;
|
|
height: 240upx;
|
|
}
|
|
.evaluate-c-t textarea {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 26upx;
|
|
padding: 10upx;
|
|
}
|
|
.evaluate-c-b {
|
|
overflow: hidden;
|
|
}
|
|
.upload-img {
|
|
width: 146upx;
|
|
height: 146upx;
|
|
margin: 14upx;
|
|
text-align: center;
|
|
color: #999999;
|
|
font-size: 22upx;
|
|
border: 2upx solid #e1e1e1;
|
|
/* #ifdef MP-ALIPAY */
|
|
border-top: 8upx solid #e1e1e1;
|
|
/* #endif */
|
|
border-radius: 4upx;
|
|
display: inline-block;
|
|
float: left;
|
|
padding: 24upx 0;
|
|
}
|
|
.goods-img-item {
|
|
width: 174upx;
|
|
height: 174upx;
|
|
padding: 14upx;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
.goods-img-item:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
.goods-img-item image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.del {
|
|
width: 30upx !important;
|
|
height: 30upx !important;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
}
|
|
.evaluate-num {
|
|
padding: 20upx 26upx;
|
|
background-color: #fff;
|
|
margin-top: 20upx;
|
|
}
|
|
.evaluate-num-t {
|
|
color: #333;
|
|
font-size: 28upx;
|
|
margin-bottom: 20upx;
|
|
}
|
|
.button-bottom .btn {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|