提交昨晚至今早的修改

pages.json

@@ -169,6 +169,24 @@
         "navigationBarTitleText": "客服聊天",
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/user/change-password",
+      "style": {
+        "navigationBarTitleText": "修改密码"
+      }
+    },
+    {
+      "path": "pages/user/bind-phone",
+      "style": {
+        "navigationBarTitleText": "绑定手机"
+      }
+    },
+    {
+      "path": "pages/user/bind-email",
+      "style": {
+        "navigationBarTitleText": "绑定邮箱"
+      }
     }
   ],
   "tabBar": {

pages/info/settings.uvue

@@ -1033,4 +1033,94 @@ import i18n from '@/uni_modules/i18n/index.uts' // 保留用于语言切换
 .action-btn.primary .action-text {
 	color: #ffffff;
 }
+
+/* 响应式布局优化 */
+@media screen and (min-width: 480px) and (max-width: 767px) {
+	.settings-section {
+		margin: 12px 20px;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+	}
+	
+	.section-header {
+		width: 100%;
+	}
+	
+	.setting-item {
+		flex: 1 0 calc(50% - 20px);
+		margin: 10px;
+		border: 1px solid #f0f0f0;
+		border-radius: 8px;
+		padding: 16px;
+		box-sizing: border-box;
+		border-bottom: none;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+	
+	.item-content {
+		width: 100%;
+		margin-bottom: 10px;
+	}
+	
+	.item-label, .item-desc, .item-value {
+		display: block;
+		width: 100%;
+	}
+	
+	.toggle-switch, .item-arrow {
+		align-self: flex-end;
+		margin-top: auto;
+	}
+}
+
+@media screen and (min-width: 768px) {
+	.settings-page {
+		padding: 20px;
+		background-color: #f5f5f5;
+	}
+	
+	.settings-section {
+		margin: 0 auto 20px;
+		max-width: 800px;
+		border-radius: 12px;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+	}
+	
+	.section-header {
+		width: 100%;
+	}
+	
+	.setting-item {
+		flex: 1 0 calc(33.333% - 20px);
+		margin: 10px;
+		border: 1px solid #f0f0f0;
+		border-radius: 8px;
+		padding: 16px;
+		box-sizing: border-box;
+		border-bottom: none;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+	
+	.item-content {
+		width: 100%;
+		margin-bottom: 10px;
+	}
+	
+	.item-label, .item-desc, .item-value {
+		display: block;
+		width: 100%;
+	}
+	
+	.toggle-switch, .item-arrow {
+		align-self: flex-end;
+		margin-top: auto;
+	}
+}
 </style>

pages/mall/consumer/cart.uvue

@@ -82,6 +82,32 @@
 				</view>
 			</view>
 			
+			<!-- 购物车操作栏 (移至推荐商品上方) -->
+            <view v-if="cartItems.length > 0" class="cart-action-bar">
+                <view class="action-bar-content">
+                    <view class="action-left">
+                        <view class="select-all" @click="toggleSelectAll">
+                            <text v-if="allSelected" class="selected-icon">✓</text>
+                            <text v-else class="unselected-icon"></text>
+                            <text class="select-all-text">全选</text>
+                        </view>
+                    </view>
+                    
+                    <view class="action-right">
+                        <view v-if="!isManageMode" class="total-info">
+                            <text class="total-text">合计:</text>
+                            <text class="total-price">¥{{ totalPrice }}</text>
+                        </view>
+                        <button v-if="!isManageMode" class="checkout-btn" @click="goToCheckout">
+                            去结算({{ selectedCount }})
+                        </button>
+                        <button v-else class="delete-btn" @click="deleteSelectedItems">
+                            删除({{ selectedCount }})
+                        </button>
+                    </view>
+                </view>
+            </view>
+			
 			<!-- 推荐商品 -->
 			<view v-if="recommendProducts.length > 0" class="recommend-section">
 				<view class="section-header">
@@ -111,8 +137,8 @@
 			</view>
 		</scroll-view>
 		
-		<!-- 底部结算栏 -->
+		<!-- 底部结算栏 - 已移除，移动到内容区域 -->
-		<view v-if="cartItems.length > 0" class="cart-footer">
+		<!-- <view v-if="cartItems.length > 0" class="cart-footer">
 			<view class="footer-content">
 				<view class="footer-left">
 					<view class="select-all" @click="toggleSelectAll">
@@ -127,8 +153,6 @@
 						<text class="total-text">合计:</text>
 						<text class="total-price">¥{{ totalPrice }}</text>
 					</view>
-                    <!-- 结算按钮：即使在管理模式下，如果用户想结算也可以（或者在管理模式下隐藏结算，只显示删除） -->
-                    <!-- 需求：加购商品前面的按钮时；cart购物车页面顶部的管理点击能对加购商品进行批量删除 -->
 					<button v-if="!isManageMode" class="checkout-btn" @click="goToCheckout">
 						去结算({{ selectedCount }})
 					</button>
@@ -137,7 +161,7 @@
 					</button>
 				</view>
 			</view>
-		</view>
+		</view> -->
 	</view>
 </template>
 
@@ -415,15 +439,18 @@ const addToCart = (product: any) => {
 		}
 	}
 	
-	// 检查商品是否已存在
+	// 检查商品是否已存在 (使用商品ID匹配，因为推荐商品没有SKU)
-	const existingItem = currentItems.find((item: any) => item.id === product.id)
+	const existingItem = currentItems.find((item: any) => 
+		item.productId === product.id || item.id === product.id
+	)
 	
 	if (existingItem) {
 		existingItem.quantity++
 	} else {
 		// 添加新商品
 		currentItems.push({
-			id: product.id,
+			id: product.id, // 商品ID（因为没有SKU）
+			productId: product.id, // 同样存储商品ID
 			shopId: product.shopId || 'shop_recommend',
 			shopName: product.shopName || '推荐好物',
 			name: product.name,
@@ -453,7 +480,11 @@ const goShopping = () => {
 }
 
 const navigateToProduct = (product: any) => {
-	uni.navigateTo({ url: `/pages/mall/consumer/product-detail?id=${product.id}` })
+	// 使用productId（如果存在）作为跳转的商品ID，否则使用id
+	const productId = product.productId || product.id
+	uni.navigateTo({ 
+		url: `/pages/mall/consumer/product-detail?id=${productId}&name=${encodeURIComponent(product.name)}&price=${product.price}&image=${encodeURIComponent(product.image)}` 
+	})
 }
 
 const goToCheckout = () => {
@@ -465,7 +496,10 @@ const goToCheckout = () => {
 		return
 	}
 	
-	// 获取选中的商品
+	// 确保最新状态已保存到本地存储
+	saveCartData()
+	
+	// 获取选中的商品 (直接过滤cartItems，不依赖cartGroups)
 	const selectedItems = cartItems.value
 		.filter(item => item.selected)
 		.map(item => ({
@@ -475,10 +509,14 @@ const goToCheckout = () => {
 			product_name: item.name,
 			product_image: item.image,
 			sku_specifications: item.spec,
-			price: item.price,
+			price: Number(item.price), // 确保是数字
-			quantity: item.quantity
+			quantity: Number(item.quantity) // 确保是数字
 		}))
 	
+    // 关键修复：将结算数据写入 Storage，确保 checkout 页面能稳定获取
+    uni.setStorageSync('checkout_type', 'cart')
+    uni.setStorageSync('checkout_items', JSON.stringify(selectedItems))
+
 	// 跳转到结算页面并传递数据
 	uni.navigateTo({
 		url: '/pages/mall/consumer/checkout',
@@ -1059,83 +1097,171 @@ const goToCheckout = () => {
 	}
 }
 
-/* 底部结算栏 */
+	/* 购物车操作栏样式 - 自适应横向排列 */
-.cart-footer {
+	.cart-action-bar {
-	position: fixed;
+		background-color: white;
-	bottom: 0;
+		margin: 10px;
-	left: 0;
+		border-radius: 12px;
-	right: 0;
+		padding: 15px;
-	height: 60px;
+		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-	background-color: white;
+	}
-	border-top: 1px solid #eee;
-	display: flex;
-	align-items: center;
-	justify-content: center; /* 居中内容 */
-	padding: 0 15px;
-	z-index: 900;
-	padding-bottom: env(safe-area-inset-bottom);
-}
 
-.footer-content {
+	.action-bar-content {
-	width: 100%;
+		display: flex;
-	display: flex;
+		flex-direction: row;
-	align-items: center;
+		align-items: center;
-	justify-content: space-between;
+		justify-content: space-between;
-}
+		gap: 10px;
+	}
 
-.footer-left {
+	.action-left, .action-right {
-	display: flex;
+		display: flex;
-	align-items: center;
+		align-items: center;
-}
+		flex-wrap: nowrap;
+	}
 
-.select-all {
+	.action-right {
-	display: flex;
+		justify-content: flex-end;
-	align-items: center;
+		flex: 1;
-}
+		min-width: 0; /* 防止溢出 */
-
+	}
-.select-all-text {
+	
-	margin-left: 8px;
+	/* 合计信息区域 - 自适应横向排列 */
-	font-size: 14px;
+	.total-info {
-	color: #333;
+		display: flex;
-}
+		align-items: center;
-
+		margin-right: 12px;
-.footer-right {
+		flex-shrink: 0;
-	display: flex;
+	}
-	align-items: center;
+	
-}
+	.total-text {
-
+		font-size: 14px;
-.total-info {
+		color: #333;
-	margin-right: 15px;
+		margin-right: 5px;
-	text-align: right;
+		white-space: nowrap;
-}
+	}
-
+	
-.total-text {
+	.total-price {
-	font-size: 14px;
+		font-size: 18px;
-	color: #333;
+		color: #ff5000;
-	margin-right: 5px;
+		font-weight: bold;
-}
+		white-space: nowrap;
-
+	}
-.total-price {
+	
-	font-size: 18px;
+	/* 结算按钮 */
-	color: #ff5000;
+	.checkout-btn, .delete-btn {
-	font-weight: bold;
+		background-color: #ff5000;
-}
+		color: white;
-
+		border: none;
-.checkout-btn {
+		border-radius: 25px;
-	background-color: #ff5000;
+		padding: 8px 20px;
-	color: white;
+		font-size: 14px;
-	border: none;
+		white-space: nowrap;
-	border-radius: 25px;
+		flex-shrink: 0;
-	padding: 8px 20px;
+	}
-	font-size: 14px;
+	
-}
+	.delete-btn {
-
+		background-color: #ff3b30; /* 红色删除按钮 */
-.delete-btn {
+		padding: 8px 25px;
-	background-color: #ff3b30; /* 红色删除按钮 */
+	}
-	color: white;
+	
-	border: none;
+	/* 全选区域 */
-	border-radius: 25px;
+	.select-all {
-	padding: 8px 25px;
+		display: flex;
-	font-size: 14px;
+		align-items: center;
-}
+	}
+	
+	.select-all-text {
+		margin-left: 8px;
+		font-size: 14px;
+		color: #333;
+		white-space: nowrap;
+	}
+	
+	/* 响应式调整 */
+	/* 手机端小屏幕优化 */
+	@media screen and (max-width: 375px) {
+		.action-bar-content {
+			gap: 8px;
+		}
+		
+		.total-text {
+			font-size: 13px;
+		}
+		
+		.total-price {
+			font-size: 16px;
+		}
+		
+		.checkout-btn, .delete-btn {
+			padding: 8px 15px;
+			font-size: 13px;
+		}
+		
+		.select-all-text {
+			font-size: 13px;
+		}
+	}
+	
+	/* 平板端优化 */
+	@media screen and (min-width: 768px) {
+		.cart-action-bar {
+			margin: 20px auto;
+			max-width: 95%;
+			padding: 20px;
+		}
+		
+		.action-bar-content {
+			gap: 20px;
+		}
+		
+		.total-price {
+			font-size: 20px;
+		}
+		
+		.checkout-btn, .delete-btn {
+			padding: 10px 30px;
+			font-size: 16px;
+		}
+	}
+	
+	/* 桌面端优化 */
+	@media screen and (min-width: 1024px) {
+		.cart-action-bar {
+			max-width: 1200px;
+			padding: 20px 30px;
+		}
+		
+		.action-bar-content {
+			justify-content: space-between;
+		}
+		
+		.total-info {
+			margin-right: 30px;
+		}
+		
+		.total-text {
+			font-size: 16px;
+		}
+		
+		.total-price {
+			font-size: 22px;
+		}
+		
+		.checkout-btn, .delete-btn {
+			padding: 12px 40px;
+			font-size: 16px;
+		}
+		
+		.select-all-text {
+			font-size: 16px;
+		}
+	}
+	
+	/* 大屏幕优化 */
+	@media screen and (min-width: 1400px) {
+		.cart-action-bar {
+			max-width: 1400px;
+		}
+	}
 </style>

pages/mall/consumer/checkout.uvue

@@ -394,45 +394,49 @@ onLoad(() => {
 
 	// 从上一页获取数据
 	const eventChannel = uni.getEventChannel ? uni.getEventChannel() : null
+	
+	// 默认先尝试从本地存储加载（确保有数据）
+	loadFromLocalStorage()
+	
 	if (eventChannel) {
 		eventChannel.on('acceptData', (data: any) => {
 			console.log('接收到商品数据:', data)
 			let items = data.selectedItems || []
-			processCheckoutItems(items)
+			if (items.length > 0) {
+				processCheckoutItems(items)
+			}
 			loadDefaultAddress()
 		})
-	} else {
-		// 如果没有eventChannel，尝试从本地存储加载（例如从购物车进入）
-		loadFromLocalStorage()
 	}
 })
 
 // 处理商品数据清洗
 const processCheckoutItems = (items: any[]) => {
-	// 数据清洗：确保价格和数量是数字类型
+		// 数据清洗：确保价格和数量是数字类型
 	if (items && items.length > 0) {
 		items = items.map((item: any) => {
 			// 确保价格是数字
-			let price = item.price
+			let price = 0
-			if (price !== undefined && price !== null) {
+			if (item.price !== undefined && item.price !== null) {
-				price = typeof price === 'string' ? parseFloat(price) : Number(item.price)
+				price = typeof item.price === 'string' ? parseFloat(item.price) : Number(item.price)
 				if (isNaN(price)) price = 0
-			} else {
-				price = 0
 			}
 			
 			// 确保数量是数字
-			let quantity = item.quantity
+			let quantity = 1
-			if (quantity !== undefined && quantity !== null) {
+			if (item.quantity !== undefined && item.quantity !== null) {
-				quantity = typeof quantity === 'string' ? parseInt(quantity) : Number(item.quantity)
+				quantity = typeof item.quantity === 'string' ? parseInt(item.quantity) : Number(item.quantity)
 				if (isNaN(quantity) || quantity < 1) quantity = 1
-			} else {
-				quantity = 1
 			}
 			
 			return {
-				...item,
+				id: item.id,
-				price: Number(price.toFixed(2)), // 保留两位小数
+				product_id: item.product_id || item.id,
+				sku_id: item.sku_id || item.id,
+				product_name: item.product_name || item.name || '',
+				product_image: item.product_image || item.image || '',
+				sku_specifications: item.sku_specifications || item.spec || {},
+				price: Number(price.toFixed(2)),
 				quantity: quantity
 			}
 		})
@@ -466,6 +470,9 @@ onMounted(() => {
 // 组件卸载时移除事件监听
 onUnmounted(() => {
 	uni.$off('addressUpdated')
+    // 离开页面时清除结算数据，防止下次进入时显示旧数据
+    uni.removeStorageSync('checkout_type')
+    uni.removeStorageSync('checkout_items')
 })
 
 // 从本地存储加载结算数据（例如从购物车进入）
@@ -479,17 +486,27 @@ const loadFromLocalStorage = () => {
 			const selectedCartItems = cartItems.filter(item => item.selected === true)
 			if (selectedCartItems.length > 0) {
 				// 转换为CheckoutItemType格式
-				const convertedItems: CheckoutItemType[] = selectedCartItems.map(item => ({
+				const convertedItems: CheckoutItemType[] = selectedCartItems.map(item => {
-					id: item.id,
+					// 确保价格和数量是数字
-					product_id: item.productId,
+					let price = typeof item.price === 'string' ? parseFloat(item.price) : Number(item.price)
-					sku_id: item.id, // 购物车中item.id就是SKU ID
+					if (isNaN(price)) price = 0
-					product_name: item.name,
+					
-					product_image: item.image,
+					let quantity = typeof item.quantity === 'string' ? parseInt(item.quantity) : Number(item.quantity)
-					sku_specifications: item.spec ? { spec: item.spec } : {},
+					if (isNaN(quantity) || quantity < 1) quantity = 1
-					price: item.price,
+					
-					quantity: item.quantity
+					return {
-				}))
+						id: item.id,
-				checkoutItems.value = convertedItems
+						product_id: item.product_id || item.productId || item.id,
+						sku_id: item.sku_id || item.id,
+						product_name: item.name || '',
+						product_image: item.image || '',
+						sku_specifications: item.spec ? { spec: item.spec } : {},
+						price: price,
+						quantity: quantity
+					}
+				})
+				// 再次经过process处理确保类型正确
+				processCheckoutItems(convertedItems)
 			}
 		} catch (e) {
 			console.error('解析购物车数据失败:', e)

pages/mall/consumer/product-detail.uvue

@@ -234,21 +234,27 @@ export default {
       // 原价比现价高20%左右
       const originalPrice = options.originalPrice ? parseFloat(options.originalPrice) : parseFloat((basePrice * 1.2).toFixed(2))
       
-      // 根据商品ID生成不同的商品名称，使其更真实
+      // 优先使用传入的商品名称，否则根据商品ID生成名称
-      const productNames = [
+      const productName = options.name ? decodeURIComponent(options.name) : (() => {
-        '高品质运动休闲鞋',
+        // 如果options.name未传入，使用默认的商品名称生成逻辑
-        '时尚简约双肩背包',
+        const productNames = [
-        '多功能智能手环',
+          '高品质运动休闲鞋',
-        '便携式蓝牙音箱',
+          '时尚简约双肩背包',
-        '全自动雨伞',
+          '多功能智能手环',
-        '抗菌防螨床上四件套',
+          '便携式蓝牙音箱',
-        '不锈钢保温杯',
+          '全自动雨伞',
-        '无线充电器',
+          '抗菌防螨床上四件套',
-        '高清行车记录仪',
+          '不锈钢保温杯',
-        '智能体脂秤'
+          '无线充电器',
-      ]
+          '高清行车记录仪',
-      const nameIndex = Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % productNames.length
+          '智能体脂秤'
-      const productName = options.name ? options.name : productNames[nameIndex]
+        ]
+        const nameIndex = Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % productNames.length
+        return productNames[nameIndex]
+      })()
+      
+      // 优先使用传入的图片，否则使用默认图片
+      const productImage = options.image ? decodeURIComponent(options.image) : '/static/product1.jpg'
       
       // 模拟销量和库存，使其更真实
       const sales = 1000 + Math.abs(productId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)) % 5000
@@ -261,7 +267,7 @@ export default {
         name: productName,
         description: '这是一个高品质的商品，具有优秀的性能和优美的外观设计。采用环保材料，经过严格质检，保证用户的使用体验。',
         images: [
-          '/static/product1.jpg',
+          productImage,
           '/static/product2.jpg',
           '/static/product3.jpg'
         ],
@@ -307,9 +313,10 @@ export default {
       // 模拟加载商品SKU数据
       const basePrice = this.product.price
       
+      // 使用 productId 作为前缀生成唯一的 SKU ID，防止不同商品的 SKU ID 冲突
       this.productSkus = [
         {
-          id: 'sku_001',
+          id: `${productId}_sku_001`,
           product_id: productId,
           sku_code: 'SKU001',
           specifications: { color: '红色', size: 'M' },
@@ -319,7 +326,7 @@ export default {
           status: 1
         },
         {
-          id: 'sku_002',
+          id: `${productId}_sku_002`,
           product_id: productId,
           sku_code: 'SKU002',
           specifications: { color: '蓝色', size: 'L' },

pages/mall/consumer/settings.uvue

@@ -2,10 +2,10 @@
 <template>
 	<view class="settings-page">
 		<!-- 顶部栏 -->
-		<view class="settings-header">
+		<!--<view class="settings-header">
 			<text class="back-btn" @click="goBack">‹</text>
 			<text class="header-title">设置</text>
-		</view>
+		</view>-->
 
 		<scroll-view class="settings-content" scroll-y>
 			<!-- 账户设置 -->
@@ -17,11 +17,11 @@
 						<text class="item-text">个人资料</text>
 						<text class="item-arrow">›</text>
 					</view>
-					<view class="list-item" @click="goToAddressList">
+					<!--<view class="list-item" @click="goToAddressList">
 						<text class="item-icon">📍</text>
 						<text class="item-text">收货地址</text>
 						<text class="item-arrow">›</text>
-					</view>
+					</view>-->
 					<view class="list-item" @click="changePassword">
 						<text class="item-icon">🔒</text>
 						<text class="item-text">修改密码</text>
@@ -283,7 +283,7 @@ const calculateCacheSize = () => {
 // 跳转到个人资料
 const goToProfile = () => {
 	uni.navigateTo({
-		url: '/pages/mall/consumer/profile'
+		url: '/pages/user/profile'
 	})
 }
 
@@ -573,47 +573,126 @@ const goBack = () => {
 
 <style scoped>
 /* 响应式布局优化 */
-@media screen and (min-width: 768px) {
+.section-list {
-	.settings-content {
+	display: flex;
-		padding: 20px;
+	flex-direction: row;
-		background-color: #f5f5f5;
+	flex-wrap: wrap;
-	}
+	justify-content: flex-start;
+}
 
-	.settings-section {
+.list-item {
+	display: flex;
+	align-items: center;
+	padding: 15px;
+	border-bottom: 1px solid #f5f5f5;
+	background-color: #ffffff;
+	
+	/* 手机端每行显示4个，自适应排到下一行 */
+	width: 25%;
+	flex-direction: column; /* 内容改为垂直排列，图标在上文字在下 */
+	justify-content: center;
+	text-align: center;
+	box-sizing: border-box;
+	border-right: 1px solid #f5f5f5; /* 添加右边框分隔 */
+}
+
+.item-icon {
+	font-size: 24px;
+	margin-right: 0; /* 移除右侧间距 */
+	margin-bottom: 5px; /* 添加底部间距 */
+}
+
+.item-text {
+	font-size: 12px;
+	color: #333333;
+	/* 文字太长可能需要处理，这里暂时不做截断 */
+}
+
+.item-arrow {
+	display: none; /* 网格模式下通常不需要箭头 */
+}
+
+.item-right {
+	display: none; /* 简化显示，隐藏右侧状态/箭头等复杂内容 */
+}
+
+/* 针对 switch 组件的特殊处理，如果需要显示开关，可能需要调整布局 */
+.list-item switch {
+	transform: scale(0.7);
+	margin-top: 5px;
+}
+
+/* 屏幕宽度大于 480px (大屏手机/平板/PC) 时，启用更宽的网格布局或列表布局 */
+@media screen and (min-width: 480px) {
+	.list-item {
+		width: calc(50% - 10px); /* 每行两个，留出间隙 */
+		margin: 5px;
+		border: 1px solid #f0f0f0;
 		border-radius: 8px;
-		margin-bottom: 20px;
+		border-bottom: 1px solid #f0f0f0; 
-		max-width: 800px;
+		flex-direction: row; /* 恢复水平排列 */
-		margin-left: auto;
+		text-align: left;
-		margin-right: auto;
+		justify-content: flex-start;
 	}
-
+	
-	/* 电脑端横向排列部分内容 */
+	.item-icon {
-	.section-list {
+		margin-right: 15px;
-		display: flex;
+		margin-bottom: 0;
-		flex-direction: column;
 	}
-
+	
-	.logout-section, .delete-account-section {
+	.item-text {
-		max-width: 800px;
+		font-size: 14px;
-		margin-left: auto;
+	}
-		margin-right: auto;
+	
+	.item-arrow, .item-right {
+		display: flex; /* 恢复显示 */
+		margin-left: auto; /* 推到右侧 */
 	}
 }
 
+/* 增加针对手机横屏的媒体查询 */
+@media screen and (orientation: landscape) and (max-height: 500px) {
+    .list-item {
+		width: calc(25% - 10px); /* 横屏也保持4个一行，或者根据需要调整 */
+		margin: 5px;
+		border: 1px solid #f0f0f0;
+		border-radius: 8px;
+        flex-direction: column;
+	}
+}
+
+/* 屏幕宽度大于 1024px (大屏PC) 时 */
 @media screen and (min-width: 1024px) {
 	.settings-page {
-		flex-direction: row; /* 大屏下改为横向布局，左侧导航，右侧内容 */
+		flex-direction: row; /* 整体左右布局 */
 	}
 
 	.settings-header {
-		display: none; /* 大屏下隐藏顶部栏，可能使用侧边栏或其他导航 */
+		display: none;
 	}
 	
-	/* 这里只是简单示例，实际可能需要更复杂的布局调整 */
 	.settings-content {
 		width: 100%;
-		max-width: 1000px;
+		max-width: 1200px;
 		margin: 0 auto;
+		padding: 20px;
+	}
+	
+	.list-item {
+		width: calc(33.33% - 10px); /* 每行三个 */
+		flex-direction: row; /* PC端保持水平排列 */
+        justify-content: flex-start;
+        text-align: left;
+	}
+    
+    .item-icon {
+		margin-right: 15px;
+		margin-bottom: 0;
+	}
+    
+    .item-arrow, .item-right {
+		display: flex;
+        margin-left: auto;
 	}
 }
 
@@ -663,21 +742,9 @@ const goBack = () => {
 	margin-bottom: 15px;
 }
 
-.section-list {
+/* 删除多余的 .section-list 定义 */
-	display: flex;
+/* 删除多余的 .list-item 定义 */
-	flex-direction: column;
+/* 删除多余的 .list-item:last-child 定义 */
-}
-
-.list-item {
-	display: flex;
-	align-items: center;
-	padding: 15px 0;
-	border-bottom: 1px solid #f5f5f5;
-}
-
-.list-item:last-child {
-	border-bottom: none;
-}
 
 .item-icon {
 	font-size: 20px;
@@ -744,4 +811,4 @@ const goBack = () => {
 	font-size: 14px;
 	text-decoration: underline;
 }
-</style>
+</style>

pages/mall/consumer/wallet.uvue

@@ -2,11 +2,9 @@
 <template>
 	<view class="wallet-page">
 		<!-- 顶部栏 -->
-		<view class="wallet-header">
+		<!--<view class="wallet-header">
 			<text class="back-btn" @click="goBack">‹</text>
-			<text class="header-title">我的钱包</text>
+		</view>-->
-			<text class="more-btn" @click="showMoreActions">···</text>
-		</view>
 
 		<scroll-view class="wallet-content" scroll-y>
 			<!-- 余额概览 -->
@@ -162,7 +160,7 @@
 
 <script setup lang="uts">
 import { ref, onMounted, computed, watch } from 'vue'
-import supa from '@/components/supadb/aksupainstance.uts'
+//import supa from '@/components/supadb/aksupainstance.uts'
 
 type WalletType = {
 	id: string
@@ -556,18 +554,6 @@ const goBack = () => {
 	padding: 5px;
 }
 
-.header-title {
-	font-size: 18px;
-	font-weight: bold;
-	color: #333333;
-}
-
-.more-btn {
-	color: #333333;
-	font-size: 20px;
-	padding: 5px;
-}
-
 .wallet-content {
 	flex: 1;
 }

pages/user/bind-email.uvue

@@ -0,0 +1,544 @@
+<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>
+</template>
+
+<script setup lang="uts">
+import { ref, computed, onMounted } from 'vue'
+//import supa from '@/components/supadb/aksupainstance.uts'
+
+// 用户信息
+const userInfo = ref({
+	email: '',
+	emailBoundTime: null as string | null
+})
+
+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 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 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;
+}
+
+.header {
+	background-color: #ffffff;
+	padding: 15px;
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid #e5e5e5;
+}
+
+.back-btn {
+	width: 40px;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 10px;
+}
+
+.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;
+}
+
+.label {
+	display: block;
+	font-size: 16px;
+	color: #333;
+	margin-bottom: 10px;
+	font-weight: bold;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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>

pages/user/bind-phone.uvue

@@ -0,0 +1,548 @@
+<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>
+</template>
+
+<script setup lang="uts">
+import { ref, computed, onMounted } from 'vue'
+//import supa from '@/components/supadb/aksupainstance.uts'
+
+// 用户信息
+const userInfo = ref({
+	phone: '',
+	phoneBoundTime: null as string | null
+})
+
+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 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 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;
+}
+
+.header {
+	background-color: #ffffff;
+	padding: 15px;
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid #e5e5e5;
+}
+
+.back-btn {
+	width: 40px;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 10px;
+}
+
+.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;
+}
+
+.label {
+	display: block;
+	font-size: 16px;
+	color: #333;
+	margin-bottom: 10px;
+	font-weight: bold;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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>

pages/user/change-password.uvue

@@ -0,0 +1,353 @@
+<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>
+</template>
+
+<script setup lang="uts">
+import { ref, computed } from 'vue'
+import supa from '@/components/supadb/aksupainstance.uts'
+
+// 表单数据
+const form = ref({
+	currentPassword: '',
+	newPassword: '',
+	confirmPassword: ''
+})
+
+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()
+}
+</script>
+
+<style>
+.change-password-page {
+	min-height: 100vh;
+	background-color: #f5f5f5;
+}
+
+.header {
+	background-color: #ffffff;
+	padding: 15px;
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid #e5e5e5;
+}
+
+.back-btn {
+	width: 40px;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 10px;
+}
+
+.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;
+}
+
+.label {
+	display: block;
+	font-size: 16px;
+	color: #333;
+	margin-bottom: 10px;
+	font-weight: bold;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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>