zianxin/pj_h5_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整页面顶部区域高度和隐藏部分页面

Browse Source
This commit is contained in:
weiwei committed 2025-02-21 16:51:46 +08:00
1 parent 34ae6fff4c
commit 92c7e01d49
10 files changed
+228 -238
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.env
+2 -2
View File
@@ -44,5 +44,5 @@ VITE_APP_DEV_SERVICE = http://59.202.170.152:81/api # 信创线上
VITE_APP_PROD_SERVICE = http://59.202.170.152:81/api # 信创线上
# ******************** end 生产环境 end ********************
# VITE_DEV_ENV = dev
VITE_DEV_ENV = prod
VITE_DEV_ENV = dev
# VITE_DEV_ENV = prod
src/pages.json
+13 -13
View File
@@ -16,13 +16,13 @@
"disableScroll": true
}
},
{
"path": "pages/tabbar/shop",
"style": {
"navigationBarTitleText": "超市",
"disableScroll": true
}
},
// {
// "path": "pages/tabbar/shop",
// "style": {
// "navigationBarTitleText": "超市",
// "disableScroll": true
// }
// },
{
"path": "pages/tabbar/order",
"style": {
@@ -273,12 +273,12 @@
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-select.png"
},
{
"pagePath": "pages/tabbar/shop",
"text": "超市",
"iconPath": "static/tabbar/shop.png",
"selectedIconPath": "static/tabbar/shop-select.png"
},
// {
// "pagePath": "pages/tabbar/shop",
// "text": "超市",
// "iconPath": "static/tabbar/shop.png",
// "selectedIconPath": "static/tabbar/shop-select.png"
// },
{
"pagePath": "pages/tabbar/order",
"text": "订单",
src/pages/boxes/list.vue
+78 -72
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, reactive } from "vue"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { isEmpty } from "radash"
import { hooks, router } from "@@/index"
@@ -10,96 +10,102 @@ import zTabs from "@@/components/other/z-tabs/z-tabs.vue"
import CustomWaterfallsFlow from "@@/components/other/custom-waterfalls-flow/custom-waterfalls-flow.vue"
const data = {
tabs: [
{ id: null, name: '全部', disabled: false },
{ id: 0, name: '空闲', disabled: false },
{ id: 1, name: '部分空闲', disabled: false },
{ id: 2, name: '已满', disabled: false },
],
tabs: [
{ id: null, name: "全部", disabled: false },
{ id: 0, name: "空闲", disabled: false },
{ id: 1, name: "部分空闲", disabled: false },
{ id: 2, name: "已满", disabled: false },
],
}
const state = reactive<any>({
detailId: null,
pa: {
status: data.tabs[0].id,
},
detailId: null,
pa: {
status: data.tabs[0].id,
},
})
const pageRef = ref<any>(null)
const pageHook = hooks.usePage(pageRef, boxesApi.page, null, 'data.records')
const pageHook = hooks.usePage(pageRef, boxesApi.page, null, "data.records")
const query = (page: number, pagesize: number) => {
pageHook.startPage(page, pagesize, false, state.pa);
pageHook.startPage(page, pagesize, false, state.pa)
}
onLoad((options: any) => {
if (!isEmpty(options.id)) {
state.detailId = options.id
state.pa.merchantId = options.id
}
});
if (!isEmpty(options.id)) {
state.detailId = options.id
state.pa.merchantId = options.id
}
})
onShow(() => {
if (pageRef.value) {
pageRef.value.reload(false)
}
if (pageRef.value) {
pageRef.value.reload(false)
}
})
const doTab = (e: any) => {
const target = data.tabs[e];
state.pa.status = target.id
pageRef.value.reload(true)
const target = data.tabs[e]
state.pa.status = target.id
pageRef.value.reload(true)
}
const doCard = (v: any) => {
router.jump('/pages/boxes/detail', { id: v.id })
router.jump("/pages/boxes/detail", { id: v.id })
}
</script>
<template>
<crud-layout title="包厢预定" bg="/static/page/blue-bg.png">
<z-paging ref="pageRef" height="100%" :fixed="false" v-model="pageHook.list" :default-page-size="5"
safe-area-inset-bottom :loading-more-enabled="true" :show-scrollbar="false" @query="query"
:auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false" @scroll="pageHook.scroll">
<template #top>
<view class="bg-white rounded-16rpx px-20rpx m-x-10rpx m-t-15rpx">
<z-tabs :list="data.tabs" @change="doTab" />
</view>
</template>
<view class="h-20rpx" />
<custom-waterfalls-flow v-model="pageHook.list" imageKey="images" :columnSpace="1" @wapperClick="doCard"
@imageClick="doCard">
<template v-slot:default="v">
<view class="p-x-15rpx p-t-10rpx p-b-20rpx">
<view class="sub-text-28 show-line">{{ v.name }}</view>
<view class="m-t-10rpx flex-row items-center">
<view class="second-text-32 color-#f63a36!">
¥{{ v.price }}
</view>
</view>
<view class="flex-row items-center m-t-10rpx">
<view class="second-text-26">可容纳{{ v.capacity }}人</view>
<view class="w-1px h-20rpx m-x-5rpx bg-#999" />
<view class="flex-row-center">
<tm-tag v-if="v.status == 0" size="xs" color="success">
{{ hooks.useEnum("boxesBxStatusEnum", v.status.toString()) }}
</tm-tag>
<tm-tag v-if="v.status == 1" size="xs">
{{ hooks.useEnum("boxesBxStatusEnum", v.status) }}
</tm-tag>
<tm-tag v-if="v.status == 2" size="xs" color="error">
{{ hooks.useEnum("boxesBxStatusEnum", v.status) }}
</tm-tag>
</view>
</view>
<view class="flex-row items-center m-t-10rpx">
<view class="second-text-26">{{ v.address }}</view>
</view>
</view>
</template>
</custom-waterfalls-flow>
</z-paging>
</crud-layout>
<crud-layout title="包厢预定" bg="/static/page/blue-bg.png">
<z-paging
ref="pageRef"
height="100%"
:fixed="false"
v-model="pageHook.list"
:default-page-size="5"
safe-area-inset-bottom
:loading-more-enabled="true"
:show-scrollbar="false"
@query="query"
:auto-clean-list-when-reload="false"
:auto-scroll-to-top-when-reload="false"
@scroll="pageHook.scroll"
>
<template #top>
<view class="bg-white rounded-16rpx px-20rpx m-x-10rpx m-t-20rpx">
<z-tabs :list="data.tabs" @change="doTab" />
</view>
</template>
<view class="h-20rpx" />
<custom-waterfalls-flow v-model="pageHook.list" imageKey="images" :columnSpace="1" @wapperClick="doCard" @imageClick="doCard">
<template v-slot:default="v">
<view class="p-x-15rpx p-t-10rpx p-b-20rpx">
<view class="sub-text-28 show-line">{{ v.name }}</view>
<view class="m-t-10rpx flex-row items-center">
<view class="second-text-32 color-#f63a36!"> ¥{{ v.price }} </view>
</view>
<view class="flex-row items-center m-t-10rpx">
<view class="second-text-26">可容纳{{ v.capacity }}人</view>
<view class="w-1px h-20rpx m-x-5rpx bg-#999" />
<view class="flex-row-center">
<tm-tag v-if="v.status == 0" size="xs" color="success">
{{ hooks.useEnum("boxesBxStatusEnum", v.status.toString()) }}
</tm-tag>
<tm-tag v-if="v.status == 1" size="xs">
{{ hooks.useEnum("boxesBxStatusEnum", v.status) }}
</tm-tag>
<tm-tag v-if="v.status == 2" size="xs" color="error">
{{ hooks.useEnum("boxesBxStatusEnum", v.status) }}
</tm-tag>
</view>
</view>
<view class="flex-row items-center m-t-10rpx">
<view class="second-text-26">{{ v.address }}</view>
</view>
</view>
</template>
</custom-waterfalls-flow>
</z-paging>
</crud-layout>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped></style>
src/pages/merchant/food.vue
+2 -8
View File
@@ -107,7 +107,7 @@ const doProduct = (v: any) => {
@scroll="pageHook.scroll"
>
<template #top>
<view class="bg-#1777FF p-15rpx">
<view class="bg-#1777FF p-15rpx pt-10">
<scroll-view scroll-x class="whitespace-nowrap">
<view class="flex-row items-center space-x-15rpx">
<view
@@ -129,13 +129,7 @@ const doProduct = (v: any) => {
</template>
<view class="h-20rpx" />
<view class="m-x-10rpx">
<custom-waterfalls-flow
v-model="foodList"
imageKey="picUrl"
:columnSpace="1"
@wapperClick="doProduct"
@imageClick="doProduct"
>
<custom-waterfalls-flow v-model="foodList" imageKey="picUrl" :columnSpace="1" @wapperClick="doProduct" @imageClick="doProduct">
<template v-slot:default="v">
<view class="p-x-15rpx p-y-25rpx">
<view class="sub-text-28 show-line">{{ v.name }}</view>
src/pages/tabbar/home.vue
+2 -4
View File
@@ -50,13 +50,13 @@ const toDetail = async (v: any) => {
:auto-scroll-to-top-when-reload="false"
@scroll="pageHook.scroll"
>
<template #top> </template>
<view class="h-20rpx" />
<view class="flex-row card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
<image class="w-160rpx h-160rpx rounded-12rpx" :src="filePath(v.logoPic)" mode="aspectFill" />
<view class="flex-1 flex-col m-l-20rpx">
<view class="flex-row items-center justify-between">
<view class="flex-row-center sub-text-34">
<text> {{ v.name }}</text>
<text>{{ v.name }}</text>
</view>
<view>
<tm-tag size="s">{{ v.deptName }}</tm-tag>
@@ -79,5 +79,3 @@ const toDetail = async (v: any) => {
</z-paging>
</crud-layout>
</template>
<style lang="scss" scoped></style>
src/pages/tabbar/my.vue
+6 -5
View File
@@ -1,5 +1,6 @@
<template>
<crud-layout title="我的" bg="/static/page/blue-bg.png">
<crud-layout bg="/static/page/blue-bg.png">
<view class="h-20rpx" />
<view class="flex-row items-center">
<image
v-if="state.userInfo?.sysUser?.avatar"
@@ -21,7 +22,7 @@
</view>
</view>
<view class="m-t-40rpx rounded-20rpx shadow-main p-30rpx p-b-40rpx bg-white!">
<view class="m-t-20rpx rounded-20rpx shadow-main p-30rpx p-b-40rpx bg-white!">
<view class="service_item flex-row items-center justify-between" v-for="(v, i) in state.menuList" :key="i" @tap="onTabMenu(v, i)">
<view class="flex-row-center">
<image class="w-40rpx h-40rpx" :src="v.icon" mode="aspectFill" />
@@ -59,9 +60,9 @@ const state = reactive<{ wallet: any; userInfo: any; menuList: MenuItem[] }>({
userInfo: {},
menuList: [
{ text: "钱包管理", icon: "/static/icon/service_3.png", router: "/pages/wallet/list" },
{ text: "包厢预定", icon: "/static/icon/service_4.png", router: "/pages/boxes/apply-list" },
{ text: "外来人员就餐", icon: "/static/icon/service_1.png", router: "/pages/apply/foreign-list" },
{ text: "跨单位就餐", icon: "/static/icon/service_1.png", router: "/pages/apply/stride-list" },
// { text: "包厢预定", icon: "/static/icon/service_4.png", router: "/pages/boxes/apply-list" },
// { text: "外来人员就餐", icon: "/static/icon/service_1.png", router: "/pages/apply/foreign-list" },
// { text: "跨单位就餐", icon: "/static/icon/service_1.png", router: "/pages/apply/stride-list" },
{ text: "人脸管理", icon: "/static/icon/service_5.png", router: "/pages/human-face/list" },
],
})
src/pages/tabbar/order.vue
+3 -7
View File
@@ -60,7 +60,7 @@ const doRefund = (v: any) => {
</script>
<template>
<crud-layout title="订单" bg="/static/page/blue-bg.png">
<crud-layout bg="/static/page/blue-bg.png">
<z-paging
ref="pageRef"
height="100%"
@@ -139,18 +139,14 @@ const doRefund = (v: any) => {
</view>
</scroll-view>
</view>
<view
class="absolute top-0 right-0 bottom-0 z-10 flex-col items-end w-160rpx p-x-20rpx bg-white bg-opacity-95"
>
<view class="absolute top-0 right-0 bottom-0 z-10 flex-col items-end w-160rpx p-x-20rpx bg-white bg-opacity-95">
<view class="main-text-30 color-red!">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
<view class="m-t-10rpx second-text-26">共 {{ v.carList.length }} 件</view>
</view>
</view>
<view v-if="['5', '10'].includes(v.orderStatus)" class="flex-row items-center justify-end p-t-20rpx">
<view v-if="v.orderStatus == 5 && v.orderType == 2" class="botder_btn" @tap.stop="doRefund(v)">退款 </view>
<view v-if="v.orderStatus == 5 && v.orderType == 2" class="m-l-20rpx botder_btn" @tap.stop="doToDetail(v)">
核销码
</view>
<view v-if="v.orderStatus == 5 && v.orderType == 2" class="m-l-20rpx botder_btn" @tap.stop="doToDetail(v)"> 核销码 </view>
</view>
</view>
</z-paging>
src/pages/tabbar/shop.vue
+1
View File
@@ -50,6 +50,7 @@ const toDetail = async (v: any) => {
:auto-scroll-to-top-when-reload="false"
@scroll="pageHook.scroll"
>
<view class="h-20rpx" />
<view class="flex-col card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
<view class="flex-row-center">
<image class="w-120rpx h-120rpx rounded-12rpx" :src="filePath(v.logoPic)" mode="aspectFill" />
src/pages/wallet/list.vue
+3 -9
View File
@@ -122,7 +122,7 @@ const doFreeze = async () => {
</script>
<template>
<crud-layout title="钱包" bg="/static/page/blue-bg.png">
<crud-layout bg="/static/page/blue-bg.png">
<z-paging
ref="pageRef"
height="100%"
@@ -172,14 +172,8 @@ const doFreeze = async () => {
<text class="sub-text-40 color-red!"> ¥{{ hooks.useMoney(v.balance) }} </text>
</view>
<view class="flex-row items-center justify-end space-x-20rpx m-t-10rpx">
<view v-if="v.walletTypeUniqueCode == 1 && !v.cardNumber" class="botder_btn" @tap.stop="openBindDialog(v)">
绑定
</view>
<view
v-if="v.walletTypeUniqueCode == 1 && v.cardNumber && v.isFreeze != 1"
class="botder_btn"
@tap.stop="openFreezeDialog(v)"
>
<view v-if="v.walletTypeUniqueCode == 1 && !v.cardNumber" class="botder_btn" @tap.stop="openBindDialog(v)"> 绑定 </view>
<view v-if="v.walletTypeUniqueCode == 1 && v.cardNumber && v.isFreeze != 1" class="botder_btn" @tap.stop="openFreezeDialog(v)">
申请冻结
</view>
<view class="botder_btn" @tap.stop="router.jump('/pages/wallet/recharge', { id: v.id })"> 去充值 </view>
src/sheep/components/crud/crud-layout/crud-layout.vue
+118 -118
View File
@@ -1,165 +1,165 @@
<script setup lang="ts">
import { defineProps, withDefaults, watch, ref, reactive, onMounted } from "vue";
import { defineProps, withDefaults, watch, ref, reactive, onMounted } from "vue"
import { router } from "@@/index"
export type Props = {
tabBarType: "default" | "just-flot-back"
title: string
scrollHideTabbar: boolean
navBgColor: string
navBgTitleColor: string
mainIsScroll: boolean
bg: string
tabBarType: "default" | "just-flot-back"
title: string
scrollHideTabbar: boolean
navBgColor: string
navBgTitleColor: string
mainIsScroll: boolean
bg: string
}
const props = withDefaults(defineProps<Props>(), {
tabBarType: "default",
title: "",
scrollHideTabbar: true,
navBgColor: "transparent",
navBgTitleColor: "#333",
mainIsScroll: false,
bg: "",
});
tabBarType: "default",
title: "",
scrollHideTabbar: true,
navBgColor: "transparent",
navBgTitleColor: "#333",
mainIsScroll: false,
bg: "",
})
const state = reactive({
navBgTitleColor_: props.navBgTitleColor,
visble: {
topNav: true,
topSafe: true
}
navBgTitleColor_: props.navBgTitleColor,
visble: {
topNav: false,
topSafe: true,
},
})
watch(
() => props.navBgTitleColor,
(newVal) => {
if (!newVal) return
state.navBgTitleColor_ = newVal
},
{
immediate: true
}
() => props.navBgTitleColor,
(newVal) => {
if (!newVal) return
state.navBgTitleColor_ = newVal
},
{
immediate: true,
},
)
onMounted(() => {
initBackStyle()
initBackStyle()
})
function scroll(e) {
if (!router.hasTabbar()) return
if (!props.scrollHideTabbar) return
const offset = 50
const top = e.target.scrollTop;
if (!router.hasTabbar()) return
if (!props.scrollHideTabbar) return
const offset = 50
const top = e.target.scrollTop
}
function defaultPage() {
const { route } = router.getCurrentPage() as any
const page = __ROUTES__.find(it => it.path == `/${route}`)
if (page && page.name) {
return page.name;
}
return ""
const { route } = router.getCurrentPage() as any
const page = __ROUTES__.find((it) => it.path == `/${route}`)
if (page && page.name) {
return page.name
}
return ""
}
function initBackStyle() {
switch (props.tabBarType) {
case "default":
break;
case "just-flot-back":
state.visble.topSafe = true
state.visble.topNav = false
break;
default:
break;
}
switch (props.tabBarType) {
case "default":
break
case "just-flot-back":
state.visble.topSafe = true
state.visble.topNav = false
break
default:
break
}
}
</script>
<template>
<view class="layout">
<image class="layout_bg" v-if="props.bg" :src="props.bg" mode="aspectFill" />
<view class="layout_header">
<base-safe-height :bgColor="props.navBgColor" v-if="state.visble.topSafe" type="top" />
<base-nav v-if="state.visble.topNav" :titleColor="props.navBgTitleColor" :bgColor="props.navBgColor"
:title="props.title || defaultPage()" />
<base-just-flot-nav :bgColor="props.navBgColor" :titleColor="props.navBgTitleColor"
v-if="!state.visble.topNav"></base-just-flot-nav>
</view>
<view class="layout_main">
<view class="layout_main_top">
<slot name="main-top"></slot>
</view>
<scroll-view :scroll-y="mainIsScroll" @scroll="scroll">
<slot></slot>
</scroll-view>
<view class="layout_main_bottom">
<slot name="main-bottom"></slot>
</view>
</view>
</view>
<view class="layout">
<image class="layout_bg" v-if="props.bg" :src="props.bg" mode="aspectFill" />
<view class="layout_header">
<base-safe-height :bgColor="props.navBgColor" v-if="state.visble.topSafe" type="top" />
<base-nav
v-if="state.visble.topNav"
:titleColor="props.navBgTitleColor"
:bgColor="props.navBgColor"
:title="props.title || defaultPage()"
/>
<base-just-flot-nav :bgColor="props.navBgColor" :titleColor="props.navBgTitleColor" v-if="!state.visble.topNav"></base-just-flot-nav>
</view>
<view class="layout_main">
<view class="layout_main_top">
<slot name="main-top"></slot>
</view>
<scroll-view :scroll-y="mainIsScroll" @scroll="scroll">
<slot></slot>
</scroll-view>
<view class="layout_main_bottom">
<slot name="main-bottom"></slot>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
// #ifdef H5
page {
height: 100%;
height: 100%;
}
// #endif
.layout {
width: 100%;
// #ifndef H5
height: 100vh;
// #endif
// #ifdef H5
height: 100%;
// #endif
display: flex;
flex-direction: column;
width: 100%;
// #ifndef H5
height: 100vh;
// #endif
// #ifdef H5
height: 100%;
// #endif
display: flex;
flex-direction: column;
&_bg {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
}
&_bg {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
}
&_header {
z-index: 100;
}
&_header {
z-index: 100;
}
&_main {
flex: 1;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
z-index: 99;
&_main {
flex: 1;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
z-index: 99;
&_top {}
&_top {
}
scroll-view {
flex: 1;
overflow: hidden;
padding: 0 30rpx;
// background: #ecf4f9;
}
scroll-view {
flex: 1;
overflow: hidden;
padding: 0 30rpx;
// background: #ecf4f9;
}
&_bottom {
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
}
}
&_bottom {
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
}
}
&_foot {}
&_foot {
}
}
</style>