<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){
|
this.loadding=true;
|
this.tableData[i].image_list.splice(n,1);
|
console.log(this.tableData)
|
this.loadding=false;
|
}
|
}
|
};
|
</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>
|
