325 lines
8.2 KiB
Vue
325 lines
8.2 KiB
Vue
<template>
|
||
<view class="evaluate pb100" v-if="!loadding">
|
||
<form @submit="formSubmit" @reset="formReset">
|
||
<view class="evaluate-item p30" v-for="(item, index) in tableData" :key="index">
|
||
<view class="product d-s-c">
|
||
<view class="cover"><image :src="item.image.file_path" mode="aspectFit"></image></view>
|
||
<view class="info ml20">
|
||
<view class="name f28">{{ item.product_name }}</view>
|
||
<view class="price pt10 f22 red">
|
||
¥
|
||
<text class="f40">{{ item.product_price }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="grade evalu p-30-0 mt30">
|
||
<view class="evalu-value">
|
||
描述相符：
|
||
<view class="eval">
|
||
<i
|
||
v-for="(itemEv, indexEv) in describe[index]"
|
||
:key="indexEv"
|
||
:class="itemEv ? 'icon iconfont icon-start' : 'icon iconfont icon-start1'"
|
||
@click="choosees(indexEv, index)"
|
||
></i>
|
||
</view>
|
||
</view>
|
||
<view class="evalu-value">
|
||
服务态度：
|
||
<view class="eval">
|
||
<i
|
||
v-for="(itemEv, indexEv) in service[index]"
|
||
:key="indexEv"
|
||
:class="itemEv ? 'icon iconfont icon-start' : 'icon iconfont icon-start1'"
|
||
@click="chooseServ(indexEv, index)"
|
||
></i>
|
||
</view>
|
||
</view>
|
||
<view class="evalu-value">
|
||
配送服务：
|
||
<view class="eval">
|
||
<i
|
||
v-for="(itemEv, indexEv) in logistics[index]"
|
||
:key="indexEv"
|
||
:class="itemEv ? 'icon iconfont icon-start' : 'icon iconfont icon-start1'"
|
||
@click="chooseLog(indexEv, index)"
|
||
></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="grade d-a-c p-30-0 mt30">
|
||
<view :class="item.score == 10 ? 'flex-1 d-c-c active' : 'flex-1 d-c-c'" @click="gradeFunc(item, 10, index)">
|
||
<view class="item d-c-c">
|
||
<text class="icon iconfont icon-pingjiahaoping"></text>
|
||
<text class="ml10">好评</text>
|
||
</view>
|
||
</view>
|
||
<view :class="item.score == 20 ? 'flex-1 d-c-c active' : 'flex-1 d-c-c'" @click="gradeFunc(item, 20, index)">
|
||
<view class="item d-c-c">
|
||
<text class="icon iconfont icon-pingjiazhongping"></text>
|
||
<text class="ml10">中评</text>
|
||
</view>
|
||
</view>
|
||
<view :class="item.score == 30 ? 'flex-1 d-c-c active' : 'flex-1 d-c-c'" @click="gradeFunc(item, 30, index)">
|
||
<view class="item d-c-c">
|
||
<text class="icon iconfont icon-pingjiachaping"></text>
|
||
<text class="ml10">差评</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="textarea-box d-s-c f28"><textarea class="p10 box-s-b border flex-1" v-model="item.content" placeholder="请输入评价内容" /></view>
|
||
<view class="upload-list d-s-c" v-model="item.image_list">
|
||
<view class="item" v-for="(imgs, img_num) in item.image_list" :key="img_num" @click="deleteImg(index, img_num)">
|
||
<image :src="imgs.file_path" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="item upload-btn d-c-c d-c" @click="openUpload(index)" v-if="item.image_list.length < 9">
|
||
<text class="icon iconfont icon-xiangji"></text>
|
||
<text class="gray9">上传图片</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="foot-btns"><button form-type="submit" class="btn-red">确认提交</button></view>
|
||
</form>
|
||
|
||
<!--上传图片-->
|
||
<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Upload from '@/components/upload/upload.vue';
|
||
export default {
|
||
components: {
|
||
Upload
|
||
},
|
||
data() {
|
||
return {
|
||
/*是否加载完成*/
|
||
loadding: true,
|
||
order_id: '',
|
||
/*页面数据*/
|
||
tableData: [],
|
||
score: 10,
|
||
/*是否打开上传图片*/
|
||
isUpload: false,
|
||
image_id: [],
|
||
img: '/static/temp/photo.jpg',
|
||
index: '',
|
||
service: [],
|
||
logistics: [],
|
||
describe: []
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
this.order_id = e.order_id;
|
||
},
|
||
mounted() {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
/*获取页面数据*/
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
getData() {
|
||
let self = this;
|
||
let order_id = self.order_id;
|
||
self._get(
|
||
'user.comment/order',
|
||
{
|
||
order_id: order_id
|
||
},
|
||
function(res) {
|
||
self.tableData = res.data.productList;
|
||
let b = self.tableData.forEach((item, index) => {
|
||
self.tableData[index].score = 10;
|
||
self.tableData[index].image_list = [];
|
||
self.service.push([false, false, false, false, false]);
|
||
self.logistics.push([false, false, false, false, false]);
|
||
self.describe.push([false, false, false, false, false]);
|
||
});
|
||
self.loadding = false;
|
||
uni.hideLoading();
|
||
}
|
||
);
|
||
},
|
||
/*选择评价*/
|
||
gradeFunc(item, e, index) {
|
||
item.score = e;
|
||
this.$set(this.tableData, index, item);
|
||
console.log(this.tableData);
|
||
},
|
||
/* 物流评分 */
|
||
chooseLog(n, m) {
|
||
let self = this;
|
||
self.tableData[m].express_score = 0;
|
||
this.logistics[m].forEach((item, index) => {
|
||
if (index <= n) {
|
||
this.logistics[m].splice(index, 1, true);
|
||
self.tableData[m].express_score++;
|
||
} else {
|
||
this.logistics[m].splice(index, 1, false);
|
||
}
|
||
});
|
||
},
|
||
/* 服务评分 */
|
||
chooseServ(n, m) {
|
||
let self = this;
|
||
self.tableData[m].server_score = 0;
|
||
this.service[m].forEach((item, index) => {
|
||
if (index <= n) {
|
||
this.service[m].splice(index, 1, true);
|
||
self.tableData[m].server_score++;
|
||
} else {
|
||
this.service[m].splice(index, 1, false);
|
||
}
|
||
});
|
||
console.log(self.tableData);
|
||
},
|
||
/* 描述评分 */
|
||
choosees(n, m) {
|
||
let self = this;
|
||
self.tableData[m].describe_score = 0;
|
||
this.describe[m].forEach((item, index) => {
|
||
if (index <= n) {
|
||
this.describe[m].splice(index, 1, true);
|
||
self.tableData[m].describe_score++;
|
||
} else {
|
||
this.describe[m].splice(index, 1, false);
|
||
}
|
||
});
|
||
console.log(self.tableData);
|
||
},
|
||
|
||
/*提交*/
|
||
formSubmit: function(e) {
|
||
let self = this;
|
||
let order_id = self.order_id;
|
||
let formData = [];
|
||
this.tableData.forEach((item, index) => {
|
||
formData[index] = {
|
||
order_product_id: item.order_product_id,
|
||
product_id: item.product_id,
|
||
score: item.score,
|
||
image_list: item.image_list,
|
||
express_score: item.express_score,
|
||
server_score: item.server_score,
|
||
describe_score: item.describe_score,
|
||
content: ''
|
||
};
|
||
if (item.content) {
|
||
formData[index].content = item.content;
|
||
}
|
||
});
|
||
console.log(formData);
|
||
self._post(
|
||
'user.comment/order',
|
||
{
|
||
order_id: order_id,
|
||
formData: JSON.stringify(formData)
|
||
},
|
||
function(res) {
|
||
self.showSuccess('评价成功！', function() {
|
||
self.gotoPage('/pages/order/myorder', 'redirect');
|
||
});
|
||
}
|
||
);
|
||
},
|
||
|
||
/*打开上传图片*/
|
||
openUpload(index) {
|
||
this.isUpload = false;
|
||
this.index = index;
|
||
this.isUpload = true;
|
||
},
|
||
|
||
/*获取上传的图片*/
|
||
getImgsFunc(e) {
|
||
let self = this;
|
||
if (e && typeof e != 'undefined') {
|
||
let index = self.index;
|
||
self.tableData[index].image_list = self.tableData[index].image_list.concat(e);
|
||
}
|
||
self.isUpload = false;
|
||
},
|
||
|
||
/*点击图片删除*/
|
||
deleteImg(i, n) {
|
||
let data = this.tableData[i];
|
||
data.image_list.splice(n, 1);
|
||
this.$set(this.tableData, i, data);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.evaluate {
|
||
/* background: #eeeeee; */
|
||
}
|
||
.evaluate-item {
|
||
margin-bottom: 20rpx;
|
||
background: #ffffff;
|
||
border-bottom: 1px solid #dddddd;
|
||
}
|
||
.product .cover,
|
||
.product .cover image {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
.evaluate .grade .item .iconfont {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
border-radius: 50%;
|
||
font-size: 40rpx;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
}
|
||
.evaluate .grade .item {
|
||
height: 60rpx;
|
||
padding-right: 20rpx;
|
||
line-height: 60rpx;
|
||
border-radius: 30rpx;
|
||
transition: background-color 0.4s;
|
||
}
|
||
.grade .flex-1:nth-child(1) .iconfont {
|
||
background: #f42222;
|
||
}
|
||
.grade .flex-1:nth-child(2) .iconfont {
|
||
background: #f2b509;
|
||
}
|
||
.grade .flex-1:nth-child(3) .iconfont {
|
||
background: #999999;
|
||
}
|
||
.grade .flex-1.active:nth-child(1) .item {
|
||
background: #f42222;
|
||
color: #ffffff;
|
||
}
|
||
.grade .flex-1.active:nth-child(2) .item {
|
||
background: #f2b509;
|
||
color: #ffffff;
|
||
}
|
||
.grade .flex-1.active:nth-child(3) .item {
|
||
background: #999999;
|
||
color: #ffffff;
|
||
}
|
||
.icon-start {
|
||
color: #f5a623;
|
||
}
|
||
.evalu-value {
|
||
display: flex;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.eval {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.evalu {
|
||
display: flex;
|
||
align-items: baseline;
|
||
flex-direction: column;
|
||
}
|
||
</style>
|