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
<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> |