fix(miniprogram): adapt bx topbar for WeChat capsule safe area
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
1 parent
8505115f05
commit
f0d64379a7
13 files changed
+51
-37
No files matched your search
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="onBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -160,7 +160,6 @@
|
||||
<view class="bx-sheet__title">选择审批人</view>
|
||||
<view class="search-wrap" style="padding: 8px 16px 0">
|
||||
<view class="search-box">
|
||||
<text class="search-box__icon">⌕</text>
|
||||
<input
|
||||
v-model="approverKeyword"
|
||||
class="search-input"
|
||||
@@ -197,6 +196,8 @@ import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { workflowApi, fetchPortalUserOptions } from '@/api/bx'
|
||||
import { statusLabel, adminStatusTagClass } from '@/utils/bxFormat'
|
||||
import { PAGE_PATHS } from '@/config/api'
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
|
||||
const props = defineProps({
|
||||
bizType: { type: String, required: true },
|
||||
@@ -452,7 +453,7 @@ async function moveDown(node) {
|
||||
}
|
||||
|
||||
function onBack() {
|
||||
uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
|
||||
uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="onBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -216,6 +216,9 @@ import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { expenseItemApi } from '@/api/bx'
|
||||
import { statusLabel, adminStatusTagClass } from '@/utils/bxFormat'
|
||||
import { PAGE_PATHS } from '@/config/api'
|
||||
import { getSafeAreaStyle, getGlobalSafeArea } from '@/utils/safeArea'
|
||||
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
|
||||
const expenseTree = ref([])
|
||||
const loading = ref(false)
|
||||
@@ -258,7 +261,7 @@ const dialogTitle = computed(() => {
|
||||
function measureListHeight() {
|
||||
try {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
const topbar = 44 + (sys.statusBarHeight || 0)
|
||||
const topbar = getGlobalSafeArea().headerHeight
|
||||
listHeight.value = `${Math.max(320, (sys.windowHeight || 600) - topbar)}px`
|
||||
} catch (e) {
|
||||
listHeight.value = '70vh'
|
||||
@@ -417,7 +420,7 @@ function handleDelete(item) {
|
||||
}
|
||||
|
||||
function onBack() {
|
||||
uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
|
||||
uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page bx-page--form">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="goBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -89,6 +89,8 @@ import { ref, reactive, computed } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { PAGE_PATHS } from '@/config/api'
|
||||
import { advanceApi, attachmentApi } from '@/api/bx'
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
|
||||
const MAX_ATTACHMENTS = 10
|
||||
const editId = ref('')
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page bx-page--form">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="goBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -197,6 +197,8 @@ import { onLoad } from '@dcloudio/uni-app'
|
||||
import { PAGE_PATHS } from '@/config/api'
|
||||
import { advanceApi, attachmentApi } from '@/api/bx'
|
||||
import {
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
statusLabel,
|
||||
ticketHeaderStatusToneClass,
|
||||
formatAmount,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="goBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -14,7 +14,6 @@
|
||||
|
||||
<view class="search-wrap">
|
||||
<view class="search-box">
|
||||
<text class="search-box__icon">⌕</text>
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="keyword"
|
||||
@@ -132,6 +131,8 @@ import { onShow } from '@dcloudio/uni-app'
|
||||
import { PAGE_PATHS } from '@/config/api'
|
||||
import { advanceApi } from '@/api/bx'
|
||||
import {
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
statusLabel,
|
||||
workflowListStatusTagClass,
|
||||
formatAmount,
|
||||
@@ -240,7 +241,7 @@ function clearKeyword() {
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
|
||||
uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
|
||||
}
|
||||
|
||||
function goApply(id) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="goBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -36,7 +36,6 @@
|
||||
|
||||
<view class="search-wrap">
|
||||
<view class="search-box">
|
||||
<text class="search-box__icon">⌕</text>
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="keyword"
|
||||
@@ -207,6 +206,8 @@ import { onShow } from '@dcloudio/uni-app'
|
||||
import { PAGE_PATHS } from '@/config/api'
|
||||
import { advanceApi, reimburseApi, expenseItemApi } from '@/api/bx'
|
||||
import {
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
statusLabel,
|
||||
ticketHeaderStatusToneClass,
|
||||
workflowListStatusTagClass,
|
||||
@@ -406,7 +407,7 @@ function clearKeyword() {
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
|
||||
uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
|
||||
}
|
||||
|
||||
function goDetail(item) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="onBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -16,7 +16,6 @@
|
||||
<template v-if="!detailUser">
|
||||
<view class="search-wrap">
|
||||
<view class="search-box">
|
||||
<text class="search-box__icon">⌕</text>
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="keyword"
|
||||
@@ -221,6 +220,8 @@
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { attachmentApi, invoiceApi, invoiceWalletApi } from '@/api/bx'
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
|
||||
const PAGE_SIZE = 5
|
||||
|
||||
@@ -509,7 +510,7 @@ function onBack() {
|
||||
resetWalletList()
|
||||
return
|
||||
}
|
||||
uni.navigateBack({ fail: () => uni.switchTab({ url: '/pages/index/index' }) })
|
||||
uni.navigateBack({ fail: () => uni.reLaunch({ url: '/pages/workbench/workbench' }) })
|
||||
}
|
||||
|
||||
function onDelete(inv) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="goBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -217,6 +217,8 @@
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import { attachmentApi, invoiceApi, invoiceWalletApi } from '@/api/bx'
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
|
||||
const PAGE_SIZE = 5
|
||||
|
||||
@@ -251,7 +253,7 @@ const uploadPaths = ref([])
|
||||
const uploading = ref(false)
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack({ fail: () => uni.switchTab({ url: '/pages/index/index' }) })
|
||||
uni.navigateBack({ fail: () => uni.reLaunch({ url: '/pages/workbench/workbench' }) })
|
||||
}
|
||||
|
||||
function money(v) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="goBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -31,7 +31,6 @@
|
||||
|
||||
<view class="search-wrap">
|
||||
<view class="search-box">
|
||||
<text class="search-box__icon">⌕</text>
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="keyword"
|
||||
@@ -248,6 +247,8 @@ import { onShow } from '@dcloudio/uni-app'
|
||||
import { PAGE_PATHS } from '@/config/api'
|
||||
import { advanceApi, reimburseApi, expenseItemApi } from '@/api/bx'
|
||||
import {
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
statusLabel,
|
||||
workflowListStatusTagClass,
|
||||
formatAmount,
|
||||
@@ -402,7 +403,7 @@ function clearKeyword() {
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
|
||||
uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
|
||||
}
|
||||
|
||||
function onFabAdd() {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page bx-page--form">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="goBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -261,6 +261,8 @@ import {
|
||||
invoiceApi
|
||||
} from '@/api/bx'
|
||||
import {
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
normalizeExpenseItem,
|
||||
flattenExpenseTree,
|
||||
formatExpenseName
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page bx-page--form">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="goBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -220,6 +220,8 @@ import { onLoad } from '@dcloudio/uni-app'
|
||||
import { PAGE_PATHS } from '@/config/api'
|
||||
import { reimburseApi, attachmentApi, expenseItemApi } from '@/api/bx'
|
||||
import {
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
statusLabel,
|
||||
ticketHeaderStatusToneClass,
|
||||
formatAmount,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="bx-page">
|
||||
<view class="topbar">
|
||||
<view class="topbar" :style="safeAreaStyle">
|
||||
<view class="topbar-left">
|
||||
<view class="topbar-back" @click="goBack">
|
||||
<text class="topbar-back-icon">‹</text>
|
||||
@@ -14,7 +14,6 @@
|
||||
|
||||
<view class="search-wrap">
|
||||
<view class="search-box">
|
||||
<text class="search-box__icon">⌕</text>
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="keyword"
|
||||
@@ -147,6 +146,8 @@ import { onShow } from '@dcloudio/uni-app'
|
||||
import { PAGE_PATHS } from '@/config/api'
|
||||
import { reimburseApi, expenseItemApi } from '@/api/bx'
|
||||
import {
|
||||
import { getSafeAreaStyle } from '@/utils/safeArea'
|
||||
const safeAreaStyle = getSafeAreaStyle()
|
||||
statusLabel,
|
||||
workflowListStatusTagClass,
|
||||
formatAmount,
|
||||
@@ -269,7 +270,7 @@ function clearKeyword() {
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
uni.navigateBack({ fail: () => uni.switchTab({ url: PAGE_PATHS.workbench }) })
|
||||
uni.navigateBack({ fail: () => uni.reLaunch({ url: PAGE_PATHS.workbench }) })
|
||||
}
|
||||
|
||||
function goApply(id) {
|
||||
|
||||
@@ -76,10 +76,11 @@
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-columns: minmax(0, 1fr) auto var(--sq-capsule-right-safe, 96px);
|
||||
align-items: center;
|
||||
height: calc(58px + env(safe-area-inset-top, 0px));
|
||||
padding: env(safe-area-inset-top, 0px) 12px 0;
|
||||
height: var(--sq-header-height, calc(44px + 44px));
|
||||
padding: var(--sq-safe-top, 44px) 12px 0;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: 0 1px 0 rgba(217, 232, 226, 0.85), 0 8px 20px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
@@ -90,7 +91,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: calc(58px + env(safe-area-inset-top, 0px));
|
||||
height: var(--sq-header-height, calc(44px + 44px));
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(16, 185, 129, 0.1),
|
||||
@@ -164,12 +165,6 @@
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.bx-page .search-box__icon {
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bx-page .search-box input,
|
||||
.bx-page .search-box .search-input {
|
||||
flex: 1;
|
||||
|
||||
Reference in new issue
Block a user