book-hi/pages-mine/pages/address/add-or-update.vue

<template>
    <view class="page">
        <view class="form">
            <u-form :model="form" ref="form" label-width="180rpx">
                <u-form-item label="收货人">
                    <u-input v-model="form.name" placeholder="请输入收货人姓名" />
                </u-form-item>
                <u-form-item label="联系方式">
                    <u-input v-model="form.mobile" placeholder="请输入联系方式" />
                </u-form-item>
                <u-form-item label="所在地区">
                    <uni-data-picker v-model="selAddressCodes" :localdata="dataList" placeholder="请选择所在地区"
                        popup-title="请选择所在地区" @change="cityChange"></uni-data-picker>
                </u-form-item>
                <u-form-item label="详细地址">
                    <u-input v-model="form.detailAddress" placeholder="请输入详细地址" />
                </u-form-item>
                <u-form-item :border-bottom="false" label="设为默认地址">
                    <u-switch slot="right" v-model="form.defaultFlag" :active-value="1" :inactive-value="0"
                        :active-color="appThemeColor"></u-switch>
                </u-form-item>
            </u-form>
        </view>
        <view class="btn">
            <u-button type="primary" shape="circle" @click="submit">
                <u-icon name="plus"></u-icon>
                <text>保存地址</text>
            </u-button>
        </view>
    </view>
</template>

<script>
import CityPicker from '@/pages-mine/components/city-picker.vue';
export default {
    components: {
        CityPicker
    },
    data() {
        return {
            // 标题
            title: '收货地址',
            appThemeColor: this.$appTheme.appThemeColor,
            // 表单
            form: {
                id: null,
                "provinceId": '',
                "cityId": '',
                "districtId": '',
                "detailAddress": "",
                "name": "",
                "mobile": "",
                "defaultFlag": 0
            },
            // 省市区
            selAddressCodes: [],
            dataList: [],
        };
    },
    onLoad(ops) {
        if (ops.id) {
            this.form.id = ops.id;
            this.form.type = 'edit';
            this.title = '修改地址';
            this.getAddressDetail(ops.id);
        } else {
            this.form.id = null;
            this.form.type = 'add';
            this.title = '新建地址';
        }
        uni.setNavigationBarTitle({
            title: this.title
        })

        uni.$u.http.get('/token/getAllDistrict').then(res => {
            if (res.code == 200) {
                this.dataList = res.data
            }
        })
    },
    methods: {
        // 省市区选择回调
        cityChange(e) {
            let {
                value
            } = e.detail
            if (!value.length) return
            this.form.provinceId = value[0].value;
            this.form.cityId = value[1].value
            this.form.districtId = value[2].value || ''
        },

        // 提交表单
        submit() {
            let path = this.form.id ? '/token/user/address/update' : '/token/user/address/add'
            uni.$u.http.post(path, this.form).then(res => {
                if (res.code == 200) {
                    uni.showToast('操作成功');
                    uni.navigateBack();
                }
            })
        },
        // 编辑
        getAddressDetail(id) {
            uni.showLoading();
            uni.$u.http.get(`/token/user/address/getDetail/${id}`).then((res) => {
                if (res.code == 200) {
                    this.form = res.data
                    this.selAddressCodes = [res.data.provinceId, res.data.cityId, res.data.districtId]
                }
            }).finally(() => {
                uni.hideLoading();
            })
        },
    }
};
</script>

<style lang="scss" scoped>
.form {
    background-color: $app-theme-bg-color;
    padding: 30rpx;
}

.btn {
    padding: 60rpx 30rpx;
}
</style>