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

<template>
    <view>
        <!-- index.wxml -->
        <view class="wrap">
            <view class="address_list">
                <view class="address_item" v-for="(item, index) in dataList" :key="index">
                    <view class="item_t">
                        <view class="item_l" @tap="selecteAddress" :data-item="item">
                            <view class="item_l_t">
                                <text class="item_tag" v-if="item.is_default">默认</text>
                                <text class="item_title">{{ item.area_address + item.address }}</text>
                            </view>
                            <view class="item_l_b">
                                <text class="user_name">{{ item.name }}</text>
                                <text class="user_phone">{{ item.phone }}</text>
                            </view>
                        </view>
                        <view class="item_r">
                            <image src="/static/statics/img/icon_edit.png" class="edit_icon" @tap="goAddressDetail" :data-item="item"></image>
                        </view>
                    </view>

                    <!-- style="{{ item.is_default ? 'justify-content: space-between' : 'justify-content: flex-end' }}" -->

                    <view class="item_b" style="justify-content: flex-end">
                        <!-- <van-checkbox value="{{ item.is_default ? true : false}}" wx:if="{{ item.is_default }}" checked-color="#FFD102" bind:tap="goAddressDetail" data-item="{{ item }}">默认地址</van-checkbox> -->
                        <view @tap="doDeleteAddress" :data-id="item.id">删除</view>
                    </view>
                </view>
            </view>
            <view class="btn_wrap">
                <view class="btn wechat" @tap="getAddressFromWechat">
                    <van-icon name="wechat" size="26" color="#FFFFFF" />
                    <view class="wenzi">微信导入</view>
                </view>
                <view class="btn" @tap="goAddressDetail">
                    <van-icon name="plus" size="20" color="#333333" />
                    <view class="wenzi">添加地址</view>
                </view>
            </view>
        </view>
        <!-- 确认地址 -->
        <van-overlay :z-index="1" class-style="background: rgba(0,0,0,.3);" :show="showConfirmAdd">
            <view class="add_pop">
                <view class="add_pop_t">请确定您的收货信息</view>
                <view class="add_pop_nr">
                    <view class="add_wenzi">{{ checkedAddress.area_address + checkedAddress.address }}</view>
                    <view class="add_wenzi grey">{{ checkedAddress.name + ' ' + checkedAddress.phone }}</view>
                </view>
                <view class="add_btns">
                    <view class="btn cancel" @tap="cancelCheck">更换地址</view>
                    <view class="btn" @tap="confirmCheck">确认无误</view>
                </view>
            </view>
        </van-overlay>
        <!-- 确认删除 -->
        <van-dialog class="custom_dialog" title="确定要删除该地址吗？" :show="showDelDialog" showCancelButton @cancel="onCloseDel" @confirm="onConfirmDel"></van-dialog>
        <!-- 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 {
            showConfirmAdd: false,

            // 确认地址弹层
            page: 1,

            size: 10,
            dataList: [],
            finished: false,

            // 加载完毕
            loading: false,

            // 全局loading
            checkedAddress: null,

            // 选中地址
            showDelDialog: false,

            // 删除确认框
            // 当用户主动切换地址时,支持回退
            is_back: null,

            id: ''
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this; // 路由回退标识

        if (options.is_back) {
            that.setData({
                is_back: options.is_back
            });
        }
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
        that.setData({
            page: 1,
            size: 10,
            dataList: [],
            finished: false
        });
        that.getData();
    },
    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.
        let that = this;

        if (!that.finished) {
            that.getData();
        }
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 获取地址列表
        getData() {
            let that = this;
            let params = {
                page: that.page,
                size: that.size
            };
            myPro
                .wxRequest('user/address/list', 'GET', params)
                .then((res) => {
                    let list = res.result; // 无数据

                    if (list.length == 0) {
                        uni.showToast({
                            title: '暂无更多数据',
                            icon: 'none'
                        });
                        that.setData({
                            finished: true
                        });
                    } else {
                        // 有数据
                        that.setData({
                            dataList: that.dataList.concat(list),
                            page: that.page + 1
                        });
                    }
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 去详情
        goAddressDetail(event) {
            let that = this;
            let url = '';

            if (event.currentTarget.dataset.item) {
                let item = event.currentTarget.dataset.item;
                url = '/pages/user/address/detail/index?id=' + item.id;
            } else {
                url = '/pages/user/address/detail/index';
            }

            uni.navigateTo({
                url: url
            });
        },

        // 获取微信地址
        getAddressFromWechat() {
            let that = this;
            uni.chooseAddress({
                success: function (res) {
                    console.log('获取成功', res);
                    let obj = {
                        name: res.userName,
                        phone: res.telNumber,
                        area: res.provinceName + res.cityName + res.countyName,
                        address: res.detailInfo
                    }; // 让用户主动选一遍位置

                    uni.navigateTo({
                        url: '/pages/user/address/detail/index?type=wechat'
                    }); // 存一下

                    uni.setStorage({
                        key: 'wechatAddress',
                        data: JSON.stringify(obj)
                    });
                },
                fail: function (res) {
                    console.log('获取失败', res);
                }
            });
        },

        // 选择地址
        selecteAddress(event) {
            let that = this; // 先把上一次的值置空(避免出问题)

            that.setData({
                checkedAddress: null
            }); // 重新赋值

            let checkedAddress = event.currentTarget.dataset.item;
            that.setData({
                showConfirmAdd: true,
                checkedAddress: checkedAddress
            });
        },

        // 更换地址
        cancelCheck() {
            let that = this;
            that.setData({
                showConfirmAdd: false
            });
        },

        // 确认地址
        confirmCheck() {
            let that = this;
            that.setData({
                showConfirmAdd: false
            }); // 拿地址,匹配下门店,如果未返回,就是超距离了

            let params = {
                lat: that.checkedAddress.lat,
                lng: that.checkedAddress.lnt,
                page: 1,
                size: 10
            };
            myPro
                .wxRequest('user/store/list', 'GET', params)
                .then((res) => {
                    let storeList = res.result;

                    if (storeList.length != 0) {
                        uni.setStorage({
                            key: 'checkedAddress',
                            data: JSON.stringify(that.checkedAddress),
                            success: function () {
                                if (that.is_back) {
                                    uni.navigateBack();
                                } else {
                                    // 去购商品
                                    uni.redirectTo({
                                        url: '/pages/goods/index'
                                    });
                                }
                            }
                        });
                    } else {
                        // 超配送距离
                        uni.showToast({
                            title: '门店尚未营业',
                            // 单店改为门店尚未营业  多店已超配送距离,请更换地址
                            icon: 'none'
                        });
                    }
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 打开删除确认框
        doDeleteAddress(event) {
            let that = this;
            that.setData({
                id: event.currentTarget.dataset.id,
                showDelDialog: true
            });
        },

        // 取消删除地址
        onCloseDel() {
            let that = this;
            that.setData({
                showDelDialog: false
            });
        },

        // 确认删除
        onConfirmDel: function () {
            let that = this;
            let params = {
                id: that.id
            };
            myPro
                .wxRequest('user/address/remove', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.setData({
                        showDelDialog: false,
                        page: 1,
                        dataList: [],
                        finished: false
                    });
                    that.getData();
                })
                .catch((err) => {
                    that.setData({
                        showDelDialog: false
                    });
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    min-height: 100vh;
    background: #f6f6f6;
}
.address_list {
    padding: 30rpx 0 160rpx;
}
.address_item {
    margin-top: 30rpx;
    padding: 30rpx;
    background: #ffffff;
}
.address_item:first-child {
    margin-top: 0;
}
.address_item .item_t {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.address_item .item_l {
    /* width: 465rpx; */
    flex: 1;
    padding-right: 20rpx;
}
.address_item .item_tag {
    font-size: 24rpx;
    color: #ffffff;
    padding: 6rpx 8rpx;
    background: #295c56;
    border-radius: 5rpx;
    margin-right: 20rpx;
}
.address_item .item_title {
    font-size: 28rpx;
    color: #0c0c0c;
    line-height: 40rpx;
}
.address_item .item_l_b {
    margin-top: 20rpx;
    font-size: 26rpx;
    color: rgba(12, 12, 12, 0.54);
}
.address_item .user_phone {
    padding-left: 10rpx;
}
.address_item .edit_icon {
    width: 35rpx;
    height: 35rpx;
}
.address_item .item_b {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    color: rgba(12, 12, 12, 0.54);
    margin-top: 20rpx;
    border-top: 1px solid rgba(35, 36, 40, 0.12);
    padding-top: 20rpx;
}
/* 底部按钮 */
.btn_wrap {
    width: 100%;
    position: fixed;
    bottom: 60rpx;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.btn_wrap .btn {
    width: 322rpx;
    height: 98rpx;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #333333;
}
.btn_wrap .btn .wenzi {
    padding-left: 18rpx;
}
.btn_wrap .btn.wechat {
    background: #295c56;
    border: 0 none;
    color: #ffffff;
}
/* 确认地址 */
.add_pop {
    width: 650rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 50rpx 40rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.add_pop .pop_tu {
    width: 137rpx;
    height: 186rpx;
    position: absolute;
    top: -166rpx;
    right: 20rpx;
}
.add_pop .add_pop_t {
    font-size: 30rpx;
    font-weight: 500;
    color: #000000;
    text-align: center;
}
.add_pop .add_pop_nr {
    margin-top: 30rpx;
    width: 570rpx;
    background: #f6f6f6;
    border-radius: 10rpx;
    padding: 30rpx;
    font-size: 30rpx;
    color: #000000;
}
.add_pop .add_wenzi.grey {
    padding-top: 24rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.87);
}
.add_pop .add_btns {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.add_pop .add_btns .btn {
    width: 270rpx;
    height: 72rpx;
    background: #295c56;
    border-radius: 10rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add_pop .add_btns .btn.cancel {
    background: #eeecef;
    color: #333333;
}
</style>