book-hi/pages-mine/components/address-card.vue

<template>
    <view class="address-card" :class="{ 'address-card--selected': selected }">
        <!-- 选中状态的勾 -->
        <view class="selected-icon no-select-icon" v-if="isSelect == 1" @tap="handleClick">
            <u-icon name="checkmark" color="#FFFFFF" size="24"></u-icon>
        </view>

        <view class="selected-icon" v-if="selected" @tap="handleClick">
            <u-icon name="checkmark" color="#FFFFFF" size="24"></u-icon>
        </view>

        <!-- 主要内容区 -->
        <view class="content flex-a" @click="updateAddress">
            <image src="../static/adderss.png" style="width: 40rpx; height: 40rpx"></image>

            <view class="flex-1 mr-40 ml-24 flex-d">
                <view class="header flex-a flex-1 mb-24">
                    <view class="name-phone">
                        <text class="common-text-2">{{ address.name }}</text>
                        <text class="common-text-2 ml-20">{{ address.mobile }}</text>
                    </view>
                    <view class="status ml-40" v-if="address.defaultFlag == 1">默认</view>
                </view>
                <view class="common-text-2">{{ address.fullAddress }}</view>
            </view>

            <!-- 右侧箭头 -->
            <u-icon name="arrow-right" size="32" color="#999"></u-icon>
        </view>

        <!-- 底部操作区 -->
        <view class="footer flex-a flex-j-b">
            <view class="common-text-2">
                <u-checkbox v-model="isDefault" @change="onDefaultChange" shape="circle" active-color="#38C148"
                    >默认地址</u-checkbox
                >
            </view>
            <view class="common-text-2" @click.stop="onDelete">删除</view>
        </view>
    </view>
</template>

<script>
export default {
    name: "address-item",
    props: {
        address: {
            type: Object,
            default: () => ({}),
        },
        selected: {
            type: Boolean,
            default: false,
        },
        isSelect: {
            type: [Boolean, Number, String],
            default: false,
        },
    },
    data() {
        return {
            isDefault: false,
        };
    },
    watch: {
        address: {
            handler(value) {
                this.isDefault = value.defaultFlag == 1;
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        handleClick() {
            this.$emit("tapItem", this.address);
        },

        //更新地址
        updateAddress() {
            uni.navigateTo({
                url: "/pages-mine/pages/address/add-or-update?id=" + this.address.id,
            });
            return
            if (!this.isSelect) {
                uni.navigateTo({
                    url: "/pages-mine/pages/address/add-or-update?id=" + this.address.id,
                });
            } else {
                this.$emit("tapItem", this.address);
            }
        },

        onDefaultChange(value) {
            if (this.address.defaultFlag == 1) return (this.isDefault = true);

            let id = this.address.id;
            uni.$u.http.post(`/token/user/address/setDefault/${id}`).then((res) => {
                if (res.code == 200) {
                    uni.showToast({
                        icon: "none",
                        title: "设置默认地址成功",
                    });
                    this.$emit("success");
                } else {
                    uni.showToast({
                        icon: "none",
                        title: res.msg,
                    });
                    this.isDefault = false;
                }
            });
        },
        onDelete() {
            this.$emit("delete", this.address.id);
        },
    },
};
</script>

<style lang="scss" scoped>
.address-card {
    position: relative;
    background-color: #ffffff;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    border: 2rpx solid transparent;
    transition: all 0.3s;
    margin-bottom: 20rpx;

    // 选中状态样式
    &--selected {
        border-color: #38c148;
        background-color: rgba(56, 193, 72, 0.05);
    }

    // 选中状态的勾
    .selected-icon {
        position: absolute;
        right: -2rpx;
        top: -2rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: #38c148;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom-left-radius: 12rpx;
        border-top-right-radius: 12rpx;

        &.no-select-icon {
            background-color: #d8d8d8;
        }
    }

    .status {
        font-size: 24rpx;
        color: #38c148;
        padding: 4rpx 12rpx;
        border: 1px solid #38c148;
        border-radius: 6rpx;
    }

    .footer {
        margin-top: 20rpx;
        padding-top: 20rpx;
        border-top: 1rpx solid #eeeeee;
    }
}
</style>