caimei-applets-store/pages/views/order/components/order-choose-address/order-choose-address.vue

<template>
    <view class="choose-address" @click="handleClick">
        <template v-if="addressInfo">
            <view class="contact">
                <text class="name" v-text="addressInfo.shouHuoRen"></text>
                <text class="mobile" v-text="addressInfo.mobile"></text>
            </view>
            <view class="address">
                <text class="iconfont icon-shouhuodizhi icon"></text>
                <text class="text">收货地址：{{ address }}</text>
            </view>
            <text class="iconfont icon-genghuan more"></text>
        </template>
        <template v-else>
            <view class="create">
                <text class="iconfont icon-tianjiadizhi icon"></text>
                <text class="text">添加收货地址</text>
            </view>
        </template>
    </view>
</template>

<script>
export default {
    name: 'order-choose-address',
    props: {
        addressInfo: {
            type: Object,
            default: () => null
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        address() {
            if (!this.addressInfo) {
                return ''
            }
            return (
                this.addressInfo.provinceName +
                this.addressInfo.cityName +
                this.addressInfo.townName +
                this.addressInfo.address
            )
        }
    },
    methods: {
        handleClick() {
            if (this.disabled) return 
            if (!this.addressInfo) {
                this.$router.navigateTo('address/address-create?type=choose')
            } else {
                this.$router.navigateTo('address/address-list?type=choose')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.choose-address {
    @extend .cm-flex-center;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    height: 120rpx;
    padding: 0 24rpx;
    background-color: #fff;
    background-image: url('https://static.caimei365.com/app/mini-hehe/icon/icon-line.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 750rpx 6rpx;
    .contact {
        @include ellipsis(1);
        padding-left: 44rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        .name {
            margin-right: 24rpx;
        }
    }

    .address {
        @include ellipsis(1);
        margin-top: 4rpx;
        max-width: 650rpx;
        font-size: 28rpx;
        color: #333;

        .icon {
            font-size: 34rpx;
            color: #f83c6c;
            margin-right: 8rpx;
        }
    }

    .create {
        width: 100%;
        text-align: center;
        color: #f83c6c;
        .icon {
            font-size: 34rpx;
            margin-right: 8rpx;
            color: #f83c6c;
        }
        .text {
            font-size: 28rpx;
        }
    }

    .more {
        position: absolute;
        right: 24rpx;
        bottom: 24rpx;
        font-size: 28rpx;
        color: #333;
    }
}
</style>