massage-front/pages_order/order/verifyOrder.vue

<template>
  <view class="page">

		<navbar title="核销详情" leftClick @leftClick="$utils.navigateBack" color="#fff" />

    <view class="flex page-header">
      <image class="icon" src="@/pages_order/static/verifyOrder/icon-clock.png" mode="widthFix"></image>
      <text>待核销</text>
    </view>

    <view class="page-content">
      <!-- 商品详情 -->
      <productCard :data="productDetail" size="medium" :readonly="true"></productCard>

      <view class="card rights">
        <view class="flex rights-item" v-for="item in orderDetail.rights" :key="item">
          <image class="rights-icon" src="@/pages_order/static/verifyOrder/icon-checked.png" mode="widthFix"></image>
          <text>{{ item }}</text>
        </view>
      </view>

      <view class="card info"> 
        <view class="info-header">核销信息</view>
        <view class="flex flex-column info-content">
          <image class="info-qr" :src="orderDetail.qrCodeImgUrl" mode="widthFix"></image>
          <view class="info-no">{{ `订单号：${orderDetail.orderNo}` }}</view>
          <view class="info-desc">{{ `有效时间：${orderDetail.startTime}至${orderDetail.endTime}` }}</view>
        </view>
      </view>
    </view>

    

		<!-- 下单 -->
		<view class="flex bar">
      <button plain class="btn btn-plain" @click="onRefund">申请退款</button>
      <button plain class="btn" @click="onBuyAgain">再次购买</button>
		</view>

  </view>
</template>

<script>
	import productCard from '@/components/product/productCard.vue'

  const TEMP_BANNER_IMG_URL = 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280'

  export default {
    components: {
      productCard,
    },
		data() {
			return {
        // todo: fetch
        productDetail: {
          id: '001',
					imgUrl: TEMP_BANNER_IMG_URL,
					price: 99,
					num: 1,
					sales: 235,
					title: '60分钟肩颈推拿按摩',
					desc: '疏通经络 放松肌肉',
					tags: ['专业技师', '舒适环境', '深度放松'],
					details: '<p>这里是商品详情..............<br/>这里是商品详情..............</p>'
				},
        orderDetail: {
          id: '001',
          orderNo: 'da123567',
          qrCodeImgUrl: '../static/verifyOrder/temp-qrcode.png',
          startTime: '2025-03-14',
          endTime: '2025-04-14',
          rights: ['过期退', '随时退']
        },
      }
    },
    onLoad(option) {
      const { id } = option

      // todo: fetch order data & product data by order id
    },
    methods: {
      onRefund() {
        // todo
      },
      onBuyAgain() {
        // todo: check
        this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.productDetail.id}`)
      },
    },
  }
</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;

      .icon {
        width: 30rpx;
        height: auto;
        margin-right: 17rpx;
      }
    }

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

  .rights {
    margin-top: 15rpx;
    padding: 23rpx 48rpx;
    color: #000000;
    font-size: 28rpx;

    &-item {
      margin-right: 70rpx;
      display: inline-flex;
    }

    &-icon {
      width: 30rpx;
      height: auto;
      margin-right: 12rpx;
    }
  }

  .info {
    margin-top: 19rpx;
    padding: 25rpx 41rpx 51rpx 41rpx;
    font-size: 28rpx;

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

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

    &-no {
      color: #84A73F;
      margin-top: 16rpx;
    }

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


	.bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: $bar-height;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: $uni-fg-color;

    justify-content: flex-end;
	}

  
  .btn {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 24rpx 50rpx;
    box-sizing: border-box;
    border: none;
    border-radius: 44rpx;
    margin: 0;
    font-size: 28rpx;
    line-height: 1;

    color: #FFFFFF;
    background-image: linear-gradient(to right, #84A73F, #D8FF8F);

    & + & {
      margin-left: 39rpx;
    }

    &:last-child {
      margin-right: 54rpx;
    }

    &-plain {
      border: 2rpx solid #999999;
      color: #999999;
      background: none;
    }
  }
</style>