|
@@ -4,20 +4,40 @@
|
|
|
<!-- 文本输入 -->
|
|
|
<view class="input-box" v-if="item.type == 'text'" :style="{ marginTop: tovw(item.marginTop || 0) }"
|
|
|
@click="focusLabel = item.label">
|
|
|
- <view class="box">
|
|
|
+ <view class="box" :class="item.unBorBot ? '' : 'borBot'">
|
|
|
<view class="label">
|
|
|
<text class="must" v-if="item.isMust">*</text>
|
|
|
{{ item.label }}:
|
|
|
</view>
|
|
|
<view class="content-box">
|
|
|
- <textarea auto-height type="text" :focus="focusLabel == item.label"
|
|
|
- :placeholder="item.placeholder || '请填写' + item.label" :value="item.value"
|
|
|
- :style="{ width: item.value ? '220px' : '240px' }" @input="onInput($event, index)"
|
|
|
- :maxlength="item.maxlength || '499'" confirm-type="done" />
|
|
|
- <icon v-if="item.value" class="icon" type="clear" size="3.733vw" @click="onClearInput(index)" />
|
|
|
+ <view class="content">
|
|
|
+ <input v-if="item.inputmode == 'number'" type="number"
|
|
|
+ placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
|
|
|
+ :focus="focusLabel == item.label" :placeholder="item.placeholder || '请填写' + item.label"
|
|
|
+ :value="item.value" :style="{ width: item.value ? '220px' : '240px' }"
|
|
|
+ @input="onInput($event, index)" :maxlength="item.maxlength || '499'" confirm-type="done" />
|
|
|
+ <textarea v-else
|
|
|
+ placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;"
|
|
|
+ auto-height type="text" :focus="focusLabel == item.label"
|
|
|
+ :placeholder="item.placeholder || '请填写' + item.label" :value="item.value"
|
|
|
+ :style="{ width: item.value ? '220px' : '240px' }" @input="onInput($event, index)"
|
|
|
+ :maxlength="item.maxlength || '499'" confirm-type="done" />
|
|
|
+ <icon v-if="item.value" class="icon" type="clear" size="3.733vw" @click="onClearInput(index)" />
|
|
|
+ </view>
|
|
|
+ <view v-if="item.errText" class="err-text">
|
|
|
+ <icon class="icon" color="#E3041F" type="clear" size="2.733vw" />
|
|
|
+ {{ item.errText }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 文本域 -->
|
|
|
+ <view class="textarea-box" v-else-if="item.type == 'textarea'">
|
|
|
+ <textarea class="textarea" :class="item.unBorBot ? '' : 'borBot'"
|
|
|
+ placeholder-style="color: #BBBBBB;font-family: Source Han Sans SC, Source Han Sans SC;" type="text"
|
|
|
+ :placeholder="item.placeholder || '请填写' + item.label" :value="item.value"
|
|
|
+ @input="onInput($event, index)" :maxlength="item.maxlength || '499'" confirm-type="done" />
|
|
|
+ </view>
|
|
|
<!-- 自定义选项分类 -->
|
|
|
<view class="custom-class-box" v-else-if="item.type == 'customClass'"
|
|
|
:style="{ marginTop: tovw(item.marginTop || 0) }">
|
|
@@ -39,6 +59,26 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 选择所在地区 -->
|
|
|
+ <picker class="region" @change="selectRegion($event, index)" mode='region' :disabled="item.disabled"
|
|
|
+ :value="item.value" v-else-if="item.type == 'region'"
|
|
|
+ :style="{ marginTop: tovw(item.marginTop || 0), opacity: item.disabled ? 0.7 : 1 }">
|
|
|
+ <view class="box" :class="item.unBorBot ? '' : 'borBot'">
|
|
|
+ <view class="label">
|
|
|
+ <text class="must" v-if="item.isMust">*</text>
|
|
|
+ {{ item.label }}:
|
|
|
+ </view>
|
|
|
+ <view class="content-box">
|
|
|
+ <view class="value" v-if="item.value.length">
|
|
|
+ {{ item.value.join(",") }}
|
|
|
+ </view>
|
|
|
+ <view v-else class="placeholder" hover-class="none">
|
|
|
+ {{ item.placeholder || '请选择' + item.label }}
|
|
|
+ </view>
|
|
|
+ <view v-if="!item.disabled" class="iconfont icon-a-wodetiaozhuan" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
<!-- 上传附件 -->
|
|
|
<view class="custom-class-box" v-else-if="item.type == 'upload'"
|
|
|
:style="{ marginTop: tovw(item.marginTop || 0) }">
|
|
@@ -71,6 +111,20 @@
|
|
|
</my-upload>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 开关 -->
|
|
|
+ <view class="region" v-else-if="item.type == 'switch'">
|
|
|
+ <view class="box" :class="item.unBorBot ? '' : 'borBot'">
|
|
|
+ <view class="label">
|
|
|
+ <text class="must" v-if="item.isMust">*</text>
|
|
|
+ {{ item.label }}:
|
|
|
+ </view>
|
|
|
+ <view class="content-box">
|
|
|
+ <view />
|
|
|
+ <u-switch activeColor="#70D95D" v-model="item.value" :disabled="item.disabled"
|
|
|
+ @change="switchChange($event, index)" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</block>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -100,13 +154,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- form: function (newVal) {
|
|
|
- if (newVal) {
|
|
|
- this.list = JSON.parse(JSON.stringify(newVal));
|
|
|
- this.verify()
|
|
|
- } else {
|
|
|
-
|
|
|
- }
|
|
|
+ form: {
|
|
|
+ handler: function (newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.list = JSON.parse(JSON.stringify(newVal));
|
|
|
+ setTimeout(() => {
|
|
|
+ this.verify()
|
|
|
+ }, 200);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
}
|
|
|
},
|
|
|
async created() {
|
|
@@ -116,7 +173,9 @@ export default {
|
|
|
label: "标题",
|
|
|
isMust: true,//是否必填
|
|
|
value: "",
|
|
|
- marginTop: 10
|
|
|
+ inputmode:"", //https://uniapp.dcloud.net.cn/component/input.html#type
|
|
|
+ marginTop: 10,
|
|
|
+ verify:[],
|
|
|
}, {
|
|
|
key: "Class",
|
|
|
type: "customClass",
|
|
@@ -140,16 +199,48 @@ export default {
|
|
|
allowDelete: true,
|
|
|
value:[],
|
|
|
marginTop: 10
|
|
|
+ }, {
|
|
|
+ key: "region",
|
|
|
+ type: "region",
|
|
|
+ label: "所在地区",
|
|
|
+ isMust: true,//是否必填
|
|
|
+ value: [],
|
|
|
+ }, {
|
|
|
+ key: "address",
|
|
|
+ type: "textarea",
|
|
|
+ label: "详细地址",
|
|
|
+ isMust: true,//是否必填
|
|
|
+ value: '',
|
|
|
+ }, {
|
|
|
+ key: "isdefault",
|
|
|
+ type: "switch",
|
|
|
+ label: "设为默认地址",
|
|
|
+ isMust: false,//是否必填
|
|
|
+ value: false,
|
|
|
+ isNum: true,
|
|
|
+ unBorBot: true
|
|
|
}] */
|
|
|
},
|
|
|
methods: {
|
|
|
onInput(e, index) {
|
|
|
+ let item = this.list[index];
|
|
|
+ item.errText = "";
|
|
|
this.$set(this.list[index], 'value', e.detail.value)
|
|
|
- if (this.list[index].isMust) this.verify()
|
|
|
+ if (item.verify && item.verify.length && item.value != '') {
|
|
|
+ let err = item.verify.find(r => !new RegExp(r.reg).test(item.value));
|
|
|
+ if (err) this.$set(this.list[index], 'errText', err.errText)
|
|
|
+ }
|
|
|
+ this.verify()
|
|
|
},
|
|
|
onClearInput(index) {
|
|
|
+ let item = this.list[index];
|
|
|
+ item.errText = ''
|
|
|
this.$set(this.list[index], 'value', '')
|
|
|
- if (this.list[index].isMust) this.verify()
|
|
|
+ this.verify()
|
|
|
+ },
|
|
|
+ switchChange(e, index) {
|
|
|
+ this.$set(this.list[index], 'value', e)
|
|
|
+ this.verify()
|
|
|
},
|
|
|
changOptions(value, index) {
|
|
|
let item = this.list[index];
|
|
@@ -168,7 +259,7 @@ export default {
|
|
|
} else {
|
|
|
this.$set(this.list[index], 'value', value)
|
|
|
}
|
|
|
- if (this.list[index].isMust) this.verify()
|
|
|
+ this.verify()
|
|
|
},
|
|
|
verify() {
|
|
|
let list = this.list.filter(v => v.isMust);
|
|
@@ -183,11 +274,15 @@ export default {
|
|
|
}
|
|
|
} else if (v.type == 'upload') {
|
|
|
res = v.value.length == 0;
|
|
|
+ } else if (v.type == 'text') {
|
|
|
+ res = v.value == "";
|
|
|
+ if (v.errText) res = true;
|
|
|
} else {
|
|
|
res = v.value == "";
|
|
|
}
|
|
|
return res
|
|
|
})
|
|
|
+ if (!Uncomplete) Uncomplete = this.list.filter(v => !v.isMust).some(v => v.errText);
|
|
|
this.$emit("isUncomplete", Uncomplete)
|
|
|
},
|
|
|
previewImg(item) {
|
|
@@ -218,7 +313,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
this.$set(this.list[index], 'value', item.value)
|
|
|
- if (this.list[index].isMust) this.verify()
|
|
|
+ this.verify()
|
|
|
})
|
|
|
},
|
|
|
deleteFiles() {
|
|
@@ -242,6 +337,10 @@ export default {
|
|
|
this.$set(this.list[index], 'loading', e)
|
|
|
this.$emit("onUploading", e)
|
|
|
},
|
|
|
+ selectRegion({ detail }, index) {
|
|
|
+ this.$set(this.list[index], 'value', detail.value)
|
|
|
+ this.verify()
|
|
|
+ },
|
|
|
deleteFile(flie, index) {
|
|
|
let item = this.list[index];
|
|
|
item.value = item.value.filter(v => v.attachmentid != flie.attachmentid)
|
|
@@ -266,7 +365,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
this.$set(this.list[index], 'value', item.value)
|
|
|
- if (this.list[index].isMust) this.verify()
|
|
|
+ this.verify()
|
|
|
},
|
|
|
submit() {
|
|
|
return new Promise((resolve, reject) => {
|
|
@@ -287,8 +386,28 @@ export default {
|
|
|
} catch (error) {
|
|
|
|
|
|
}
|
|
|
+ } else if (v.type == 'region') {
|
|
|
+ if (v.value.length) {
|
|
|
+ res.province = v.value[0];
|
|
|
+ res.city = v.value[1];
|
|
|
+ res.county = v.value[2];
|
|
|
+ } else {
|
|
|
+ res.province = ''
|
|
|
+ res.city = ''
|
|
|
+ res.county = ''
|
|
|
+ }
|
|
|
+ } else if (v.type == 'switch') {
|
|
|
+ if (v.isNum) {
|
|
|
+ res[v.key] = v.value ? 1 : 0;
|
|
|
+ } else {
|
|
|
+ res[v.key] = v.value;
|
|
|
+ }
|
|
|
} else {
|
|
|
- res[v.key] = v.value;
|
|
|
+ try {
|
|
|
+ res[v.key] = v.value.trim();
|
|
|
+ } catch (error) {
|
|
|
+ res[v.key] = v.value;
|
|
|
+ }
|
|
|
}
|
|
|
})
|
|
|
resolve(res)
|
|
@@ -298,7 +417,12 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
+
|
|
|
<style lang="scss">
|
|
|
+.borBot {
|
|
|
+ border-bottom: 1px #DDDDDD solid;
|
|
|
+}
|
|
|
+
|
|
|
.custom-class-box {
|
|
|
width: 100%;
|
|
|
background: #fff;
|
|
@@ -389,6 +513,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.textarea-box {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .textarea {
|
|
|
+ width: 355px;
|
|
|
+ height: 160px;
|
|
|
+ padding: 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.input-box {
|
|
|
width: 100vw;
|
|
|
background: #fff;
|
|
@@ -401,7 +537,6 @@ export default {
|
|
|
min-height: 54.4px;
|
|
|
padding: 15px 0;
|
|
|
box-sizing: border-box;
|
|
|
- border-bottom: 1px #DDDDDD solid;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
@@ -421,14 +556,74 @@ export default {
|
|
|
}
|
|
|
|
|
|
.content-box {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
padding-right: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
- .icon {
|
|
|
- padding: 5px;
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .err-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #E3041F;
|
|
|
+ margin-bottom: -12px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.region {
|
|
|
+ width: 100vw;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15px 10px 0;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 15px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ width: 100px;
|
|
|
+ margin-right: 10px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .must {
|
|
|
+ color: #E3041F;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+
|
|
|
+ .placeholder {
|
|
|
+ font-family: Source Han Sans SC, Source Han Sans SC;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #BBBBBB;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|