pingxiangcard/src/pages/card-buy/card-buy.vue

<template>
  <view class="page">
    <!-- 图片区域 -->
    <view class="image-section">
      <image
        class="card-image"
        src="https://aliyunoss.hntgov.net/image/2026/06/23/70e9f4b3b5fd49adb1ff06edcb8fa032.jpg"
        mode="widthFix"
      />
      <image
        class="card-image"
        src="https://aliyunoss.hntgov.net/image/2026/06/25/f3e45bcb3b4f4a2997f107cc6335a1bc.jpg"
        mode="widthFix"
      />
    </view>

    <!-- 底部固定购买区域 -->
    <view class="bottom-bar">
      <view class="price-row">
        <text class="price-label">价格：</text>
        <text class="price-symbol">¥</text>
        <text class="price-value">198</text>
        <text class="price-original">¥3800+</text>
      </view>
      <button class="btn-buy" :disabled="paying" @tap="handleBuy">
        <text class="btn-buy__text">{{ paying ? '支付中...' : '立即购买' }}</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const paying = ref(false)

async function handleBuy() {
  if (paying.value) return
  paying.value = true

  try {
    // 调用后端创建订单接口（mock）
    const orderRes: any = await new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          orderId: 'ORD' + Date.now(),
          payParams: {
            timeStamp: String(Math.floor(Date.now() / 1000)),
            nonceStr: 'mock_nonce_' + Date.now(),
            package: 'prepay_id=mock_prepay_id',
            signType: 'MD5',
            paySign: 'mock_pay_sign'
          }
        })
      }, 800)
    })

    // 调用微信支付
    await new Promise<void>((resolve, reject) => {
      uni.requestPayment({
        provider: 'wxpay',
        ...orderRes.payParams,
        success: () => resolve(),
        fail: (err: any) => reject(err)
      })
    })

    uni.showToast({ title: '支付成功', icon: 'success' })
    setTimeout(() => {
      uni.switchTab({ url: '/pages/index/index' })
    }, 1500)
  } catch (err: any) {
    if (err?.errMsg?.includes('cancel')) {
      uni.showToast({ title: '已取消支付', icon: 'none' })
    } else {
      uni.showToast({ title: '支付失败，请重试', icon: 'none' })
    }
  } finally {
    paying.value = false
  }
}
</script>

<style lang="scss" scoped>
$bar-height: 120rpx;

.page {
  min-height: 100vh;
  background: #ffffff;
  padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
  font-family: $font-family-body;
}

/* ===== 图片区域 ===== */
.image-section {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

/* ===== 底部固定购买区域 ===== */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  height: $bar-height;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0rpx 0 178rpx;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
  z-index: 100;
}

.price-label {
  font-family: $font-family-body;
  font-size: 26rpx;
  color: $uv-tips-color;
}

.price-row {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-family: $font-family-body;
  font-size: 28rpx;
  font-weight: 700;
  color: #e53935;
}

.price-value {
  font-family: $font-family-body;
  font-size: 38rpx;
  font-weight: 700;
  color: #e53935;
  line-height: 1;
}

.price-original {
  font-family: $font-family-body;
  font-size: 22rpx;
  color: $uv-placeholder-color;
  text-decoration: line-through;
  margin-left: 12rpx;
}

.btn-buy {
  width: auto;
  min-width: auto;
  height: 80rpx;
  padding: 0 56rpx;
  border-radius: 40rpx;
  background: $uv-primary;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(60, 156, 255, 0.3);
  transition: all 0.2s ease;

  &::after {
    display: none;
  }

  &:active:not([disabled]) {
    transform: scale(0.97);
  }

  &[disabled] {
    opacity: 0.6;
  }
}

.btn-buy__text {
  font-family: $font-family-body;
  font-size: 28rpx;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2rpx;
}
</style>