提交昨晚至今早的修改
This commit is contained in:
18
pages.json
18
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": {
|
||||
|
||||
@@ -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>
|
||||
|
||||
1220
pages/mall/consumer/cart copy.uvue
Normal file
1220
pages/mall/consumer/cart copy.uvue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 检查商品是否已存在
|
||||
const existingItem = currentItems.find((item: any) => item.id === product.id)
|
||||
// 检查商品是否已存在 (使用商品ID匹配，因为推荐商品没有SKU)
|
||||
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,
|
||||
quantity: item.quantity
|
||||
price: Number(item.price), // 确保是数字
|
||||
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 {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
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);
|
||||
}
|
||||
/* 购物车操作栏样式 - 自适应横向排列 */
|
||||
.cart-action-bar {
|
||||
background-color: white;
|
||||
margin: 10px;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.action-bar-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.action-left, .action-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.select-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.action-right {
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
min-width: 0; /* 防止溢出 */
|
||||
}
|
||||
|
||||
.select-all-text {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
/* 合计信息区域 - 自适应横向排列 */
|
||||
.total-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.total-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.total-info {
|
||||
margin-right: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
.total-price {
|
||||
font-size: 18px;
|
||||
color: #ff5000;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.total-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 5px;
|
||||
}
|
||||
/* 结算按钮 */
|
||||
.checkout-btn, .delete-btn {
|
||||
background-color: #ff5000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 8px 20px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 18px;
|
||||
color: #ff5000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.delete-btn {
|
||||
background-color: #ff3b30; /* 红色删除按钮 */
|
||||
padding: 8px 25px;
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
background-color: #ff5000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 8px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* 全选区域 */
|
||||
.select-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background-color: #ff3b30; /* 红色删除按钮 */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 8px 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.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>
|
||||
|
||||
1730
pages/mall/consumer/checkout copy.uvue
Normal file
1730
pages/mall/consumer/checkout copy.uvue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||
if (price !== undefined && price !== null) {
|
||||
price = typeof price === 'string' ? parseFloat(price) : Number(item.price)
|
||||
let price = 0
|
||||
if (item.price !== undefined && item.price !== null) {
|
||||
price = typeof item.price === 'string' ? parseFloat(item.price) : Number(item.price)
|
||||
if (isNaN(price)) price = 0
|
||||
} else {
|
||||
price = 0
|
||||
}
|
||||
|
||||
// 确保数量是数字
|
||||
let quantity = item.quantity
|
||||
if (quantity !== undefined && quantity !== null) {
|
||||
quantity = typeof quantity === 'string' ? parseInt(quantity) : Number(item.quantity)
|
||||
let quantity = 1
|
||||
if (item.quantity !== undefined && item.quantity !== null) {
|
||||
quantity = typeof item.quantity === 'string' ? parseInt(item.quantity) : Number(item.quantity)
|
||||
if (isNaN(quantity) || quantity < 1) quantity = 1
|
||||
} else {
|
||||
quantity = 1
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
price: Number(price.toFixed(2)), // 保留两位小数
|
||||
id: item.id,
|
||||
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 => ({
|
||||
id: item.id,
|
||||
product_id: item.productId,
|
||||
sku_id: item.id, // 购物车中item.id就是SKU ID
|
||||
product_name: item.name,
|
||||
product_image: item.image,
|
||||
sku_specifications: item.spec ? { spec: item.spec } : {},
|
||||
price: item.price,
|
||||
quantity: item.quantity
|
||||
}))
|
||||
checkoutItems.value = convertedItems
|
||||
const convertedItems: CheckoutItemType[] = selectedCartItems.map(item => {
|
||||
// 确保价格和数量是数字
|
||||
let price = typeof item.price === 'string' ? parseFloat(item.price) : Number(item.price)
|
||||
if (isNaN(price)) price = 0
|
||||
|
||||
let quantity = typeof item.quantity === 'string' ? parseInt(item.quantity) : Number(item.quantity)
|
||||
if (isNaN(quantity) || quantity < 1) quantity = 1
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
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)
|
||||
|
||||
1733
pages/mall/consumer/checkoutgood.uvue
Normal file
1733
pages/mall/consumer/checkoutgood.uvue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -234,21 +234,27 @@ export default {
|
||||
// 原价比现价高20%左右
|
||||
const originalPrice = options.originalPrice ? parseFloat(options.originalPrice) : parseFloat((basePrice * 1.2).toFixed(2))
|
||||
|
||||
// 根据商品ID生成不同的商品名称，使其更真实
|
||||
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]
|
||||
// 优先使用传入的商品名称，否则根据商品ID生成名称
|
||||
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
|
||||
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' },
|
||||
|
||||
@@ -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) {
|
||||
.settings-content {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.section-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-direction: row; /* 恢复水平排列 */
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* 电脑端横向排列部分内容 */
|
||||
.section-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.item-icon {
|
||||
margin-right: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.logout-section, .delete-account-section {
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.item-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
/* 删除多余的 .section-list 定义 */
|
||||
/* 删除多余的 .list-item 定义 */
|
||||
/* 删除多余的 .list-item:last-child 定义 */
|
||||
|
||||
.item-icon {
|
||||
font-size: 20px;
|
||||
|
||||
@@ -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>
|
||||
<text class="more-btn" @click="showMoreActions">···</text>
|
||||
</view>
|
||||
</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;
|
||||
}
|
||||
|
||||
544
pages/user/bind-email.uvue
Normal file
544
pages/user/bind-email.uvue
Normal file
@@ -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>
|
||||
548
pages/user/bind-phone.uvue
Normal file
548
pages/user/bind-phone.uvue
Normal file
@@ -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>
|
||||
353
pages/user/change-password.uvue
Normal file
353
pages/user/change-password.uvue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user