单据、业务中心、公告和工作通知

pages/erp/hub.vue

@@ -1,23 +1,28 @@
 <template>
-  <view class="page">
+  <view class="page edge">
     <fy-header :title="title" back />
     <view v-if="!allowed" class="deny">当前账号没有「{{ title }}」查看权限</view>
-    <view v-else>
-      <scroll-view scroll-x class="tabs">
-        <text v-for="t in tabs" :key="t.id" class="tab" :class="{ on: tab === t.id }" @click="switchTab(t)">{{ t.title }}</text>
-      </scroll-view>
-      <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 || r.code" class="card item">
-        <text class="t">{{ titleOf(r) }}</text>
-        <text class="s">{{ subOf(r) }}</text>
+    <fy-scroll v-else class="edge-scroll" @refresh="load">
+      <wd-tabs v-if="tabs.length" v-model="tab" slidable="always" @change="onTab">
+        <wd-tab v-for="t in tabs" :key="t.id" :title="t.title" :name="t.id" />
+      </wd-tabs>
+      <view v-if="loading" class="empty">
+        <wd-skeleton theme="paragraph" />
       </view>
-    </view>
+      <wd-status-tip v-else-if="!rows.length" image="content" tip="暂无数据" />
+      <view v-for="r in rows" :key="r.id || r.no || r.code" class="card item">
+        <view class="main">
+          <text class="t">{{ titleOf(r) }}</text>
+          <text v-if="subOf(r)" class="s">{{ subOf(r) }}</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 { ERP_MODULES, ERP_TABS } from '../../utils/catalog.js'
 import { asList, firstText } from '../../utils/format.js'
@@ -25,7 +30,7 @@ import { oaGet } from '../../utils/api.js'
 import { canMenu } from '../../utils/perms.js'
 
 export default {
-  components: { FyHeader },
+  components: { FyHeader, FyScroll },
   data() {
     return { id: '', tab: '', rows: [], loading: false }
   },
@@ -45,6 +50,12 @@ export default {
     if (this.allowed) this.load()
   },
   methods: {
+    onTab(e) {
+      const id = (e && e.name) || this.tab
+      if (id === this.tab && this.rows.length) return
+      this.tab = id
+      this.load()
+    },
     switchTab(t) {
       this.tab = t.id
       this.load()
@@ -110,11 +121,10 @@ export default {
 </script>
 
 <style scoped>
-.tabs { white-space: nowrap; padding: 16rpx 16rpx 0; }
-.tab { display: inline-block; padding: 12rpx 20rpx; font-size: 24rpx; color: #6B7280; }
-.tab.on { color: #1677FF; font-weight: 700; border-bottom: 4rpx solid #1677FF; }
 .item { margin: 16rpx 24rpx; padding: 24rpx; }
-.t { display: block; font-weight: 600; font-size: 28rpx; }
-.s { font-size: 22rpx; color: #6B7280; }
-.empty, .deny { padding: 80rpx 40rpx; text-align: center; color: #6B7280; }
+.main { min-width: 0; }
+.t { display: block; font-weight: 650; font-size: 28rpx; color: #111827; }
+.s { display: block; margin-top: 8rpx; font-size: 24rpx; color: #6B7280; }
+.empty { padding: 40rpx 28rpx; }
+.deny { padding: 120rpx 40rpx; text-align: center; color: #6B7280; font-size: 28rpx; }
 </style>