huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改小程序bug

Browse Source
This commit is contained in:
huangzhenbao
2026-03-24 00:21:19 +08:00
parent 9efd2bc3a3
commit ca8794ea3a
28 changed files with 3169 additions and 986 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
pages/mall/merchant/orders.uvue
View File

@@ -2,9 +2,8 @@
<template>
<view class="orders-page">
<!-- #ifdef MP-WEIXIN -->
<!-- Tab 页无返回按鈕，展示顶部安全区 + 页面标题 -->
<view class="mp-tab-navbar">
<text class="mp-tab-title">订单管理</text>
<text class="mp-tab-title">订单</text>
</view>
<!-- #endif -->
<!-- 标签页切换 -->
@@ -38,14 +37,30 @@
<!-- 订单列表 -->
<scroll-view
class="orders-list"
scroll-y
direction="vertical"
:refresher-enabled="true"
:refresher-triggered="refreshing"
@refresherrefresh="onRefresh"
@scrolltolower="loadMore"
>
<view v-if="loading && orders.length === 0" class="loading-container">
<text class="loading-text">加载中...</text>
<view v-if="loading && orders.length === 0" class="ske-orders-wrap">
<view v-for="n in 4" :key="n" class="ske-order-card">
<view class="ske-order-hd">
<view class="ske-bar ske-w50 ske-h26"></view>
<view class="ske-bar ske-w22 ske-h26"></view>
</view>
<view class="ske-order-product">
<view class="ske-product-img"></view>
<view class="ske-product-info">
<view class="ske-bar ske-w70 ske-h28 ske-mb10"></view>
<view class="ske-bar ske-w40 ske-h22"></view>
</view>
</view>
<view class="ske-order-ft">
<view class="ske-bar ske-w30 ske-h22"></view>
<view class="ske-bar ske-w25 ske-h30"></view>
</view>
</view>
</view>
<view v-else-if="orders.length === 0" class="empty-container">
@@ -134,6 +149,8 @@
<view v-if="!hasMore && orders.length > 0" class="no-more">
<text class="no-more-text">没有更多了</text>
</view>
<!-- 底部占位：tabbar高度 + safeAreaInsets.bottom，动态计算 -->
<view class="safe-bottom" :style="{ height: safeBottomHeight }"></view>
</scroll-view>
<!-- 发货弹窗 -->
@@ -257,7 +274,10 @@
{ name: '京东物流', code: 'JD' }
] as LogisticsType[],
selectedLogistics: null as LogisticsType | null,
trackingNumber: ''
trackingNumber: '',
isPageReady: false,
// 动态计算的底部安全却高度（tabbar高度 + safeAreaInsets.bottom）
safeBottomHeight: '160rpx' as string
}
},
@@ -273,6 +293,7 @@
this.currentTab = statusMap[type] ?? -2
}
this.initMerchantId()
this.initSafeArea()
},
onShow() {
@@ -288,6 +309,23 @@
},
methods: {
// 计算底部安全區: tabbar自身高度(~56px) + 底部制安全区高度
initSafeArea() {
// #ifdef MP-WEIXIN
try {
const info = wx.getWindowInfo()
const safeObj = info.safeArea
if (safeObj != null) {
const bottomInset = info.screenHeight - safeObj.bottom
// tabbar内容区域约60px + 底部安剨覆盖
this.safeBottomHeight = (60 + bottomInset) + 'px'
}
} catch(_e : any) {
this.safeBottomHeight = '160rpx'
}
// #endif
},
async initMerchantId() {
try {
const session = supa.getSession()
@@ -415,7 +453,6 @@
this.hasMore = rawData.length >= this.limit
} catch (e) {
console.error('获取订单异常:', e)
uni.showToast({ title: '加载失败，请检查网络连接', icon: 'none' })
} finally {
this.loading = false
this.refreshing = false
@@ -636,21 +673,42 @@
<style>
.orders-page {
background-color: #f5f5f5;
min-height: 100vh;
/* 使用严格高度而非 min-height，确保 flex:1 的 scroll-view 正确被限制在视口内 */
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.mp-tab-navbar { height: calc(88rpx + var(--status-bar-height)); padding-top: var(--status-bar-height); background-color: #ffffff; display: flex; flex-direction: row; align-items: center; justify-content: center; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #f0f0f0; }
.mp-tab-title { font-size: 34rpx; font-weight: bold; color: #333333; }
.mp-tab-navbar {
height: calc(88rpx + var(--status-bar-height));
padding-top: var(--status-bar-height);
background-color: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-bottom-width: 1rpx;
border-bottom-style: solid;
border-bottom-color: #f0f0f0;
}
.mp-tab-title {
font-size: 34rpx;
font-weight: bold;
color: #333333;
}
.tabs-container {
background-color: #fff;
position: sticky;
top: 0;
z-index: 100;
/* 去除 sticky+z-index：在小程序中两者结合会创建茂叠上下文层，
导致兴弟节点 merchant-tabbar (position:fixed) 被层叠侧改而隐藏 */
flex-shrink: 0;
}
.tabs-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
white-space: nowrap;
padding: 0 20rpx;
@@ -728,7 +786,14 @@
.orders-list {
padding: 0 20rpx;
height: calc(100vh - 460rpx);
flex: 1;
overflow: hidden;
}
.safe-bottom {
/* 高度通过 :style=" {height: safeBottomHeight}" 动态设置，
不再写死 160rpx */
background-color: transparent;
}
.loading-container, .empty-container {
@@ -1058,4 +1123,18 @@
color: #007AFF;
font-weight: bold;
}
/* ===== 骨架屏 ===== */
@keyframes ske-pulse { 0% { opacity: 1; } 50% { opacity: 0.45; } 100% { opacity: 1; } }
.ske-orders-wrap { padding: 24rpx; }
.ske-order-card { background-color: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx; }
.ske-order-hd { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
.ske-order-product { display: flex; flex-direction: row; align-items: center; margin-bottom: 20rpx; }
.ske-product-img { width: 100rpx; height: 100rpx; border-radius: 12rpx; background-color: #e8e8e8; margin-right: 16rpx; flex-shrink: 0; animation: ske-pulse 1.4s ease-in-out infinite; }
.ske-product-info { flex: 1; }
.ske-order-ft { display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-top-width: 1rpx; border-top-style: solid; border-top-color: #f5f5f5; padding-top: 16rpx; }
.ske-bar { border-radius: 8rpx; background-color: #e8e8e8; animation: ske-pulse 1.4s ease-in-out infinite; }
.ske-w22 { width: 22%; } .ske-w25 { width: 25%; } .ske-w30 { width: 30%; } .ske-w40 { width: 40%; } .ske-w50 { width: 50%; } .ske-w70 { width: 70%; }
.ske-h22 { height: 22rpx; } .ske-h26 { height: 26rpx; } .ske-h28 { height: 28rpx; } .ske-h30 { height: 30rpx; }
.ske-mb10 { margin-bottom: 10rpx; }
</style>