beauty-miniapp-uni/pages/verify/code.vue

<template>
  <view class="container">
    <view class="card hero">
      <view class="t1">支付成功</view>
      <view class="t2 muted">已为你生成订单，支持随时预约/到店核销</view>
      <view class="code">{{ o.verifyCode }}</view>
      <view class="row between info">
        <view class="muted">{{ o.projectName }}</view>
        <view class="amt">¥{{ o.amount }}</view>
      </view>
      <view class="muted info2" v-if="o.orderType === 'coupon'">
        {{ o.couponPlanLabel || '卡券' }} · {{ o.validText || '有效期以到店确认' }} · 剩余次数：{{ o.remainingTimes }}
      </view>
      <view class="muted info2" v-else>预约：{{ o.appointmentDate }} {{ o.appointmentSlot }}</view>
    </view>

    <view class="card block">
      <view class="line row between">
        <view class="muted">订单状态</view>
        <view class="tag">{{ o.status }}</view>
      </view>
      <view class="line row between">
        <view class="muted">核销方式</view>
        <view>门店扫码 / 手动输码</view>
      </view>
      <view class="line row between" v-if="o.validText && o.orderType === 'coupon'">
        <view class="muted">有效期</view>
        <view>{{ o.validText }}</view>
      </view>
      <view class="line row between" v-if="o.orderType === 'booking'">
        <view class="muted">技师</view>
        <view>{{ o.technicianName }}</view>
      </view>
    </view>

    <view class="btn btn-primary" @tap="goBooking">去预约</view>
    <view class="btn btn-ghost" @tap="goOrders">查看订单</view>
    <view class="btn btn-ghost" @tap="goMember">返回个人中心</view>

    <AiFloat />
  </view>
</template>

<script>
import AiFloat from '@/components/AiFloat.vue'
import { demoOrders } from '@/common/demoOrders'

function safeJsonParse(s) {
  try {
    return JSON.parse(s)
  } catch (e) {
    return null
  }
}

const __DBG_URL = 'http://127.0.0.1:7777/event'

export default {
  components: { AiFloat },
  data() {
    return {
      order: null
    }
  },
  onLoad(query) {
    //#region debug-point verify-code-load
    try {
      uni.request({
        url: __DBG_URL,
        method: 'POST',
        timeout: 2000,
        data: {
          sessionId: 'orders-detail-blank',
          runId: 'pre-fix',
          hypothesisId: 'H2',
          msg: 'verify/code onLoad',
          queryKeys: query ? Object.keys(query) : [],
          payloadLen: query && query.payload ? String(query.payload).length : 0
        }
      })
    } catch (e) {}
    //#endregion debug-point verify-code-load

    const raw = query.payload ? safeJsonParse(decodeURIComponent(query.payload)) : null
    if (raw) this.order = raw
  },
  computed: {
    o() {
      const defaultCoupon = Array.isArray(demoOrders) ? demoOrders.find((x) => x && x.orderType === 'coupon') : null
      return (
        this.order ||
        defaultCoupon ||
        demoOrders[0] || {
          id: 'ord_demo_fallback',
          status: '待核销',
          amount: 99,
          projectId: 'p1',
          projectName: '水氧净透体验',
          durationMin: 60,
          orderType: 'coupon',
          couponPlanLabel: '单次券',
          validText: '有效期以到店确认',
          remainingTimes: 1,
          verifyCode: 'VC20260622000'
        }
      )
    }
  },
  methods: {
    goBooking() {
      const o = this.o
      //#region debug-point verify-code-goBooking
      try {
        uni.request({
          url: __DBG_URL,
          method: 'POST',
          timeout: 2000,
          data: {
            sessionId: 'orders-detail-blank',
            runId: 'pre-fix',
            hypothesisId: 'H2',
            msg: 'verify/code goBooking',
            projectId: o && o.projectId ? String(o.projectId) : ''
          }
        })
      } catch (e) {}
      //#endregion debug-point verify-code-goBooking
      uni.navigateTo({ url: `/pages/booking/create?projectId=${o.projectId}` })
    },
    goOrders() {
      //#region debug-point verify-code-goOrders
      try {
        uni.request({
          url: __DBG_URL,
          method: 'POST',
          timeout: 2000,
          data: {
            sessionId: 'orders-detail-blank',
            runId: 'pre-fix',
            hypothesisId: 'H2',
            msg: 'verify/code goOrders',
            orderId: this.o && this.o.id ? String(this.o.id) : ''
          }
        })
      } catch (e) {}
      //#endregion debug-point verify-code-goOrders
      const payload = encodeURIComponent(JSON.stringify(this.o))
      uni.navigateTo({ url: `/pages/orders/detail?payload=${payload}` })
    },
    goMember() {
      uni.switchTab({ url: '/pages/member/index' })
    }
  }
}
</script>

<style lang="scss" scoped>
.hero {
  padding: 28rpx;
  background: linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(59, 130, 246, 1) 100%);
  border: 0;
  color: #fff;
}
.t1 {
  font-size: 42rpx;
  font-weight: 950;
}
.t2 {
  margin-top: 10rpx;
  color: rgba(255, 255, 255, 0.82);
  font-size: 26rpx;
}
.code {
  margin-top: 22rpx;
  padding: 22rpx;
  border-radius: 22rpx;
  background: rgba(255, 255, 255, 0.12);
  border: 1rpx dashed rgba(255, 255, 255, 0.42);
  font-size: 50rpx;
  font-weight: 950;
  letter-spacing: 2rpx;
  text-align: center;
}
.info {
  margin-top: 18rpx;
}
.amt {
  font-weight: 950;
}
.info2 {
  margin-top: 10rpx;
  color: rgba(255, 255, 255, 0.82);
  font-size: 26rpx;
}
.block {
  margin-top: 18rpx;
  padding: 22rpx;
}
.line {
  padding: 14rpx 0;
}
.tag {
  padding: 10rpx 14rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.14);
}
</style>