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="orderDetail.massageItem" size="medium" :readonly="true"></productCard>

      <view class="card rights" v-if="orderDetail.rights && orderDetail.rights.length">
        <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.id}` }}</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'

  export default {
    components: {
      productCard,
    },
		data() {
			return {
        orderDetail: {},
      }
    },
		onLoad(args) {
			this.id = args.id
			this.fetchOrderDetail()
		},
		onPullDownRefresh() {
			this.fetchOrderDetail()
		},
    methods: {
			async fetchOrderDetail() {
				try {
					
					this.orderDetail = await this.$fetch('queryOrderById', { id: this.id })

				} catch (err) {

				}

				uni.stopPullDownRefresh()
			},
      onRefund() {
        // todo
      },
      onBuyAgain() {
        // todo: check
        this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.orderDetail.massageItem.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>