<template>
<view class="certification">
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
<u--form labelPosition="left" labelWidth="120" :model="model1" :rules="rules" ref="form1">
<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
<u--input class="inputx" placeholder="请输入姓名" inputAlign="right" v-model="model1.userInfo.name"
border="none"></u--input>
</u-form-item>
<u-form-item label="联系人" prop="userInfo.contact" borderBottom ref="item1">
<u--input class="inputx" placeholder="请输入联系人名称" inputAlign="right" v-model="model1.userInfo.contact"
border="none"></u--input>
</u-form-item>
<u-form-item label="联系电话" prop="userInfo.contacttel" borderBottom ref="item1">
<u--input class="inputx" placeholder="请输入联系电话" inputAlign="right" v-model="model1.userInfo.contacttel"
border="none"></u--input>
</u-form-item>
<picker id="picker" mode="multiSelector" :range="range" :value="value" @columnchange="columnchange"
@cancel="pickerCancel">
<u-form-item @click="" label="地址" prop="userInfo.address" borderBottom ref="item1">
<!-- <div class="address">{{}}选择地址</div> -->
<u--input disabledColor="#ffffff" disabled class="inputx" placeholder="请选择地址" inputAlign="right"
v-model="model1.userInfo.address" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
</picker>
<u-form-item label="详细地址" prop="userInfo.addressdetail" borderBottom ref="item1">
<u--input class="inputx" placeholder="请输入详细地址" inputAlign="right"
v-model="model1.userInfo.addressdetail" border="none"></u--input>
</u-form-item>
<u-form-item label="场地照片" prop="userInfo.id" borderBottom ref="item1">
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1">
</u-upload>
</u-form-item>
<u-form-item label="身份证正面照片" prop="userInfo.id" borderBottom ref="item1">
<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" :maxCount="1">
</u-upload>
</u-form-item>
<u-form-item label="身份证反面照片" prop="userInfo.id" borderBottom ref="item1">
<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" :maxCount="1">
</u-upload>
</u-form-item>
</u--form>
<u-button class="mt50" @click="submit" type="primary">提交</u-button>
<div class="h100"></div>
</view>
</template>
<script>
import {
area
} from '@/js_sdk/lisenh-cityPicker/area.js'
export default {
data() {
return {
selected: '',
fileList1: [],
fileList2: [],
fileList3: [],
range: [
[''],
[''],
['']
],
provinceCodes: [],
cityCodes: [],
value: [0, 0, 0],
model1: {
userInfo: {
name: '',
contact: '',
contacttel: '',
id: '',
address: '',
addressdetail: ''
},
},
rules: {
'userInfo.name': {
type: 'string',
required: true,
message: '请填写姓名',
trigger: ['blur', 'change']
},
},
};
},
onLoad: function() {
for (let provinceCode in area.province_list) {
this.range[0].push(area.province_list[provinceCode])
this.provinceCodes.push(provinceCode)
}
},
methods: {
submit() {
},
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
// this[`fileList${event.name}`].push({
// ...item,
// status: 'uploading',
// message: '上传中'
// })
this[`fileList${event.name}`].push({
...item,
status: 'success',
message: ''
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].thumb)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
});
})
},
pickerCancel() {
console.log('pickerCancel')
},
columnchange: function(e) {
this.value[e.detail.column] = e.detail.value
if (0 == e.detail.column) {
let provinceCode = this.provinceCodes[e.detail.value - 1]
this.range[1] = ['']
this.range[2] = ['']
let cities = ['']
this.cityCodes = []
for (let cityCode in area.city_list) {
if (Number(cityCode) >= Number(provinceCode) && Number(cityCode) <= Number(provinceCode) +
9900) {
cities.push(area.city_list[cityCode])
this.cityCodes.push(cityCode)
}
}
this.range[1] = cities
this.value.splice(1, 1, 0)
this.value.splice(2, 1, 0)
} else if (1 == e.detail.column) {
this.value[2] = 0
let cityCode = this.cityCodes[e.detail.value - 1]
this.range[2] = ['']
let counties = ['']
for (let countyCode in area.county_list) {
if (Number(countyCode) >= Number(cityCode) && Number(countyCode) <= Number(cityCode) + 99) {
counties.push(area.county_list[countyCode])
}
}
this.range[2] = counties
this.value.splice(2, 1, 0)
}
this.$forceUpdate()
if (this.range[2][this.value[2]]) {
this.model1.userInfo.address = this.range[2][this.value[2]]
} else if (this.range[1][this.value[1]]) {
this.model1.userInfo.address = this.range[1][this.value[1]]
} else if (this.range[0][this.value[0]]) {
this.model1.userInfo.address = this.range[0][this.value[0]]
}
}
},
};
</script>
<style lang="scss" scoped>
.certification {
width: 690rpx;
margin: 0 auto;
}
.inputx {
width: 100%;
text-align: right;
}
.mt50 {
margin-top: 50rpx;
}
.address {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
width: 100%;
}
.h100 {
height: 100rpx;
}
</style>
