feat: 新增绑卡激活、旅游卡购买、工会购买、使用说明、常见问题、订单管理页面

- 新增 pages/card-bind 绑卡激活页（证件类型下拉、照片上传、表单校验） - 新增 pages/card-buy 超级玩家卡购买页（微信支付） - 新增 pages/union-buy 工会购买页 - 新增 pages/usage-guide 使用说明页 - 新增 pages/faq 常见问题页（购买类/预约类/绑定类折叠问答） - 新增 pages/order 订单列表页（Tab筛选/下拉刷新/状态标签） - 新增 pages/order 订单详情页（状态差异化展示/卡号复制） - 登录页背景改为白色、按钮统一主色、协议未同意提示 - 首页金刚区跳转对接（绑卡/预约/入园/FAQ） - 旅游卡页使用说明跳转、景区权益改为使用说明 - 我的页面菜单跳转对接（订单/使用说明/FAQ） - 景区列表新增卡种筛选、吸顶区动态高度适配 - 全局统一思源宋体、主色#3c9cff、rpx单位 Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-26 00:32:21 +08:00
parent ff524ac973
commit 5ac924a76c
17 changed files with 3201 additions and 113 deletions
@@ -0,0 +1,199 @@
+<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>
+$font: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
+$primary: #398ade;
+$text-main: #111111;
+$text-hint: #666666;
+$text-weak: #999999;
+$bar-height: 120rpx;
+
+.page {
+  min-height: 100vh;
+  background: #ffffff;
+  padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
+  font-family: $font;
+}
+
+/* ===== 图片区域 ===== */
+.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;
+  font-size: 26rpx;
+  color: $text-hint;
+}
+
+.price-row {
+  display: flex;
+  align-items: baseline;
+}
+
+.price-symbol {
+  font-family: $font;
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #e53935;
+}
+
+.price-value {
+  font-family: $font;
+  font-size: 48rpx;
+  font-weight: 700;
+  color: #e53935;
+  line-height: 1;
+}
+
+.price-original {
+  font-family: $font;
+  font-size: 22rpx;
+  color: $text-weak;
+  text-decoration: line-through;
+  margin-left: 12rpx;
+}
+
+.btn-buy {
+  width: auto;
+  min-width: auto;
+  height: 80rpx;
+  padding: 0 56rpx;
+  border-radius: 40rpx;
+  background: $primary;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 16rpx rgba(57, 138, 222, 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;
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #ffffff;
+  letter-spacing: 2rpx;
+}
+</style>