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">
					<view class="info-qr">
						<uv-qrcode ref="qrcode" size="279rpx" :value="`${voucherDetail.id},1`"></uv-qrcode>
					</view>
          <view class="info-desc">{{ `有效时间：${validRange}` }}</view>
        </view>
      </view>
    </view>
		
  </view>
</template>

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

  export default {
    components: {
      voucherCard,
    },
		data() {
			return {
        id: null,
        voucherDetail: {},
      }
    },
    computed: {
      validRange() {
        const { createTime, validDate } = this.voucherDetail || {}

        let startTime = createTime ? this.$dayjs(createTime).format('YYYY.MM.DD') : '-'
        let endTime = validDate ? this.$dayjs(validDate).format('YYYY.MM.DD') : '-'

        return `${startTime}至${endTime}`
      },
    },
    onLoad(option) {
      const { id } = option

      this.id = id

      this.fetchVoucherInfo()
    },
    methods: {
      async fetchVoucherInfo() {
        try {
          const res = await this.$fetch('queryVouchersById', { userVouchersId: this.id })
          res.vouchersId_dictText = res.title
          this.voucherDetail =res
        } catch (err) {

        }
      },
    },
  }
</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>