提交昨晚至今早的修改
This commit is contained in:
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;
|
||||
}
|
||||
|
||||
.select-all-text {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.total-info {
|
||||
margin-right: 15px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.total-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 18px;
|
||||
color: #ff5000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
background-color: #ff5000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 8px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background-color: #ff3b30; /* 红色删除按钮 */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 8px 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.action-right {
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
min-width: 0; /* 防止溢出 */
|
||||
}
|
||||
|
||||
/* 合计信息区域 - 自适应横向排列 */
|
||||
.total-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.total-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 18px;
|
||||
color: #ff5000;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 结算按钮 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background-color: #ff3b30; /* 红色删除按钮 */
|
||||
padding: 8px 25px;
|
||||
}
|
||||
|
||||
/* 全选区域 */
|
||||
.select-all {
|
||||
display: flex;
|
||||
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>
|
||||
|
||||
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;
|
||||
@@ -744,4 +811,4 @@ const goBack = () => {
|
||||
font-size: 14px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user