fix(iOS微信真机): 修复核销记录页高度塌陷+header点击穿透+iconfont裁剪
1. records/index.css: .records-page 加 height:100vh (同 verify 修复) - 原先只有 min-height:100vh,iOS flex:1 scroll-view 高度塌陷 2. records/index.css + verify/index.css: header pointer-events 修复 - backdrop-filter 在 iOS 创建合成层会拦截下方点击 - header 容器 pointer-events:none,header-inner pointer-events:auto - 修复 header 半透明区域无法点击、返回按钮无响应 3. records/index.vue: getApp() 从顶层移到 onLoad() (同 verify 修复) - 消除 subpackage evaluate 时机隐患 - 5 处 app.globalData 改为 getApp().globalData 4. iconfont.vue: 修复 iOS 大尺寸 icon 裁剪/样式残缺 - 移除 max-width/max-height:100px 限制 - 移除 width/height:1em 硬约束 - display:flex → inline-block,让 font-size 驱动尺寸 gitnexus detect_changes: risk_level=low, 0 affected_processesmaster
parent
388a80e035
commit
4438a84056
|
|
@ -41,14 +41,13 @@
|
|||
@import url('@/static/icon/iconfont.css');
|
||||
/* @import url('https://at.alicdn.com/t/c/font_4227145_kbr2f9jt68b.css'); */
|
||||
.iconfont {
|
||||
display: flex;
|
||||
/* [iOS 修复] 2026-06-30
|
||||
原先 display:flex + max-width/max-height:100px + width/height:1em
|
||||
在 iOS 微信真机上会导致大尺寸 icon (如 120rpx) 被裁剪或样式残缺。
|
||||
改用 inline-block,让 font-size 驱动尺寸,不设 max-width/max-height。 */
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
overflow: hidden;
|
||||
/* 限制最大尺寸防止缩放异常 */
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
/* 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果 */
|
||||
vertical-align: -0.15em;
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<view
|
||||
class="date-group"
|
||||
v-for="(group, gIdx) in groupedRecords"
|
||||
:key="'date-' + gIdx"
|
||||
:key="gIdx"
|
||||
>
|
||||
<!-- 日期标题 -->
|
||||
<view class="date-header">
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<view
|
||||
class="record-card"
|
||||
v-for="(item, idx) in group.list"
|
||||
:key="'record-' + item.id"
|
||||
:key="item.id"
|
||||
>
|
||||
<!-- 卡片头部:商品标题 + 核销时间 -->
|
||||
<view class="card-header-row">
|
||||
|
|
@ -150,22 +150,23 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
// ──────────────────────────────────────────────────────────────────────────
|
||||
// [iOS 真机白屏修复 · 方案 A] 2026-06-30
|
||||
// 根因:vr-ticket-wallet 是独立 subpackage,iOS 微信真机的 subpackage
|
||||
// evaluate 阶段早于 App.vue#onLaunch,顶层 getApp().globalData 拿到残缺
|
||||
// globalData,导致页面 <script> evaluation 失败。
|
||||
// 修复:把 getApp() 及 globalData 读取延迟到 onLoad() 生命周期。
|
||||
// 详见 docs/ios-weixin-real-device-white-screen-report.md
|
||||
// ──────────────────────────────────────────────────────────────────────────
|
||||
import componentCommon from '@/components/common/common';
|
||||
|
||||
const app = getApp();
|
||||
// 状态栏高度
|
||||
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0, true));
|
||||
// #ifdef MP-TOUTIAO || H5
|
||||
bar_height = 0;
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
components: {
|
||||
componentCommon
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status_bar_height: bar_height,
|
||||
status_bar_height: 0,
|
||||
// 统计数据
|
||||
totalCount: 0,
|
||||
todayCount: 0,
|
||||
|
|
@ -222,6 +223,14 @@ export default {
|
|||
},
|
||||
|
||||
onLoad() {
|
||||
// [iOS 修复] getApp() 及 globalData 读取移到 onLoad(),
|
||||
// 确保 evaluate 阶段不依赖 app.globalData
|
||||
const app = getApp();
|
||||
let bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0, true));
|
||||
// #ifdef MP-TOUTIAO || H5
|
||||
bar_height = 0;
|
||||
// #endif
|
||||
this.status_bar_height = bar_height;
|
||||
this.init();
|
||||
},
|
||||
|
||||
|
|
@ -248,7 +257,7 @@ export default {
|
|||
|
||||
// 初始化
|
||||
init() {
|
||||
var user = app.globalData.get_user_info(this, 'init');
|
||||
var user = getApp().globalData.get_user_info(this, 'init');
|
||||
if (user == false) {
|
||||
this.isLoading = false;
|
||||
return;
|
||||
|
|
@ -262,7 +271,7 @@ export default {
|
|||
this.isLoading = true;
|
||||
|
||||
uni.request({
|
||||
url: app.globalData.get_request_url('myVerifications', 'ticket', 'vr_ticket'),
|
||||
url: getApp().globalData.get_request_url('myVerifications', 'ticket', 'vr_ticket'),
|
||||
method: 'GET',
|
||||
data: {
|
||||
page: this.page,
|
||||
|
|
@ -289,8 +298,8 @@ export default {
|
|||
// 计算今日核销
|
||||
self.calculateTodayCount();
|
||||
} else {
|
||||
if (app.globalData.is_login_check(res.data, self, 'init')) {
|
||||
app.globalData.showToast(res.data.msg);
|
||||
if (getApp().globalData.is_login_check(res.data, self, 'init')) {
|
||||
getApp().globalData.showToast(res.data.msg);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -298,7 +307,7 @@ export default {
|
|||
self.isLoading = false;
|
||||
self.isRefreshing = false;
|
||||
self.isLoadingMore = false;
|
||||
app.globalData.showToast(self.$t('common.internet_error_tips'));
|
||||
getApp().globalData.showToast(self.$t('common.internet_error_tips'));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
/* ========== 页面整体布局 ========== */
|
||||
/* [iOS 修复] 2026-06-30
|
||||
原先只有 min-height:100vh,iOS 微信真机下 flex:1 的 scroll-view
|
||||
拿不到明确高度基准 → 高度塌陷为 0 → 内容不可见。
|
||||
加 height:100vh 提供明确基准,min-height 保留兜底。
|
||||
同时 header 的 backdrop-filter 在 iOS 上可能拦截点击,
|
||||
给 header-inner 加 pointer-events:auto 确保按钮可点击。 */
|
||||
.records-page {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||
display: flex;
|
||||
|
|
@ -17,6 +24,9 @@
|
|||
}
|
||||
|
||||
/* ========== 顶部固定导航栏 (自实现) ========== */
|
||||
/* [iOS 修复] backdrop-filter 在 iOS 上会创建合成层拦截下方点击。
|
||||
header 容器设 pointer-events:none 透传点击,
|
||||
header-inner 设 pointer-events:auto 恢复按钮可点击。 */
|
||||
.records-fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -35,12 +45,14 @@
|
|||
-webkit-backdrop-filter: blur(20rpx);
|
||||
border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.records-fixed-header-inner {
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.records-header-bar {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
}
|
||||
|
||||
/* ========== 顶部固定导航栏 (自实现) ========== */
|
||||
/* [iOS 修复] backdrop-filter 在 iOS 上会创建合成层拦截下方点击。
|
||||
header 容器设 pointer-events:none 透传点击,
|
||||
header-inner 设 pointer-events:auto 恢复按钮可点击。 */
|
||||
.verify-fixed-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -31,12 +34,14 @@
|
|||
backdrop-filter: blur(20rpx);
|
||||
-webkit-backdrop-filter: blur(20rpx);
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.verify-fixed-header-inner {
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.verify-header-bar {
|
||||
|
|
|
|||
Loading…
Reference in New Issue