zhaichao/oa_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面下拉刷新以及底部回弹

Browse Source
This commit is contained in:
zhaichao
2026-09-23 18:12:04 +08:00
parent 201d0086a4
commit 6e60a409c5
12 changed files with 219 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.vue
+29 -1
View File
@@ -9,7 +9,13 @@ export default {
</script>
<style>
html, body, uni-app, uni-page, uni-page-wrapper, uni-page-body {
height: 100%;
overflow: hidden;
}
page {
height: 100%;
overflow: hidden;
--wot-color-theme: #1677FF;
--wot-button-primary-bg-color: #1677FF;
--color-primary: #1677FF;
@@ -26,12 +32,34 @@ page {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
.page {
min-height: 100vh;
height: 100%;
background: #F5F7FA;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
scrollbar-width: none;
}
.page::-webkit-scrollbar { width: 0; height: 0; display: none; }
.edge {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
uni-scroll-view,
.uni-scroll-view,
.uni-scroll-view-content {
scrollbar-width: none;
}
uni-scroll-view::-webkit-scrollbar,
.uni-scroll-view::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.edge-scroll { flex: 1; height: 0; min-height: 0; }
.card {
background: #fff;
border-radius: 24rpx;
components/fy-scroll.vue
+124
View File
@@ -0,0 +1,124 @@
<template>
<view
ref="sc"
class="sc"
@touchstart="onStart"
@touchmove="onMove"
@touchend="onEnd"
@touchcancel="onEnd"
>
<view class="sheet" :class="{ anim: !dragging }" :style="{ transform: 'translate3d(0,' + offset + 'px,0)' }">
<view v-if="offset > 8" class="hint">{{ offset > 54 ? '松开刷新' : '下拉刷新' }}</view>
<slot />
<view class="pad" :class="{ dock }" />
</view>
</view>
</template>
<script>
export default {
name: 'FyScroll',
props: {
dock: { type: Boolean, default: false }
},
data() {
return {
offset: 0,
dragging: false,
sy: 0
}
},
mounted() {
this.$nextTick(() => {
const el = this.box()
if (el && el.addEventListener) el.addEventListener('wheel', this.onWheel, { passive: false })
})
},
beforeUnmount() {
const el = this.box()
if (el && el.removeEventListener) el.removeEventListener('wheel', this.onWheel)
},
methods: {
box() {
const r = this.$refs.sc
if (!r) return this.$el
return r.$el || r
},
atTop(el) {
return el.scrollTop <= 0
},
atBottom(el) {
return el.scrollTop + el.clientHeight >= el.scrollHeight - 2
},
onStart(e) {
this.sy = e.touches && e.touches[0] ? e.touches[0].clientY : 0
},
onMove(e) {
const el = this.box()
if (!el || el.scrollTop == null) return
const y = e.touches && e.touches[0] ? e.touches[0].clientY : this.sy
const dy = y - this.sy
if (this.atTop(el) && dy > 0) {
this.dragging = true
this.offset = Math.min(dy * 0.45, 88)
if (e.cancelable) e.preventDefault()
} else if (this.atBottom(el) && dy < 0) {
this.dragging = true
this.offset = Math.max(dy * 0.45, -88)
if (e.cancelable) e.preventDefault()
} else if (this.offset) {
this.dragging = false
this.offset = 0
}
},
onEnd() {
const refresh = this.offset > 54
this.dragging = false
this.offset = 0
if (refresh) this.$emit('refresh')
},
onWheel(e) {
const el = this.box()
if (!el) return
if (this.atBottom(el) && e.deltaY > 0) {
e.preventDefault()
this.nudge(Math.max(-72, -Math.min(e.deltaY, 80) * 0.45))
} else if (this.atTop(el) && e.deltaY < 0) {
e.preventDefault()
this.nudge(Math.min(72, Math.min(-e.deltaY, 80) * 0.35))
}
},
nudge(v) {
this.dragging = true
this.offset = v
clearTimeout(this._nudge)
this._nudge = setTimeout(() => {
const refresh = this.offset > 54
this.dragging = false
this.offset = 0
if (refresh) this.$emit('refresh')
}, 70)
}
}
}
</script>
<style scoped>
.sc {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sc::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sheet.anim { transition: transform 0.48s cubic-bezier(0.22, 1.28, 0.36, 1); }
.hint {
text-align: center;
font-size: 24rpx;
color: #6B7280;
padding: 8rpx 0 4rpx;
}
.pad { height: 32rpx; }
.pad.dock { height: calc(128rpx + env(safe-area-inset-bottom)); }
</style>
pages/apply/list.vue
+5 -2
View File
@@ -1,6 +1,7 @@
<template>
<view class="page">
<view class="page edge">
<fy-header title="发起申请" back />
<fy-scroll class="edge-scroll">
<view v-if="!canApply" class="deny">当前账号没有发起申请权限</view>
<view v-else>
<view class="search">
@@ -19,16 +20,18 @@
</view>
</view>
</view>
</fy-scroll>
</view>
</template>
<script>
import FyHeader from '../../components/fy-header.vue'
import FyScroll from '../../components/fy-scroll.vue'
import { store } from '../../utils/store.js'
import { groupedApplyKinds, visibleApplyKinds } from '../../utils/apply.js'
export default {
components: { FyHeader },
components: { FyHeader, FyScroll },
data() { return { q: '' } },
computed: {
canApply() { return store.can('personal', 'apply') },
pages/bills/list.vue
+5 -2
View File
@@ -1,6 +1,7 @@
<template>
<view class="page">
<view class="page edge">
<fy-header :title="title" back />
<fy-scroll class="edge-scroll" @refresh="load">
<view v-if="loading" class="empty">加载中…</view>
<view v-else-if="!rows.length" class="empty">暂无记录</view>
<view v-for="r in rows" :key="r.id || r.no" class="card item" @click="open(r)">
@@ -10,17 +11,19 @@
</view>
<text class="amt">{{ r.amount != null ? '¥' + r.amount : '' }}</text>
</view>
</fy-scroll>
</view>
</template>
<script>
import FyHeader from '../../components/fy-header.vue'
import FyScroll from '../../components/fy-scroll.vue'
import { store } from '../../utils/store.js'
import { asList } from '../../utils/format.js'
import { oaGet } from '../../utils/api.js'
export default {
components: { FyHeader },
components: { FyHeader, FyScroll },
data() { return { title: '单据', type: 'expense', rows: [], loading: false } },
onLoad(q) {
this.type = q.type || 'expense'
pages/coop/list.vue
+5 -2
View File
@@ -1,10 +1,11 @@
<template>
<view class="page">
<view class="page edge">
<fy-header title="工作协同" back>
<template #right>
<text v-if="canCreate" class="add" @click="create">＋ 新建</text>
</template>
</fy-header>
<fy-scroll class="edge-scroll" @refresh="load">
<view class="sec">待我办理</view>
<view v-if="!pending.length" class="empty">暂无</view>
<view v-for="t in pending" :key="t.id" class="card item" @click="open(t)">
@@ -21,17 +22,19 @@
<text class="s">{{ t.assigneeName || '' }} · {{ t.status || '' }}</text>
</view>
</view>
</fy-scroll>
</view>
</template>
<script>
import FyHeader from '../../components/fy-header.vue'
import FyScroll from '../../components/fy-scroll.vue'
import { store } from '../../utils/store.js'
import { asList } from '../../utils/format.js'
import { oaGet } from '../../utils/api.js'
export default {
components: { FyHeader },
components: { FyHeader, FyScroll },
data() {
return { pending: [], mine: [] }
},
pages/notice/list.vue
+9 -3
View File
@@ -1,27 +1,33 @@
<template>
<view class="page">
<view class="page edge">
<fy-header title="公告" back />
<fy-scroll class="edge-scroll" @refresh="load">
<wd-status-tip v-if="!rows.length" image="content" tip="暂无公告" />
<view v-for="r in rows" :key="r.id" class="card item">
<text class="t">{{ r.title }}</text>
<text class="s">{{ r.createdAt || r.publishAt || '' }}</text>
<text class="c">{{ r.content || r.summary || '' }}</text>
</view>
</fy-scroll>
</view>
</template>
<script>
import FyHeader from '../../components/fy-header.vue'
import FyScroll from '../../components/fy-scroll.vue'
import { store } from '../../utils/store.js'
import { asList } from '../../utils/format.js'
import { oaGet } from '../../utils/api.js'
export default {
components: { FyHeader },
components: { FyHeader, FyScroll },
data() { return { rows: [] } },
onShow() {
onShow() { this.load() },
methods: {
load() {
oaGet('/announcements', store.token).then((d) => { this.rows = asList(d) }).catch(() => { this.rows = store.announcements || [] })
}
}
}
</script>
pages/tabs/clock.vue
+6 -2
View File
@@ -1,6 +1,7 @@
<template>
<view class="page">
<view class="page edge">
<fy-header title="打卡" />
<fy-scroll class="edge-scroll" dock @refresh="reload">
<view v-if="!canPunch" class="deny">当前账号没有打卡权限</view>
<view v-else class="body">
<view class="clock-box">
@@ -41,16 +42,18 @@
</view>
</view>
</view>
</fy-scroll>
</view>
</template>
<script>
import FyHeader from '../../components/fy-header.vue'
import FyScroll from '../../components/fy-scroll.vue'
import { store } from '../../utils/store.js'
import { clockText, toast } from '../../utils/format.js'
export default {
components: { FyHeader },
components: { FyHeader, FyScroll },
data() {
return { now: clockText(), timer: 0, punching: false, off: null }
},
@@ -92,6 +95,7 @@ export default {
this.punching = false
}
},
reload() { store.refreshAttendance() },
goKind(kind) {
if (!store.can('personal', 'apply')) return toast('没有发起申请权限')
uni.navigateTo({ url: '/pages/apply/form?kind=' + kind })
pages/tabs/contacts.vue
+6 -2
View File
@@ -1,10 +1,11 @@
<template>
<view class="page">
<view class="page edge">
<fy-header title="通讯录">
<template #right>
<text class="ico" @click="goGroup">建群</text>
</template>
</fy-header>
<fy-scroll class="edge-scroll" dock @refresh="reload">
<wd-search v-model="q" placeholder="搜索同事、部门或手机号" hide-cancel placeholder-left />
<view class="org" @click="goGroups">
<view class="obox">👥</view>
@@ -46,16 +47,18 @@
</view>
<view v-if="!groups.length" class="empty">没有匹配的同事</view>
<text class="foot">仅显示当前所属企业成员 · 数据实时同步</text>
</fy-scroll>
</view>
</template>
<script>
import FyHeader from '../../components/fy-header.vue'
import FyScroll from '../../components/fy-scroll.vue'
import { store } from '../../utils/store.js'
import { toast } from '../../utils/format.js'
export default {
components: { FyHeader },
components: { FyHeader, FyScroll },
data() {
return { q: '', open: {}, off: null }
},
@@ -107,6 +110,7 @@ export default {
if (!p.phone) return toast('该同事未登记手机号')
uni.makePhoneCall({ phoneNumber: String(p.phone) })
},
reload() { store.refreshPeoplePhotos() },
goSearch() { uni.navigateTo({ url: '/pages/search/search' }) },
goGroup() { uni.navigateTo({ url: '/pages/chat/create' }) },
goGroups() {
pages/tabs/me.vue
+6 -2
View File
@@ -1,6 +1,7 @@
<template>
<view class="page">
<view class="page edge">
<fy-header title="我的" />
<fy-scroll class="edge-scroll" dock @refresh="reload">
<view class="body">
<view class="card profile">
<view class="row">
@@ -46,18 +47,20 @@
</wd-cell-group>
</view>
</view>
</fy-scroll>
</view>
</template>
<script>
import FyHeader from '../../components/fy-header.vue'
import FyScroll from '../../components/fy-scroll.vue'
import { store } from '../../utils/store.js'
import { maskPhone } from '../../utils/format.js'
const ME_IDS = ['archive', 'salary', 'perf', 'expense', 'report', 'apply']
export default {
components: { FyHeader },
components: { FyHeader, FyScroll },
data() {
return { off: null }
},
@@ -86,6 +89,7 @@ export default {
goTodo() {
if (store.can('personal', 'approve')) uni.navigateTo({ url: '/pages/todo/list' })
},
reload() { store.refreshPerms() },
goPwd() { uni.navigateTo({ url: '/pages/password/password' }) },
logout() {
uni.showModal({
pages/tabs/messages.vue
+10 -6
View File
@@ -1,12 +1,12 @@
<template>
<view class="page msg">
<view class="page msg edge">
<fy-header :title="unread ? ('消息(' + unread + ')') : '消息'">
<template #right>
<text class="ico sm" @click="goSearch">⌕</text>
<text class="ico" @click="plus">＋</text>
</template>
</fy-header>
<scroll-view scroll-y class="list">
<fy-scroll class="edge-scroll list" dock @refresh="reload">
<view v-if="!rows.length" class="empty">暂无会话</view>
<view
v-for="c in rows"
@@ -34,17 +34,18 @@
</view>
</view>
</view>
</scroll-view>
</fy-scroll>
</view>
</template>
<script>
import FyHeader from '../../components/fy-header.vue'
import FyScroll from '../../components/fy-scroll.vue'
import FyFileMark from '../../components/fy-file-mark.vue'
import { store } from '../../utils/store.js'
export default {
components: { FyHeader, FyFileMark },
components: { FyHeader, FyFileMark, FyScroll },
data() {
return { rows: [], unread: 0, off: null }
},
@@ -68,6 +69,9 @@ export default {
this.rows = store.conversations.slice()
this.unread = store.unreadTotal()
},
reload() {
store.refreshPeoplePhotos().finally(() => this.pull())
},
avText(c) {
if (c.type === 'work') return '工'
if (c.type === 'group') return '群'
@@ -126,8 +130,8 @@ export default {
</script>
<style scoped>
.msg { display: flex; flex-direction: column; height: 100vh; background: #F5F7FA; }
.list { flex: 1; height: 0; background: #fff; }
.msg { display: flex; flex-direction: column; height: 100%; background: #F5F7FA; overflow: hidden; }
.list { background: #fff; }
.ico.sm { font-size: 34rpx; color: #1677FF; }
.item { display: flex; align-items: center; padding: 22rpx 28rpx; background: #fff; }
.item.pin { background: #F7F8FA; }
pages/tabs/workbench.vue
+8 -3
View File
@@ -1,11 +1,11 @@
<template>
<view class="page">
<view class="page edge">
<fy-header :title="greet">
<template #right>
<text class="ico" @click="goSearch">搜索</text>
</template>
</fy-header>
<fy-scroll class="edge-scroll" dock @refresh="reload">
<view class="body">
<view class="hello">
<text class="hello-sub">今天也要高效完成工作</text>
@@ -90,11 +90,13 @@
<text class="arr">›</text>
</view>
</view>
</fy-scroll>
</view>
</template>
<script>
import FyHeader from '../../components/fy-header.vue'
import FyScroll from '../../components/fy-scroll.vue'
import { store } from '../../utils/store.js'
import { toast } from '../../utils/format.js'
import { oaPost } from '../../utils/api.js'
@@ -102,7 +104,7 @@ import { visibleApplyKinds } from '../../utils/apply.js'
import { openHref, tileEmoji } from '../../utils/nav.js'
export default {
components: { FyHeader },
components: { FyHeader, FyScroll },
data() {
return { apps: [], erp: [], todos: [], pendingItems: [], shortcuts: [], todoCount: 0, announce: '', off: null }
},
@@ -156,6 +158,9 @@ export default {
this.off = null
},
methods: {
reload() {
store.refreshWorkbench().then(() => this.pull())
},
pull() {
this.apps = store.personalApps()
this.erp = store.erpModules()
pages/todo/list.vue
+5 -2
View File
@@ -1,6 +1,7 @@
<template>
<view class="page">
<view class="page edge">
<fy-header title="待办审批" back />
<fy-scroll class="edge-scroll" @refresh="load">
<view v-if="!can" class="deny">当前账号没有审批或申请权限</view>
<view v-else>
<wd-tabs v-model="tab" slidable="always" @change="onTab">
@@ -20,17 +21,19 @@
<text class="arr">›</text>
</view>
</view>
</fy-scroll>
</view>
</template>
<script>
import FyHeader from '../../components/fy-header.vue'
import FyScroll from '../../components/fy-scroll.vue'
import { store } from '../../utils/store.js'
import { asList } from '../../utils/format.js'
import { oaGet } from '../../utils/api.js'
export default {
components: { FyHeader },
components: { FyHeader, FyScroll },
data() {
return {
tab: 'pending',