massage-front/pages_order/components/verifyRecord/voucherCard.vue

<template>
  <view class="card flex voucher">
    <image class="voucher-img" :src="data.massageItem.image"></image>
    
    <view class="voucher-info">
      <view class="voucher-name">{{ data }}</view>
      <view class="voucher-desc">{{ `核销时间：${data.createTime}` }}</view>
    </view>

    <view class="voucher-count">
      <text>代金券：</text>
      <text class="voucher-value">{{ `${data.count}元` }}</text>
    </view>
  </view>
</template>

<script>

const TEST_DATA = {
  id: '001',
  imgUrl: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
  userName: '用户136xxxxxxxxx',
  createTime: '2025/03/05 14:45:36',
  count: '100',
}

export default {
  props: {
    data: {
      type: Object,
      default() {
        return TEST_DATA
      }
    },
  },
}
</script>

<style scoped lang="scss">
.voucher {
  padding: 33rpx 25rpx 33rpx 31rpx;

  &-img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin-right: 7rpx;
  }

  &-info {
    flex: 1;
  }

  &-name {
    color: #333333;
    font-size: 28rpx;
    line-height: 40rpx;
  }

  &-desc {
    color: #333333;
    font-size: 22rpx;
    line-height: 30rpx;
    margin-top: 5rpx;
  }

  &-count {
    color: #000000;
    font-size: 22rpx;
  }

  &-value {
    color: #FF2A2A;
  }
}
</style>