933 lines
24 KiB
Vue
933 lines
24 KiB
Vue
<template>
|
|
<view class="form-wrap form-component">
|
|
<view v-for="(item, index) in formData" :key="index">
|
|
<!-- 文本输入框 -->
|
|
<view v-if="item.controller == 'Text'" class="order-wrap">
|
|
<view class="order-cell">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box">
|
|
<input
|
|
type="text"
|
|
:placeholder="item.value.placeholder"
|
|
placeholder-class="placeholder color-tip"
|
|
v-model="item.val"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 多行文本输入框 -->
|
|
<view v-if="item.controller == 'Textarea'" class="order-wrap">
|
|
<view class="order-cell flex-box textarea">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box">
|
|
<textarea
|
|
:placeholder="item.value.placeholder"
|
|
placeholder-class="placeholder color-tip"
|
|
v-model="item.val"
|
|
></textarea>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 下拉选择器 -->
|
|
<view v-if="item.controller == 'Select'" class="order-wrap">
|
|
<picker
|
|
mode="selector"
|
|
:range="item.value.options"
|
|
@change="pickerChange($event, index)"
|
|
>
|
|
<view class="order-cell">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box">
|
|
<text v-if="item.val != ''">{{ item.val }}</text>
|
|
<text v-else class="color-tip">请选择</text>
|
|
</view>
|
|
<text class="iconfont icon-right"></text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 复选框 -->
|
|
<view v-if="item.controller == 'Checkbox'" class="order-wrap">
|
|
<view class="order-cell">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box check-group-box">
|
|
<checkbox-group @change="checkboxChange($event, index)">
|
|
<label v-for="(v, k) in item.option_lists" :key="k">
|
|
<checkbox :value="v.value" :checked="v.checked"></checkbox>
|
|
<view class="checkbox">
|
|
<text
|
|
:class="[
|
|
'iconfont',
|
|
!v.checked ? 'icon-fuxuankuang2' : '',
|
|
v.checked ? 'icon-fuxuankuang1 color-base-text' : ''
|
|
]"
|
|
></text>
|
|
{{ v.value }}
|
|
</view>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 单选框 -->
|
|
<view v-if="item.controller == 'Radio'" class="order-wrap">
|
|
<view class="order-cell">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box radio-group-box">
|
|
<radio-group @change="radioChange($event, index)">
|
|
<label v-for="(v, k) in item.option_lists" :key="k">
|
|
<radio :value="v.value" :checked="item.val == v.value"></radio>
|
|
<view class="radio-box">
|
|
<text
|
|
:class="[
|
|
'iconfont',
|
|
item.val != v.value ? 'icon-yuan_checkbox' : '',
|
|
item.val == v.value ? 'icon-yuan_checked color-base-text' : ''
|
|
]"
|
|
></text>
|
|
{{ v.value }}
|
|
</view>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 图片上传 -->
|
|
<view v-if="item.controller == 'Img'" class="order-wrap">
|
|
<view class="order-cell flex-box">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box img-boxs">
|
|
<view v-for="(v, k) in item.img_lists" :key="k" class="img-box" @tap="uploadImg(index)">
|
|
<image :src="$util.img(v)" mode="aspectFill"></image>
|
|
<text class="iconfont icon-guanbi" @tap.stop="delImg(k, index)"></text>
|
|
</view>
|
|
<view class="img-box" @tap="addImg(index)">
|
|
<text class="iconfont icon-add1"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日期选择器 -->
|
|
<view v-if="item.controller == 'Date'" class="order-wrap">
|
|
<view class="order-cell">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box box-flex">
|
|
<picker
|
|
mode="date"
|
|
:value="item.val"
|
|
@change="bindDateChange($event, index)"
|
|
>
|
|
<view :class="['uni-input', !item.val ? 'color-tip' : '']">
|
|
{{ item.val ? item.val : item.value.placeholder }}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<text class="iconfont icon-right"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日期范围选择器 -->
|
|
<view v-if="item.controller == 'Datelimit'" class="order-wrap">
|
|
<view class="order-cell flex-box">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box date-boxs">
|
|
<view class="date-box">
|
|
<picker
|
|
mode="date"
|
|
:value="item.start_date"
|
|
@change="bindStartDateChange($event, index)"
|
|
>
|
|
<view class="picker-box">
|
|
<view :class="['uni-input', !item.start_date ? 'color-tip' : '']">
|
|
{{ item.start_date ? item.start_date : item.value.placeholder_start }}
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="interval iconfont icon-jian"></view>
|
|
<view class="date-box">
|
|
<picker
|
|
mode="date"
|
|
:value="item.end_date"
|
|
@change="bindEndDateChange($event, index)"
|
|
>
|
|
<view class="picker-box">
|
|
<view :class="['uni-input', !item.end_date ? 'color-tip' : '']">
|
|
{{ item.end_date ? item.end_date : item.value.placeholder_end }}
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 时间选择器 -->
|
|
<view v-if="item.controller == 'Time'" class="order-wrap">
|
|
<view class="order-cell">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box box-flex">
|
|
<picker
|
|
mode="time"
|
|
:value="item.val"
|
|
@change="bindTimeChange($event, index)"
|
|
>
|
|
<view :class="['uni-input', !item.val ? 'color-tip' : '']">
|
|
{{ item.val ? item.val : item.value.placeholder }}
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<text class="iconfont icon-right"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 时间范围选择器 -->
|
|
<view v-if="item.controller == 'Timelimit'" class="order-wrap">
|
|
<view class="order-cell flex-box">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box date-boxs">
|
|
<view class="date-box">
|
|
<picker
|
|
mode="time"
|
|
:value="item.start_time"
|
|
@change="bindStartTimeChange($event, index)"
|
|
>
|
|
<view class="picker-box">
|
|
<view :class="['uni-input', !item.start_time ? 'color-tip' : '']">
|
|
{{ item.start_time ? item.start_time : item.value.placeholder_start }}
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="interval iconfont icon-jian"></view>
|
|
<view class="date-box">
|
|
<picker
|
|
mode="time"
|
|
:value="item.end_time"
|
|
@change="bindEndTimeChange($event, index)"
|
|
>
|
|
<view class="picker-box">
|
|
<view :class="['uni-input', !item.end_time ? 'color-tip' : '']">
|
|
{{ item.end_time ? item.end_time : item.value.placeholder_end }}
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 城市选择器 -->
|
|
<view v-if="item.controller == 'City'" class="order-wrap">
|
|
<view class="order-cell box-flex">
|
|
<view class="name">
|
|
<text class="tit">{{ item.value.title }}</text>
|
|
<text class="required">{{ item.value.required ? '*' : '' }}</text>
|
|
</view>
|
|
<view class="box">
|
|
<pick-regions
|
|
:defaultRegions="item.default_regions"
|
|
:selectArr="item.select_arr"
|
|
@getRegions="handleGetRegions($event, index)"
|
|
>
|
|
<view :class="['select-address', !item.val ? 'empty' : '', !item.val ? 'color-tip' : '']">
|
|
{{ item.val ? item.val : (item.select_arr == '2' ? '请选择省市' : '请选择省市区/县') }}
|
|
</view>
|
|
</pick-regions>
|
|
</view>
|
|
<text class="iconfont icon-right"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import pickRegions from '@/components/pick-regions/pick-regions.vue'
|
|
|
|
export default {
|
|
name: 'ns-form',
|
|
components: {
|
|
pickRegions
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => ({})
|
|
},
|
|
customAttr: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
formData: this.data
|
|
}
|
|
},
|
|
created() {
|
|
this.setFormData();
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler() {
|
|
this.setFormData();
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
setFormData() {
|
|
this.formData = this.data;
|
|
this.formData.forEach((item) => {
|
|
// 初始化默认值
|
|
if (!item.val) {
|
|
item.val = item.value.default ? item.value.default : '';
|
|
}
|
|
|
|
// 处理选项列表
|
|
if (item.value.options) {
|
|
item.option_lists = [];
|
|
item.value.options.forEach((option, index) => {
|
|
let optionItem = {};
|
|
optionItem.value = option;
|
|
optionItem.checked = false;
|
|
|
|
if (item.controller == 'Radio') {
|
|
if ((!item.val && index == 0) || (item.val && item.val == option)) {
|
|
optionItem.checked = true;
|
|
item.val = option;
|
|
}
|
|
}
|
|
|
|
if (item.controller == 'Checkbox' && item.val) {
|
|
let valArray = item.val.split(',');
|
|
optionItem.checked = valArray.indexOf(option) != -1;
|
|
}
|
|
|
|
item.option_lists.push(optionItem);
|
|
});
|
|
}
|
|
|
|
// 处理图片列表
|
|
if (item.controller == 'Img') {
|
|
item.img_lists = item.val ? item.val.split(',') : [];
|
|
}
|
|
|
|
// 处理日期
|
|
if (item.controller == 'Date' && !item.val) {
|
|
if (item.value.is_show_default) {
|
|
if (item.value.is_current) {
|
|
item.val = this.getDate();
|
|
} else {
|
|
item.val = item.value.default;
|
|
}
|
|
} else {
|
|
item.val = '';
|
|
}
|
|
}
|
|
|
|
// 处理日期范围
|
|
if (item.controller == 'Datelimit') {
|
|
if (item.val) {
|
|
let dateArray = item.val.split(' - ');
|
|
item.start_date = dateArray[0];
|
|
item.end_date = dateArray[1];
|
|
} else {
|
|
item.val = '';
|
|
|
|
// 开始日期
|
|
if (item.value.is_show_default_start) {
|
|
if (item.value.is_current_start) {
|
|
item.start_date = this.getDate();
|
|
} else {
|
|
item.start_date = item.value.default_start;
|
|
}
|
|
} else {
|
|
item.start_date = '';
|
|
}
|
|
|
|
// 结束日期
|
|
if (item.value.is_show_default_end) {
|
|
if (item.value.is_current_end) {
|
|
item.end_date = this.getDate();
|
|
} else {
|
|
item.end_date = item.value.default_end;
|
|
}
|
|
} else {
|
|
item.end_date = '';
|
|
}
|
|
|
|
if (item.start_date && item.end_date) {
|
|
item.val = item.start_date + ' - ' + item.end_date;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 处理时间
|
|
if (item.controller == 'Time' && !item.val) {
|
|
if (item.value.is_show_default) {
|
|
if (item.value.is_current) {
|
|
item.val = this.getTime();
|
|
} else {
|
|
item.val = item.value.default;
|
|
}
|
|
} else {
|
|
item.val = '';
|
|
}
|
|
}
|
|
|
|
// 处理时间范围
|
|
if (item.controller == 'Timelimit') {
|
|
if (item.val) {
|
|
let timeArray = item.val.split(' - ');
|
|
item.start_time = timeArray[0];
|
|
item.end_time = timeArray[1];
|
|
} else {
|
|
item.val = '';
|
|
|
|
// 开始时间
|
|
if (item.value.is_show_default_start) {
|
|
if (item.value.is_current_start) {
|
|
item.start_time = this.getTime();
|
|
} else {
|
|
item.start_time = item.value.default_start;
|
|
}
|
|
} else {
|
|
item.start_time = '';
|
|
}
|
|
|
|
// 结束时间
|
|
if (item.value.is_show_default_end) {
|
|
if (item.value.is_current_end) {
|
|
item.end_time = this.getTime();
|
|
} else {
|
|
item.end_time = item.value.default_end;
|
|
}
|
|
} else {
|
|
item.end_time = '';
|
|
}
|
|
|
|
if (item.start_time && item.end_time) {
|
|
item.val = item.start_time + ' - ' + item.end_time;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 处理城市选择
|
|
if (item.controller == 'City') {
|
|
item.full_address = '';
|
|
item.select_arr = item.value.default_type == 1 ? '2' : '3';
|
|
if (item.val) {
|
|
item.default_regions = item.val.split('-');
|
|
} else {
|
|
item.default_regions = [];
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 表单验证
|
|
verify() {
|
|
for (let i = 0; i < this.formData.length; i++) {
|
|
let item = this.formData[i];
|
|
|
|
// 文本验证
|
|
if (item.controller == 'Text') {
|
|
if (item.value.required && !item.val) {
|
|
this.$util.showToast({ title: '请输入' + item.value.title });
|
|
return false;
|
|
}
|
|
|
|
if (item.name == 'ID_CARD' && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(item.val)) {
|
|
if (!item.value.required) {
|
|
this.$util.showToast({ title: '身份证输入不合法' });
|
|
return false;
|
|
}
|
|
if (item.val != '') {
|
|
this.$util.showToast({ title: '身份证输入不合法' });
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (item.name == 'MOBILE' && !this.$util.verifyMobile(item.val)) {
|
|
if (!item.value.required) {
|
|
this.$util.showToast({ title: '手机号输入不合法' });
|
|
return false;
|
|
}
|
|
if (item.val != '') {
|
|
this.$util.showToast({ title: '手机号输入不合法' });
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 多行文本验证
|
|
if (item.controller == 'Textarea' && item.value.required && !item.val) {
|
|
this.$util.showToast({ title: '请输入' + item.value.title });
|
|
return false;
|
|
}
|
|
|
|
// 下拉选择验证
|
|
if (item.controller == 'Select' && item.value.required && !item.val) {
|
|
this.$util.showToast({ title: '请选择' + item.value.title });
|
|
return false;
|
|
}
|
|
|
|
// 复选框验证
|
|
if (item.controller == 'Checkbox' && item.value.required && !item.val) {
|
|
this.$util.showToast({ title: '请至少选择一个' + item.value.title });
|
|
return false;
|
|
}
|
|
|
|
// 图片上传验证
|
|
if (item.controller == 'Img' && item.value.required && !item.val) {
|
|
this.$util.showToast({ title: '请至少上传一张' + item.value.title });
|
|
return false;
|
|
}
|
|
|
|
// 日期验证
|
|
if (item.controller == 'Date' && item.value.required && !item.val) {
|
|
this.$util.showToast({ title: '请选择' + item.value.title });
|
|
return false;
|
|
}
|
|
|
|
// 日期范围验证
|
|
if (item.controller == 'Datelimit') {
|
|
if (item.value.required && !item.val) {
|
|
this.$util.showToast({ title: '请选择' + item.value.title });
|
|
return false;
|
|
}
|
|
|
|
if (this.$util.timeTurnTimeStamp(item.start_date) > this.$util.timeTurnTimeStamp(item.end_date)) {
|
|
this.$util.showToast({ title: '结束日期不能小于开始日期' });
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 时间验证
|
|
if (item.controller == 'Time' && item.value.required && !item.val) {
|
|
this.$util.showToast({ title: '请选择' + item.value.title });
|
|
return false;
|
|
}
|
|
|
|
// 时间范围验证
|
|
if (item.controller == 'Timelimit') {
|
|
if (item.value.required && !item.val) {
|
|
this.$util.showToast({ title: '请选择' + item.value.title });
|
|
return false;
|
|
}
|
|
|
|
if (item.start_time >= item.end_time) {
|
|
this.$util.showToast({ title: '结束时间必须大于开始时间' });
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 城市选择验证
|
|
if (item.controller == 'City' && item.value.required && !item.val) {
|
|
this.$util.showToast({ title: '请选择' + item.value.title });
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return this.formData;
|
|
},
|
|
|
|
// 下拉选择改变
|
|
pickerChange(event, index) {
|
|
this.formData[index].val = this.data[index].value.options[event.detail.value];
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 复选框改变
|
|
checkboxChange(event, index) {
|
|
this.formData[index].val = event.detail.value.toString();
|
|
this.formData[index].option_lists.forEach((option) => {
|
|
option.checked = event.detail.value.indexOf(option.value) != -1;
|
|
});
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 单选框改变
|
|
radioChange(event, index) {
|
|
this.formData[index].val = event.detail.value;
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 上传图片
|
|
uploadImg(index) {
|
|
let self = this;
|
|
this.$util.upload(Number(this.formData[index].value.max_count), { path: 'evaluateimg' }, function(res) {
|
|
if (res.length > 0) {
|
|
res.forEach(function(img) {
|
|
if (self.formData[index].img_lists.length >= Number(self.formData[index].value.max_count)) {
|
|
self.$util.showToast({ title: '最多上传' + self.formData[index].value.max_count + '张图片' });
|
|
return false;
|
|
}
|
|
self.formData[index].img_lists.push(img);
|
|
});
|
|
self.formData[index].val = self.formData[index].img_lists.toString();
|
|
self.$forceUpdate();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 添加图片
|
|
addImg(index) {
|
|
let self = this;
|
|
if (this.formData[index].img_lists.length >= Number(this.formData[index].value.max_count)) {
|
|
this.$util.showToast({ title: '最多上传' + this.formData[index].value.max_count + '张图片' });
|
|
return false;
|
|
}
|
|
|
|
this.$util.upload(Number(this.formData[index].value.max_count), { path: 'evaluateimg' }, function(res) {
|
|
if (res.length > 0) {
|
|
res.forEach(function(img) {
|
|
self.formData[index].img_lists.push(img);
|
|
});
|
|
self.formData[index].val = self.formData[index].img_lists.toString();
|
|
self.$forceUpdate();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 删除图片
|
|
delImg(imgIndex, formIndex) {
|
|
this.formData[formIndex].img_lists.splice(imgIndex, 1);
|
|
this.formData[formIndex].val = this.formData[formIndex].img_lists.toString();
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 获取当前日期
|
|
getDate() {
|
|
let date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
month = month > 9 ? month : '0' + month;
|
|
day = day > 9 ? day : '0' + day;
|
|
return `${year}-${month}-${day}`;
|
|
},
|
|
|
|
// 获取当前时间
|
|
getTime() {
|
|
let date = new Date();
|
|
let hours = date.getHours();
|
|
let minutes = date.getMinutes();
|
|
hours = hours > 9 ? hours : '0' + hours;
|
|
minutes = minutes > 9 ? minutes : '0' + minutes;
|
|
return `${hours}:${minutes}`;
|
|
},
|
|
|
|
// 日期改变
|
|
bindDateChange(event, index) {
|
|
this.formData[index].val = event.detail.value;
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 开始日期改变
|
|
bindStartDateChange(event, index) {
|
|
this.$set(this.formData[index], 'start_date', event.detail.value);
|
|
this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 结束日期改变
|
|
bindEndDateChange(event, index) {
|
|
this.$set(this.formData[index], 'end_date', event.detail.value);
|
|
this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 时间改变
|
|
bindTimeChange(event, index) {
|
|
this.formData[index].val = event.detail.value;
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 开始时间改变
|
|
bindStartTimeChange(event, index) {
|
|
this.formData[index].start_time = event.detail.value;
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 结束时间改变
|
|
bindEndTimeChange(event, index) {
|
|
this.formData[index].end_time = event.detail.value;
|
|
this.formData[index].val = this.formData[index].start_time + ' - ' + this.formData[index].end_time;
|
|
this.$forceUpdate();
|
|
},
|
|
|
|
// 处理地区选择
|
|
handleGetRegions(regions, index) {
|
|
this.formData[index].val = '';
|
|
this.formData[index].val += regions[0] != undefined ? regions[0].label : '';
|
|
this.formData[index].val += regions[1] != undefined ? '-' + regions[1].label : '';
|
|
this.formData[index].val += regions[2] != undefined ? '-' + regions[2].label : '';
|
|
this.$forceUpdate();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-wrap {
|
|
padding: 20rpx 0;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.order-cell {
|
|
align-items: center;
|
|
background: #fff;
|
|
position: relative;
|
|
|
|
&.textarea {
|
|
align-items: unset;
|
|
}
|
|
|
|
&.clear-flex {
|
|
display: block;
|
|
|
|
.box {
|
|
margin-top: 16rpx;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
border-bottom: solid 1px #eee;
|
|
}
|
|
|
|
&.align-top {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.name {
|
|
width: 160rpx;
|
|
margin-bottom: 10rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
.tit {
|
|
text-align: left;
|
|
font-size: 32rpx;
|
|
color: #888;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.required {
|
|
color: red;
|
|
font-size: 28rpx;
|
|
margin-left: 4rpx;
|
|
width: 14rpx;
|
|
text-align: left;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
flex: 1;
|
|
padding: 0 0rpx;
|
|
line-height: inherit;
|
|
text-align: left;
|
|
|
|
input {
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
height: 70rpx;
|
|
border: solid 2rpx #eee;
|
|
line-height: 70rpx;
|
|
padding: 0 16rpx;
|
|
}
|
|
|
|
textarea {
|
|
font-size: 28rpx;
|
|
width: 100%;
|
|
height: 88rpx;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
}
|
|
|
|
checkbox-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
radio-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
&.img-boxs {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.img-box {
|
|
margin: 10rpx 20rpx 10rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border: 1rpx solid #eee;
|
|
border-radius: 4rpx;
|
|
position: relative;
|
|
|
|
.icon-guanbi {
|
|
position: absolute;
|
|
top: -14rpx;
|
|
right: -14rpx;
|
|
display: inline-block;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
color: #909399;
|
|
}
|
|
|
|
.icon-add1 {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.box-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&.date-boxs {
|
|
padding: 0 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.interval {
|
|
margin: 0 12rpx;
|
|
color: #000;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.date-box {
|
|
.picker-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.radio-group-box {
|
|
radio {
|
|
display: none;
|
|
}
|
|
|
|
.radio-box {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
|
|
.iconfont {
|
|
font-size: 32rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.check-group-box {
|
|
checkbox {
|
|
display: none;
|
|
}
|
|
|
|
.checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
|
|
.iconfont {
|
|
font-size: 32rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconfont {
|
|
color: #909399;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.box-flex {
|
|
picker {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.icon-right {
|
|
line-height: 1;
|
|
position: unset;
|
|
}
|
|
}
|
|
}
|
|
</style> |