studytour-front/pages_order/order/orderConfirm/memberCard.vue

<template>
  <view class="flex card">
    <view>
      <uv-checkbox-group
        v-model="selectCheckboxValue"
        @change="onSelectChange"
      >
        <uv-checkbox
          size="36rpx"
          icon-size="36rpx"
          activeColor="#00A9FF"
          :name="1"
        ></uv-checkbox>
      </uv-checkbox-group>
    </view>
    <view class="info">
      <view class="flex name">
        <view>{{ data.name }}</view>
        <view :class="['tag', `tag-${data.type}`]">{{ typeDesc }}</view>
      </view>
      <view class="id">{{ data.idNo }}</view>
    </view>
  </view>
</template>

<script>

  const MEMBER_TYPE_AND_DESC_MAPPING = {
    0: '成人',
    1: '青少年',
    2: '儿童',
  }
  
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    data() {
      return {
        selectCheckboxValue: [],
      }
    },
    computed: {
      isSelected: {
        set(val) {
          this.selectCheckboxValue = val ? [1]: []

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

          this.$emit('selectChange', val)
        },
        get() {
          return this.selectCheckboxValue.length ? true : false
        }
      },
      typeDesc() {
        return MEMBER_TYPE_AND_DESC_MAPPING[this.data.type]
      },
    },
    watch: {
      data: {
        handler(val) {
          this.isSelected = val.isSelected
        },
        immediate: true,
        deep: true,
      }
    },
    methods: {
      onSelectChange(val) {
        this.isSelected = val.length ? true : false
      },
    }
  }
</script>

<style scoped lang="scss">
  .card {
    justify-content: flex-start;
    column-gap: 24rpx;
    padding: 24rpx;
    background: #F9F9F9;
  }

  .info {
    .name {
      justify-content: flex-start;
      column-gap: 24rpx;
      font-size: 32rpx;
      color: #181818;

      .tag {
        padding: 2rpx 14rpx;
        font-size: 24rpx;
        color: #00A9FF;
        background: #E9F8FF;
        border: 2rpx solid #00A9FF;
        border-radius: 8rpx;

        &-1 {
          color: #03C25C;
          background: #E9FFF5;
          border-color: #03C25C;
        }

        &-2 {
          color: #EE6E05;
          background: #FFEFE9;
          border-color: #EE6E05;
        }

      }
    }

    .id {
      margin-top: 8rpx;
      font-size: 28rpx;
      color: #9B9B9B;
    }
  }
</style>