<template>
|
<view class="evaluate pb100" :data-theme='theme()' :class="theme() || ''">
|
<form @submit="formSubmit" @reset="formReset">
|
<view class="evaluate-item p30">
|
|
<view class="textarea-box d-s-c f28">
|
<textarea class="p10 box-s-b border flex-1" v-model="form.content" placeholder="请输入备注" />
|
</view>
|
<view class="upload-list d-s-c" v-model="form.image_list">
|
<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="aspectFit"></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 class="rule">
|
<view class="pop-center">
|
<scroll-view scroll-y="true" style="height: 473rpx;">
|
<view class="pop-title-box">{{content}}</view>
|
</scroll-view>
|
</view>
|
</view>
|
</view>
|
<view class="foot-btns"><button form-type="submit" class="btn-red" style="background: none; border: 0;">确认提交</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,
|
/*页面数据*/
|
tableData: [],
|
form: {
|
image_list:[],
|
content:''
|
},
|
/*是否打开上传图片*/
|
isUpload: false,
|
image_id: [],
|
img: '/static/temp/photo.jpg',
|
//规则
|
content:''
|
};
|
},
|
onLoad() {
|
this.getData();
|
},
|
methods: {
|
getData(){
|
let self = this;
|
self._get(
|
'plus.ticket.index/setting',
|
{},
|
function(res) {
|
self.content = res.data.setting.content;
|
}
|
);
|
},
|
/*提交*/
|
formSubmit: function(e) {
|
let self = this;
|
let formData=self.form;
|
self._post(
|
'plus.ticket.index/submit',
|
{
|
formData: JSON.stringify(formData)
|
},
|
function(res) {
|
self.showSuccess('上传成功！',function(){
|
self.gotoPage('/pages2/ticket/index/index', 'redirect');
|
});
|
}
|
);
|
},
|
|
/*打开上传图片*/
|
openUpload() {
|
this.isUpload = false;
|
this.isUpload = true;
|
},
|
|
/*获取上传的图片*/
|
getImgsFunc(e) {
|
let self = this;
|
if(e&&typeof(e)!='undefined'){
|
|
self.form.image_list = self.form.image_list.concat(e);
|
console.log(self.form)
|
}
|
self.isUpload = false;
|
},
|
|
/*点击图片删除*/
|
deleteImg(i,n){
|
this.loadding=true;
|
this.form.image_list.splice(n,1);
|
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>
|
<style lang="scss">
|
.foot-btns {
|
position: fixed;
|
bottom: 20rpx;
|
left: 0rpx;
|
width: 90%;
|
height: 80rpx;
|
line-height: 80rpx;
|
border-radius: 80rpx;
|
/* background: #ff5704; */
|
@include background_color('background_color');
|
color: #fff;
|
font-size: 30rpx;
|
display: flex;
|
justify-content: center;
|
margin: 0 auto;
|
}
|
.pop-center {
|
width: 100%;
|
height: 550rpx;
|
}
|
.pop-title-box{
|
padding-top: 50rpx;
|
white-space: pre-line;
|
color: #7F685A;
|
font-size: 26rpx;
|
line-height: 46rpx;
|
}
|
</style>
|
