refactor: move pages to subpackages to reduce main package size

2026-06-26 11:59:59 +08:00
parent 4b7c540343
commit 4acb2e6a9c
18 changed files with 113 additions and 108 deletions
@@ -0,0 +1,194 @@
+<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: $color-card;
+  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;
+  min-height: $bar-height;
+  background: $color-card;
+  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: $color-price;
+}
+
+.price-value {
+  font-family: $font-family-body;
+  font-size: 38rpx;
+  font-weight: 700;
+  color: $color-price;
+  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>