yihuo/pages/address/cell.vue

<template>
    <view class="item" @click="chooseItem">
        <view class="context border-bottom1">
            <view class="font6 bold color-1">{{ data.contactName }} {{ data.contactNo }}</view>
            <view class="marginT12 color-2 font4">
                {{ data.province }}{{ data.city }}{{ data.district }}{{ data.address }}
            </view>
        </view>
        <view class="paddingY12 paddingX15">
            <view class="flex-align" v-if="defaultFlag === 1">
                <view
                    class="checkBox check"
                    @click.stop="setDefault(0)"
                >
                    <view class="cuIcon-check"></view>
                </view>
                <view class="color-theme font4 marginL5" @click.stop="setDefault(0)">
                    已设为默认
                </view>
            </view>
            <view class="flex-align" v-else>
                <view
                    class="checkBox"
                    @click.stop="setDefault(1)"
                >
                    <view class="cuIcon-check"></view>
                </view>
                <view class="color-2 font4 marginL5" @click.stop="setDefault(1)">默认</view>
            </view>
        </view>
        <image class="close" :src="resource.icon_x" @click.stop="deleteItem" />
    </view>
</template>
<script>
    import resource from '@/utils/resource'
    export default {
        props: {
            data: Object,
            type: String
        },
        data() {
            return {
                resource,
                defaultFlag: 0
            }
        },
        mounted() {
            this.defaultFlag = this.data.defaultFlag
        },
        methods: {
            deleteItem() {
                this.$emit('delete', this.data)
            },
            chooseItem() {
                if (this.type === '1') {
                    this.$router.back()
                    this.$event.emit(this.$event.key.ADDRESS_SET, this.data)
                } else {
                    this.$emit('setAddress', this.data)
                }
            },
            async setDefault(flag) {
                let data = { ...this.data, defaultFlag: flag }
                const res = await this.$service.address.setDefault(data)
                if (res) {
                    this.defaultFlag = flag
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .item {
        margin: 20rpx 28rpx 0;
        background: #fff;
        border-radius: 16rpx;
        position: relative;
        .context {
            padding: 40rpx 30rpx 30rpx;
        }
        .close {
            width: 28rpx;
            height: 28rpx;
            position: absolute;
            top: 20rpx;
            right: 20rpx;
        }
    }
    .checkBox {
        border: 4rpx solid #000000;
        background-color: #fff;
        color: #fff;
        width: 32rpx;
        border-radius: 50%;
        margin-right: 12rpx;
        height: 32rpx;
        text-align: center;
        line-height: 28rpx;
        font-size: 24rpx;
        &.check {
            background: #fec433;
            border-color: #fec433;
            color: #000;
        }
    }
</style>