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.
350 lines
8.9 KiB
350 lines
8.9 KiB
2 years ago
|
<template>
|
||
|
|
<view class="form">
|
||
|
|
<view class="continer">
|
||
|
|
<uni-forms ref="valiForm" :modelValue="form" :rules="rules" label-position="top" labelWidth="180px">
|
||
|
|
<view class="form_element" v-for="(item) in formProps" :key="item.key">
|
||
|
|
<!-- 单行文本输入框 -->
|
||
|
|
<view v-if="item.formType == 'input'">
|
||
|
|
<uni-forms-item :label="item.label" :required="item.required?item.required:false" :name="item.key">
|
||
|
|
<uni-easyinput :ref="item.key" v-model="form[item.key]"
|
||
|
|
:placeholder="'请填写'+item.label" />
|
||
|
|
</uni-forms-item>
|
||
|
|
</view>
|
||
|
|
<!-- 单选框 -->
|
||
|
|
<view v-if="item.formType==='check'">
|
||
|
|
<uni-forms-item :label="item.label" :required="item.required?item.required:false" :name="item.key">
|
||
|
|
<view v-if="!item.imgData">
|
||
|
|
<uni-data-checkbox v-model="form[item.key]" :localdata="item.data" ></uni-data-checkbox>
|
||
|
|
</view>
|
||
|
|
<view v-if="item.imgData" class="pos_box">
|
||
|
|
<view class="pos_pre" v-for="(item1,index) in item.imgData" :key="item1.text">
|
||
|
|
<img :src="item1.img" alt="">
|
||
|
|
<uni-data-checkbox v-model="form[item.key]" :localdata="[item.data[index]]" ></uni-data-checkbox>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-forms-item>
|
||
|
|
</view>
|
||
|
|
<!-- 地址 -->
|
||
|
|
<view v-if="item.formType == 'picker'">
|
||
|
|
<uni-forms-item :label="item.label" :required="item.required?item.required:false" :name="item.key">
|
||
|
|
<picker class="picker_box" :range="locationArr" @change="cityChange($event,item)" mode="multiSelector"
|
||
|
|
@columnchange="columnchange($event,item)" :value="item.multiIndex">
|
||
|
|
<view class="city_box" v-show="item.province !== '' && item.city !== ''">
|
||
|
|
{{item.province}} / {{item.city}} {{item.district ? '/' : ''}} {{item.district}}
|
||
|
|
</view>
|
||
|
|
<view class="city_box" v-show="item.province == '' && item.city == '' && item.district == ''">
|
||
|
|
<span style="color: #999;">请选择地区</span>
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
<uni-easyinput class="address_item" v-model="form[item.key]" placeholder="详细地址" />
|
||
|
|
</uni-forms-item>
|
||
|
|
</view>
|
||
|
|
<!-- 文本域 -->
|
||
|
|
<view v-if="item.formType==='textarea'">
|
||
|
|
<uni-forms-item :label="item.label" :required="item.required?item.required:false" :name="item.key">
|
||
|
|
<uni-easyinput :ref="item.key" type="textarea" :maxlength="-1" placeholderStyle="fontSize:28upx"
|
||
|
|
v-model="form[item.key]" :placeholder="'请填写'+item.label" />
|
||
|
|
</uni-forms-item>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-forms>
|
||
|
|
<button class="btn_box" @click="submit('valiForm')">提交</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {BusinessDailyProduct} from "../form/form.js"
|
||
|
|
import allcityData from "../form/all_city.json"
|
||
|
|
export default{
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
formProps:[],
|
||
|
|
form:{},
|
||
|
|
rules:{},
|
||
|
|
rulesArr:[],
|
||
|
|
allcityData,
|
||
|
|
locationArr: [
|
||
|
|
[],
|
||
|
|
[],
|
||
|
|
[]
|
||
|
|
],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(){
|
||
|
|
// uni.getLocation({
|
||
|
|
// type:"wgs84",
|
||
|
|
// complete:(res) =>{
|
||
|
|
// console.log('定位',res)
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
this.getData()
|
||
|
|
this.formProps = BusinessDailyProduct();
|
||
|
|
this.formProps.map(item =>{
|
||
|
|
if(item.required){
|
||
|
|
this.rules[item.key] = {
|
||
|
|
rules: [{
|
||
|
|
required: true,
|
||
|
|
errorMessage: item.label + '不能为空'
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
if(item.validateFunction){
|
||
|
|
this.rules[item.key].rules.push({
|
||
|
|
validateFunction: function(rule, value, data, callback) {
|
||
|
|
const moblie = item.validateFunction;
|
||
|
|
if (!moblie.test(value)) {
|
||
|
|
callback('请填写正确的手机号格式');
|
||
|
|
} else {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
if(item.apiOption){
|
||
|
|
// uni.request({
|
||
|
|
// url: 'http://47.104.224.41:80/blade-desk/custom-made-info/save',
|
||
|
|
// data: {},
|
||
|
|
// method: 'post',
|
||
|
|
// success: res => {
|
||
|
|
// console.log(res)
|
||
|
|
// if (res.data.code == "200" || data.code === "") {
|
||
|
|
// console.log('进入1')
|
||
|
|
// resolve(res.data)
|
||
|
|
// } else {
|
||
|
|
// console.log('进入2')
|
||
|
|
// reject(res)
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// fail: res => {
|
||
|
|
// reject(res)
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
}
|
||
|
|
})
|
||
|
|
console.log(this.rulesArr,this.rules)
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
getData() {
|
||
|
|
console.log(this.allcityData)
|
||
|
|
this.allcityData.map(item => {
|
||
|
|
this.locationArr[0].push(item.province);
|
||
|
|
})
|
||
|
|
this.allcityData[0].citys[0].areas.map(item => {
|
||
|
|
this.locationArr[1].push(item.area)
|
||
|
|
})
|
||
|
|
|
||
|
|
console.log(this.locationArr)
|
||
|
|
},
|
||
|
|
cityChange(e,item) {
|
||
|
|
console.log(e)
|
||
|
|
console.log(item)
|
||
|
|
item.multiIndex = e.detail.value;
|
||
|
|
console.log(this.locationArr)
|
||
|
|
item.province = this.locationArr[0][item.multiIndex[0]]
|
||
|
|
item.city = this.locationArr[1][item.multiIndex[1]]
|
||
|
|
item.district = this.locationArr[2][item.multiIndex[2]]
|
||
|
|
},
|
||
|
|
columnchange(e,item) {
|
||
|
|
let value = e.detail.value;
|
||
|
|
console.log(e.detail)
|
||
|
|
if (e.detail.column == 0) {
|
||
|
|
this.locationArr[1] = [];
|
||
|
|
this.locationArr[2] = []
|
||
|
|
let tmp = this.allcityData.find(item => item.province == this.locationArr[0][value])
|
||
|
|
console.log(tmp)
|
||
|
|
if (tmp.citys.length == 1) {
|
||
|
|
tmp.citys[0].areas.map(item => {
|
||
|
|
this.locationArr[1].push(item.area)
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
tmp.citys.map(item => {
|
||
|
|
this.locationArr[1].push(item.city)
|
||
|
|
})
|
||
|
|
tmp.citys[0].areas.map(item => {
|
||
|
|
this.locationArr[2].push(item.area);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// 第一列滑动 第二列 和第三列 都变为第一个
|
||
|
|
item.multiIndex = [value, 0, 0]
|
||
|
|
|
||
|
|
}
|
||
|
|
if (e.detail.column == 1) {
|
||
|
|
this.locationArr[2] = [];
|
||
|
|
item.multiIndex[1] = value;
|
||
|
|
if (this.allcityData[item.multiIndex[0]].citys.length !== 1) {
|
||
|
|
this.allcityData[item.multiIndex[0]].citys[value].areas.map(item => {
|
||
|
|
this.locationArr[2].push(item.area)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
item.multiIndex.splice(2, 1, 0)
|
||
|
|
console.log(this.multiIndex)
|
||
|
|
}
|
||
|
|
// 第三列滑动
|
||
|
|
if (e.detail.column === 2) {
|
||
|
|
item.multiIndex[2] = e.detail.value
|
||
|
|
}
|
||
|
|
},
|
||
|
|
submit(ref) {
|
||
|
|
this.$refs[ref].validate().then(res => {
|
||
|
|
console.log('测试')
|
||
|
|
console.log(this.form)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.container{
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.btn_box {
|
||
|
|
width: 484rpx;
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: normal;
|
||
|
|
color: rgb(255, 255, 255);
|
||
|
|
padding: 20rpx 110rpx;
|
||
|
|
background-color: rgb(245, 189, 55);
|
||
|
|
border-color: rgb(255, 255, 255);
|
||
|
|
border-width: 0px;
|
||
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 1px;
|
||
|
|
margin-top: 64rpx;
|
||
|
|
margin-bottom: 64rpx;
|
||
|
|
}
|
||
|
|
.uni-forms{
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.form_element{
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.uni-forms-item {
|
||
|
|
|
||
|
|
/* background-color: red; */
|
||
|
|
::v-deep.checklist-box {
|
||
|
|
width: 95%;
|
||
|
|
height: 70rpx;
|
||
|
|
border: 1px solid #eaeaea;
|
||
|
|
padding-left: 20rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
margin: 0 auto !important;
|
||
|
|
margin-top: 10rpx !important;
|
||
|
|
margin-bottom: 10rpx !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address_item {
|
||
|
|
margin-top:16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .uni-forms-item__label {
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: rgb(7, 0, 89);
|
||
|
|
padding-left: 16rpx !important;
|
||
|
|
|
||
|
|
.is-required {
|
||
|
|
margin-right: 0.1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
::v-deep .uni-forms-item__content{
|
||
|
|
padding: 0 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wid_pre {
|
||
|
|
width: 3.06rem;
|
||
|
|
height: 4rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.wid_img {
|
||
|
|
border-top-left-radius:16rpx;
|
||
|
|
border-top-right-radius:16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep.checklist-box {
|
||
|
|
width: 3.06rem;
|
||
|
|
height: 0.94rem;
|
||
|
|
margin: 0;
|
||
|
|
border-radius: 0px;
|
||
|
|
border-bottom-left-radius:16rpx;
|
||
|
|
border-bottom-right-radius:16rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.hei_pre {
|
||
|
|
width: 3.06rem;
|
||
|
|
height: 4rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.hei_img {
|
||
|
|
border-top-left-radius:16rpx;
|
||
|
|
border-top-right-radius:16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep.checklist-box {
|
||
|
|
width: 3.06rem;
|
||
|
|
height: 0.94rem;
|
||
|
|
margin: 0;
|
||
|
|
border-radius: 0px;
|
||
|
|
border-bottom-left-radius:16rpx;
|
||
|
|
border-bottom-right-radius:16rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.pos_box {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
|
||
|
|
.pos_pre {
|
||
|
|
width: 306rpx;
|
||
|
|
height: 400rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.hei_img {
|
||
|
|
border-top-left-radius: 16rpx;
|
||
|
|
border-top-right-radius: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep.checklist-box {
|
||
|
|
width: 306rpx;
|
||
|
|
height: 94rpx;
|
||
|
|
margin: 0;
|
||
|
|
border-radius: 0px;
|
||
|
|
margin-top: -2rpx !important;
|
||
|
|
border-bottom-left-radius:16rpx;
|
||
|
|
border-bottom-right-radius:16rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item_txt {
|
||
|
|
font-size: .28rem;
|
||
|
|
margin-bottom: 0.24rem;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.city_box {
|
||
|
|
width: 100%;
|
||
|
|
height: 70rpx;
|
||
|
|
padding-left:20rpx;
|
||
|
|
border: 1px solid;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
display: flex;
|
||
|
|
box-sizing: border-box;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
border: 1px solid #dcdfe6;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|