yihuo/pages/address_edit/index.vue

<template>
    <page title="添加收货地址" ref="pageRef">
        <view class="paddingT10 paddingL14">
            <view class="formBox">
                <view class="paddingY14 paddingR14">
                    <input
                        v-model="consignee"
                        placeholder-class="color-2"
                        placeholder="收货人"
                        class="font4 color-1"
                    />
                </view>
                <view class="paddingY14 paddingR14">
                    <input
                        v-model="mobile"
                        placeholder-class="color-2"
                        placeholder="手机号"
                        type="number"
                        class="color-1"
                    />
                </view>
                <view class="paddingY14 paddingR14 ">
                    <view class="font4" :class="[area ? 'color-1' : 'color-2']">
                        <!-- <text v-if="!area">所在区域</text>
                        <text v-else>{{ area.province }}{{ area.city }}{{ area.district }}</text> -->
                        <picker
                        style=""
                            mode="multiSelector"
                            @change="bindPickerChange"
                            @columnchange="handleColumnchange"
                            :value="index"
                            range-key="name"
                            :range="array"
                        >
                            {{ getArea }}
                        </picker>
                    </view>

                </view>
                <view class="paddingY14 paddingR14">
                    <input
                        v-model="address"
                        placeholder-class="color-2"
                        placeholder="详细地址"
                        type="tel"
                        class="color-1"
                    />
                </view>
            </view>
            <view class="paddingY20 paddingR20">
                <view class="flex-align">
                    <view
                        class="checkBox"
                        :class="{ check: isDefault }"
                        @click="isDefault = !isDefault"
                    >
                        <view class="cuIcon-check"></view>
                    </view>
                    <view class="color-1 font4 bold marginL5 marginR10">设为默认</view>
                </view>
            </view>
        </view>
        <view class="marginX14">
            <cm-button @click="save">保存</cm-button>
        </view>
    </page>
</template>
<script>
    const chooseLocation = requirePlugin('chooseLocation')
    import { NAME } from '@/utils/config'
    export default {
        data() {
            return {
                consignee: '',
                mobile: '',
                area: null,
                address: '',
                isDefault: false,
                array: [],
                index: [0, 0, 0]
            }
        },
        onShow() {
            // const location = chooseLocation.getLocation() // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
            // if (location) {
            //     this.area = location
            //     this.address = location.name
            // }
            this.initLocation()
        },
        computed: {
            getArea() {
                return this.area ? this.area.province + this.area.city + this.area.district : '地区选择'
            }
        },
        onUnload() {},
        methods: {
            async initLocation() {
                const res1 = await this.$service.address.getArea({ pid: 1 })
                this.array.push(res1.data)
                const res2 = await this.$service.address.getArea({ pid: res1.data[0].id })
                this.array.push(res2.data)
                const res3 = await this.$service.address.getArea({ pid: res2.data[0].id })
                this.array.push(res3.data)
            },
            async changeProvince(pid) {
                const res = await this.$service.address.getArea({ pid })
                this.array.splice(1, 1, res.data)
                this.$nextTick(()=>{
                  this.changeCity(res.data[0].id)
                })

            },
            async changeCity(pid) {
                const res = await this.$service.address.getArea({ pid })
                this.array.splice(2, 1, res.data)

            },
            bindPickerChange(val) {
                console.log(val)
                let value = val.detail.value
                this.area = {
                    province: this.array[0][value[0]].name,
                    city: this.array[1][value[1]].name,
                    district: this.array[2][value[2]].name
                }
            },
            handleColumnchange(val) {
                console.log(val)
                if (val.detail.column == 0) {
                    this.changeProvince(this.array[0][val.detail.value].id)
                }
                if (val.detail.column == 1) {
                    this.changeCity(this.array[1][val.detail.value].id)
                }
            },
            openLocation() {
                chooseLocation.setLocation(null)
                wx.navigateTo({
                    url: `plugin://chooseLocation/index?key=VHGBZ-K77C4-IJTUG-KKCDR-FEGR3-EOFFJ&referer=supermart`
                })
            },
            async save() {
                if (!this.consignee) {
                    this.$message.warn('请输入收货人')
                    return
                }
                if (!this.mobile) {
                    this.$message.warn('请输入手机号')
                    return
                }
                if (!this.area) {
                    this.$message.warn('请选择区域')
                    return
                }
                if (!this.address) {
                    this.$message.warn('请输入详细地址')
                    return
                }
                let location = `${this.area.longitude},${this.area.latitude}`
                const res = await this.$service.address.add(
                    this.consignee,
                    this.mobile,
                    location,
                    this.area.province,
                    this.area.city,
                    this.area.district,
                    this.address,
                    this.isDefault ? 1 : 0
                )
                if (res) {
                    this.$router.back()
                    this.$event.emit(this.$event.key.ADDRESS)
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    page {
        background: #fff;
    }
    .checkBox {
        border: 4rpx solid #000000;
        background-color: #fff;
        color: #fff;
        width: 32rpx;
        border-radius: 50%;
        margin-right: 12rpx;
        height: 32rpx;
        text-align: center;
        line-height: 28rpx;
        font-size: 24rpx;
        &.check {
            background: #fec433;
            border-color: #fec433;
            color: #000;
        }
    }
    .formBox {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 0 32rpx;
    }
</style>