massage-front/pages_order/mine/verifyVoucher.vue

<template>
  <view class="page">

		<navbar title="代金券" leftClick @leftClick="$utils.navigateBack" color="#fff" />

    <view class="page-content">
      <!-- 代金券详情 -->
      <view class="coupon">
        <voucherCard :data="voucherDetail" :readonly="true"></voucherCard>
      </view>

      <view class="card info"> 
        <view class="info-header">代金券核销</view>
        <view class="flex flex-column info-content">
          <image class="info-qr" :src="voucherDetail.qrCodeImgUrl" mode="widthFix"></image>
          <view class="info-desc">{{ `有效时间：${voucherDetail.startTime}至${voucherDetail.endTime}` }}</view>
        </view>
      </view>
    </view>
		
  </view>
</template>

<script>
  import voucherCard from '../components/voucher/voucherCard.vue'

  export default {
    components: {
      voucherCard,
    },
		data() {
			return {
        // todo: fetch
        voucherDetail: {
          id: '001',
          name: '【会员礼】50元代金券',
          startTime: '2025.03.12',
          endTime: '2025.09.12',
          desc: '只可在线下门店使用',
          orderNo: 'da123567',
          qrCodeImgUrl: '../static/verifyOrder/temp-qrcode.png',
          startTime: '2025-03-14',
          endTime: '2025-04-14',
          rights: ['过期退', '随时退']
        },
      }
    },
    onLoad(option) {
      const { id } = option

      // todo: fetch voucher data by voucher id
    },
    methods: {
    },
  }
</script>

<style scoped lang="scss">
  $bar-height: 132rpx;

	.page {
		background-color: #F5F5F5;

		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}

    &-header {
      color: #000000;
      font-size: 28rpx;
      margin-top: 24rpx;
    }

    &-content {
      padding: 33rpx 13rpx;
    }
  }

  .coupon {
    padding: 0 13rpx;
  }

  .info {
    margin-top: 26rpx;
    padding: 25rpx 41rpx 108rpx 41rpx;

    &-header {
      color: #000000;
      padding: 0 0 16rpx 7rpx;
      border-bottom: 1rpx dashed #C7C7C7;
    }

    &-qr {
      width: 279rpx;
      height: auto;
      margin-top: 57rpx;
    }

    &-desc {
      color: #999999;
      font-size: 22rpx;
      margin-top: 45rpx;
    }
  }

</style>