zouma-short/src/components/AddressItem.vue

<template>
    <div class="address">
        <div class="radio" v-if="type == 'submit'" @click="chooseAddress">
            <img class="radio-img" :src="isChoose ? activeIcon : inactiveIcon" />
        </div>
        <div class="content">
            <div class="address-item">
                <div class="address-name">收货人</div>
                <div class="address-val">{{ info.name }} {{ info.phone }}</div>
            </div>
            <div class="address-item">
                <div class="address-name">收货地址</div>
                <div class="address-val">{{ info.fullAddress }}</div>
            </div>

            <div class="btn-list">
                <van-button plain color="#000" size="small" round disabled v-if="info.isDefault">默认</van-button>
                <van-button plain color="#FF8F00" size="small" round @click="goNext('editAddress', { id: info.id })">
                    编辑
                </van-button>
                <van-button v-if="type == 'list'" plain type="danger" size="small" round>删除</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import { useUserStore } from '@/stores/user'
import { mapState } from 'pinia'
import activeIcon from '@/assets/icon_xuanzhong_pre.png'
import inactiveIcon from '@/assets/icon_xuanzhong.png'
export default {
    name: 'addressItem',
    props: {
        info: {
            type: Object,
            default: () => {
                return {}
            }
        },
        type: {
            type: String,
            default: 'list'
        },
        isChoose: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            activeIcon,
            inactiveIcon
        }
    },
    computed: {
        ...mapState(useUserStore, ['user'])
    },
    methods: {
        chooseAddress() {
            this.$emit('chooseAddress', this.info.id)
        }
    }
}
</script>
<style lang="less" scoped>
.address {
    background: rgba(var(--ion-text-color-rgb), 1);
    border-radius: 2px;
    padding: 15px;
    display: flex;
    align-items: center;
}
.radio {
    padding: 10px 10px 10px 0;
}
.radio-img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}
.content {
    flex-grow: 1;
}

.address-item {
    display: flex;
    padding: 0 0 10px;
    .address-name {
        font-size: 13px;
        color: rgba(170, 172, 173, 1);
        line-height: 20px;
        min-width: 72px;
    }

    .address-val {
        font-size: 14px;
        color: rgba(var(--ion-color-light-contrast-rgb), 1);
        line-height: 20px;
    }
}

.btn-list {
    display: flex;
    justify-content: flex-end;
    .van-button:not(:last-child) {
        margin-right: 10px;
    }
}
</style>