consumer模块完成度85%，测试连接supabase

2026-01-28 17:28:50 +08:00
parent 66aa909193
commit a4fa00c935
18 changed files with 2108 additions and 1573 deletions
--- a/ak/config.uts
+++ b/ak/config.uts
@@ -1,12 +1,12 @@
 // Supabase 配置
 // 内网环境 - 本地部署的 Supabase
-// IP: 192.168.1.63
+// IP: 192.168.1.61 (Ubuntu服务器)
 // Kong HTTP Port: 8000
-export const SUPA_URL: string = 'http://192.168.1.63:8000'
+export const SUPA_URL: string = 'http://192.168.1.61:8000'
 export const SUPA_KEY: string = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzY4ODMwNjI0LCJleHAiOjE5MjY1MTA2MjR9.mDVl-kIOdRK9v6VTxo0TDF8r7X7xk3PZXazaavHyVvg'

 // WebSocket 实时连接（内网使用 ws:// 而非 wss://）
-export const WS_URL: string = 'ws://192.168.1.63:8000/realtime/v1/websocket'
+export const WS_URL: string = 'ws://192.168.1.61:8000/realtime/v1/websocket'

 // 备用配置（已注释，如需切换可取消注释）
 // 开发环境 - 其他内网地址
--- a/doc_mall/SUPABASE_DATA_MIGRATION_GUIDE.md
+++ b/doc_mall/SUPABASE_DATA_MIGRATION_GUIDE.md
@@ -0,0 +1,247 @@
+# Supabase 数据迁移指南
+
+## 概述
+
+本指南将帮助您将当前使用模拟数据的 uni-app 项目迁移到使用 Supabase 数据库。您的项目已经配置了连接到 Ubuntu 服务器上的 Supabase（IP: 192.168.1.61），现在需要创建数据库表并插入测试数据，然后修改前端代码以使用真实数据。
+
+## 第一步：在 Supabase 中创建数据库表
+
+### 方法一：通过 Supabase Dashboard 执行 SQL
+
+1. **打开 Supabase Dashboard**
+   - 访问：http://192.168.1.61:3000
+   - 使用 Dashboard 用户名和密码登录（位于 `supabase_pro/.env` 中的 `DASHBOARD_USERNAME` 和 `DASHBOARD_PASSWORD`）
+
+2. **进入 SQL Editor**
+   - 在左侧菜单中点击 "SQL Editor"
+   - 点击 "New query" 创建新查询
+
+3. **执行建表脚本**
+   - 复制 `sql/001_create_tables.sql` 文件中的全部内容
+   - 粘贴到 SQL Editor 中
+   - 点击 "Run" 执行
+
+4. **执行插入数据脚本**
+   - 复制 `sql/002_insert_test_data.sql` 文件中的全部内容
+   - 粘贴到 SQL Editor 中
+   - 点击 "Run" 执行
+
+### 方法二：通过命令行执行（如果 Supabase 运行在 Ubuntu 服务器上）
+
+```bash
+# 登录到 Ubuntu 服务器
+ssh hfkj@192.168.1.61
+
+# 进入 Supabase 项目目录（假设 Supabase 安装在默认位置）
+cd ~/supabase
+
+# 使用 psql 连接到数据库执行 SQL 脚本
+# 注意：需要知道数据库密码（位于 supabase_pro/.env 中的 POSTGRES_PASSWORD）
+PGPASSWORD=yxyHINygZMLSq9jLddrZQBB-CoyGHSF5DwlwWmbrYXc psql -h localhost -U postgres -d postgres -f /path/to/001_create_tables.sql
+PGPASSWORD=yxyHINygZMLSq9jLddrZQBB-CoyGHSF5DwlwWmbrYXc psql -h localhost -U postgres -d postgres -f /path/to/002_insert_test_data.sql
+```
+
+## 第二步：验证数据表创建成功
+
+### 在 Supabase Dashboard 中验证
+
+1. **查看 Tables**
+   - 在左侧菜单中点击 "Table Editor"
+   - 应该能看到 `categories` 和 `products` 表
+
+2. **查看数据**
+   - 点击 `categories` 表，应该能看到 10 条分类数据
+   - 点击 `products` 表，应该能看到 18 条商品数据
+
+### 通过 API 验证
+
+1. **测试分类 API**
+   ```
+   GET http://192.168.1.61:8000/rest/v1/categories
+   Headers: 
+     apikey: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzY4ODMwNjI0LCJleHAiOjE5MjY1MTA2MjR9.mDVl-kIOdRK9v6VTxo0TDF8r7X7xk3PZXazaavHyVvg
+   ```
+
+2. **测试商品 API**
+   ```
+   GET http://192.168.1.61:8000/rest/v1/products?category_id=eq.cold
+   Headers:
+     apikey: [同上]
+   ```
+
+## 第三步：修改前端代码使用真实数据
+
+### 1. 已创建的服务文件
+
+我已经创建了 `utils/supabaseService.uts` 文件，提供了以下功能：
+- `getCategories()` - 获取所有分类
+- `getProductsByCategory()` - 获取指定分类的商品
+- `searchProducts()` - 搜索商品
+- `getProductById()` - 获取单个商品详情
+- `getHotProducts()` - 获取热销商品
+- `getRecommendedProducts()` - 获取推荐商品
+
+### 2. 修改分类页面 (`pages/mall/consumer/category.uvue`)
+
+需要将硬编码的模拟数据替换为从 Supabase 获取的数据：
+
+```typescript
+// 在 script 部分添加导入
+import supabaseService from '@/utils/supabaseService.uts'
+import type { Category, Product } from '@/utils/supabaseService.uts'
+
+// 替换 medicineCategories 的初始化
+// 删除原有的 medicineCategories 数组定义
+
+// 修改 onMounted 或创建新的生命周期函数
+onMounted(async () => {
+  await loadCategories()
+  await loadProducts()
+})
+
+// 添加加载分类的方法
+const loadCategories = async () => {
+  const categories = await supabaseService.getCategories()
+  if (categories.length > 0) {
+    primaryCategories.value = categories
+    // 设置默认选中第一个分类
+    if (!activePrimary.value && categories[0]) {
+      activePrimary.value = categories[0].id
+    }
+  }
+}
+
+// 修改 selectPrimaryCategory 方法
+const selectPrimaryCategory = async (categoryId: string) => {
+  activePrimary.value = categoryId
+  
+  // 更新当前分类信息
+  const category = primaryCategories.value.find(cat => cat.id === categoryId)
+  if (category) {
+    currentCategoryName.value = category.name
+    currentCategoryDesc.value = category.description
+  }
+  
+  // 加载对应商品
+  const response = await supabaseService.getProductsByCategory(categoryId)
+  productList.value = response.data
+  hasMore.value = response.hasmore
+}
+```
+
+### 3. 修改主页 (`pages/mall/consumer/index.uvue`)
+
+如果主页显示商品，也需要修改为从 Supabase 获取：
+
+```typescript
+import supabaseService from '@/utils/supabaseService.uts'
+
+// 获取热销商品
+const loadHotProducts = async () => {
+  hotProducts.value = await supabaseService.getHotProducts(6)
+}
+
+// 获取推荐商品
+const loadRecommendedProducts = async () => {
+  recommendedProducts.value = await supabaseService.getRecommendedProducts(6)
+}
+```
+
+## 第四步：测试连接和数据
+
+### 1. 测试 Supabase 连接
+
+创建一个测试页面或使用现有的页面测试连接：
+
+```typescript
+// 测试代码示例
+const testConnection = async () => {
+  try {
+    const categories = await supabaseService.getCategories()
+    console.log('连接成功，获取到分类数:', categories.length)
+    uni.showToast({
+      title: `连接成功，获取到 ${categories.length} 个分类`,
+      icon: 'success'
+    })
+  } catch (error) {
+    console.error('连接失败:', error)
+    uni.showToast({
+      title: '连接失败，请检查配置',
+      icon: 'error'
+    })
+  }
+}
+```
+
+### 2. 测试数据加载
+
+在分类页面测试：
+1. 打开分类页面
+2. 检查分类列表是否显示
+3. 点击不同分类，检查商品列表是否更新
+4. 检查商品图片、价格等信息是否正确显示
+
+### 3. 测试搜索功能
+
+如果项目有搜索页面，测试搜索功能：
+1. 输入关键字搜索
+2. 检查返回的商品是否相关
+
+## 第五步：处理图片 URL
+
+### 当前情况
+- 数据库中的 `image` 字段目前为空或使用本地路径
+- 实际项目中，图片应该存储在 Supabase Storage 或 CDN
+
+### 临时解决方案
+在显示图片时，如果数据库中没有图片 URL，使用默认图片：
+
+```typescript
+const getProductImage = (product: Product) => {
+  if (product.image && product.image.startsWith('http')) {
+    return product.image
+  }
+  return '/static/images/default-product.png'
+}
+```
+
+### 长期解决方案
+1. 将图片上传到 Supabase Storage
+2. 更新数据库中的 `image` 字段为完整 URL
+
+## 常见问题解决
+
+### 1. 连接超时或失败
+- 检查 Ubuntu 服务器上的 Supabase 是否正常运行
+- 检查防火墙设置，确保 8000 和 3000 端口可访问
+- 检查 `ak/config.uts` 中的 IP 地址是否正确
+
+### 2. 401 未授权错误
+- 检查 `SUPA_KEY` 是否正确（与 `supabase_pro/.env` 中的 `ANON_KEY` 一致）
+- 检查 Supabase 是否已启用匿名访问
+
+### 3. 表不存在错误
+- 确认已执行 SQL 脚本创建表
+- 检查表名是否拼写正确（区分大小写）
+
+### 4. 数据不显示
+- 检查浏览器控制台是否有错误
+- 检查网络请求是否成功
+- 确认数据库中有数据
+
+## 下一步优化建议
+
+1. **添加加载状态**：在数据加载时显示加载动画
+2. **错误处理**：添加更完善的错误处理和重试机制
+3. **数据缓存**：使用本地存储缓存常用数据，减少网络请求
+4. **分页加载**：实现滚动加载更多商品
+5. **图片优化**：使用图片懒加载和压缩
+
+## 总结
+
+通过以上步骤，您的项目将从使用模拟数据过渡到使用 Supabase 数据库数据。主要工作包括：
+1. 在 Supabase 中创建表和插入测试数据
+2. 修改前端代码使用新的服务层
+3. 测试连接和数据加载
+
+完成后，您的应用将具备完整的后端数据支持，为后续添加用户管理、购物车、订单等功能打下基础。
--- a/pages.json
+++ b/pages.json
@@ -1,11 +1,12 @@
 {
  "pages": [
    {
-      "path": "pages/user/login",
+      "path": "pages/mall/consumer/index",
      "style": {
-        "navigationBarTitleText": "用户登录",
-        "navigationStyle": "custom"
-      }
+        "navigationBarTitleText": "首页",
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": true
+      }	  	  
    },
    {
      "path": "pages/user/boot",
@@ -44,11 +45,28 @@
      }
    },
    {
-      "path": "pages/mall/consumer/index",
+      "path": "pages/user/login",
      "style": {
-        "navigationBarTitleText": "首页",
-        "navigationStyle": "custom",
-        "enablePullDownRefresh": true
+        "navigationBarTitleText": "用户登录",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/user/change-password",
+      "style": {
+        "navigationBarTitleText": "修改密码"
+      }
+    },
+    {
+      "path": "pages/user/bind-phone",
+      "style": {
+        "navigationBarTitleText": "绑定手机"
+      }
+    },
+    {
+      "path": "pages/user/bind-email",
+      "style": {
+        "navigationBarTitleText": "绑定邮箱"
      }
    },
    {
@@ -75,9 +93,7 @@
      "style": {
        "navigationBarTitleText": "我的"
      }
-    }
-  ],
-  "subPackages": [
+    },
    {
      "path": "pages/mall/consumer/search",
      "style": {
@@ -195,8 +211,21 @@
        "navigationBarTitleText": "客服聊天",
        "navigationStyle": "custom"
      }
+    },
+    {
+      "path": "pages/mall/consumer/settings",
+      "style": {
+        "navigationBarTitleText": "设置"
+      }
+    },
+    {
+      "path": "pages/mall/consumer/wallet",
+      "style": {
+        "navigationBarTitleText": "我的钱包"
+      }
    }
  ],
+  "subPackages": [],
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#ff5000",
@@ -241,4 +270,4 @@
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#F8F8F8"
  }
