<template>
|
<view class="evaluate pb100" v-if="!loadding">
|
<form @submit="formSubmit">
|
<view class="evaluate-item p30">
|
<view class="product d-s-c">
|
<view class="info ml20">
|
<view class="name f28 fb">活动评价</view>
|
<view class="pt10 f24 gray6">{{activityInfo.activity_name}}</view>
|
<view class="pt10 f24 gray9" v-if="activityInfo.supplier_name">被走访企业：{{activityInfo.supplier_name}}</view>
|
</view>
|
</view>
|
<view class="grade evalu p-30-0 mt30">
|
<view class="evalu-value">
|
<text class="f28 gray6">评分：</text>
|
<view class="eval">
|
<i v-for="(itemEv,indexEv) in starList" :key="indexEv" :class="itemEv?'icon iconfont icon-start':'icon iconfont icon-start1'"
|
@click="chooseScore(indexEv)"></i>
|
</view>
|
</view>
|
</view>
|
<view class="grade d-a-c p-30-0 mt30">
|
<view :class="(form.score == 5||form.score == 4) ? 'flex-1 d-c-c active' : 'flex-1 d-c-c'" @click="gradeFunc(5)">
|
<view class="item d-c-c">
|
<text class="icon iconfont icon-pingjiahaoping"></text>
|
<text class="ml10">好评</text>
|
</view>
|
</view>
|
<view :class="(form.score == 3||form.score == 2) ? 'flex-1 d-c-c active' : 'flex-1 d-c-c'" @click="gradeFunc(3)">
|
<view class="item d-c-c">
|
<text class="icon iconfont icon-pingjiazhongping"></text>
|
<text class="ml10">中评</text>
|
</view>
|
</view>
|
<view :class="form.score == 1 ? 'flex-1 d-c-c active' : 'flex-1 d-c-c'" @click="gradeFunc(1)">
|
<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 mt30">
|
<textarea class="p10 box-s-b border flex-1" v-model="form.content" placeholder="请输入评价内容" />
|
</view>
|
<view class="upload-list d-s-c">
|
<view class="item" v-for="(imgs, img_num) in form.image_list" :key="img_num" @click="deleteImg(img_num)">
|
<image :src="imgs.file_path" mode="aspectFill"></image>
|
</view>
|
<view class="item upload-btn d-c-c d-c" @click="openUpload" v-if="form.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: '',
|
/*活动信息*/
|
activityInfo: {},
|
/*表单数据*/
|
form: {
|
score: 5,
|
content: '',
|
image_list: []
|
},
|
/*是否打开上传图片*/
|
isUpload: false,
|
/*星星评分列表*/
|
starList: [true, true, true, true, true]
|
};
|
},
|
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(
|
'branch.activityComment/order',
|
{
|
order_id: order_id
|
},
|
function(res) {
|
self.activityInfo = res.data;
|
self.loadding = false;
|
uni.hideLoading();
|
}
|
);
|
},
|
/*选择评分*/
|
gradeFunc(score) {
|
this.form.score = score;
|
this.updateStarList(score);
|
},
|
/*点击星星评分*/
|
chooseScore(index) {
|
let score = index + 1;
|
this.form.score = score;
|
this.updateStarList(score);
|
},
|
/*更新星星显示*/
|
updateStarList(score) {
|
this.starList = [false, false, false, false, false];
|
for(let i = 0; i < score; i++) {
|
this.starList[i] = true;
|
}
|
},
|
/*提交*/
|
formSubmit: function(e) {
|
let self = this;
|
let order_id = self.order_id;
|
|
if(!self.form.score) {
|
self.showError('请选择评分');
|
return;
|
}
|
|
let formData = {
|
score: self.form.score,
|
content: self.form.content || '',
|
image_list: self.form.image_list
|
};
|
|
self._post(
|
'branch.activityComment/order',
|
{
|
order_id: order_id,
|
formData: JSON.stringify(formData)
|
},
|
function(res) {
|
self.showSuccess(res.msg, function() {
|
uni.hideLoading();
|
}, null, function() {
|
self.gotoPage('/pages/user/my_activity/index', 'redirect');
|
});
|
}
|
);
|
},
|
|
/*打开上传图片*/
|
openUpload() {
|
this.isUpload = true;
|
},
|
|
/*获取上传的图片*/
|
getImgsFunc(e) {
|
let self = this;
|
if(e && typeof(e) != 'undefined'){
|
self.form.image_list = self.form.image_list.concat(e);
|
}
|
self.isUpload = false;
|
},
|
|
/*点击图片删除*/
|
deleteImg(n){
|
this.loadding=true;
|
this.form.image_list.splice(n,1);
|
this.loadding=false;
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.evaluate {
|
background: #f5f5f5;
|
}
|
.evaluate-item {
|
margin-bottom: 20rpx;
|
background: #ffffff;
|
border-radius: 20rpx;
|
}
|
.product .info {
|
flex: 1;
|
}
|
.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;
|
align-items: center;
|
}
|
.eval{
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
.evalu{
|
display: flex;
|
align-items: baseline;
|
flex-direction: column;
|
}
|
.upload-list {
|
flex-wrap: wrap;
|
}
|
.upload-list .item {
|
width: 160rpx;
|
height: 160rpx;
|
margin-right: 20rpx;
|
margin-bottom: 20rpx;
|
border-radius: 10rpx;
|
position: relative;
|
}
|
.upload-list .item image {
|
width: 100%;
|
height: 100%;
|
border-radius: 10rpx;
|
}
|
.upload-list .item.upload-btn {
|
border: 2rpx dashed #dddddd;
|
background: #f9f9f9;
|
}
|
.upload-list .item.upload-btn .iconfont {
|
font-size: 50rpx;
|
color: #999999;
|
}
|
</style>
|
