<template>
<view>
<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">问题反馈</block>
</cu-custom>
<view class="">
<view class="cu-form-group">
<input @input="backTitleInput" placeholder="请输入标题..." name="input"></input>
</view>
<view class="cu-form-group align-start margin-top">
<textarea maxlength="-1" :disabled="modalName!=null" @input="backContentInput" placeholder="请补充详细问题和意见..."></textarea>
</view>
<radio-group class="block" @change="RadioChange">
<view class="cu-form-group margin-top pp">
<view class="title">反馈类型</view>
<view class="cbox">
<view class="cbox-item">
<radio class='blue radio' :class="radio=='1'?'checked':''" :checked="radio=='1'?true:false" value="1"></radio>
<text class="">系统错误</text>
</view>
<view class="cbox-item">
<radio class='blue radio' :class="radio=='2'?'checked':''" :checked="radio=='2'?true:false" value="2"></radio>
<text class="">界面优化</text>
</view>
<view class="cbox-item">
<radio class='blue radio' :class="radio=='3'?'checked':''" :checked="radio=='3'?true:false" value="3"></radio>
<text class="">设计缺陷</text>
</view>
<view class="cbox-item">
<radio class='blue radio' :class="radio=='4'?'checked':''" :checked="radio=='4'?true:false" value="4"></radio>
<text class="">性能问题</text>
</view>
<view class="cbox-item">
<radio class='blue radio' :class="radio=='9'?'checked':''" :checked="radio=='9'?true:false" value="9"></radio>
<text class="">其他</text>
</view>
</view>
</view>
</radio-group>
<view class="cu-bar bg-white margin-top">
<view class="action">
请提供相关问题的截图或照片
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
</view>
<view class="padding flex flex-direction mt20">
<button class="cu-btn bg-blue lg round" @click="$noMultipleClicks(goSubmit)">提交</button>
</view>
</view>
</template>
<script>
import {
basePath,corpinfoId,corpUserId,loginSession,loginUserId
} from '@/common/tool.js';
export default {
data() {
return {
noClick:true,
radio: null,
imgList: [],
imgPaths:'',
modalName: null,
textareaBValue: '',
id:'',
backTitle:'',
backWay:'',
backContent:'',
backType:'',
}
},
onLoad(){
loginSession();
},
methods: {
goSubmit(){
var _this = this;
if (!_this.backTitle) {
uni.showToast({
icon: 'none',
title: '请输入标题',
duration: 1500
});
return;
}
if (!_this.backContent) {
uni.showToast({
icon: 'none',
title: '请填反馈内容',
duration: 1500
});
return;
}
if (!_this.backType) {
uni.showToast({
icon: 'none',
title: '请选择反馈类型',
duration: 1500
});
return;
}
if (_this.imgList.length <= 0) {
uni.showToast({
icon: 'none',
title: '请上传隐患图片',
duration: 1500
});
return;
}
var i = 0;
_this.uploadImg(_this.imgList, i);
},
uploadImg(tempFilePaths,i){
var _this = this;
uni.showLoading({
title: '提交中'
})
uni.uploadFile({
url: basePath + '/app/feedback/upload',
filePath: tempFilePaths[i],
name: 'FFILE',
formData: {
corpUserId:corpUserId,
},
success: (res) => {
var map = eval("("+res.data+")");
if(map.result =='success'){
var imgpath = map.imgPath;
_this.imgPaths = _this.imgPaths +";" +imgpath;
}
i++;
if (tempFilePaths.length > i) {
_this.uploadImg(tempFilePaths, i);
} else {
_this.submit();
}
},
fail: (err) => {
uni.hideLoading();
console.log('uploadImage fail', err);
uni.showModal({
content: err.errMsg,
showCancel: false
});
}
})
},
submit(){
var _this = this;
uni.request({
url: basePath+"/app/feedback/add", //提交接口
method: 'POST',
dataType:'json',
header:{
'Content-type':'application/x-www-form-urlencoded'
},
data: {
CORPINFO_ID:corpinfoId,
FEEDBACK_TITLE:_this.backTitle,
FEEDBACK_CONTENT:_this.backContent,
FEEDBACK_TYPE:_this.backType,
FEEDBACK_IMG :_this.imgPaths,
loginUserId:loginUserId,
},
success: (res) => {
if('success' == res.data.result){
uni.showToast({
icon: 'none',
title: '提交成功',
duration: 1500
});
setTimeout(function(){
var pages = getCurrentPages(); // 获取当前页面栈
var prePage = pages[pages.length - 2]; // 上一个页面
prePage.$vm.initflag = true; // A 页面 init方法 为true
uni.navigateBack({});
uni.hideLoading();
},1500);
}else{
uni.showToast({
title: res.data.message,
duration: 2000
});
}
}
});
},
backTitleInput(e){
this.backTitle = e.detail.value
},
backContentInput(e) {
this.backContent = e.detail.value
},
RadioChange(e) {
this.backType = e.detail.value
},
ChooseImage() {
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['camera','album'], //从相册选择
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '双控平台',
content: '确定要删除这张图片吗？',
cancelColor:"#000000",
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
}
}
</script>
<style>
.cu-form-group{
min-height: 100upx;
}
.pp{
padding-top: 20upx;
padding-bottom: 20upx;
}
.cbox{
display: flex;
flex-wrap: wrap;
flex: 1;
}
.cbox-item{
width: 180upx;
margin: 8upx 0;
}
.cbox-item .radio {
transform: scale(0.6);
margin-right: 10upx;
}
</style>