uniapp地址三级框

<template>
    <view class="box">
        <view class="content">
            <view class="item">
                <view>姓名</view>
                <view><input v-model="form.username" class="input" type="text" placeholder="请输入姓名"></view>
            </view>
            <view class="item">
                <view>联系电话</view>
                <view><input @input="validatePhoneNumber" maxlength="11" v-model="form.mobile" class="input"
                        type="number" placeholder="请输入联系电话"></view>
            </view>
            <view class="item">
                <view>所在地区</view>
                <view class="input" style="overflow: hidden;">{{form.province ? form.province+',':''}} {{form.city?form.city+',':''}} {{form.area?form.area:''}}</view>
                <!-- #ifndef MP-ALIPAY -->
                 <view class="uni-list">
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-db">
                            <picker mode="multiSelector" @change="bindDateChange"
                                @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"
                                range-key="name">
                                <view class="uni-input"><img  src="../static/images/location2x.png"
                                        alt="" srcset=""></view>
                            </picker>
                        </view>
                    </view>
                </view>
                <!-- #endif -->
            </view>
            <view class="item">
                <view>详细地址</view>
                <view><input v-model="form.address" class="input" type="text" placeholder="请填写具体地址"></view>
            </view>
        </view>
        <button class="button" @click="save()">
            立即保存
        </button>

    </view>
</template>
<script>
    import {
        addAddress,
        editAddress,
        getOrderDetail,
        getCityList,
    } from "../api/login.js"
    export default {
        data() {
            return {
                show: false,
                isShow: true,
                ordeid: "",
                form: {
                    username: "",
                    type: 0,
                    mobile: "",
                    province: "北京市",
                    city: "北京市",
                    area: "东城区",
                    address: "",
                },
                index: 0,
                multiArray: [
                    [],
                    [],
                    []
                ],
                multiIndex: [0, 0, 0],
                // date: getDate({
                //     format: true
                // }),
            };
        },
        created() {
            this.getlist()
            
        },
        onLoad(options) {
            if (options.type) {
                this.form.type = options.type
            } else {
                this.form = JSON.parse(options.item)
            }

            if (this.form.id) {
                uni.setNavigationBarTitle({
                    title: "编辑地址"
                });
            } else {
                uni.setNavigationBarTitle({
                    title: "添加地址"
                });
            }
        },
        onShow() {
            this.getlist()
        },
        methods: {
            async getlist() {
                let res = await getCityList()
                const provinces = [];
                const cities = res.data.list[0].children;
                const areas = res.data.list[0].children[0].children;
                res.data.list.forEach(province => {
                    provinces.push(province);
                });
                const resultArray = [provinces, cities, areas];
                this.multiArray = resultArray
            },
            bindPickerChange: function(e) {
                console.log('picker发送选择改变，携带值为：' + e.detail.value)
                this.index = e.detail.value
            },
            bindMultiPickerColumnChange: function(e) {
                console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
                this.multiIndex[e.detail.column] = e.detail.value
                switch (e.detail.column) {
                    //第一列
                    case 0:
                        this.multiArray[1] = this.multiArray[0][this.multiIndex[0]].children
                        this.multiArray[2] = this.multiArray[0][this.multiIndex[0]].children[this.multiIndex[1]]
                            .children
                        this.multiIndex.splice(1, 1, 0)
                        this.multiIndex.splice(2, 1, 0)
                        break
                    case 1:
                        this.multiArray[2] = this.multiArray[0][this.multiIndex[0]].children[this.multiIndex[1]]
                            .children
                        this.multiIndex.splice(2, 1, 0)
                        break
                }
                this.$forceUpdate()
            },
            //获取选择的值
            bindDateChange: function(e) {
                this.form.province = this.multiArray[0][this.multiIndex[0]].name
                this.form.city = this.multiArray[1][this.multiIndex[1]].name
                this.form.area = this.multiArray[2][this.multiIndex[2]].name
            },
            // 验证手机号
            validatePhoneNumber() {
                const phoneRegex = /^[0-9]{11}$/;
                if (phoneRegex.test(this.form.mobile)) {
                    this.errorMessage = "";
                } else {
                    this.errorMessage = "请输入正确的手机号码";
                }
            },
            //保存接口
            async save() {
                if (this.form.id) {
                    console.log(this.form)
                    let res = editAddress(this.form)
                    uni.navigateTo({
                        url: '/pages/address?type=' + this.form.type,
                    })
                } else {
                    if (this.form.username !== "" && this.form.mobile !== "" &&
                        this.form.address !== "") {
                        let res = await addAddress(this.form)
                        if (res.code === 1) {
                            console.log(this.form.type, "传递")
                            uni.navigateTo({
                                url: '/pages/address?type=' + this.form.type,
                            })
                            console.log(res.msg)
                            uni.showToast({
                                title: res.msg,
                                duration: 1000,
                                icon: 'none',
                            })
                        } else {
                            uni.showToast({
                                title: res.msg,
                                duration: 1000,
                                icon: 'none',
                            })
                            console.log("添加地址失败")
                        }
                    } else {
                        uni.showToast({
                            title: '请填写完全地址信息',
                            icon: 'none'
                        });
                    }
                }
            },
            // 地址详情接口
            // async particulars(data){
            //     let res = getOrderDetail({id:2,type:0})
            //     console.log(res,"查看详情")
            // },

        },
    };
</script>

<style lang="less" scoped>
    .item {
        display: flex;
        flex-direction: row;
        border-top: 2rpx solid #F3F3F3;
        height: 100rpx;
        line-height: 100rpx;
        position: relative;
        view {
            width: 180rpx;
            padding: 0 20rpx;
            box-sizing: border-box;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC;
            color: #000000;
            font-weight: 400;
        }

        .input {
            height: 100rpx;
            line-height: 100rpx;
            flex: 1;
            width: 530rpx;
            flex-grow: 1;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC;
        }

        img {
            right: 20rpx;
            width: 28rpx;
            height: 28rpx;
            // position: absolute;
            // bottom: 0;
            // transform: translate(-50%, -50%);
        }
    }

    .item:last-child {
        border-top: 2rpx solid #F3F3F3;
        border-bottom: 2rpx solid #F3F3F3;
    }

    .button {
        margin: 0 20rpx;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 50rpx;
        opacity: 1;
        border: 2rpx solid #2166E3;
        background-color: #2166E3;
        color: #fff;
        margin-top: 200rpx;
        font-size: 28rpx;
    }
</style>