diancan_uni/pages/user/address/detail/index.vue

<template>
    <view>
        <!-- index.wxml -->
        <view class="wrap">
            <view class="form_wrap">
                <view class="form_item">
                    <view class="item_l">联系人</view>
                    <view class="item_r">
                        <van-field :value="name" placeholder="请填写收货人姓名" :border="false" @change="onChangeName" />
                    </view>
                </view>
                <view class="form_item">
                    <view class="item_l">性别</view>
                    <view class="item_r">
                        <van-radio-group :value="sex" direction="horizontal" @change="onChangeSex">
                            <van-radio :name="1" checked-color="#295C56" style="margin-right: 60rpx">男</van-radio>
                            <van-radio :name="2" checked-color="#295C56">女</van-radio>
                        </van-radio-group>
                    </view>
                </view>
                <view class="form_item">
                    <view class="item_l">手机号</view>
                    <view class="item_r">
                        <van-field :value="phone" placeholder="请填写收货人手机号码" :border="false" @change="onChangePhone" />
                    </view>
                </view>
                <view class="form_item">
                    <view class="item_l">收货地址</view>
                    <view class="item_r" @tap="toChooseLocation">
                        <van-field :value="area_address" placeholder="点击选择" :border="false" readonly />
                        <van-icon name="arrow" color="#333333" />
                    </view>
                </view>
                <view class="form_item">
                    <view class="item_l">门牌号</view>
                    <view class="item_r">
                        <van-field :value="address" placeholder="例：B座10楼1003室" :border="false" @change="onChangeAddress" />
                    </view>
                </view>
                <view class="form_item">
                    <van-checkbox :value="checked" checked-color="#295C56" @change="onChangeDefault">设为默认地址</van-checkbox>
                </view>
            </view>
            <view class="btn_wrap">
                <view class="btn" @tap="saveAddress">保存</view>
            </view>
        </view>
        <!-- loading -->
        <van-overlay :show="loading" :z-index="100">
            <van-loading custom-class="custom_loading" />
        </van-overlay>
    </view>
</template>

<script>
// index.js
let myPro = require('../../../../utils/wxRequest.js');

let util = require('../../../../utils/util.js');

export default {
    data() {
        return {
            id: null,

            // 地址id 用于编辑信息
            name: '',

            sex: 1,
            phone: '',
            area_address: '',
            address: '',
            checked: false,

            // 是否默认
            // 全局loading
            loading: false,

            address_lat: '',
            address_lng: ''
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this; // 编辑地址id

        if (options.id) {
            that.setData({
                id: options.id
            });
            that.getAddressInfo();
        } // 新增地址 来自微信

        if (options.type && options.type == 'wechat') {
            uni.getStorage({
                key: 'wechatAddress',
                success: function (res) {
                    let obj = JSON.parse(res.data);
                    that.setData({
                        name: obj.name,
                        phone: obj.phone,
                        address: obj.address
                    });
                    uni.removeStorageSync('wechatAddress');
                }
            });
        }
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 获取地址详情
        getAddressInfo() {
            let that = this;
            let params = {
                id: that.id
            };
            myPro
                .wxRequest('user/address/detail', 'GET', params)
                .then((res) => {
                    let info = res.result;
                    that.setData({
                        name: info.name,
                        sex: info.sex,
                        phone: info.phone,
                        area_address: info.area_address,
                        address_lat: info.lat,
                        address_lng: info.lnt,
                        address: info.address,
                        checked: info.is_default ? true : false
                    });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 收货人性别
        onChangeName(event) {
            let that = this;
            that.setData({
                name: event.detail
            });
        },

        // 选择性别
        onChangeSex(event) {
            let that = this;
            that.setData({
                sex: event.detail
            });
        },

        // 获取输入的手机号
        onChangePhone(event) {
            let that = this;
            that.setData({
                phone: event.detail
            });
        },

        // 获取输入的地址
        onChangeAddress(event) {
            let that = this;
            that.setData({
                address: event.detail
            });
        },

        // 设置默认
        onChangeDefault(event) {
            let that = this;
            that.setData({
                checked: event.detail
            });
        },

        // 选点
        toChooseLocation() {
            var that = this; // 选点

            uni.chooseLocation({
                success: function (res) {
                    // console.log('成功',res)
                    that.setData({
                        area_address: res.address,
                        address_lat: res.latitude,
                        address_lng: res.longitude
                    });
                },
                fail: function (res) {
                    console.log('失败', res);
                }
            });
        },

        // 提交
        saveAddress() {
            let that = this;

            if (that.name == null || that.name == '') {
                uni.showToast({
                    title: '请输入联系人',
                    icon: 'none'
                });
                return;
            }

            if (that.phone == null || that.phone == '' || !/^1[3456789]\d{9}$/.test(that.phone)) {
                uni.showToast({
                    title: '请检查手机号',
                    icon: 'none'
                });
                return;
            }

            if (!that.area_address) {
                uni.showToast({
                    title: '请选择所在地区',
                    icon: 'none'
                });
                return;
            }

            if (that.address == null || that.address == '') {
                uni.showToast({
                    title: '请输入详细地址',
                    icon: 'none'
                });
                return;
            }

            let params = {
                name: that.name,
                phone: that.phone,
                area_address: that.area_address,
                address: that.address,
                lnt: that.address_lng,
                lat: that.address_lat,
                is_default: that.checked ? 1 : 0 // int	是否默认（1是 0否）
            }; // 性别

            if (that.sex) {
                params.sex = that.sex;
            } // 编辑

            if (that.id) {
                params.id = that.id;
                myPro
                    .wxRequest('user/address/edit', 'POST', params)
                    .then((res) => {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none',
                            success: function () {
                                uni.navigateBack();
                            }
                        });
                    })
                    .catch((err) => {
                        console.log('报错信息', err);
                        uni.showToast({
                            title: err,
                            icon: 'none'
                        });
                    });
            } else {
                // 新增
                myPro
                    .wxRequest('user/address/create', 'POST', params)
                    .then((res) => {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none',
                            success: function () {
                                uni.navigateBack();
                            }
                        });
                    })
                    .catch((err) => {
                        console.log('报错信息', err);
                        uni.showToast({
                            title: err,
                            icon: 'none'
                        });
                    });
            }
        }
    }
};
</script>
<style>
/**index.wxss**/
.form_wrap {
    padding: 0 30rpx;
}
.form_item {
    font-size: 28rpx;
    color: #333333;
    min-height: 98rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
.form_item:last-child {
    border-bottom: 0 none;
}
.form_item .item_l {
    width: 150rpx;
}
.form_item .item_r {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form_item van-field {
    width: 100%;
}
.form_item .van-cell {
    padding: 0 !important;
}
.btn_wrap {
    margin-top: 30rpx;
}
.btn_wrap .btn {
    width: 690rpx;
    height: 100rpx;
    margin: 0 auto;
    background: #295c56;
    border-radius: 50rpx;
    font-size: 34rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>