smqjh-refuel/src/pages/exchangeSuccess/index.vue

<script setup lang="ts">
import router from '@/router'

definePage({
  name: 'exchangeSuccess',
  islogin: true,
  style: {
    navigationBarTitleText: '支付',
    navigationStyle: 'custom',
  },
})

// 页面参数
const couponId = ref('')
const batchNo = ref('')
const expireDays = ref('')
const discountMoney = ref(0)
const amountMoney = ref(0)
const StaticUrl = import.meta.env.VITE_STATIC_BASE_URL

onLoad((options: any) => {
  couponId.value = options.couponId || ''
  batchNo.value = options.batchNo || ''
  expireDays.value = options.expireDays || ''
  discountMoney.value = Number(options.discountMoney) || 0
  amountMoney.value = Number(options.amountMoney) || 0
})

// 查看抵扣券
function handleViewVoucher() {
  router.pushTab({ name: 'voucher' })
  useTabbar().setTabbarItemActive('voucher')
}

// 立即使用
function handleUseNow() {
  // TODO: 跳转到使用页面
  router.pushTab({ name: 'home' })
  useTabbar().setTabbarItemActive('home')
}
</script>

<template>
  <view class="min-h-100vh bg-#f5f5f5">
    <!-- 成功图标 -->
    <view class="flex flex-col items-center pt60rpx">
      <view class="h80rpx w80rpx flex items-center justify-center rounded-full bg-#9ED605">
        <wd-icon name="check" size="48rpx" color="#fff" />
      </view>
      <view class="mt20rpx text-32rpx text-#9ED605 font-semibold">
        兑换成功
      </view>
    </view>

    <!-- 抵扣券信息卡片 -->
    <view class="mx24rpx mt40rpx rounded-16rpx bg-white px28rpx py32rpx">
      <view class="flex items-center">
        <view class="mr10rpx h30rpx w30rpx">
          <image
            class="h-full w-full"
            :src="`${StaticUrl}/smqjh-reful-juan.png`"
          />
        </view>
        <view class="text-30rpx font-semibold">
          抵扣{{ discountMoney }}元（满{{ amountMoney }}可用）
        </view>
      </view>
      <view class="mt16rpx text-26rpx text-#999">
        优惠券已放入"我的抵扣券"
      </view>
    </view>

    <!-- 券详情卡片 -->
    <view class="mx24rpx mt24rpx rounded-16rpx bg-white px28rpx py32rpx">
      <view class="text-28rpx text-#333">
        券ID：{{ couponId }}
      </view>
      <view class="mt20rpx text-28rpx text-#333">
        批次号：{{ batchNo }}
      </view>
      <view class="mt20rpx text-28rpx text-#333">
        有效期：{{ expireDays }}天
      </view>
    </view>

    <!-- 温馨提示卡片 -->
    <view class="mx24rpx mt24rpx rounded-16rpx bg-white px28rpx py32rpx">
      <view class="mb20rpx text-28rpx font-semibold">
        温馨提示：
      </view>
      <view class="text-26rpx text-#666 leading-44rpx">
        <view>·每单限用1张优惠券</view>
        <view class="mt8rpx">
          ·系统会自动选择最优优惠
        </view>
        <view class="mt8rpx">
          ·不支持油站无法使用
        </view>
      </view>
    </view>
    <view class="mt28rpx flex items-center justify-between gap20rpx px124rpx">
      <wd-button

        plain block
        size="large"
        custom-class="flex-1 view-btn"
        @click="handleViewVoucher"
      >
        查看抵扣券
      </wd-button>
      <wd-button
        block
        size="large"
        custom-class="flex-1"
        @click="handleUseNow"
      >
        立即使用
      </wd-button>
    </view>
    <!-- 占位 -->
    <view class="h200rpx" />
  </view>
</template>

<style lang="scss" scoped>
:deep(.view-btn) {
  border-color: var(--them-color) !important;
  color: var(--them-color) !important;
}
</style>