引入Wot UI组件库

pages/todo/list.vue

@@ -3,23 +3,20 @@
     <fy-header title="待办审批" back />
     <view v-if="!can" class="deny">当前账号没有审批或申请权限</view>
     <view v-else>
-      <scroll-view scroll-x class="tabs" :show-scrollbar="false">
-        <text v-for="t in tabs" :key="t.id" class="tab" :class="{ on: tab === t.id }" @click="switchTab(t.id)">{{ t.title }}</text>
-      </scroll-view>
+      <wd-tabs 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">
-        <view class="sk" /><view class="sk short" />
-      </view>
-      <view v-else-if="!rows.length" class="empty">
-        <text class="et">暂无事项</text>
-        <text class="es">当前分类下没有需要处理的记录</text>
+        <wd-skeleton theme="paragraph" />
       </view>
+      <wd-status-tip v-else-if="!rows.length" image="content" tip="暂无事项" />
       <view v-for="r in rows" :key="r.no || r.id" class="card item" @click="open(r)">
         <view class="main">
           <text class="type">{{ r.typeLabel || r.type || '审批' }}</text>
           <text class="t">{{ r.title || r.no }}</text>
           <text class="s">{{ r.submitter || r.assigneeName || '' }}</text>
         </view>
-        <text class="chip">{{ r.status || '待处理' }}</text>
+        <wd-tag type="primary" plain>{{ r.status || '待处理' }}</wd-tag>
         <text class="arr">›</text>
       </view>
     </view>
@@ -55,6 +52,10 @@ export default {
   },
   onShow() { if (this.can) this.load() },
   methods: {
+    onTab(e) {
+      const id = (e && e.name) || this.tab
+      this.switchTab(id)
+    },
     switchTab(id) {
       this.tab = id
       this.load()