更新记录

1.0.0（2023-11-08）

初始化

1.0（2023-11-08）

组件发布

平台兼容性

zl-address

使用方法

![](readme_files/3.jpg)
<!-- color：主题色 addressList:地址管理数据 @choose：选择事件 @editClick：编辑事件  -->
<zl-address :color="color" :addressList="addressList" @choose="choose"
            @edit="edit"></zl-address>  

<!-- 设置数据 -->                   
color: '#FF0000',
addressList: [{
    "id": "1721360818022518784",
    "customerId": "1720356054161821696",
    "address": "安徽省合肥市瑶海区",
    "customerName": "13626736610",
    "recipient": "22",
    "phone": "13626366699",
    "provinceId": "340000",
    "provinceName": "安徽省",
    "cityId": "340100",
    "cityName": "合肥市",
    "areaId": "340102",
    "areaName": "瑶海区",
    "detail": "22",
    "latitude": "31.85797",
    "longitude": "117.30949",
    "def": 0,
    "createTime": "2023-11-06 10:56:15",
    "creator": null,
    "updateTime": "2023-11-06 11:07:39",
    "updatedBy": null,
    "creatorName": null,
    "updatedName": null
}, {
    "id": "1720362267113033728",
    "customerId": "1720356054161821696",
    "address": "天津市天津市和平区",
    "customerName": "13626736610",
    "recipient": "999",
    "phone": "13626366696",
    "provinceId": "120000",
    "provinceName": "天津市",
    "cityId": "120100",
    "cityName": "天津市",
    "areaId": "120101",
    "areaName": "和平区",
    "detail": "111",
    "latitude": "39.11712",
    "longitude": "117.2147",
    "def": 1,
    "createTime": "2023-11-03 16:48:22",
    "creator": null,
    "updateTime": "2023-11-07 15:10:08",
    "updatedBy": null,
    "creatorName": null,
    "updatedName": null
}],

HTML代码实现部分

<template>
    <view>
        <!-- color：主题色 addressList:地址管理数据 @choose：选择事件 @edit：编辑事件  attr 设置addressList解析参数-->
        <zl-address :color="color" :addressList="addressList" @choose="choose" :attr="attr"
            @edit="edit" @del="del"></zl-address>
        <view class="save">
            <view class="btn" :style="'background:' + color" @tap="add">添加地址</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                color: '#FF0000',
                addressList: [],
                attr:{
                    isdefault:'def',
                    name:'recipient',
                    phone:'phone',
                    address:'address',
                    moreAddress:'detail'
                }
            };
        },
        mounted() {
        },
        onShow() {
            this.getAddress()
        },
        props: {},
        methods: {
            getAddress(){
                var param = {
                    pageNum:1,
                    pageSize:1000
                }
                this.$http('/customerAddress/page',param, "post").then(data => {
                    this.addressList = data.list
                })
            },
            // 编辑地址
            edit(item) {
                uni.navigateTo({
                    url: '/pages/kuaiche/recipientAddress?id='+item.id
                })
            },
            choose(item){
                this.$store.dispatch('recipient',item)
                 uni.navigateTo({
                    url: '/pages/confirmOrder/confirmOrder'
                 })
            },
            del(item, index) {
                this.$http('/customerAddress/deleteById',item, "post").then(data => {
                    uni.showToast({
                        title: '删除成功~',
                        icon: 'none'
                    })
                    this.addressList.splice(index, 1)
                })
            },
            // 增加地址
            add() {
                uni.navigateTo({
                    url: '/pages/kuaiche/recipientAddress'
                })
            },
        }
    };
</script>
<style lang="scss" scoped>
    .save {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 120upx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .save view {
        display: flex;
    }

    .save .btn {
        box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
        width: 70%;
        height: 80upx;
        border-radius: 80upx;
        background-color: #f23a3a;
        color: #fff;
        justify-content: center;
        align-items: center;
        font-size: 30upx;
        margin-bottom: 60px;
    }
</style>