uniapp uivew2实现实名认证 详细地址 身份上传

uniapp yekong 749℃

uniapp uivew2实现实名认证

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

喜欢 (0)