studytour-front/pages_order/member/memberCard.vue

<template>
  <view class="flex card">
    <view class="radio" v-if="showRadio">
      <uv-radio :name="data.id"></uv-radio>
    </view>
    <view class="info">
      <view class="title">{{ typeDesc }}</view>
      <view class="row">
        <view class="row-label">绑定人：</view>
        <view class="row-content">{{ data.name }}</view>
      </view>
      <view class="row">
        <view class="row-label">申请人ID：</view>
        <view class="row-content">{{ data.userId }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  const TYPE_AND_DESC_MAPPING = {
    0: '学生',
    1: '家长',
  }

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
      value: {
        type: String,
        default: null,
      },
      showRadio: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
      }
    },
    computed: {
      typeDesc() {
        const { type } = this.data

        return TYPE_AND_DESC_MAPPING[type] || ''
      },
    },
    methods: {
    },
  }
</script>

<style scoped lang="scss">

  .card {
    justify-content: flex-start;
    column-gap: 24rpx;
    padding: 40rpx 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 1.4;
    background: #FFFFFF;
    border-radius: 32rpx;
  }

  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #181818;
  }

  .row {
    margin-top: 16rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 4rpx;
    font-size: 28rpx;

    &-label {
      color: #8B8B8B;
    }

    &-content {
      color: #393939;
    }
  }

</style>