health-front/pages_order/address/addressCard.vue

<template>
  <view class="card">
    <view class="top" @click="$emit('click')">
      <addressView :data="data"></addressView>
    </view>
    <view class="flex bottom">
      <view class="flex col">
        <view>
          <uv-radio-group 
            v-model="radiovalue" 
            shape="circle"
            size="36rpx"
            iconSize="36rpx"
            labelSize="24rpx"
            labelColor="#9B9B9B"
            activeColor="#7451DE"
            @change="onRadioChange"
          >
            <uv-radio :name="1">
              <view>默认地址</view>
            </uv-radio>
          </uv-radio-group>
        </view>
      </view>
      <button class="flex col btn" @click="onEdit">
        <image class="icon" src="@/pages_order/static/address/icon-edit.png" mode="scaleToFill"></image>
        <view>编辑</view>
      </button>
      <button class="flex col btn" @click="onDelete">
        <image class="icon" src="@/pages_order/static/address/icon-delete.png" mode="scaleToFill"></image>
        <view>删除</view>
      </button>
    </view>
  </view>
</template>

<script>
  import addressView from './addressView.vue';

  export default {
    components: {
      addressView,
    },
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    data() {
      return {
        radiovalue: null,
      }
    },
    computed: {
      isDefault: {
        set(val) {
          this.radiovalue = val

          if (this.data.defaultFlag == val) {
            return
          }

          this.$emit('defaultChange', val)
        },
        get() {
          return this.radiovalue
        }
      },
    },
    watch: {
      data: {
        handler(val) {
          this.isDefault = val.defaultFlag
        },
        immediate: true,
        deep: true,
      }
    },
    methods: {
      onRadioChange() {
        this.isDefault = 1
      },
      onEdit() {
        this.$emit('edit')
      },
      onDelete() {
        uni.showModal({
          title: '确认删除？',
          success : e => {
            if(e.confirm){
              this.$emit('delete')
            }
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .card {
    padding: 24rpx 32rpx;
    background: #FFFFFF;
    border-radius: 24rpx;

    .top {
      padding-bottom: 24rpx;
    }

    .bottom {
      padding-top: 24rpx;
      column-gap: 24rpx;
      border-top: 2rpx dashed #DADADA;

      .col {
        flex: 1;
        column-gap: 8rpx;

        font-family: PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        line-height: 1.4;
        color: #9B9B9B;

        .icon {
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
  }
</style>