studytour-front/pages_order/traveler/travelerCard.vue

<template>
  <view class="card">
    <view class="flex top">
      <view>
        <uv-checkbox
          size="36rpx"
          icon-size="36rpx"
          activeColor="#00A9FF"
          :name="data.id"
        ></uv-checkbox>
      </view>
      <view class="info">
        <view class="flex name">
          <view>{{ data.name }}</view>
          <!-- todo: transform periodId to desc -->
          <view :class="['tag', `tag-${data.type}`]">{{ typeDesc }}</view>
        </view>
        <view class="id">{{ data.cerNo }}</view>
      </view>
    </view>
    <view class="flex bottom">
      <view class="flex col">
        <view>
          <uv-checkbox-group
            v-model="defaultCheckboxValue"
            @change="onDefaultChange"
          >
            <uv-checkbox
              size="36rpx"
              icon-size="36rpx"
              activeColor="#00A9FF"
              :name="1"
            ></uv-checkbox>
          </uv-checkbox-group>
        </view>
        <view>默认出行人</view>
      </view>
      <button class="flex col btn" @click="onEdit">
        <image class="icon" src="@/pages_order/static/traveler/icon-edit.png" mode="scaleToFill"></image>
        <view>编辑</view>
      </button>
      <button class="flex col btn" @click="onDelete">
        <image class="icon" src="@/pages_order/static/traveler/icon-delete.png" mode="scaleToFill"></image>
        <view>删除</view>
      </button>
    </view>
  </view>
</template>

<script>

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

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

          this.$emit('defaultChange', val)
        },
        get() {
          return this.defaultCheckboxValue.length ? true : false
        }
      },
      typeDesc() {
        return MEMBER_TYPE_AND_DESC_MAPPING[this.data.type]
      },
    },
    watch: {
      data: {
        handler(val) {
          this.isDefault = val.isDefault
        },
        immediate: true,
        deep: true,
      }
    },
    methods: {
      onDefaultChange(val) {
        this.isDefault = val.length ? true : false
      },
      onEdit() {
        // todo
        this.$emit('edit')
      },
      onDelete() {
        uni.showModal({
          title: '确认删除？',
          success : e => {
            if(e.confirm){
							// todo
              this.$emit('delete')
            }
          }
        })
      },
    }
  }
</script>

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

    .top {
      padding-bottom: 24rpx;
      justify-content: flex-start;
      column-gap: 24rpx;
      
      .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;
        }
      }
    }

    .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>