wx2uni/pages/mine/addressBook/index.vue

<template>
    <view class="container">
        <block>
            <view class="tc" v-if="!hasAddress">
                <i class="t-icon t-icon-zanwushouhuodizhi" style="width: 92px; height: 92px; margin-top: 90px"></i>
                <view class="mt20 cccc">暂无地址</view>
            </view>
        </block>
        <block v-if="hasAddress">
            <radio-group @change="radioChange">
                <view :class="'bgf br8 mt16 ' + (item.defaultFlag == 1 ? 'borderImg' : '')" style="overflow: hidden" v-for="(item, index) in recordList" :key="item.id">
                    <!-- <image wx:if="{{item.defaultFlag == 1}}" mode='aspectFit' src="http://matripe.oss-cn-beijing.aliyuncs.com/goodJob/wmk.svg" style="height:6px;width:100%;display: block;"></image> -->

                    <view class="display-flex" style="padding: 16px 10px">
                        <view class="flex-1 c3">
                            <view>
                                <p class="c3 f18 fw500">{{ item.contacts }}</p>
                                <p class="c6 f18 ml10">{{ item.contactsTel }}</p>
                            </view>
                            <view class="dib mt8">{{ item.provinceName }} {{ item.cityName }} {{ item.districtName }} {{ item.address }}</view>
                        </view>
                        <view v-if="item.classify == 0" class="f14" style="color: #4db54b">
                            <i class="iconfont icon-jia f15"></i>
                            家
                        </view>
                        <view v-if="item.classify == 1" class="f14" style="color: #ff4400">
                            <i class="iconfont icon-gongsi f15"></i>
                            公司
                        </view>
                        <view v-if="item.classify == 2" class="f14" style="color: #ff7900">
                            <i class="iconfont icon-qita f15"></i>
                            其他
                        </view>
                    </view>

                    <view style="height: 1rpx; background-color: #eee; margin: 0 10px"></view>

                    <view class style="padding: 16px 10px">
                        <radio :value="item.id" :checked="item.defaultFlag == 1" color="#0dcc91" style="transform: scale(0.7)" />
                        <text :class="'f14 ' + (item.defaultFlag == 1 ? 'cf00' : 'c9')">{{ item.defaultFlag == 1 ? '默认' : '设为默认' }}</text>
                        <view class="fr f14 c9">
                            <navigator :url="'/pages/mine/addAddress/index?id=' + item.id" class="dib" hover-class="text-hover">编辑</navigator>
                            <!-- <view class="ml20 dib" hover-class="text-hover" bindtap="delAddress" data-record="{{item}}">删除</view> -->
                        </view>
                    </view>
                </view>
            </radio-group>
        </block>

        <button class="loginOut normalBtn" hover-class="button-hover" style="margin-top: 80px; margin-bottom: 40px" @click.stop="addAddress">添加地址</button>
    </view>
</template>

<script>
// pages/addressBook/index.js
var app = getApp();
export default {
    data() {
        return {
            items: [
                {
                    value: '1',
                    name: '设为默认'
                },
                {
                    value: '2',
                    name: '已设为默认',
                    checked: 'true'
                },
                {
                    value: '3',
                    name: '设为默认'
                }
            ],
            hasAddress: false,
            recordList: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getList();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    methods: {
        getList() {
            var that = this;
            uni.request({
                url: app.globalData.ip + '/user/address/getUserAddressList',
                method: 'POST',
                header: app.globalData.headers,
                data: that.searchForm,
                success: function (res) {
                    console.log(res);
                    if (app.globalData.isNotEmptyCheck(res.data.data)) {
                        that.setData({
                            recordList: res.data.data,
                            hasAddress: true
                        });
                    } else {
                        that.setData({
                            recordList: [],
                            hasAddress: false
                        });
                    }
                }
            });
        },

        radioChange(e) {
            console.log('radio发生change事件，携带value值为：', e.detail.value);
            var that = this;
            that.recordList.forEach((item) => {
                item.defaultFlag = 0;
                if (item.id == e.detail.value) {
                    item.defaultFlag = 1;
                }
            });
            this.setData({
                recordList: that.recordList
            });
            uni.request({
                url: app.globalData.ip + '/user/address/updateDefaultFlag',
                method: 'POST',
                header: app.globalData.headers,
                data: {
                    id: e.detail.value,
                    defaultFlag: 1
                },
                success: function (res) {
                    console.log(res);
                }
            });
        },

        addAddress: function () {
            uni.navigateTo({
                url: '../addAddress/index'
            });
        },

        delAddress: function (e) {
            var that = this;
            var record = e.currentTarget.dataset.record;
            console.log(record);
            uni.showModal({
                title: '提示',
                content: `确定要删除该地址吗？`,
                cancelColor: '#666666',
                confirmColor: '#ff4400',
                success(res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                        uni.request({
                            url: app.globalData.ip + '/user/address/deleteUserAddress',
                            method: 'POST',
                            header: app.globalData.headers,
                            data: {
                                id: record.id
                            },
                            success: function (res) {
                                console.log(res);
                                that.getList();
                            }
                        });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage1: function () {}
    }
};
</script>
<style>
@import './index.css';
</style>