You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
366 lines
15 KiB
366 lines
15 KiB
<template>
|
|
<view class="container">
|
|
|
|
<form @submit="editorFormSubmit" :data-formcontent="formdata.content" :data-formid="cateid" >
|
|
<view class="content">
|
|
<view class="form-item flex">
|
|
<view class="title"> 工单类型:</view>
|
|
<view class="inputbox flex">
|
|
<picker class="picker" mode="selector" @change="BindPickerChange" :range="cate" :value="index" range-key="name">
|
|
<view class="uni-input">{{catename}}</view>
|
|
</picker>
|
|
<text class="iconfont iconjiantou" style="color:#ccc;font-weight:normal"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item" v-for="(item,idx) in formdata.content" :key="item.id">
|
|
<view class="label">{{item.val1}}<text v-if="item.val3==1" style="color:red"> *</text></view>
|
|
<block v-if="item.key=='input'">
|
|
<input type="text" :name="'form'+idx" class="input" :placeholder="item.val2" :data-formidx="'form'+idx" placeholder-style="font-size:28rpx"/>
|
|
</block>
|
|
<block v-if="item.key=='textarea'">
|
|
<textarea :name="'form'+idx" class='textarea' :placeholder="item.val2" :data-formidx="'form'+idx" placeholder-style="font-size:28rpx"/>
|
|
</block>
|
|
<block v-if="item.key=='radio'">
|
|
<radio-group class="radio-group" :name="'form'+idx" :data-formidx="'form'+idx">
|
|
<label v-for="(item1,idx1) in item.val2" :key="item1.id" class="flex-y-center">
|
|
<radio class="radio" :value="item1"/>{{item1}}
|
|
</label>
|
|
</radio-group>
|
|
</block>
|
|
<block v-if="item.key=='checkbox'">
|
|
<checkbox-group :name="'form'+idx" class="checkbox-group" :data-formidx="'form'+idx">
|
|
<label v-for="(item1,idx1) in item.val2" :key="item1.id" class="flex-y-center">
|
|
<checkbox class="checkbox" :value="item1"/>{{item1}}
|
|
</label>
|
|
</checkbox-group>
|
|
</block>
|
|
<block v-if="item.key=='selector'">
|
|
<picker class="picker" mode="selector" :name="'form'+idx" :range="item.val2" @change="editorBindPickerChange" :data-idx="idx" :data-formidx="'form'+idx">
|
|
<view v-if="editorFormdata[idx] || editorFormdata[idx]===0"> {{item.val2[editorFormdata[idx]]}}</view>
|
|
<view v-else>请选择</view>
|
|
</picker>
|
|
<text class="iconfont iconjiantou" style="color:#999;font-weight:normal"></text>
|
|
</block>
|
|
<block v-if="item.key=='time'">
|
|
<picker class="picker" mode="time" :name="'form'+idx" value="" :start="item.val2[0]" :end="item.val2[1]" :range="item.val2" @change="editorBindPickerChange" :data-bid="formdata" :data-idx="idx" :data-formidx="'form'+idx" >
|
|
<view v-if="editorFormdata[idx]">{{editorFormdata[idx]}}</view>
|
|
<view v-else>请选择</view>
|
|
</picker>
|
|
<text class="iconfont iconjiantou" style="color:#999;font-weight:normal"></text>
|
|
</block>
|
|
<block v-if="item.key=='date'">
|
|
<picker class="picker" mode="date" :name="'form'+idx" value="" :start="item.val2[0]" :end="item.val2[1]" :range="item.val2" @change="editorBindPickerChange" :data-bid="formdata" :data-idx="idx" :data-formidx="'form'+idx">
|
|
<view v-if="editorFormdata[idx]">{{editorFormdata[idx]}}</view>
|
|
<view v-else>请选择</view>
|
|
</picker>
|
|
<text class="iconfont iconjiantou" style="color:#999;font-weight:normal"></text>
|
|
</block>
|
|
|
|
<block v-if="item.key=='region'">
|
|
<uni-data-picker :localdata="items" popup-title="请选择省市区" :placeholder="formdata['form'+idx] || '请选择省市区'" @change="onchange" :data-formidx="'form'+idx"></uni-data-picker>
|
|
<!-- <picker class="picker" mode="region" :name="'form'+idx" value="" @change="editorBindPickerChange" :data-idx="idx">
|
|
<view v-if="editorFormdata[idx]">{{editorFormdata[idx]}}</view>
|
|
<view v-else>请选择省市区</view>
|
|
</picker> -->
|
|
<input type="text" style="display:none" :name="'form'+idx" :value="regiondata ? regiondata : formdata['form'+idx]"/>
|
|
</block>
|
|
|
|
<block v-if="item.key=='upload'">
|
|
<input type="text" style="display:none" :name="'form'+idx" :value="editorFormdata['content_pics'+idx]"/>
|
|
<view class="flex" style="flex-wrap:wrap;padding-top:20rpx">
|
|
<view class="form-imgbox" v-if="editorFormdata['content_pic'+idx]" v-for="(item, index) in editorFormdata['content_pic'+idx]" :key="index">
|
|
<view class="form-imgbox-close" @tap="removeimg" :data-pindex="index" :data-field="'content_pic'+idx" :data-idx="idx"><image :src="event_rul + '/static/img/static/img/ico-del.png'"></image></view>
|
|
<view class="form-imgbox-img"><image :src="item" @click="previewImage" :data-url="item" mode="widthFix" /></view>
|
|
</view>
|
|
<view class="form-uploadbtn" :style="{background:'url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 50rpx',backgroundSize:'80rpx 80rpx',backgroundColor:'#F3F3F3'}" @click="editorChooseImage" :data-field="'content_pic'+idx" :data-idx="idx" :data-formidx="'form'+idx"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="dp-form-item" v-if="formdata.payset==1">
|
|
<text class="label">支付金额：</text>
|
|
<input type="text" class="input" name="price" :value='formdata.price' v-if="formdata.priceedit==1" @input="setfield" data-formidx="price"/>
|
|
<text v-if="formdata.priceedit==0">{{formdata.price}}</text>
|
|
<text style="padding-left:10rpx">元</text>
|
|
</view>
|
|
</view>
|
|
<view style="height: 100rpx;"></view>
|
|
<view class="btnbox"> <button class="dp-form-btn" form-type="submit" :data-formcontent="formdata.content" :data-formid="cateid" :style="{background:t('color1')}" >提交</button> </view>
|
|
</form>
|
|
|
|
<!--悬浮按钮-->
|
|
<view class="myworkorder" @tap="goto" data-url="record">我的工单</view>
|
|
|
|
<nodata v-if="nodata"></nodata>
|
|
<nomore v-if="nomore"></nomore>
|
|
<loading v-if="loading"></loading>
|
|
<dp-tabbar :opt="opt"></dp-tabbar>
|
|
<popmsg ref="popmsg"></popmsg>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
opt:{},
|
|
loading:false,
|
|
isload: false,
|
|
cate:[],
|
|
nomore: false,
|
|
nodata:false,
|
|
index:0,
|
|
catename:'请选择',
|
|
pre_url:app.globalData.pre_url,
|
|
editorFormdata:[],
|
|
formdata:{},
|
|
formvaldata:{},
|
|
regiondata:'',
|
|
cateid:'',
|
|
|
|
event_rul: app.globalData.event_url,
|
|
};
|
|
},
|
|
onLoad: function (opt) {
|
|
this.opt = app.getopts(opt);
|
|
this.st = this.opt.st || 'all';
|
|
this.type = this.opt.type || '';
|
|
this.orderid = this.opt.id || '';
|
|
this.cateid = this.opt.cateid || '';
|
|
|
|
this.getdata();
|
|
},
|
|
methods: {
|
|
changetab: function (st) {
|
|
this.st = st;
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 0
|
|
});
|
|
this.getdata();
|
|
},
|
|
onchange(e) {
|
|
const value = e.detail.value
|
|
console.log(value[0].text + ',' + value[1].text + ',' + value[2].text)
|
|
this.regiondata = value[0].text + ',' + value[1].text + ',' + value[2].text;
|
|
},
|
|
getdata: function () {
|
|
var that = this;
|
|
app.get('ApiIndex/getCustom',{}, function (customs) {
|
|
var url = app.globalData.pre_url+'/static/area.json';
|
|
uni.request({
|
|
url: app.globalData.pre_url+'/static/area.json',
|
|
data: {},
|
|
method: 'GET',
|
|
header: { 'content-type': 'application/json' },
|
|
success: function(res2) {
|
|
that.items = res2.data
|
|
}
|
|
});
|
|
});
|
|
app.post('ApiWorkorder/getcategory', { type:that.type ,cateid:that.cateid}, function (res) {
|
|
that.isload = true;
|
|
var cate = res.data;
|
|
that.cate = cate;
|
|
//console.log(that.cateid)
|
|
if(that.cateid){
|
|
that.BindPickerChanges();
|
|
}
|
|
})
|
|
|
|
},
|
|
BindPickerChange:function(e){
|
|
var that = this;
|
|
var index = e.detail.value;
|
|
that.index = index
|
|
console.log(index);
|
|
that.catename = that.cate[index].name
|
|
var cateid = that.cate[index].id
|
|
that.cateid = cateid
|
|
/*app.post('ApiWorkorder/getform', {id:cateid }, function (res) {
|
|
that.isload = true;
|
|
that.loading=false
|
|
if(res && res.status == 1 && res.data){
|
|
var formcontent = res.data;
|
|
that.formdata = formcontent
|
|
console.log(formdata);
|
|
}
|
|
})*/
|
|
|
|
that.formdata = that.cate[index]
|
|
|
|
},
|
|
BindPickerChanges:function(){
|
|
var that = this;
|
|
var index = that.index;
|
|
that.catename = that.cate[index].name
|
|
var cateid = that.cate[index].id
|
|
that.cateid = cateid
|
|
|
|
that.formdata = that.cate[index]
|
|
|
|
},
|
|
editorChooseImage: function (e) {
|
|
var that = this;
|
|
var idx = e.currentTarget.dataset.idx;
|
|
var field = e.currentTarget.dataset.field;
|
|
var pics = that.editorFormdata[field]
|
|
//console.log(field);
|
|
if(!pics) pics = [];
|
|
app.chooseImage(function(urls){
|
|
for(var i=0;i<urls.length;i++){
|
|
pics.push(urls[i]);
|
|
}
|
|
that.editorFormdata[field] = pics;
|
|
that.editorFormdata['content_pics'+idx] = that.editorFormdata[field].join(',');
|
|
that.formvaldata[field] = pics;
|
|
//that.editorFormdata = editorFormdata
|
|
that.getdata();
|
|
},5)
|
|
},
|
|
removeimg:function(e){
|
|
var that = this;
|
|
var idx = e.currentTarget.dataset.idx;
|
|
var pindex= e.currentTarget.dataset.pindex
|
|
var field= e.currentTarget.dataset.field
|
|
var pics = that.editorFormdata[field]
|
|
that.editorFormdata[field].splice(pindex,1)
|
|
that.editorFormdata['content_pics'+idx] = that.editorFormdata[field].join(',');
|
|
//console.log(that.editorFormdata[field]);
|
|
that.getdata();
|
|
},
|
|
editorBindPickerChange:function(e){
|
|
var that=this
|
|
var idx = e.currentTarget.dataset.idx;
|
|
var val = e.detail.value;
|
|
var editorFormdata = that.editorFormdata;
|
|
if(!editorFormdata) editorFormdata = [];
|
|
editorFormdata[idx] = val;
|
|
this.editorFormdata = editorFormdata
|
|
//console.log(this.editorFormdata);
|
|
|
|
this.test = Math.random();
|
|
var field = e.currentTarget.dataset.formidx;
|
|
this.formvaldata[field] = val;
|
|
that.getdata();
|
|
},
|
|
editorFormSubmit:function(e){
|
|
var that = this;
|
|
if(this.submitDisabled) return ;
|
|
//console.log('form发生了submit事件，携带数据为：', e.detail.value)
|
|
//var subdata = e.detail.value;
|
|
var formcontent = e.currentTarget.dataset.formcontent;
|
|
var formid = e.currentTarget.dataset.formid;
|
|
var formdataval = e.detail.value;
|
|
//console.log(formdataval);
|
|
var newformdata = {};
|
|
for (var i = 0; i < formcontent.length;i++){
|
|
//console.log(subdata['form' + i]);
|
|
if (formcontent[i].key == 'region') {
|
|
formdataval['form' + i] = that.regiondata;
|
|
}
|
|
if (formcontent[i].val3 == 1 && (formdataval['form' + i] === '' || formdataval['form' + i] === null || formdataval['form' + i] === undefined || formdataval['form' + i].length==0)){
|
|
app.alert(formcontent[i].val1+' 必填');return;
|
|
}
|
|
if (formcontent[i].key =='switch'){
|
|
if (subdata['form' + i]==false){
|
|
subdata['form' + i] = '否'
|
|
}else{
|
|
subdata['form' + i] = '是'
|
|
}
|
|
}
|
|
|
|
|
|
if (formcontent[i].key == 'input' && formcontent[i].val4 && formdataval['form' + i]!==''){
|
|
if(formcontent[i].val4 == '2'){ //手机号
|
|
if (!/^1[3456789]\d{9}$/.test(formdataval['form' + i])) {
|
|
app.alert(formcontent[i].val1+' 格式错误');return;
|
|
}
|
|
}
|
|
if(formcontent[i].val4 == '3'){ //身份证号
|
|
if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(formdataval['form' + i])) {
|
|
app.alert(formcontent[i].val1+' 格式错误');return;
|
|
}
|
|
}
|
|
if(formcontent[i].val4 == '4'){ //邮箱
|
|
if (!/^(.+)@(.+)$/.test(formdataval['form' + i])) {
|
|
app.alert(formcontent[i].val1+' 格式错误');return;
|
|
}
|
|
}
|
|
}
|
|
newformdata['form'+i] = formdataval['form' + i];
|
|
}
|
|
that.submitDisabled = true;
|
|
app.showLoading('提交中');
|
|
|
|
var pages = getCurrentPages(); //获取加载的页面
|
|
var currentPage = pages[pages.length - 1]; //获取当前页面的对象
|
|
var thispath = '/' + (currentPage.route ? currentPage.route : currentPage.__route__); //当前页面url
|
|
var opts = currentPage.$vm.opt;
|
|
app.post('ApiWorkorder/formsubmit', {formid:formid,formdata:newformdata,price:that.cate[that.index].price,type:that.type,orderid:that.orderid},function(data){
|
|
app.showLoading(false);
|
|
if (data.status == 0) {
|
|
setTimeout(function () {
|
|
app.error(data.msg);
|
|
}, 100)
|
|
that.submitDisabled = false;
|
|
return;
|
|
}else if(data.status == 1) { //无需付款
|
|
that.subscribeMessage(function () {
|
|
setTimeout(function () {
|
|
app.success(data.msg);
|
|
}, 100)
|
|
setTimeout(function () {
|
|
app.goto('record');
|
|
}, 1000)
|
|
});
|
|
return;
|
|
}else if(data.status==2){
|
|
|
|
that.subscribeMessage(function () {
|
|
setTimeout(function () {
|
|
app.goto('/pages/pay/pay?id='+data.payorderid+'&tourl=record');
|
|
}, 100);
|
|
});
|
|
}
|
|
that.submitDisabled = false;
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.content{ width:90%;margin-top:40rpx; background: #fff; margin: 40rpx; border-radius:10rpx; padding: 20rpx;}
|
|
.dp-form-btn{color:#fff;width:90%;height:66rpx;display:flex;align-items:center;justify-content:center;border-radius:50rpx}
|
|
.btnbox{ background: #fff; position: fixed; bottom: 0; width: 100%; padding: 20rpx 0;}
|
|
.form-item .inputbox{ align-items: center; color: #ccc}
|
|
.content .item .uni-input{ color: #ccc}
|
|
|
|
.form-item {width: 100%;padding: 16rpx 0;background: #fff;display: flex;align-items: center;justify-content:space-between;border-bottom: 1px #ededed solid;}
|
|
.form-item .label {color: #333;width: 150rpx;flex-shrink:0}
|
|
.form-item .radio{transform:scale(.7);}
|
|
.form-item .checkbox{transform:scale(.7);}
|
|
.form-item .input {height: 70rpx;padding-left: 10rpx;text-align: right;flex:1;border:1px solid #eee;padding:0 8rpx;border-radius:2px;}
|
|
.form-item .textarea{height:140rpx;line-height:40rpx;overflow: hidden;flex:1;border:1px solid #eee;border-radius:2px;padding:8rpx}
|
|
.form-item .radio-group{display:flex;flex-wrap:wrap;justify-content:flex-end}
|
|
.form-item .radio{height: 70rpx;line-height: 70rpx;display:flex;align-items:center}
|
|
.form-item .radio2{display:flex;align-items:center;}
|
|
.form-item .radio .myradio{margin-right:10rpx;display:inline-block;border:1px solid #aaa;background:#fff;height:32rpx;width:32rpx;border-radius:50%}
|
|
.form-item .checkbox-group{display:flex;flex-wrap:wrap;justify-content:flex-end}
|
|
.form-item .checkbox{height: 70rpx;line-height: 70rpx;display:flex;align-items:center}
|
|
.form-item .checkbox2{display:flex;align-items:center;height: 40rpx;line-height: 40rpx;}
|
|
.form-item .checkbox .mycheckbox{margin-right:10rpx;display:inline-block;border:1px solid #aaa;background:#fff;height:32rpx;width:32rpx;border-radius:2px}
|
|
.form-item .picker{height: 70rpx;line-height:70rpx;flex:1;text-align:right}
|
|
|
|
|
|
.form-imgbox{margin-right:16rpx;margin-bottom:10rpx;font-size:24rpx;position: relative;}
|
|
.form-imgbox-close{position: absolute;display: block;width:32rpx;height:32rpx;right:-16rpx;top:-16rpx;color:#999;font-size:32rpx;background:#fff}
|
|
.form-imgbox-close image{width:100%;height:100%}
|
|
.form-imgbox-img{display: block;width:200rpx;height:200rpx;padding:2px;border: #d3d3d3 1px solid;background-color: #f6f6f6;overflow:hidden}
|
|
.form-imgbox-img>image{max-width:100%;}
|
|
.form-imgbox-repeat{position: absolute;display: block;width:32rpx;height:32rpx;line-height:28rpx;right: 2px;bottom:2px;color:#999;font-size:30rpx;background:#fff}
|
|
.form-uploadbtn{position:relative;height:200rpx;width:200rpx}
|
|
|
|
.myworkorder{ background: #fff; width: 150rpx; height: 70rpx; position: fixed; right: 0%; bottom: 20%; display: flex; align-items: center; border-top-left-radius: 30rpx; border-bottom-left-radius: 30rpx; justify-content: center;}
|
|
</style>
|