YXGJ/store/deliveryAddress/index.vue

<template>
    <view>
        <view class="My_search-box">
            <My_search :value="content.where.condition" @onSearch="onSearch" />
        </view>
        <view class="tips" v-if="tips">
            {{ tips }}
        </view>
        <My_listbox ref="List" @getlist="getList" bottomHeight="70">
            <view class="item" v-for="(item, index) in list" :key="item.contactsid">
                <view class="head" hover-class="navigator-hover" @click="onClick(item)">
                    <view class="label u-line-1">
                        <text class="iconfont icon-dizhi-hui" />
                        <text style="margin-right: 10px;">
                            {{ item.name }}
                        </text>
                        <text>
                            {{ item.phonenumber }}
                        </text>
                    </view>
                    <view class="address">
                        {{ getCity(item) }}
                    </view>
                </view>
                <view class="bottom">
                    <view class="switch-box" @click="setDefault(index)">
                        <u-switch :value="item.isdefault == 1" activeColor="#70D95D" size="18" :loading="item.loading" />
                        <text class="text">
                            设为默认
                        </text>
                    </view>

                    <view class="funs">
                        <view class="fun" @click="edit(item)">
                            <text class="iconfont icon-bianji" />
                            编辑
                        </view>
                        <view class="fun" @click="deleteItem(item.contactsid)">
                            <text class="iconfont icon-shanchu" />
                            删除
                        </view>
                    </view>
                </view>
            </view>
        </My_listbox>

        <view class="footer">
            <navigator class="add" url="/store/deliveryAddress/insert" @click="toAdd" hover-class="navigator-hover">
                添加地址
            </navigator>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            "content": {
                "where": {
                    "condition": ""
                }
            },
            list: [],
            tips: "",
        }
    },
    onLoad(options) {
        uni.setNavigationBarTitle({
            title: options.title || '收货地址',
        });
        this.tips = options.tips || '';
        this.getList(true)
    },
    onShow() {
        delete this.$Http.updateList
    },
    methods: {
        getList(init = false) {
            if (this.paging(this.content, init)) return;
            this.$Http.basic({
                "id": "20240506103702",
                content: this.content
            }).then(res => {
                console.log("收货地址列表", res)
                this.$refs.List.RefreshToComplete()
                if (this.cutoff(res.msg)) return;
                this.$refs.List.setHeight()
                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                this.content = this.$refs.List.paging(this.content, res)
            })
        },
        updateList() {
            let content = this.paging(this.content, true, true)
            this.$Http.basic({
                "id": "20240506103702",
                content
            }).then(res => {
                console.log("更新收货地址列表", res)
                if (this.cutoff(res.msg)) return;
                this.list = res.data;
                this.$refs.List.paging(this.content, res, true)
            })
        },
        toAdd() {
            this.$Http.updateList = this.updateList.bind(this);
        },
        onSearch(condition) {
            if (condition == this.content.where.condition) return;
            this.content.where.condition = condition;
            this.getList(true);
        },
        setDefault(index) {
            this.$set(this.list[index], 'loading', true);
            let item = this.list[index],
                isdefault = item.isdefault == 1 ? 0 : 1
            this.$Http.basic({
                "id": 20240506103602,
                "content": {
                    "contactsid": item.contactsid,
                    isdefault
                }
            }).then(res => {
                console.log("设置默认", res)
                if (this.cutoff(res.msg)) return;
                item.loading = false;
                if (isdefault == 0) {
                    item.isdefault = 0;
                    this.$set(this.list, index, item);
                } else {
                    this.list = this.list.map(v => {
                        v.isdefault = v.contactsid == item.contactsid ? 1 : 0
                        return v
                    })
                }
            })
        },
        deleteItem(id) {
            let that = this;
            uni.showModal({
                title: '提示',
                content: '是否确定删除该地址?',
                confirmText: "删除",
                success: function ({ confirm }) {
                    if (confirm) that.$Http.basic({
                        "id": 20240506103502,
                        "content": {
                            "contactsids": [
                                id
                            ]
                        },
                    }).then(res => {
                        console.log("删除", res)
                        if (that.cutoff(res.msg)) return;
                        that.updateList()
                    })
                }
            });

        },
        edit(item) {
            this.toAdd()
            uni.navigateTo({
                url: '/store/deliveryAddress/insert?data=' + JSON.stringify(item),
            });
        },
        onClick(item) {
            this.$Http.selectAddress && this.$Http.selectAddress(item)
        }
    },
}
</script>

<style lang="scss" scoped>
.My_search-box {
    background: #fff;
    width: 100vw;
    padding: 10px;
    box-sizing: border-box;
}

.tips {
    line-height: 17px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-size: 12px;
    color: #666666;
    margin-top: 10px;
    padding-left: 10px;
}

.item {
    margin-top: 10px;
    width: 100vw;
    background: #fff;

    .head {
        padding: 10px;

        .label {
            line-height: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: bold;
            font-size: 14px;
            color: #000000;

            .iconfont {
                font-size: 12px;
                margin-right: 5px;
            }

        }

        .address {
            line-height: 17px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #666666;
            margin-top: 7px;
        }
    }

    .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #ddd;
        box-sizing: border-box;
        width: 100vw;
        height: 45px;
        background: #fff;

        .switch-box {
            display: flex;
            margin-left: 10px;
            align-items: center;

            .text {
                margin-left: 5px;
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-size: 12px;
                color: #333333;
            }
        }

        .funs {
            display: flex;
            align-items: center;
            margin-right: 14px;

            .fun {
                font-family: Source Han Sans SC,
                    Source Han Sans SC;
                font-size: 12px;
                color: #333333;
                margin-left: 20px;

                .iconfont {
                    font-size: 12px;
                    margin-right: 5px;
                }
            }
        }

    }

}

.footer {
    position: fixed;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    padding: 10px;
    padding-top: 5px;
    bottom: 0;

    .add {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 45px;
        background: #C30D23;
        border-radius: 5px;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #FFFFFF;
    }
}
</style>