-}
+}
--- a/pages/mall/consumer/cart.uvue
+++ b/pages/mall/consumer/cart.uvue
@@ -482,8 +482,18 @@ const goShopping = () => {
 const navigateToProduct = (product: any) => {
 	// 使用productId（如果存在）作为跳转的商品ID，否则使用id
 	const productId = product.productId || product.id
+	// 传递完整的参数，确保商品详情页能正确加载
+	const params = new URLSearchParams()
+	params.append('id', productId)
+	params.append('productId', productId)
+	params.append('price', product.price?.toString() || '0')
+	// 商品详情页期望的参数名是originalPrice
+	params.append('originalPrice', (product.original_price || product.originalPrice || (product.price * 1.2).toFixed(2))?.toString())
+	params.append('name', encodeURIComponent(product.name || ''))
+	params.append('image', encodeURIComponent(product.image || '/static/product1.jpg'))
+	
 	uni.navigateTo({ 
-		url: `/pages/mall/consumer/product-detail?id=${productId}&name=${encodeURIComponent(product.name)}&price=${product.price}&image=${encodeURIComponent(product.image)}` 
+		url: `/pages/mall/consumer/product-detail?${params.toString()}` 
 	})
 }

--- a/pages/mall/consumer/index.uvue
+++ b/pages/mall/consumer/index.uvue
@@ -346,6 +346,7 @@

 <script setup lang="uts">
 import { ref, reactive, onMounted } from 'vue'
+import { onShow } from '@dcloudio/uni-app'

 // 响应式数据
 const statusBarHeight = ref(0)
@@ -787,8 +788,20 @@ const addToCart = (product: any) => {
 const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/search' })
 const navigateToNews = () => uni.navigateTo({ url: '/pages/news/list' })
 const navigateToProduct = (product: any) => {
-	uni.navigateTo({
-		url: `/pages/mall/consumer/product-detail?productId=${product.id}&price=${product.price}&originalPrice=${product.originalPrice || ''}`
+	// 使用productId（如果存在）作为跳转的商品ID，否则使用id
+	const productId = product.productId || product.id
+	// 传递完整的参数，确保商品详情页能正确加载
+    // 移除 URLSearchParams 内部的 encodeURIComponent，因为 append 会自动编码
+    // 或者直接构建 URL 字符串以确保兼容性
+	
+    const name = product.name || ''
+    const image = product.image || '/static/product1.jpg'
+    const price = product.price?.toString() || '0'
+    const originalPrice = (product.original_price || product.originalPrice || (product.price * 1.2).toFixed(2))?.toString()
+    
+    // 手动构建URL，避免双重编码问题
+	uni.navigateTo({ 
+		url: `/pages/mall/consumer/product-detail?id=${productId}&productId=${productId}&price=${price}&originalPrice=${originalPrice}&name=${encodeURIComponent(name)}&image=${encodeURIComponent(image)}` 
 	})
 }
 const navigateToCategory = (item: any) => {
--- a/pages/mall/consumer/orders.uvue
+++ b/pages/mall/consumer/orders.uvue
@@ -156,7 +156,6 @@
 <script setup lang="uts">
 import { ref, reactive, onMounted, computed } from 'vue'
 import { onShow, onLoad } from '@dcloudio/uni-app'
-// // import supa from '@/components/supadb/aksupainstance.uts'

 // 响应式数据
 const orders = ref<any[]>([])
@@ -365,6 +364,13 @@ const loadOrders = async () => {
        if (ordersStr) {
            localOrders = JSON.parse(ordersStr as string) as any[]
        }
+
+        // 如果本地存储为空，使用 Mock 数据
+        if (localOrders.length === 0) {
+             localOrders = mockOrders
+             // 可选：将 Mock 数据写入本地存储，以便后续操作生效
+             // uni.setStorageSync('orders', JSON.stringify(mockOrders))
+        }
        
        // 过滤当前用户的订单
        // const userOrders = localOrders.filter((o: any) => o.user_id === userId)
--- a/pages/mall/consumer/product-detail.uvue
+++ b/pages/mall/consumer/product-detail.uvue
@@ -153,9 +153,27 @@ export default {
  onLoad(options: any) {
    const productId = options.productId as string || options.id as string
    const productPrice = options.price ? parseFloat(options.price) : null
-    const productOriginalPrice = options.original_price ? parseFloat(options.original_price) : null
-    const productName = options.name as string
-    const productImage = options.image as string
+    const productOriginalPrice = options.originalPrice ? parseFloat(options.originalPrice) : null
+    
+    // 处理商品名称：如果是编码的则解码，否则直接使用
+    let productName = options.name as string
+    if (productName) {
+        try {
+            // 尝试解码，如果失败（不是有效的URI组件）则使用原值
+            productName = decodeURIComponent(productName)
+        } catch (e) {
+            console.warn('ProductName decode failed, using original:', productName)
+        }
+    }
+    
+    let productImage = options.image as string
+    if (productImage) {
+        try {
+            productImage = decodeURIComponent(productImage)
+        } catch (e) {
+            console.warn('ProductImage decode failed, using original:', productImage)
+        }
+    }
    
    if (productId) {
      this.loadProductDetail(productId, {
@@ -166,6 +184,13 @@ export default {
      })
      this.checkFavoriteStatus(productId)
      this.saveFootprint(productId)
+      
+      // 设置导航栏标题为商品名称
+      if (productName) {
+          uni.setNavigationBarTitle({
+              title: productName
+          })
+      }
    }
  },
  computed: {
@@ -210,7 +235,6 @@ export default {
      if (footprints.length > 50) {
        footprints = footprints.slice(0, 50)
      }
-      
      uni.setStorageSync('footprints', JSON.stringify(footprints))
    },
    
--- a/pages/mall/consumer/settings.uvue
+++ b/pages/mall/consumer/settings.uvue
@@ -2,7 +2,7 @@
 <template>
 	<view class="settings-page">
 		<!-- 顶部栏 -->
-		<!--<view class="settings-header">
+		<!--<view class="settings-header" :style="{ paddingTop: statusBarHeight + 'px' }">
 			<text class="back-btn" @click="goBack">‹</text>
 			<text class="header-title">设置</text>
 		</view>-->
@@ -192,8 +192,20 @@

 <script setup lang="uts">
 import { ref, onMounted } from 'vue'
+import { onBackPress } from '@dcloudio/uni-app'
 // import supa from '@/components/supadb/aksupainstance.uts'

+// 拦截返回事件，强制跳转到个人中心页
+onBackPress((options) => {
+	// 无论是什么触发的返回（系统返回键或导航栏返回按钮），都跳转到profile
+	// 注意：onBackPress 只能在 page 中使用，component 中无效
+	uni.switchTab({
+		url: '/pages/mall/consumer/profile'
+	})
+	// 返回 true 表示阻止默认返回行为
+	return true
+})
+
 type UserType = {
 	id: string
 	phone: string | null
@@ -236,8 +248,12 @@ const currentLanguage = ref<string>('简体中文')
 const currentTheme = ref<string>('自动')
 const appVersion = ref<string>('1.0.0')

+const statusBarHeight = ref(0)
+
 // 生命周期
 onMounted(() => {
+	const systemInfo = uni.getSystemInfoSync()
+	statusBarHeight.value = systemInfo.statusBarHeight || 0
 	loadUserInfo()
 	loadSettings()
 })
@@ -564,11 +580,6 @@ const deleteAccount = () => {
 		}
 	})
 }
-
-// 返回
-const goBack = () => {
-	uni.navigateBack()
-}
 </script>

 <style scoped>
--- a/pages/mall/consumer/wallet.uvue
+++ b/pages/mall/consumer/wallet.uvue
@@ -7,113 +7,121 @@
 		</view>-->

 		<scroll-view class="wallet-content" scroll-y>
-			<!-- 余额概览 -->
-			<view class="balance-overview">
-				<text class="balance-label">账户余额</text>
-				<text class="balance-value">¥{{ balance.toFixed(2) }}</text>
-				<view class="balance-actions">
-					<button class="action-btn recharge" @click="recharge">充值</button>
-					<button class="action-btn withdraw" @click="withdraw">提现</button>
-				</view>
-			</view>
-
-			<!-- 资产统计 -->
-			<view class="assets-stats">
-				<view class="stat-item">
-					<text class="stat-label">累计充值</text>
-					<text class="stat-value">¥{{ stats.totalRecharge.toFixed(2) }}</text>
-				</view>
-				<view class="stat-item">
-					<text class="stat-label">累计消费</text>
-					<text class="stat-value">¥{{ stats.totalConsume.toFixed(2) }}</text>
-				</view>
-				<view class="stat-item">
-					<text class="stat-label">累计提现</text>
-					<text class="stat-value">¥{{ stats.totalWithdraw.toFixed(2) }}</text>
-				</view>
-			</view>
-
-			<!-- 快捷功能 -->
-			<view class="quick-actions">
-				<view class="action-grid">
-					<view class="action-item" @click="goToCoupons">
-						<text class="action-icon">🎫</text>
-						<text class="action-text">优惠券</text>
+			<view class="dashboard-container">
+				<!-- 左侧/顶部区域：资产信息 -->
+				<view class="dashboard-main">
+					<!-- 余额概览 -->
+					<view class="balance-overview">
+						<text class="balance-label">账户余额</text>
+						<text class="balance-value">¥{{ balance.toFixed(2) }}</text>
+						<view class="balance-actions">
+							<button class="action-btn recharge" @click="recharge">充值</button>
+							<button class="action-btn withdraw" @click="withdraw">提现</button>
+						</view>
 					</view>
-					<view class="action-item" @click="goToRedPackets">
-						<text class="action-icon">🧧</text>
-						<text class="action-text">红包</text>
+		
+					<!-- 资产统计 -->
+					<view class="assets-stats">
+						<view class="stat-item">
+							<text class="stat-label">累计充值</text>
+							<text class="stat-value">¥{{ stats.totalRecharge.toFixed(2) }}</text>
+						</view>
+						<view class="stat-item">
+							<text class="stat-label">累计消费</text>
+							<text class="stat-value">¥{{ stats.totalConsume.toFixed(2) }}</text>
+						</view>
+						<view class="stat-item">
+							<text class="stat-label">累计提现</text>
+							<text class="stat-value">¥{{ stats.totalWithdraw.toFixed(2) }}</text>
+						</view>
 					</view>
-					<view class="action-item" @click="goToPoints">
-						<text class="action-icon">⭐</text>
-						<text class="action-text">积分</text>
-					</view>
-					<view class="action-item" @click="goToBankCards">
-						<text class="action-icon">💳</text>
-						<text class="action-text">银行卡</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 交易记录 -->
-			<view class="transactions-section">
-				<view class="section-header">
-					<text class="section-title">交易记录</text>
-					<view class="filter-tabs">
-						<text :class="['filter-tab', { active: activeFilter === 'all' }]" 
-									@click="changeFilter('all')">全部</text>
-						<text :class="['filter-tab', { active: activeFilter === 'income' }]" 
-									@click="changeFilter('income')">收入</text>
-						<text :class="['filter-tab', { active: activeFilter === 'expense' }]" 
-									@click="changeFilter('expense')">支出</text>
-					</view>
-				</view>
-
-				<!-- 空状态 -->
-				<view v-if="transactions.length === 0 && !isLoading" class="empty-transactions">
-					<text class="empty-icon">💰</text>
-					<text class="empty-text">暂无交易记录</text>
-					<text class="empty-subtext">快去使用钱包功能吧</text>
-				</view>
-
-				<!-- 交易列表 -->
-				<view class="transactions-list">
-					<view v-for="transaction in transactions" 
-								:key="transaction.id" 
-								class="transaction-item">
-						<view class="transaction-left">
-							<text class="transaction-icon">{{ getTransactionIcon(transaction.type) }}</text>
-							<view class="transaction-info">
-								<text class="transaction-title">{{ getTransactionTitle(transaction.type) }}</text>
-								<text class="transaction-time">{{ formatTime(transaction.created_at) }}</text>
-								<text v-if="transaction.remark" class="transaction-remark">{{ transaction.remark }}</text>
+		
+					<!-- 快捷功能 -->
+					<view class="quick-actions">
+						<view class="action-grid">
+							<view class="action-item" @click="goToCoupons">
+								<text class="action-icon">🎫</text>
+								<text class="action-text">优惠券</text>
+							</view>
+							<view class="action-item" @click="goToRedPackets">
+								<text class="action-icon">🧧</text>
+								<text class="action-text">红包</text>
+							</view>
+							<view class="action-item" @click="goToPoints">
+								<text class="action-icon">⭐</text>
+								<text class="action-text">积分</text>
+							</view>
+							<view class="action-item" @click="goToBankCards">
+								<text class="action-icon">💳</text>
+								<text class="action-text">银行卡</text>
 							</view>
 						</view>
-						<view class="transaction-right">
-							<text :class="['transaction-amount', 
-													 { income: transaction.amount > 0, expense: transaction.amount < 0 }]">
-								{{ transaction.amount > 0 ? '+' : '' }}¥{{ Math.abs(transaction.amount).toFixed(2) }}
-							</text>
-							<text class="transaction-balance">余额: ¥{{ transaction.current_balance.toFixed(2) }}</text>
+					</view>
+					
+					<!-- 安全提示 (移动端在底部，PC端在左侧底部) -->
+					<view class="security-tips">
+						<text class="tip-title">安全提示</text>
+						<text class="tip-item">1. 请妥善保管您的支付密码</text>
+						<text class="tip-item">2. 不要向他人透露您的账户信息</text>
+						<text class="tip-item">3. 定期修改密码以确保账户安全</text>
+					</view>
+				</view>
+	
+				<!-- 右侧/底部区域：交易记录 -->
+				<view class="dashboard-side">
+					<!-- 交易记录 -->
+					<view class="transactions-section">
+						<view class="section-header">
+							<text class="section-title">交易记录</text>
+							<view class="filter-tabs">
+								<text :class="['filter-tab', { active: activeFilter === 'all' }]" 
+											@click="changeFilter('all')">全部</text>
+								<text :class="['filter-tab', { active: activeFilter === 'income' }]" 
+											@click="changeFilter('income')">收入</text>
+								<text :class="['filter-tab', { active: activeFilter === 'expense' }]" 
+											@click="changeFilter('expense')">支出</text>
+							</view>
+						</view>
+		
+						<!-- 空状态 -->
+						<view v-if="transactions.length === 0 && !isLoading" class="empty-transactions">
+							<text class="empty-icon">💰</text>
+							<text class="empty-text">暂无交易记录</text>
+							<text class="empty-subtext">快去使用钱包功能吧</text>
+						</view>
+		
+						<!-- 交易列表 -->
+						<view class="transactions-list">
+							<view v-for="transaction in transactions" 
+										:key="transaction.id" 
+										class="transaction-item">
+								<view class="transaction-left">
+									<text class="transaction-icon">{{ getTransactionIcon(transaction.type) }}</text>
+									<view class="transaction-info">
+										<text class="transaction-title">{{ getTransactionTitle(transaction.type) }}</text>
+										<text class="transaction-time">{{ formatTime(transaction.created_at) }}</text>
+										<text v-if="transaction.remark" class="transaction-remark">{{ transaction.remark }}</text>
+									</view>
+								</view>
+								<view class="transaction-right">
+									<text :class="['transaction-amount', 
+															 { income: transaction.amount > 0, expense: transaction.amount < 0 }]">
+										{{ transaction.amount > 0 ? '+' : '' }}¥{{ Math.abs(transaction.amount).toFixed(2) }}
+									</text>
+									<text class="transaction-balance">余额: ¥{{ transaction.current_balance.toFixed(2) }}</text>
+								</view>
+							</view>
+						</view>
+		
+						<!-- 加载更多 -->
+						<view v-if="isLoading" class="loading-more">
+							<text class="loading-text">加载中...</text>
+						</view>
+						<view v-if="!hasMore && transactions.length > 0" class="no-more">
+							<text class="no-more-text">没有更多记录了</text>
 						</view>
 					</view>
 				</view>
-
-				<!-- 加载更多 -->
-				<view v-if="isLoading" class="loading-more">
-					<text class="loading-text">加载中...</text>
-				</view>
-				<view v-if="!hasMore && transactions.length > 0" class="no-more">
-					<text class="no-more-text">没有更多记录了</text>
-				</view>
-			</view>
-
-			<!-- 安全提示 -->
-			<view class="security-tips">
-				<text class="tip-title">安全提示</text>
-				<text class="tip-item">1. 请妥善保管您的支付密码</text>
-				<text class="tip-item">2. 不要向他人透露您的账户信息</text>
-				<text class="tip-item">3. 定期修改密码以确保账户安全</text>
 			</view>
 		</scroll-view>

@@ -251,23 +259,26 @@ const loadBalance = async () => {
 	if (!userId) return

 	try {
-		const { data, error } = await supa
-			.from('user_wallets')
-			.select('*')
-			.eq('user_id', userId)
-			.single()
-
-		if (error !== null) {
-			console.error('加载钱包失败:', error)
-			return
+		// 使用本地模拟数据
+		const mockBalance = {
+			balance: 12580.00,
+			total_recharge: 20000.00,
+			total_consume: 7420.00,
+			total_withdraw: 0.00
 		}
+		
+		// 尝试从本地存储获取
+		const storedWallet = uni.getStorageSync(`wallet_${userId}`)
+		const data = storedWallet ? JSON.parse(storedWallet as string) : mockBalance

 		if (data) {
-			balance.value = data.balance || 0
+			// 类型断言，处理 any 类型
+			const walletData = data as any
+			balance.value = Number(walletData.balance || 0)
 			stats.value = {
-				totalRecharge: data.total_recharge || 0,
-				totalConsume: data.total_consume || 0,
-				totalWithdraw: data.total_withdraw || 0
+				totalRecharge: Number(walletData.total_recharge || 0),
+				totalConsume: Number(walletData.total_consume || 0),
+				totalWithdraw: Number(walletData.total_withdraw || 0)
 			}
 		}
 	} catch (err) {
@@ -289,30 +300,49 @@ const loadTransactions = async (loadMore: boolean = false) => {

 		const page = loadMore ? currentPage.value + 1 : 1
 		
-		let query = supa
-			.from('balance_records')
-			.select('*')
-			.eq('user_id', userId)
-			.order('created_at', { ascending: false })
+		// 模拟交易记录数据
+		const mockTransactions: TransactionType[] = [
+			{
+				id: 't1',
+				user_id: userId,
+				change_amount: -128.00,
+				current_balance: 12580.00,
+				change_type: 'consume',
+				related_id: 'ord_001',
+				remark: '购买药品',
+				created_at: new Date().toISOString()
+			},
+			{
+				id: 't2',
+				user_id: userId,
+				change_amount: 500.00,
+				current_balance: 12708.00,
+				change_type: 'recharge',
+				related_id: 'rec_001',
+				remark: '账户充值',
+				created_at: new Date(Date.now() - 86400000).toISOString()
+			},
+			{
+				id: 't3',
+				user_id: userId,
+				change_amount: -58.50,
+				current_balance: 12208.00,
+				change_type: 'consume',
+				related_id: 'ord_002',
+				remark: '购买保健品',
+				created_at: new Date(Date.now() - 172800000).toISOString()
+			}
+		]

-		// 根据过滤器筛选
+		// 简单模拟分页和筛选
+		let filtered = mockTransactions
 		if (activeFilter.value === 'income') {
-			query = query.gt('change_amount', 0)
+			filtered = filtered.filter(t => t.change_amount > 0)
 		} else if (activeFilter.value === 'expense') {
-			query = query.lt('change_amount', 0)
+			filtered = filtered.filter(t => t.change_amount < 0)
 		}
-
-		// 分页
-		query = query.range((page - 1) * pageSize.value, page * pageSize.value - 1)
-
-		const { data, error } = await query
-
-		if (error !== null) {
-			console.error('加载交易记录失败:', error)
-			return
-		}
-
-		const newTransactions = data || []
+		
+		const newTransactions = filtered

 		if (loadMore) {
 			transactions.value.push(...newTransactions)
@@ -322,7 +352,8 @@ const loadTransactions = async (loadMore: boolean = false) => {
 			currentPage.value = 1
 		}

-		hasMore.value = newTransactions.length === pageSize.value
+		// 模拟没有更多数据
+		hasMore.value = false
 	} catch (err) {
 		console.error('加载交易记录异常:', err)
 	} finally {
@@ -484,6 +515,34 @@ const goBack = () => {
 </script>

 <style scoped>
+/* 基础样式 */
+.wallet-page {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	background-color: #f5f5f5;
+}
+
+.wallet-content {
+	flex: 1;
+}
+
+.dashboard-container {
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 20px;
+}
+
+.dashboard-main {
+	display: flex;
+	flex-direction: column;
+}
+
+.dashboard-side {
+	display: flex;
+	flex-direction: column;
+}
+
 /* 响应式布局优化 */
@media screen and (min-width: 768px) {
 	.wallet-content {
@@ -491,22 +550,16 @@ const goBack = () => {
 		background-color: #f5f5f5;
 	}

-	.balance-overview {
+	.dashboard-container {
+		max-width: 800px;
+		margin: 0 auto;
+		width: 100%;
+	}
+	
+	.balance-overview, .assets-stats, .quick-actions, .transactions-section, .security-tips {
 		border-radius: 12px;
-		margin-bottom: 20px;
-		max-width: 800px;
-		margin-left: auto;
-		margin-right: auto;
 	}
-
-	.assets-stats, .quick-actions, .transactions-section, .security-tips {
-		border-radius: 8px;
-		margin-bottom: 20px;
-		max-width: 800px;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
+	
 	.popup-content {
 		width: 400px;
 		left: 50%;
@@ -518,46 +571,48 @@ const goBack = () => {

@media screen and (min-width: 1024px) {
 	.wallet-page {
-		flex-direction: row; /* 大屏下改为横向布局 */
-	}
-
-	.wallet-header {
-		display: none; /* 大屏下隐藏顶部栏 */
+		flex-direction: column; /* 保持纵向，内容区内部处理横向 */
 	}
 	
 	.wallet-content {
 		width: 100%;
-		max-width: 1000px;
+		max-width: 1200px;
 		margin: 0 auto;
 	}
+	
+	.dashboard-container {
+		flex-direction: row; /* 横向排列 */
+		align-items: flex-start;
+		gap: 20px;
+		max-width: 100%;
+	}
+	
+	.dashboard-main {
+		width: 400px; /* 左侧固定宽度 */
+		flex-shrink: 0;
+	}
+	
+	.dashboard-side {
+		flex: 1; /* 右侧自适应 */
+		min-width: 0;
+	}
+	
+	/* 调整各模块间距 */
+	.balance-overview, 
+	.assets-stats, 
+	.quick-actions, 
+	.security-tips {
+		margin-bottom: 20px;
+	}
+	
+	.transactions-section {
+		margin-top: 0; /* 移除顶部间距，与左侧对齐 */
+		height: 100%;
+		min-height: 600px; /* 保证右侧高度 */
+	}
 }

-.wallet-page {
-	display: flex;
-	flex-direction: column;
-	height: 100vh;
-	background-color: #f5f5f5;
-}
-
-.wallet-header {
-	background-color: #ffffff;
-	padding: 15px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	border-bottom: 1px solid #e5e5e5;
-}
-
-.back-btn {
-	font-size: 24px;
-	color: #333333;
-	padding: 5px;
-}
-
-.wallet-content {
-	flex: 1;
-}
-
+/* 模块样式 */
 .balance-overview {
 	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 	padding: 30px 20px;
--- a/pages/mall/consumer/wallett.uvue
+++ b/pages/mall/consumer/wallett.uvue
@@ -0,0 +1,984 @@
+<!-- 钱包页面 -->
+<template>
+	<view class="wallet-page">
+		<!-- 顶部栏 -->
+		<!--<view class="wallet-header">
+			<text class="back-btn" @click="goBack">‹</text>
+		</view>-->
+
+		<scroll-view class="wallet-content" scroll-y>
+			<!-- 余额概览 -->
+			<view class="balance-overview">
+				<text class="balance-label">账户余额</text>
+				<text class="balance-value">¥{{ balance.toFixed(2) }}</text>
+				<view class="balance-actions">
+					<button class="action-btn recharge" @click="recharge">充值</button>
+					<button class="action-btn withdraw" @click="withdraw">提现</button>
+				</view>
+			</view>
+
+			<!-- 资产统计 -->
+			<view class="assets-stats">
+				<view class="stat-item">
+					<text class="stat-label">累计充值</text>
+					<text class="stat-value">¥{{ stats.totalRecharge.toFixed(2) }}</text>
+				</view>
+				<view class="stat-item">
+					<text class="stat-label">累计消费</text>
+					<text class="stat-value">¥{{ stats.totalConsume.toFixed(2) }}</text>
+				</view>
+				<view class="stat-item">
+					<text class="stat-label">累计提现</text>
+					<text class="stat-value">¥{{ stats.totalWithdraw.toFixed(2) }}</text>
+				</view>
+			</view>
+
+			<!-- 快捷功能 -->
+			<view class="quick-actions">
+				<view class="action-grid">
+					<view class="action-item" @click="goToCoupons">
+						<text class="action-icon">🎫</text>
+						<text class="action-text">优惠券</text>
+					</view>
+					<view class="action-item" @click="goToRedPackets">
+						<text class="action-icon">🧧</text>
+						<text class="action-text">红包</text>
+					</view>
+					<view class="action-item" @click="goToPoints">
+						<text class="action-icon">⭐</text>
+						<text class="action-text">积分</text>
+					</view>
+					<view class="action-item" @click="goToBankCards">
+						<text class="action-icon">💳</text>
+						<text class="action-text">银行卡</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 交易记录 -->
+			<view class="transactions-section">
+				<view class="section-header">
+					<text class="section-title">交易记录</text>
+					<view class="filter-tabs">
+						<text :class="['filter-tab', { active: activeFilter === 'all' }]" 
+									@click="changeFilter('all')">全部</text>
+						<text :class="['filter-tab', { active: activeFilter === 'income' }]" 
+									@click="changeFilter('income')">收入</text>
+						<text :class="['filter-tab', { active: activeFilter === 'expense' }]" 
+									@click="changeFilter('expense')">支出</text>
+					</view>
+				</view>
+
+				<!-- 空状态 -->
+				<view v-if="transactions.length === 0 && !isLoading" class="empty-transactions">
+					<text class="empty-icon">💰</text>
+					<text class="empty-text">暂无交易记录</text>
+					<text class="empty-subtext">快去使用钱包功能吧</text>
+				</view>
+
+				<!-- 交易列表 -->
+				<view class="transactions-list">
+					<view v-for="transaction in transactions" 
+								:key="transaction.id" 
+								class="transaction-item">
+						<view class="transaction-left">
+							<text class="transaction-icon">{{ getTransactionIcon(transaction.type) }}</text>
+							<view class="transaction-info">
+								<text class="transaction-title">{{ getTransactionTitle(transaction.type) }}</text>
+								<text class="transaction-time">{{ formatTime(transaction.created_at) }}</text>
+								<text v-if="transaction.remark" class="transaction-remark">{{ transaction.remark }}</text>
+							</view>
+						</view>
+						<view class="transaction-right">
+							<text :class="['transaction-amount', 
+													 { income: transaction.amount > 0, expense: transaction.amount < 0 }]">
+								{{ transaction.amount > 0 ? '+' : '' }}¥{{ Math.abs(transaction.amount).toFixed(2) }}
+							</text>
+							<text class="transaction-balance">余额: ¥{{ transaction.current_balance.toFixed(2) }}</text>
+						</view>
+					</view>
+				</view>
+
+				<!-- 加载更多 -->
+				<view v-if="isLoading" class="loading-more">
+					<text class="loading-text">加载中...</text>
+				</view>
+				<view v-if="!hasMore && transactions.length > 0" class="no-more">
+					<text class="no-more-text">没有更多记录了</text>
+				</view>
+			</view>
+
+			<!-- 安全提示 -->
+			<view class="security-tips">
+				<text class="tip-title">安全提示</text>
+				<text class="tip-item">1. 请妥善保管您的支付密码</text>
+				<text class="tip-item">2. 不要向他人透露您的账户信息</text>
+				<text class="tip-item">3. 定期修改密码以确保账户安全</text>
+			</view>
+		</scroll-view>
+
+		<!-- 充值弹窗 -->
+		<view v-if="showRechargePopup" class="recharge-popup">
+			<view class="popup-mask" @click="closeRechargePopup"></view>
+			<view class="popup-content">
+				<view class="popup-header">
+					<text class="popup-title">充值</text>
+					<text class="popup-close" @click="closeRechargePopup">×</text>
+				</view>
+				<view class="popup-body">
+					<text class="amount-label">充值金额</text>
+					<view class="amount-input">
+						<text class="currency-symbol">¥</text>
+						<input class="amount-field" 
+									 v-model="rechargeAmount" 
+									 type="number" 
+									 placeholder="请输入充值金额"
+									 focus />
+					</view>
+					<view class="quick-amounts">
+						<text v-for="amount in quickAmounts" 
+									:key="amount" 
+									:class="['quick-amount', { active: rechargeAmount === amount.toString() }]"
+									@click="selectQuickAmount(amount)">
+							¥{{ amount }}
+						</text>
+					</view>
+					<text class="recharge-tip">单笔充值最低10元，最高5000元</text>
+				</view>
+				<view class="popup-footer">
+					<button class="cancel-btn" @click="closeRechargePopup">取消</button>
+					<button class="confirm-btn" 
+									:class="{ disabled: !canRecharge }"
+									@click="confirmRecharge">
+						确认充值
+					</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+import { ref, onMounted, computed, watch } from 'vue'
+//import supa from '@/components/supadb/aksupainstance.uts'
+
+type WalletType = {
+	id: string
+	user_id: string
+	balance: number
+	total_recharge: number
+	total_consume: number
+	total_withdraw: number
+	updated_at: string
+}
+
+type TransactionType = {
+	id: string
+	user_id: string
+	change_amount: number
+	current_balance: number
+	change_type: string // 'recharge' | 'consume' | 'withdraw' | 'refund' | 'reward'
+	related_id: string | null
+	remark: string | null
+	created_at: string
+}
+
+type StatsType = {
+	totalRecharge: number
+	totalConsume: number
+	totalWithdraw: number
+}
+
+const balance = ref<number>(0)
+const stats = ref<StatsType>({
+	totalRecharge: 0,
+	totalConsume: 0,
+	totalWithdraw: 0
+})
+const transactions = ref<Array<TransactionType>>([])
+const activeFilter = ref<string>('all')
+const isLoading = ref<boolean>(false)
+const currentPage = ref<number>(1)
+const pageSize = ref<number>(20)
+const hasMore = ref<boolean>(true)
+const showRechargePopup = ref<boolean>(false)
+const rechargeAmount = ref<string>('')
+const quickAmounts = [50, 100, 200, 500, 1000]
+
+// 计算属性
+const canRecharge = computed(() => {
+	const amount = parseFloat(rechargeAmount.value)
+	return !isNaN(amount) && amount >= 10 && amount <= 5000
+})
+
+// 监听过滤器变化
+watch(activeFilter, () => {
+	resetTransactions()
+	loadTransactions()
+})
+
+// 生命周期
+onMounted(() => {
+	loadWalletData()
+})
+
+// 重置交易记录
+const resetTransactions = () => {
+	transactions.value = []
+	currentPage.value = 1
+	hasMore.value = true
+}
+
+// 加载钱包数据
+const loadWalletData = async () => {
+	const userId = getCurrentUserId()
+	if (!userId) {
+		uni.navigateTo({
+			url: '/pages/user/login'
+		})
+		return
+	}
+
+	await Promise.all([
+		loadBalance(),
+		loadTransactions()
+	])
+}
+
+// 加载余额信息
+const loadBalance = async () => {
+	const userId = getCurrentUserId()
+	if (!userId) return
+
+	try {
+		const { data, error } = await supa
+			.from('user_wallets')
+			.select('*')
+			.eq('user_id', userId)
+			.single()
+
+		if (error !== null) {
+			console.error('加载钱包失败:', error)
+			return
+		}
+
+		if (data) {
+			balance.value = data.balance || 0
+			stats.value = {
+				totalRecharge: data.total_recharge || 0,
+				totalConsume: data.total_consume || 0,
+				totalWithdraw: data.total_withdraw || 0
+			}
+		}
+	} catch (err) {
+		console.error('加载钱包异常:', err)
+	}
+}
+
+// 加载交易记录
+const loadTransactions = async (loadMore: boolean = false) => {
+	if (isLoading.value || (!hasMore.value && loadMore)) {
+		return
+	}
+
+	isLoading.value = true
+
+	try {
+		const userId = getCurrentUserId()
+		if (!userId) return
+
+		const page = loadMore ? currentPage.value + 1 : 1
+		
+		let query = supa
+			.from('balance_records')
+			.select('*')
+			.eq('user_id', userId)
+			.order('created_at', { ascending: false })
+
+		// 根据过滤器筛选
+		if (activeFilter.value === 'income') {
+			query = query.gt('change_amount', 0)
+		} else if (activeFilter.value === 'expense') {
+			query = query.lt('change_amount', 0)
+		}
+
+		// 分页
+		query = query.range((page - 1) * pageSize.value, page * pageSize.value - 1)
+
+		const { data, error } = await query
+
+		if (error !== null) {
+			console.error('加载交易记录失败:', error)
+			return
+		}
+
+		const newTransactions = data || []
+
+		if (loadMore) {
+			transactions.value.push(...newTransactions)
+			currentPage.value = page
+		} else {
+			transactions.value = newTransactions
+			currentPage.value = 1
+		}
+
+		hasMore.value = newTransactions.length === pageSize.value
+	} catch (err) {
+		console.error('加载交易记录异常:', err)
+	} finally {
+		isLoading.value = false
+	}
+}
+
+// 获取当前用户ID
+const getCurrentUserId = (): string => {
+	const userStore = uni.getStorageSync('userInfo')
+	return userStore?.id || ''
+}
+
+// 获取交易图标
+const getTransactionIcon = (type: string): string => {
+	const icons: Record<string, string> = {
+		recharge: '💳',
+		consume: '🛒',
+		withdraw: '🏦',
+		refund: '🔄',
+		reward: '🎁',
+		income: '💰',
+		expense: '📤'
+	}
+	return icons[type] || '💰'
+}
+
+// 获取交易标题
+const getTransactionTitle = (type: string): string => {
+	const titles: Record<string, string> = {
+		recharge: '账户充值',
+		consume: '商品消费',
+		withdraw: '余额提现',
+		refund: '订单退款',
+		reward: '活动奖励',
+		income: '收入',
+		expense: '支出'
+	}
+	return titles[type] || '交易'
+}
+
+// 格式化时间
+const formatTime = (timeStr: string): string => {
+	const date = new Date(timeStr)
+	const month = (date.getMonth() + 1).toString().padStart(2, '0')
+	const day = date.getDate().toString().padStart(2, '0')
+	const hours = date.getHours().toString().padStart(2, '0')
+	const minutes = date.getMinutes().toString().padStart(2, '0')
+	return `${month}-${day} ${hours}:${minutes}`
+}
+
+// 显示更多操作
+const showMoreActions = () => {
+	uni.showActionSheet({
+		itemList: ['交易记录', '安全设置', '帮助中心'],
+		success: (res) => {
+			switch (res.tapIndex) {
+				case 0:
+					// 交易记录已经在当前页
+					break
+				case 1:
+					uni.navigateTo({
+						url: '/pages/mall/consumer/settings'
+					})
+					break
+				case 2:
+					uni.navigateTo({
+						url: '/pages/info/help'
+					})
+					break
+			}
+		}
+	})
+}
+
+// 充值
+const recharge = () => {
+	showRechargePopup.value = true
+	rechargeAmount.value = ''
+}
+
+// 提现
+const withdraw = () => {
+	uni.navigateTo({
+		url: '/pages/mall/consumer/withdraw'
+	})
+}
+
+// 跳转到优惠券
+const goToCoupons = () => {
+	uni.navigateTo({
+		url: '/pages/mall/consumer/coupons'
+	})
+}
+
+// 跳转到红包
+const goToRedPackets = () => {
+	uni.navigateTo({
+		url: '/pages/mall/consumer/red-packets'
+	})
+}
+
+// 跳转到积分
+const goToPoints = () => {
+	uni.navigateTo({
+		url: '/pages/mall/consumer/points'
+	})
+}
+
+// 跳转到银行卡
+const goToBankCards = () => {
+	uni.navigateTo({
+		url: '/pages/mall/consumer/bank-cards'
+	})
+}
+
+// 切换过滤器
+const changeFilter = (filter: string) => {
+	activeFilter.value = filter
+}
+
+// 加载更多
+const loadMore = () => {
+	if (hasMore.value && !isLoading.value) {
+		loadTransactions(true)
+	}
+}
+
+// 选择快捷金额
+const selectQuickAmount = (amount: number) => {
+	rechargeAmount.value = amount.toString()
+}
+
+// 确认充值
+const confirmRecharge = async () => {
+	if (!canRecharge.value) return
+
+	const amount = parseFloat(rechargeAmount.value)
+	if (isNaN(amount)) return
+
+	// 这里应该跳转到支付页面进行充值
+	uni.navigateTo({
+		url: `/pages/mall/consumer/payment?type=recharge&amount=${amount}`
+	})
+	
+	closeRechargePopup()
+}
+
+// 关闭充值弹窗
+const closeRechargePopup = () => {
+	showRechargePopup.value = false
+	rechargeAmount.value = ''
+}
+
+// 返回
+const goBack = () => {
+	uni.navigateBack()
+}
+</script>
+
+<style scoped>
+/* 响应式布局优化 */
+@media screen and (min-width: 768px) {
+	.wallet-content {
+		padding: 20px;
+		background-color: #f5f5f5;
+	}
+
+	.balance-overview {
+		border-radius: 12px;
+		margin-bottom: 20px;
+		max-width: 800px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.assets-stats, .quick-actions, .transactions-section, .security-tips {
+		border-radius: 8px;
+		margin-bottom: 20px;
+		max-width: 800px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.popup-content {
+		width: 400px;
+		left: 50%;
+		bottom: 50%;
+		transform: translate(-50%, 50%);
+		border-radius: 15px;
+	}
+}
+
+@media screen and (min-width: 1024px) {
+	.wallet-page {
+		flex-direction: row; /* 大屏下改为横向布局 */
+	}
+
+	.wallet-header {
+		display: none; /* 大屏下隐藏顶部栏 */
+	}
+	
+	.wallet-content {
+		width: 100%;
+		max-width: 1000px;
+		margin: 0 auto;
+	}
+}
+
+.wallet-page {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	background-color: #f5f5f5;
+}
+
+.wallet-header {
+	background-color: #ffffff;
+	padding: 15px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px solid #e5e5e5;
+}
+
+.back-btn {
+	font-size: 24px;
+	color: #333333;
+	padding: 5px;
+}
+
+.wallet-content {
+	flex: 1;
+}
+
+.balance-overview {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	padding: 30px 20px;
+	color: #ffffff;
+}
+
+.balance-label {
+	display: block;
+	font-size: 14px;
+	opacity: 0.9;
+	margin-bottom: 10px;
+	text-align: center;
+}
+
+.balance-value {
+	display: block;
+	font-size: 36px;
+	font-weight: bold;
+	margin-bottom: 20px;
+	text-align: center;
+}
+
+.balance-actions {
+	display: flex;
+	gap: 20px;
+}
+
+.action-btn {
+	flex: 1;
+	height: 40px;
+	border-radius: 20px;
+	font-size: 14px;
+	font-weight: bold;
+	border: none;
+}
+
+.action-btn.recharge {
+	background-color: #ffffff;
+	color: #667eea;
+}
+
+.action-btn.withdraw {
+	background-color: rgba(255, 255, 255, 0.2);
+	color: #ffffff;
+	border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.assets-stats {
+	background-color: #ffffff;
+	padding: 20px;
+	display: flex;
+	justify-content: space-between;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.stat-item {
+	flex: 1;
+	text-align: center;
+}
+
+.stat-label {
+	display: block;
+	font-size: 12px;
+	color: #666666;
+	margin-bottom: 8px;
+}
+
+.stat-value {
+	display: block;
+	font-size: 16px;
+	font-weight: bold;
+	color: #333333;
+}
+
+.quick-actions {
+	background-color: #ffffff;
+	margin-top: 10px;
+	padding: 20px;
+}
+
+.action-grid {
+	display: flex;
+	justify-content: space-between;
+}
+
+.action-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.action-icon {
+	font-size: 28px;
+	margin-bottom: 8px;
+}
+
+.action-text {
+	font-size: 12px;
+	color: #666666;
+}
+
+.transactions-section {
+	background-color: #ffffff;
+	margin-top: 10px;
+	padding: 15px;
+}
+
+.section-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 15px;
+}
+
+.section-title {
+	font-size: 16px;
+	font-weight: bold;
+	color: #333333;
+}
+
+.filter-tabs {
+	display: flex;
+	gap: 15px;
+}
+
+.filter-tab {
+	font-size: 14px;
+	color: #666666;
+	padding: 5px 0;
+	position: relative;
+}
+
+.filter-tab.active {
+	color: #007aff;
+	font-weight: bold;
+}
+
+.filter-tab.active::after {
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 2px;
+	background-color: #007aff;
+}
+
+.empty-transactions {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 40px 20px;
+}
+
+.empty-icon {
+	font-size: 60px;
+	margin-bottom: 20px;
+}
+
+.empty-text {
+	font-size: 16px;
+	color: #666666;
+	margin-bottom: 10px;
+}
+
+.empty-subtext {
+	font-size: 14px;
+	color: #999999;
+}
+
+.transactions-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.transaction-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	padding: 15px 0;
+	border-bottom: 1px solid #f5f5f5;
+}
+
+.transaction-item:last-child {
+	border-bottom: none;
+}
+
+.transaction-left {
+	display: flex;
+	align-items: flex-start;
+}
+
+.transaction-icon {
+	font-size: 24px;
+	margin-right: 15px;
+}
+
+.transaction-info {
+	display: flex;
+	flex-direction: column;
+}
+
+.transaction-title {
+	font-size: 14px;
+	color: #333333;
+	font-weight: bold;
+	margin-bottom: 5px;
+}
+
+.transaction-time {
+	font-size: 12px;
+	color: #999999;
+	margin-bottom: 3px;
+}
+
+.transaction-remark {
+	font-size: 12px;
+	color: #666666;
+}
+
+.transaction-right {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.transaction-amount {
+	font-size: 16px;
+	font-weight: bold;
+	margin-bottom: 5px;
+}
+
+.transaction-amount.income {
+	color: #4caf50;
+}
+
+.transaction-amount.expense {
+	color: #333333;
+}
+
+.transaction-balance {
+	font-size: 12px;
+	color: #999999;
+}
+
+.loading-more,
+.no-more {
+	padding: 20px;
+	text-align: center;
+}
+
+.loading-text,
+.no-more-text {
+	color: #999999;
+	font-size: 14px;
+}
+
+.security-tips {
+	background-color: #ffffff;
+	margin-top: 10px;
+	padding: 20px;
+}
+
+.tip-title {
+	display: block;
+	font-size: 16px;
+	font-weight: bold;
+	color: #333333;
+	margin-bottom: 15px;
+}
+
+.tip-item {
+	display: block;
+	font-size: 12px;
+	color: #666666;
+	line-height: 1.6;
+	margin-bottom: 8px;
+}
+
+.tip-item:last-child {
+	margin-bottom: 0;
+}
+
+.recharge-popup {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 999;
+}
+
+.popup-mask {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+}
+
+.popup-content {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: #ffffff;
+	border-top-left-radius: 15px;
+	border-top-right-radius: 15px;
+	padding: 20px;
+}
+
+.popup-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+	padding-bottom: 15px;
+	border-bottom: 1px solid #e5e5e5;
+}
+
+.popup-title {
+	font-size: 18px;
+	font-weight: bold;
+	color: #333333;
+}
+
+.popup-close {
+	font-size: 24px;
+	color: #999999;
+	padding: 5px;
+}
+
+.popup-body {
+	margin-bottom: 20px;
+}
+
+.amount-label {
+	display: block;
+	font-size: 14px;
+	color: #333333;
+	margin-bottom: 10px;
+}
+
+.amount-input {
+	display: flex;
+	align-items: center;
+	margin-bottom: 20px;
+	padding: 10px;
+	border: 1px solid #e5e5e5;
+	border-radius: 8px;
+}
+
+.currency-symbol {
+	font-size: 20px;
+	color: #333333;
+	margin-right: 10px;
+}
+
+.amount-field {
+	flex: 1;
+	font-size: 24px;
+	font-weight: bold;
+	color: #333333;
+}
+
+.quick-amounts {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	margin-bottom: 15px;
+}
+
+.quick-amount {
+	padding: 8px 15px;
+	border: 1px solid #e5e5e5;
+	border-radius: 15px;
+	font-size: 14px;
+	color: #333333;
+}
+
+.quick-amount.active {
+	background-color: #007aff;
+	color: #ffffff;
+	border-color: #007aff;
+}
+
+.recharge-tip {
+	display: block;
+	font-size: 12px;
+	color: #999999;
+}
+
+.popup-footer {
+	display: flex;
+	gap: 15px;
+}
+
+.cancel-btn,
+.confirm-btn {
+	flex: 1;
+	height: 45px;
+	border-radius: 22.5px;
+	font-size: 16px;
+	font-weight: bold;
+	border: none;
+}
+
+.cancel-btn {
+	background-color: #f5f5f5;
+	color: #666666;
+}
+
+.confirm-btn {
+	background-color: #007aff;
+	color: #ffffff;
+}
+
+.confirm-btn.disabled {
+	background-color: #cccccc;
+	opacity: 0.6;
+}
+</style>
--- a/pages/user/bind-email.uvue
+++ b/pages/user/bind-email.uvue
@@ -1,544 +1,135 @@
 <template>
-	<view class="bind-email-page">
-		<view class="header">
-			<view class="back-btn" @click="goBack">
-				<text class="back-icon">‹</text>
-			</view>
-			<text class="header-title">绑定邮箱</text>
-		</view>
-
-		<view class="content">
-			<view v-if="userInfo.email" class="already-bound">
-				<text class="bound-icon">✓</text>
-				<text class="bound-title">已绑定邮箱</text>
-				<text class="bound-email">{{ userInfo.email }}</text>
-				<text class="bound-time">绑定时间：{{ formatTime(userInfo.emailBoundTime) }}</text>
-			</view>
-
-			<form @submit="onSubmit" v-if="!userInfo.email || isChanging">
-				<!-- 邮箱输入 -->
-				<view class="form-item">
-					<text class="label">邮箱地址</text>
-					<input 
-						class="input" 
-						type="email" 
-						placeholder="请输入邮箱地址" 
-						v-model="form.email"
-						:disabled="loading"
-						required
-					/>
-				</view>
-
-				<!-- 验证码 -->
-				<view class="form-item">
-					<text class="label">验证码</text>
-					<view class="code-input-wrapper">
-						<input 
-							class="code-input" 
-							type="number" 
-							placeholder="请输入验证码" 
-							v-model="form.code"
-							:disabled="loading"
-							maxlength="6"
-							required
-						/>
-						<button 
-							class="get-code-btn" 
-							@click="getCode"
-							:disabled="!canGetCode || countdown > 0"
-						>
-							{{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
-						</button>
-					</view>
-				</view>
-
-				<!-- 提交按钮 -->
-				<button 
-					class="submit-btn" 
-					form-type="submit" 
-					:disabled="loading || !isFormValid"
-					:loading="loading"
-				>
-					{{ loading ? '处理中...' : userInfo.email ? '更换邮箱' : '绑定邮箱' }}
-				</button>
-			</form>
-
-			<view v-if="userInfo.email && !isChanging" class="action-buttons">
-				<button class="change-btn" @click="startChange">更换邮箱</button>
-				<button class="unbind-btn" @click="unbindEmail">解绑邮箱</button>
-			</view>
-		</view>
-
-		<!-- 成功提示 -->
-		<view v-if="showSuccess" class="success-modal" @click="hideSuccess">
-			<view class="success-content" @click.stop>
-				<text class="success-icon">✓</text>
-				<text class="success-title">{{ successTitle }}</text>
-				<text class="success-text">{{ successMessage }}</text>
-				<button class="success-btn" @click="hideSuccess">确定</button>
-			</view>
-		</view>
-	</view>
+  <view class="page-container">
+    <view class="form-group">
+      <view class="input-item">
+        <text class="label">邮箱</text>
+        <input class="input" type="text" placeholder="请输入邮箱地址" v-model="email" />
+      </view>
+      <view class="input-item">
+        <text class="label">验证码</text>
+        <input class="input" type="number" placeholder="请输入验证码" v-model="code" maxlength="6" />
+        <text class="code-btn" @click="sendCode">{{ counting ? `${count}s` : '获取验证码' }}</text>
+      </view>
+    </view>
+    
+    <button class="submit-btn" @click="handleSubmit">确认绑定</button>
+  </view>
 </template>

 <script setup lang="uts">
-import { ref, computed, onMounted } from 'vue'
-//import supa from '@/components/supadb/aksupainstance.uts'
+import { ref } from 'vue'

-// 用户信息
-const userInfo = ref({
-	email: '',
-	emailBoundTime: null as string | null
-})
+const email = ref('')
+const code = ref('')
+const counting = ref(false)
+const count = ref(60)

-const form = ref({
-	email: '',
-	code: ''
-})
-
-const loading = ref<boolean>(false)
-const countdown = ref<number>(0)
-const isChanging = ref<boolean>(false)
-const showSuccess = ref<boolean>(false)
-const successTitle = ref<string>('')
-const successMessage = ref<string>('')
-
-// 表单验证
-const isFormValid = computed((): boolean => {
-	const { email, code } = form.value
-	const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-	return emailRegex.test(email) && /^\d{6}$/.test(code)
-})
-
-// 是否可以获取验证码
-const canGetCode = computed((): boolean => {
-	const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-	return emailRegex.test(form.value.email)
-})
-
-// 加载用户信息
-const loadUserInfo = () => {
-	const storedUserInfo = uni.getStorageSync('userInfo')
-	if (storedUserInfo) {
-		try {
-			const info = JSON.parse(storedUserInfo as string)
-			userInfo.value.email = info.email || ''
-			userInfo.value.emailBoundTime = info.emailBoundTime || null
-		} catch (e) {
-			console.error('Failed to parse user info', e)
-		}
-	}
+const sendCode = () => {
+  if (counting.value) return
+  if (!email.value || !email.value.includes('@')) {
+    uni.showToast({
+      title: '请输入正确的邮箱',
+      icon: 'none'
+    })
+    return
+  }
+  
+  counting.value = true
+  count.value = 60
+  
+  const timer = setInterval(() => {
+    count.value--
+    if (count.value <= 0) {
+      clearInterval(timer)
+      counting.value = false
+    }
+  }, 1000)
+  
+  uni.showToast({
+    title: '验证码已发送',
+    icon: 'none'
+  })
 }

-// 获取验证码
-const getCode = () => {
-	if (!canGetCode.value) {
-		uni.showToast({
-			title: '请输入正确的邮箱地址',
-			icon: 'none'
-		})
-		return
-	}
-
-	// 开始倒计时
-	countdown.value = 60
-	const timer = setInterval(() => {
-		countdown.value--
-		if (countdown.value <= 0) {
-			clearInterval(timer)
-		}
-	}, 1000)
-
-	// 模拟发送验证码
-	uni.showToast({
-		title: '验证码已发送到邮箱',
-		icon: 'success'
-	})
-
-	// 实际项目中这里应该调用发送邮件的API
-	// const response = await sendEmailCode(form.value.email)
+const handleSubmit = () => {
+  if (!email.value || !code.value) {
+    uni.showToast({
+      title: '请填写完整信息',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // TODO: Call API to bind email
+  uni.showLoading({ title: '提交中...' })
+  setTimeout(() => {
+    uni.hideLoading()
+    uni.showToast({
+      title: '绑定成功',
+      icon: 'success'
+    })
+    
+    // 更新本地存储的用户信息
+    const userInfo = uni.getStorageSync('userInfo')
+    if (userInfo) {
+        // @ts-ignore
+        userInfo.email = email.value
+        uni.setStorageSync('userInfo', userInfo)
+    }
+    
+    setTimeout(() => {
+      uni.navigateBack()
+    }, 1500)
+  }, 1000)
 }
-
-// 提交表单
-const onSubmit = async () => {
-	if (!isFormValid.value) {
-		uni.showToast({
-			title: '请填写完整且正确的信息',
-			icon: 'none'
-		})
-		return
-	}
-
-	loading.value = true
-
-	try {
-		// 模拟API调用
-		await new Promise(resolve => setTimeout(resolve, 1000))
-
-		// 更新本地用户信息
-		const storedUserInfo = uni.getStorageSync('userInfo')
-		let userInfoData = storedUserInfo ? JSON.parse(storedUserInfo as string) : {}
-		
-		userInfoData.email = form.value.email
-		userInfoData.emailBoundTime = new Date().toISOString()
-		
-		uni.setStorageSync('userInfo', JSON.stringify(userInfoData))
-		userInfo.value.email = form.value.email
-		userInfo.value.emailBoundTime = userInfoData.emailBoundTime
-
-		// 显示成功消息
-		successTitle.value = isChanging.value ? '更换成功' : '绑定成功'
-		successMessage.value = `邮箱 ${form.value.email} 已成功${isChanging.value ? '更换' : '绑定'}`
-		showSuccess.value = true
-		
-		// 重置表单
-		form.value = { email: '', code: '' }
-		isChanging.value = false
-
-	} catch (error: any) {
-		console.error('绑定邮箱失败:', error)
-		uni.showToast({
-			title: error.message || '操作失败',
-			icon: 'none'
-		})
-	} finally {
-		loading.value = false
-	}
-}
-
-// 开始更换邮箱
-const startChange = () => {
-	isChanging.value = true
-	form.value.email = userInfo.value.email
-}
-
-// 解绑邮箱
-const unbindEmail = () => {
-	uni.showModal({
-		title: '解绑邮箱',
-		content: '确定要解绑邮箱吗？解绑后可能影响账号安全',
-		success: async (res) => {
-			if (res.confirm) {
-				loading.value = true
-				
-				try {
-					// 模拟API调用
-					await new Promise(resolve => setTimeout(resolve, 1000))
-
-					// 更新本地用户信息
-					const storedUserInfo = uni.getStorageSync('userInfo')
-					let userInfoData = storedUserInfo ? JSON.parse(storedUserInfo as string) : {}
-					
-					userInfoData.email = ''
-					userInfoData.emailBoundTime = null
-					
-					uni.setStorageSync('userInfo', JSON.stringify(userInfoData))
-					userInfo.value.email = ''
-					userInfo.value.emailBoundTime = null
-
-					uni.showToast({
-						title: '解绑成功',
-						icon: 'success'
-					})
-
-				} catch (error: any) {
-					console.error('解绑失败:', error)
-					uni.showToast({
-						title: error.message || '解绑失败',
-						icon: 'none'
-					})
-				} finally {
-					loading.value = false
-				}
-			}
-		}
-	})
-}
-
-// 格式化时间显示
-const formatTime = (time: string | null): string => {
-	if (!time) return '未知'
-	const date = new Date(time)
-	return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
-}
-
-// 导航函数
-const goBack = () => {
-	uni.navigateBack()
-}
-
-const hideSuccess = () => {
-	showSuccess.value = false
-}
-
-// 生命周期
-onMounted(() => {
-	loadUserInfo()
-})
 </script>

 <style>
-.bind-email-page {
-	min-height: 100vh;
-	background-color: #f5f5f5;
+.page-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
 }

-.header {
-	background-color: #ffffff;
-	padding: 15px;
-	display: flex;
-	align-items: center;
-	border-bottom: 1px solid #e5e5e5;
+.form-group {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 0 15px;
+  margin-bottom: 30px;
 }

-.back-btn {
-	width: 40px;
-	height: 40px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-right: 10px;
+.input-item {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  border-bottom: 1px solid #eee;
 }

-.back-icon {
-	font-size: 24px;
-	color: #333;
-}
-
-.header-title {
-	font-size: 18px;
-	font-weight: bold;
-	color: #333;
-	flex: 1;
-}
-
-.content {
-	padding: 20px;
-}
-
-.already-bound {
-	background-color: #ffffff;
-	border-radius: 10px;
-	padding: 20px;
-	margin-bottom: 20px;
-	text-align: center;
-}
-
-.bound-icon {
-	display: block;
-	width: 60px;
-	height: 60px;
-	line-height: 60px;
-	background-color: #4cd964;
-	color: #ffffff;
-	font-size: 30px;
-	border-radius: 50%;
-	margin: 0 auto 15px;
-}
-
-.bound-title {
-	display: block;
-	font-size: 18px;
-	font-weight: bold;
-	color: #333;
-	margin-bottom: 5px;
-}
-
-.bound-email {
-	display: block;
-	font-size: 16px;
-	color: #007aff;
-	margin-bottom: 10px;
-	font-weight: bold;
-	word-break: break-all;
-}
-
-.bound-time {
-	display: block;
-	font-size: 14px;
-	color: #999;
-}
-
-.form-item {
-	margin-bottom: 20px;
-	background-color: #ffffff;
-	border-radius: 10px;
-	padding: 15px;
+.input-item:last-child {
+  border-bottom: none;
 }

 .label {
-	display: block;
-	font-size: 16px;
-	color: #333;
-	margin-bottom: 10px;
-	font-weight: bold;
+  width: 70px;
+  font-size: 14px;
+  color: #333;
 }

 .input {
-	width: 100%;
-	height: 44px;
-	border: 1px solid #ddd;
-	border-radius: 8px;
-	padding: 0 15px;
-	font-size: 16px;
-	box-sizing: border-box;
+  flex: 1;
+  font-size: 14px;
 }

-.input:focus {
-	border-color: #007aff;
-	outline: none;
-}
-
-.input:disabled {
-	background-color: #f9f9f9;
-	color: #999;
-}
-
-.code-input-wrapper {
-	display: flex;
-	gap: 10px;
-}
-
-.code-input {
-	flex: 1;
-	height: 44px;
-	border: 1px solid #ddd;
-	border-radius: 8px;
-	padding: 0 15px;
-	font-size: 16px;
-	box-sizing: border-box;
-}
-
-.get-code-btn {
-	width: 120px;
-	height: 44px;
-	background-color: #007aff;
-	color: #ffffff;
-	border-radius: 8px;
-	font-size: 14px;
-	border: none;
-}
-
-.get-code-btn:disabled {
-	background-color: #cccccc;
+.code-btn {
+  color: #007aff;
+  font-size: 14px;
+  padding: 5px 10px;
 }

 .submit-btn {
-	width: 100%;
-	height: 50px;
-	background-color: #007aff;
-	color: #ffffff;
-	border-radius: 25px;
-	font-size: 16px;
-	font-weight: bold;
-	border: none;
-	margin-top: 30px;
+  background-color: #007aff;
+  color: #fff;
+  border-radius: 25px;
+  font-size: 16px;
 }
-
-.submit-btn:disabled {
-	background-color: #cccccc;
-}
-
-.action-buttons {
-	display: flex;
-	flex-direction: column;
-	gap: 15px;
-	margin-top: 20px;
-}
-
-.change-btn {
-	width: 100%;
-	height: 50px;
-	background-color: #ffffff;
-	color: #007aff;
-	border: 2px solid #007aff;
-	border-radius: 25px;
-	font-size: 16px;
-	font-weight: bold;
-}
-
-.unbind-btn {
-	width: 100%;
-	height: 50px;
-	background-color: #ffffff;
-	color: #ff3b30;
-	border: 2px solid #ff3b30;
-	border-radius: 25px;
-	font-size: 16px;
-	font-weight: bold;
-}
-
-/* 成功提示模态框 */
-.success-modal {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.5);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 1000;
-}
-
-.success-content {
-	width: 280px;
-	background-color: #ffffff;
-	border-radius: 15px;
-	padding: 30px 20px;
-	text-align: center;
-}
-
-.success-icon {
-	display: block;
-	width: 60px;
-	height: 60px;
-	line-height: 60px;
-	background-color: #4cd964;
-	color: #ffffff;
-	font-size: 30px;
-	border-radius: 50%;
-	margin: 0 auto 20px;
-}
-
-.success-title {
-	display: block;
-	font-size: 18px;
-	font-weight: bold;
-	color: #333;
-	margin-bottom: 10px;
-}
-
-.success-text {
-	display: block;
-	font-size: 14px;
-	color: #666;
-	margin-bottom: 20px;
-	line-height: 1.4;
-}
-
-.success-btn {
-	width: 100%;
-	height: 44px;
-	background-color: #007aff;
-	color: #ffffff;
-	border-radius: 22px;
-	font-size: 16px;
-	border: none;
-}
-
-/* 响应式优化 */
-@media screen and (min-width: 768px) {
-	.bind-email-page {
-		max-width: 500px;
-		margin: 0 auto;
-		border-left: 1px solid #e5e5e5;
-		border-right: 1px solid #e5e5e5;
-	}
-
-	.content {
-		padding: 40px;
-	}
-}
-</style>
+</style>
--- a/pages/user/bind-phone.uvue
+++ b/pages/user/bind-phone.uvue
@@ -1,548 +1,135 @@
 <template>
-	<view class="bind-phone-page">
-		<view class="header">
-			<view class="back-btn" @click="goBack">
-				<text class="back-icon">‹</text>
-			</view>
-			<text class="header-title">绑定手机</text>
-		</view>
-
-		<view class="content">
-			<view v-if="userInfo.phone" class="already-bound">
-				<text class="bound-icon">✓</text>
-				<text class="bound-title">已绑定手机</text>
-				<text class="bound-phone">{{ formatPhone(userInfo.phone) }}</text>
-				<text class="bound-time">绑定时间：{{ formatTime(userInfo.phoneBoundTime) }}</text>
-			</view>
-
-			<form @submit="onSubmit" v-if="!userInfo.phone || isChanging">
-				<!-- 手机号输入 -->
-				<view class="form-item">
-					<text class="label">手机号</text>
-					<input 
-						class="input" 
-						type="number" 
-						placeholder="请输入手机号" 
-						v-model="form.phone"
-						:disabled="loading || countdown > 0"
-						maxlength="11"
-						required
-					/>
-				</view>
-
-				<!-- 验证码 -->
-				<view class="form-item">
-					<text class="label">验证码</text>
-					<view class="code-input-wrapper">
-						<input 
-							class="code-input" 
-							type="number" 
-							placeholder="请输入验证码" 
-							v-model="form.code"
-							:disabled="loading"
-							maxlength="6"
-							required
-						/>
-						<button 
-							class="get-code-btn" 
-							@click="getCode"
-							:disabled="!canGetCode || countdown > 0"
-						>
-							{{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
-						</button>
-					</view>
-				</view>
-
-				<!-- 提交按钮 -->
-				<button 
-					class="submit-btn" 
-					form-type="submit" 
-					:disabled="loading || !isFormValid"
-					:loading="loading"
-				>
-					{{ loading ? '处理中...' : userInfo.phone ? '更换手机号' : '绑定手机号' }}
-				</button>
-			</form>
-
-			<view v-if="userInfo.phone && !isChanging" class="action-buttons">
-				<button class="change-btn" @click="startChange">更换手机号</button>
-				<button class="unbind-btn" @click="unbindPhone">解绑手机</button>
-			</view>
-		</view>
-
-		<!-- 成功提示 -->
-		<view v-if="showSuccess" class="success-modal" @click="hideSuccess">
-			<view class="success-content" @click.stop>
-				<text class="success-icon">✓</text>
-				<text class="success-title">{{ successTitle }}</text>
-				<text class="success-text">{{ successMessage }}</text>
-				<button class="success-btn" @click="hideSuccess">确定</button>
-			</view>
-		</view>
-	</view>
+  <view class="page-container">
+    <view class="form-group">
+      <view class="input-item">
+        <text class="label">手机号</text>
+        <input class="input" type="number" placeholder="请输入新手机号" v-model="phone" maxlength="11" />
+      </view>
+      <view class="input-item">
+        <text class="label">验证码</text>
+        <input class="input" type="number" placeholder="请输入验证码" v-model="code" maxlength="6" />
+        <text class="code-btn" @click="sendCode">{{ counting ? `${count}s` : '获取验证码' }}</text>
+      </view>
+    </view>
+    
+    <button class="submit-btn" @click="handleSubmit">确认绑定</button>
+  </view>
 </template>

 <script setup lang="uts">
-import { ref, computed, onMounted } from 'vue'
-//import supa from '@/components/supadb/aksupainstance.uts'
+import { ref } from 'vue'

-// 用户信息
-const userInfo = ref({
-	phone: '',
-	phoneBoundTime: null as string | null
-})
+const phone = ref('')
+const code = ref('')
+const counting = ref(false)
+const count = ref(60)

-const form = ref({
-	phone: '',
-	code: ''
-})
-
-const loading = ref<boolean>(false)
-const countdown = ref<number>(0)
-const isChanging = ref<boolean>(false)
-const showSuccess = ref<boolean>(false)
-const successTitle = ref<string>('')
-const successMessage = ref<string>('')
-
-// 表单验证
-const isFormValid = computed((): boolean => {
-	const { phone, code } = form.value
-	return /^1[3-9]\d{9}$/.test(phone) && /^\d{6}$/.test(code)
-})
-
-// 是否可以获取验证码
-const canGetCode = computed((): boolean => {
-	return /^1[3-9]\d{9}$/.test(form.value.phone)
-})
-
-// 加载用户信息
-const loadUserInfo = () => {
-	const storedUserInfo = uni.getStorageSync('userInfo')
-	if (storedUserInfo) {
-		try {
-			const info = JSON.parse(storedUserInfo as string)
-			userInfo.value.phone = info.phone || ''
-			userInfo.value.phoneBoundTime = info.phoneBoundTime || null
-		} catch (e) {
-			console.error('Failed to parse user info', e)
-		}
-	}
+const sendCode = () => {
+  if (counting.value) return
+  if (!phone.value || phone.value.length !== 11) {
+    uni.showToast({
+      title: '请输入正确的手机号',
+      icon: 'none'
+    })
+    return
+  }
+  
+  counting.value = true
+  count.value = 60
+  
+  const timer = setInterval(() => {
+    count.value--
+    if (count.value <= 0) {
+      clearInterval(timer)
+      counting.value = false
+    }
+  }, 1000)
+  
+  uni.showToast({
+    title: '验证码已发送',
+    icon: 'none'
+  })
 }

-// 获取验证码
-const getCode = () => {
-	if (!canGetCode.value) {
-		uni.showToast({
-			title: '请输入正确的手机号',
-			icon: 'none'
-		})
-		return
-	}
-
-	// 开始倒计时
-	countdown.value = 60
-	const timer = setInterval(() => {
-		countdown.value--
-		if (countdown.value <= 0) {
-			clearInterval(timer)
-		}
-	}, 1000)
-
-	// 模拟发送验证码
-	uni.showToast({
-		title: '验证码已发送',
-		icon: 'success'
-	})
-
-	// 实际项目中这里应该调用发送短信的API
-	// const response = await sendSmsCode(form.value.phone)
+const handleSubmit = () => {
+  if (!phone.value || !code.value) {
+    uni.showToast({
+      title: '请填写完整信息',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // TODO: Call API to bind phone
+  uni.showLoading({ title: '提交中...' })
+  setTimeout(() => {
+    uni.hideLoading()
+    uni.showToast({
+      title: '绑定成功',
+      icon: 'success'
+    })
+    
+    // 更新本地存储的用户信息
+    const userInfo = uni.getStorageSync('userInfo')
+    if (userInfo) {
+        // @ts-ignore
+        userInfo.phone = phone.value
+        uni.setStorageSync('userInfo', userInfo)
+    }
+    
+    setTimeout(() => {
+      uni.navigateBack()
+    }, 1500)
+  }, 1000)
 }
-
-// 提交表单
-const onSubmit = async () => {
-	if (!isFormValid.value) {
-		uni.showToast({
-			title: '请填写完整且正确的信息',
-			icon: 'none'
-		})
-		return
-	}
-
-	loading.value = true
-
-	try {
-		// 模拟API调用
-		await new Promise(resolve => setTimeout(resolve, 1000))
-
-		// 更新本地用户信息
-		const storedUserInfo = uni.getStorageSync('userInfo')
-		let userInfoData = storedUserInfo ? JSON.parse(storedUserInfo as string) : {}
-		
-		userInfoData.phone = form.value.phone
-		userInfoData.phoneBoundTime = new Date().toISOString()
-		
-		uni.setStorageSync('userInfo', JSON.stringify(userInfoData))
-		userInfo.value.phone = form.value.phone
-		userInfo.value.phoneBoundTime = userInfoData.phoneBoundTime
-
-		// 显示成功消息
-		successTitle.value = isChanging.value ? '更换成功' : '绑定成功'
-		successMessage.value = `手机号 ${formatPhone(form.value.phone)} 已成功${isChanging.value ? '更换' : '绑定'}`
-		showSuccess.value = true
-		
-		// 重置表单
-		form.value = { phone: '', code: '' }
-		isChanging.value = false
-
-	} catch (error: any) {
-		console.error('绑定手机失败:', error)
-		uni.showToast({
-			title: error.message || '操作失败',
-			icon: 'none'
-		})
-	} finally {
-		loading.value = false
-	}
-}
-
-// 开始更换手机号
-const startChange = () => {
-	isChanging.value = true
-	form.value.phone = userInfo.value.phone
-}
-
-// 解绑手机
-const unbindPhone = () => {
-	uni.showModal({
-		title: '解绑手机',
-		content: '确定要解绑手机吗？解绑后可能影响账号安全',
-		success: async (res) => {
-			if (res.confirm) {
-				loading.value = true
-				
-				try {
-					// 模拟API调用
-					await new Promise(resolve => setTimeout(resolve, 1000))
-
-					// 更新本地用户信息
-					const storedUserInfo = uni.getStorageSync('userInfo')
-					let userInfoData = storedUserInfo ? JSON.parse(storedUserInfo as string) : {}
-					
-					userInfoData.phone = ''
-					userInfoData.phoneBoundTime = null
-					
-					uni.setStorageSync('userInfo', JSON.stringify(userInfoData))
-					userInfo.value.phone = ''
-					userInfo.value.phoneBoundTime = null
-
-					uni.showToast({
-						title: '解绑成功',
-						icon: 'success'
-					})
-
-				} catch (error: any) {
-					console.error('解绑失败:', error)
-					uni.showToast({
-						title: error.message || '解绑失败',
-						icon: 'none'
-					})
-				} finally {
-					loading.value = false
-				}
-			}
-		}
-	})
-}
-
-// 格式化手机号显示
-const formatPhone = (phone: string): string => {
-	if (!phone) return ''
-	return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
-}
-
-// 格式化时间显示
-const formatTime = (time: string | null): string => {
-	if (!time) return '未知'
-	const date = new Date(time)
-	return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
-}
-
-// 导航函数
-const goBack = () => {
-	uni.navigateBack()
-}
-
-const hideSuccess = () => {
-	showSuccess.value = false
-}
-
-// 生命周期
-onMounted(() => {
-	loadUserInfo()
-})
 </script>

 <style>
-.bind-phone-page {
-	min-height: 100vh;
-	background-color: #f5f5f5;
+.page-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
 }

-.header {
-	background-color: #ffffff;
-	padding: 15px;
-	display: flex;
-	align-items: center;
-	border-bottom: 1px solid #e5e5e5;
+.form-group {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 0 15px;
+  margin-bottom: 30px;
 }

-.back-btn {
-	width: 40px;
-	height: 40px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-right: 10px;
+.input-item {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  border-bottom: 1px solid #eee;
 }

-.back-icon {
-	font-size: 24px;
-	color: #333;
-}
-
-.header-title {
-	font-size: 18px;
-	font-weight: bold;
-	color: #333;
-	flex: 1;
-}
-
-.content {
-	padding: 20px;
-}
-
-.already-bound {
-	background-color: #ffffff;
-	border-radius: 10px;
-	padding: 20px;
-	margin-bottom: 20px;
-	text-align: center;
-}
-
-.bound-icon {
-	display: block;
-	width: 60px;
-	height: 60px;
-	line-height: 60px;
-	background-color: #4cd964;
-	color: #ffffff;
-	font-size: 30px;
-	border-radius: 50%;
-	margin: 0 auto 15px;
-}
-
-.bound-title {
-	display: block;
-	font-size: 18px;
-	font-weight: bold;
-	color: #333;
-	margin-bottom: 5px;
-}
-
-.bound-phone {
-	display: block;
-	font-size: 24px;
-	color: #007aff;
-	margin-bottom: 10px;
-	font-weight: bold;
-}
-
-.bound-time {
-	display: block;
-	font-size: 14px;
-	color: #999;
-}
-
-.form-item {
-	margin-bottom: 20px;
-	background-color: #ffffff;
-	border-radius: 10px;
-	padding: 15px;
+.input-item:last-child {
+  border-bottom: none;
 }

 .label {
-	display: block;
-	font-size: 16px;
-	color: #333;
-	margin-bottom: 10px;
-	font-weight: bold;
+  width: 70px;
+  font-size: 14px;
+  color: #333;
 }

 .input {
-	width: 100%;
-	height: 44px;
-	border: 1px solid #ddd;
-	border-radius: 8px;
-	padding: 0 15px;
-	font-size: 16px;
-	box-sizing: border-box;
+  flex: 1;
+  font-size: 14px;
 }

-.input:focus {
-	border-color: #007aff;
-	outline: none;
-}
-
-.input:disabled {
-	background-color: #f9f9f9;
-	color: #999;
-}
-
-.code-input-wrapper {
-	display: flex;
-	gap: 10px;
-}
-
-.code-input {
-	flex: 1;
-	height: 44px;
-	border: 1px solid #ddd;
-	border-radius: 8px;
-	padding: 0 15px;
-	font-size: 16px;
-	box-sizing: border-box;
-}
-
-.get-code-btn {
-	width: 120px;
-	height: 44px;
-	background-color: #007aff;
-	color: #ffffff;
-	border-radius: 8px;
-	font-size: 14px;
-	border: none;
-}
-
-.get-code-btn:disabled {
-	background-color: #cccccc;
+.code-btn {
+  color: #007aff;
+  font-size: 14px;
+  padding: 5px 10px;
 }

 .submit-btn {
-	width: 100%;
-	height: 50px;
-	background-color: #007aff;
-	color: #ffffff;
-	border-radius: 25px;
-	font-size: 16px;
-	font-weight: bold;
-	border: none;
-	margin-top: 30px;
+  background-color: #007aff;
+  color: #fff;
+  border-radius: 25px;
+  font-size: 16px;
 }
-
-.submit-btn:disabled {
-	background-color: #cccccc;
-}
-
-.action-buttons {
-	display: flex;
-	flex-direction: column;
-	gap: 15px;
-	margin-top: 20px;
-}
-
-.change-btn {
-	width: 100%;
-	height: 50px;
-	background-color: #ffffff;
-	color: #007aff;
-	border: 2px solid #007aff;
-	border-radius: 25px;
-	font-size: 16px;
-	font-weight: bold;
-}
-
-.unbind-btn {
-	width: 100%;
-	height: 50px;
-	background-color: #ffffff;
-	color: #ff3b30;
-	border: 2px solid #ff3b30;
-	border-radius: 25px;
-	font-size: 16px;
-	font-weight: bold;
-}
-
-/* 成功提示模态框 */
-.success-modal {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.5);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 1000;
-}
-
-.success-content {
-	width: 280px;
-	background-color: #ffffff;
-	border-radius: 15px;
-	padding: 30px 20px;
-	text-align: center;
-}
-
-.success-icon {
-	display: block;
-	width: 60px;
-	height: 60px;
-	line-height: 60px;
-	background-color: #4cd964;
-	color: #ffffff;
-	font-size: 30px;
-	border-radius: 50%;
-	margin: 0 auto 20px;
-}
-
-.success-title {
-	display: block;
-	font-size: 18px;
-	font-weight: bold;
-	color: #333;
-	margin-bottom: 10px;
-}
-
-.success-text {
-	display: block;
-	font-size: 14px;
-	color: #666;
-	margin-bottom: 20px;
-	line-height: 1.4;
-}
-
-.success-btn {
-	width: 100%;
-	height: 44px;
-	background-color: #007aff;
-	color: #ffffff;
-	border-radius: 22px;
-	font-size: 16px;
-	border: none;
-}
-
-/* 响应式优化 */
-@media screen and (min-width: 768px) {
-	.bind-phone-page {
-		max-width: 500px;
-		margin: 0 auto;
-		border-left: 1px solid #e5e5e5;
-		border-right: 1px solid #e5e5e5;
-	}
-
-	.content {
-		padding: 40px;
-	}
-}
-</style>
+</style>
--- a/pages/user/change-password.uvue
+++ b/pages/user/change-password.uvue
@@ -1,353 +1,103 @@
 <template>
-	<view class="change-password-page">
-		<view class="header">
-			<view class="back-btn" @click="goBack">
-				<text class="back-icon">‹</text>
-			</view>
-			<text class="header-title">修改密码</text>
-		</view>
-
-		<view class="content">
-			<form @submit="onSubmit">
-				<!-- 当前密码 -->
-				<view class="form-item">
-					<text class="label">当前密码</text>
-					<input 
-						class="input" 
-						type="password" 
-						placeholder="请输入当前密码" 
-						v-model="form.currentPassword"
-						:disabled="loading"
-						required
-					/>
-				</view>
-
-				<!-- 新密码 -->
-				<view class="form-item">
-					<text class="label">新密码</text>
-					<input 
-						class="input" 
-						type="password" 
-						placeholder="请输入新密码（6-20位字符）" 
-						v-model="form.newPassword"
-						:disabled="loading"
-						required
-					/>
-					<text class="hint">6-20位字符，建议包含字母、数字和特殊符号</text>
-				</view>
-
-				<!-- 确认新密码 -->
-				<view class="form-item">
-					<text class="label">确认新密码</text>
-					<input 
-						class="input" 
-						type="password" 
-						placeholder="请再次输入新密码" 
-						v-model="form.confirmPassword"
-						:disabled="loading"
-						required
-					/>
-				</view>
-
-				<!-- 提交按钮 -->
-				<button 
-					class="submit-btn" 
-					form-type="submit" 
-					:disabled="loading || !isFormValid"
-					:loading="loading"
-				>
-					{{ loading ? '处理中...' : '确认修改' }}
-				</button>
-			</form>
-
-			<!-- 忘记密码提示 -->
-			<view class="forgot-password">
-				<text class="forgot-text" @click="goToForgotPassword">忘记密码？</text>
-			</view>
-		</view>
-
-		<!-- 成功提示 -->
-		<view v-if="showSuccess" class="success-modal" @click="hideSuccess">
-			<view class="success-content" @click.stop>
-				<text class="success-icon">✓</text>
-				<text class="success-title">修改成功</text>
-				<text class="success-text">密码已成功修改，请使用新密码登录</text>
-				<button class="success-btn" @click="hideSuccess">确定</button>
-			</view>
-		</view>
-	</view>
+  <view class="page-container">
+    <view class="form-group">
+      <view class="input-item">
+        <text class="label">旧密码</text>
+        <input class="input" type="password" placeholder="请输入旧密码" v-model="oldPassword" />
+      </view>
+      <view class="input-item">
+        <text class="label">新密码</text>
+        <input class="input" type="password" placeholder="请输入新密码" v-model="newPassword" />
+      </view>
+      <view class="input-item">
+        <text class="label">确认密码</text>
+        <input class="input" type="password" placeholder="请再次输入新密码" v-model="confirmPassword" />
+      </view>
+    </view>
+    
+    <button class="submit-btn" @click="handleSubmit">确认修改</button>
+  </view>
 </template>

 <script setup lang="uts">
-import { ref, computed } from 'vue'
-import supa from '@/components/supadb/aksupainstance.uts'
+import { ref } from 'vue'

-// 表单数据
-const form = ref({
-	currentPassword: '',
-	newPassword: '',
-	confirmPassword: ''
-})
+const oldPassword = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')

-const loading = ref<boolean>(false)
-const showSuccess = ref<boolean>(false)
-
-// 表单验证
-const isFormValid = computed((): boolean => {
-	const { currentPassword, newPassword, confirmPassword } = form.value
-	return currentPassword.length >= 6 && 
-		   newPassword.length >= 6 && 
-		   newPassword.length <= 20 &&
-		   newPassword === confirmPassword
-})
-
-// 提交表单
-const onSubmit = async () => {
-	if (!isFormValid.value) {
-		uni.showToast({
-			title: '请填写完整且正确的密码信息',
-			icon: 'none'
-		})
-		return
-	}
-
-	loading.value = true
-
-	try {
-		// 调用 Supabase 更新密码
-		const { error } = await supa.auth.updateUser({
-			password: form.value.newPassword
-		})
-
-		if (error !== null) {
-			throw error
-		}
-
-		// 成功
-		showSuccess.value = true
-		
-		// 清除表单
-		form.value = {
-			currentPassword: '',
-			newPassword: '',
-			confirmPassword: ''
-		}
-
-	} catch (error: any) {
-		console.error('修改密码失败:', error)
-		
-		let errorMessage = '修改密码失败'
-		if (error.message?.includes('invalid_credentials')) {
-			errorMessage = '当前密码错误'
-		} else if (error.message?.includes('password')) {
-			errorMessage = '新密码不符合要求'
-		}
-
-		uni.showToast({
-			title: errorMessage,
-			icon: 'none'
-		})
-	} finally {
-		loading.value = false
-	}
-}
-
-// 导航函数
-const goBack = () => {
-	uni.navigateBack()
-}
-
-const goToForgotPassword = () => {
-	uni.navigateTo({
-		url: '/pages/user/forgot-password'
-	})
-}
-
-const hideSuccess = () => {
-	showSuccess.value = false
-	goBack()
+const handleSubmit = () => {
+  if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
+    uni.showToast({
+      title: '请填写完整信息',
+      icon: 'none'
+    })
+    return
+  }
+  
+  if (newPassword.value !== confirmPassword.value) {
+    uni.showToast({
+      title: '两次输入的密码不一致',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // TODO: Call API to change password
+  uni.showLoading({ title: '提交中...' })
+  setTimeout(() => {
+    uni.hideLoading()
+    uni.showToast({
+      title: '修改成功',
+      icon: 'success'
+    })
+    setTimeout(() => {
+      uni.navigateBack()
+    }, 1500)
+  }, 1000)
 }
 </script>

 <style>
-.change-password-page {
-	min-height: 100vh;
-	background-color: #f5f5f5;
+.page-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
 }

-.header {
-	background-color: #ffffff;
-	padding: 15px;
-	display: flex;
-	align-items: center;
-	border-bottom: 1px solid #e5e5e5;
+.form-group {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 0 15px;
+  margin-bottom: 30px;
 }

-.back-btn {
-	width: 40px;
-	height: 40px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-right: 10px;
+.input-item {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  border-bottom: 1px solid #eee;
 }

-.back-icon {
-	font-size: 24px;
-	color: #333;
-}
-
-.header-title {
-	font-size: 18px;
-	font-weight: bold;
-	color: #333;
-	flex: 1;
-}
-
-.content {
-	padding: 20px;
-}
-
-.form-item {
-	margin-bottom: 20px;
-	background-color: #ffffff;
-	border-radius: 10px;
-	padding: 15px;
+.input-item:last-child {
+  border-bottom: none;
 }

 .label {
-	display: block;
-	font-size: 16px;
-	color: #333;
-	margin-bottom: 10px;
-	font-weight: bold;
+  width: 80px;
+  font-size: 14px;
+  color: #333;
 }

 .input {
-	width: 100%;
-	height: 44px;
-	border: 1px solid #ddd;
-	border-radius: 8px;
-	padding: 0 15px;
-	font-size: 16px;
-	box-sizing: border-box;
-}
-
-.input:focus {
-	border-color: #007aff;
-	outline: none;
-}
-
-.input:disabled {
-	background-color: #f9f9f9;
-	color: #999;
-}
-
-.hint {
-	display: block;
-	font-size: 12px;
-	color: #999;
-	margin-top: 5px;
+  flex: 1;
+  font-size: 14px;
 }

 .submit-btn {
-	width: 100%;
-	height: 50px;
-	background-color: #007aff;
-	color: #ffffff;
-	border-radius: 25px;
-	font-size: 16px;
-	font-weight: bold;
-	border: none;
-	margin-top: 30px;
+  background-color: #007aff;
+  color: #fff;
+  border-radius: 25px;
+  font-size: 16px;
 }
-
-.submit-btn:disabled {
-	background-color: #cccccc;
-}
-
-.forgot-password {
-	text-align: center;
-	margin-top: 20px;
-}
-
-.forgot-text {
-	color: #007aff;
-	font-size: 14px;
-	text-decoration: underline;
-}
-
-/* 成功提示模态框 */
-.success-modal {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.5);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 1000;
-}
-
-.success-content {
-	width: 280px;
-	background-color: #ffffff;
-	border-radius: 15px;
-	padding: 30px 20px;
-	text-align: center;
-}
-
-.success-icon {
-	display: block;
-	width: 60px;
-	height: 60px;
-	line-height: 60px;
-	background-color: #4cd964;
-	color: #ffffff;
-	font-size: 30px;
-	border-radius: 50%;
-	margin: 0 auto 20px;
-}
-
-.success-title {
-	display: block;
-	font-size: 18px;
-	font-weight: bold;
-	color: #333;
-	margin-bottom: 10px;
-}
-
-.success-text {
-	display: block;
-	font-size: 14px;
-	color: #666;
-	margin-bottom: 20px;
-	line-height: 1.4;
-}
-
-.success-btn {
-	width: 100%;
-	height: 44px;
-	background-color: #007aff;
-	color: #ffffff;
-	border-radius: 22px;
-	font-size: 16px;
-	border: none;
-}
-
-/* 响应式优化 */
-@media screen and (min-width: 768px) {
-	.change-password-page {
-		max-width: 500px;
-		margin: 0 auto;
-		border-left: 1px solid #e5e5e5;
-		border-right: 1px solid #e5e5e5;
-	}
-
-	.content {
-		padding: 40px;
-	}
-}
-</style>
+</style>
--- a/pages/user/test/DEBUG_SIGNUP.md
+++ b/pages/user/test/DEBUG_SIGNUP.md
@@ -41,7 +41,7 @@ docker-compose logs auth | grep -i error

 ### 4. 验证配置是否生效

-在 Supabase Dashboard (http://192.168.1.63:3000) 的 SQL Editor 中执行：
+在 Supabase Dashboard (http://192.168.1.61:3000) 的 SQL Editor 中执行：

 ```sql
 -- 检查当前配置（需要访问 GoTrue 配置）
@@ -59,7 +59,7 @@ docker-compose logs auth | grep -i error
 确认 `ak/config.uts` 中的配置正确：

 ```typescript
-export const SUPA_URL: string = 'http://192.168.1.63:8000'
+export const SUPA_URL: string = 'http://192.168.1.61:8000'
 export const SUPA_KEY: string = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
 ```

--- a/pages/user/test/IMMEDIATE_FIX.md
+++ b/pages/user/test/IMMEDIATE_FIX.md
@@ -58,7 +58,7 @@ grep ENABLE_EMAIL_AUTOCONFIRM supabase_pro/.env

 ## 🔍 验证用户是否创建

-在 Supabase Dashboard (http://192.168.1.63:3000) 的 SQL Editor 中执行：
+在 Supabase Dashboard (http://192.168.1.61:3000) 的 SQL Editor 中执行：

 ```sql
 -- 检查最新注册的用户
--- a/pages/user/test/QUICK_FIX.md
+++ b/pages/user/test/QUICK_FIX.md
@@ -16,7 +16,7 @@

 **执行步骤**：

-1. **在 Supabase Dashboard (http://192.168.1.63:3000) 中打开 SQL Editor**
+1. **在 Supabase Dashboard (http://192.168.1.61:3000) 中打开 SQL Editor**

 2. **执行 `USER_AUTH_SCHEMA.sql`**
   - 创建 `ak_users` 表和 RLS 策略
--- a/pages/user/test/QUICK_FIX_SIGNUP_LOGIN.md
+++ b/pages/user/test/QUICK_FIX_SIGNUP_LOGIN.md
@@ -44,7 +44,7 @@ docker-compose restart auth

 ### 方法一：在 Supabase Dashboard 中手动确认

-1. 打开 Supabase Dashboard: http://192.168.1.63:3000
+1. 打开 Supabase Dashboard: http://192.168.1.61:3000
 2. 进入 **Authentication** → **Users**
 3. 找到对应的用户
 4. 点击用户，在详情页中点击 **Confirm Email** 按钮
--- a/utils/supabaseService.uts
+++ b/utils/supabaseService.uts
@@ -0,0 +1,228 @@
+import { createClient } from '@/components/supadb/aksupa.uts'
+import { SUPA_URL, SUPA_KEY } from '@/ak/config.uts'
+import type { AkReqResponse } from '@/uni_modules/ak-req/index.uts'
+
+// 创建 Supabase 客户端
+const supa = createClient(SUPA_URL, SUPA_KEY)
+
+// 类型定义
+export interface Category {
+  id: string
+  name: string
+  icon: string
+  description: string
+  color: string
+  created_at?: string
+}
+
+export interface Product {
+  id: string
+  category_id: string
+  name: string
+  specification: string
+  price: number
+  original_price?: number
+  image?: string
+  manufacturer: string
+  sales: number
+  badge?: string
+  shop_id?: string
+  shop_name?: string
+  created_at?: string
+}
+
+export interface PaginatedResponse<T> {
+  data: T[]
+  total: number
+  page: number
+  limit: number
+  hasmore: boolean
+}
+
+class SupabaseService {
+  // 获取所有分类
+  async getCategories(): Promise<Category[]> {
+    try {
+      const response = await supa
+        .from('categories')
+        .select('*')
+        .order('name', { ascending: true })
+        .execute()
+      
+      if (response.error) {
+        console.error('获取分类失败:', response.error)
+        return []
+      }
+      
+      return response.data as Category[]
+    } catch (error) {
+      console.error('获取分类异常:', error)
+      return []
+    }
+  }
+
+  // 获取指定分类的商品
+  async getProductsByCategory(
+    categoryId: string, 
+    page: number = 1, 
+    limit: number = 20
+  ): Promise<PaginatedResponse<Product>> {
+    try {
+      const response = await supa
+        .from('products')
+        .select('*', { count: 'exact' })
+        .eq('category_id', categoryId)
+        .order('sales', { ascending: false })
+        .page(page)
+        .limit(limit)
+        .execute()
+      
+      if (response.error) {
+        console.error('获取商品失败:', response.error)
+        return {
+          data: [],
+          total: 0,
+          page,
+          limit,
+          hasmore: false
+        }
+      }
+      
+      return {
+        data: response.data as Product[],
+        total: response.total || 0,
+        page,
+        limit,
+        hasmore: response.hasmore || false
+      }
+    } catch (error) {
+      console.error('获取商品异常:', error)
+      return {
+        data: [],
+        total: 0,
+        page,
+        limit,
+        hasmore: false
+      }
+    }
+  }
+
+  // 搜索商品
+  async searchProducts(
+    keyword: string, 
+    page: number = 1, 
+    limit: number = 20
+  ): Promise<PaginatedResponse<Product>> {
+    try {
+      const response = await supa
+        .from('products')
+        .select('*', { count: 'exact' })
+        .or(`name.ilike.%${keyword}%,manufacturer.ilike.%${keyword}%,specification.ilike.%${keyword}%`)
+        .order('sales', { ascending: false })
+        .page(page)
+        .limit(limit)
+        .execute()
+      
+      if (response.error) {
+        console.error('搜索商品失败:', response.error)
+        return {
+          data: [],
+          total: 0,
+          page,
+          limit,
+          hasmore: false
+        }
+      }
+      
+      return {
+        data: response.data as Product[],
+        total: response.total || 0,
+        page,
+        limit,
+        hasmore: response.hasmore || false
+      }
+    } catch (error) {
+      console.error('搜索商品异常:', error)
+      return {
+        data: [],
+        total: 0,
+        page,
+        limit,
+        hasmore: false
+      }
+    }
+  }
+
+  // 获取单个商品详情
+  async getProductById(productId: string): Promise<Product | null> {
+    try {
+      const response = await supa
+        .from('products')
+        .select('*')
+        .eq('id', productId)
+        .single()
+        .execute()
+      
+      if (response.error) {
+        console.error('获取商品详情失败:', response.error)
+        return null
+      }
+      
+      return response.data as Product
+    } catch (error) {
+      console.error('获取商品详情异常:', error)
+      return null
+    }
+  }
+
+  // 获取热销商品
+  async getHotProducts(limit: number = 10): Promise<Product[]> {
+    try {
+      const response = await supa
+        .from('products')
+        .select('*')
+        .order('sales', { ascending: false })
+        .limit(limit)
+        .execute()
+      
+      if (response.error) {
+        console.error('获取热销商品失败:', response.error)
+        return []
+      }
+      
+      return response.data as Product[]
+    } catch (error) {
+      console.error('获取热销商品异常:', error)
+      return []
+    }
+  }
+
+  // 获取推荐商品（带badge的商品）
+  async getRecommendedProducts(limit: number = 10): Promise<Product[]> {
+    try {
+      const response = await supa
+        .from('products')
+        .select('*')
+        .not('badge', 'is', null)
+        .order('sales', { ascending: false })
+        .limit(limit)
+        .execute()
+      
+      if (response.error) {
+        console.error('获取推荐商品失败:', response.error)
+        return []
+      }
+      
+      return response.data as Product[]
+    } catch (error) {
+      console.error('获取推荐商品异常:', error)
+      return []
+    }
+  }
+}
+
+// 导出单例实例
+export const supabaseService = new SupabaseService()
+
+// 默认导出
+export default supabaseService