发起申请

pages/apply/list.vue

@@ -5,17 +5,25 @@
     <view v-if="!canApply" class="deny">当前账号没有发起申请权限</view>
     <view v-else>
       <view class="search">
-        <input v-model="q" placeholder="搜索审批流程或申请事项..." />
+        <wd-icon name="search" size="28rpx" color="#9CA3AF" />
+        <input v-model="q" placeholder="搜索审批流程或申请事项" placeholder-class="ph" confirm-type="search" />
+        <view v-if="q" class="clear" @click="q = ''">
+          <wd-icon name="close-bold" size="22rpx" color="#9CA3AF" />
         </view>
+      </view>
+      <view v-if="!groups.length" class="empty">没有匹配的申请</view>
       <view v-for="g in groups" :key="g.category" class="block">
         <text class="cat">{{ g.category }}</text>
         <view class="card">
           <view v-for="k in g.items" :key="k.kind" class="item" @click="open(k)">
-            <view>
+            <view class="ico" :style="{ background: visual(k).bg }">
+              <wd-icon :name="visual(k).name" size="36rpx" :color="visual(k).color" />
+            </view>
+            <view class="txt">
               <text class="t">{{ k.title }}</text>
               <text class="d">{{ k.hint }}</text>
             </view>
-            <text class="arr">›</text>
+            <wd-icon name="arrow-right" size="28rpx" color="#D1D5DB" />
           </view>
         </view>
       </view>
@@ -29,6 +37,7 @@ 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'
+import { tileVisual } from '../../utils/nav.js'
 
 export default {
   components: { FyHeader, FyScroll },
@@ -50,6 +59,9 @@ export default {
     }
   },
   methods: {
+    visual(k) {
+      return tileVisual(k)
+    },
     open(k) {
       uni.navigateTo({ url: '/pages/apply/form?kind=' + k.kind })
     }
@@ -58,13 +70,35 @@ export default {
 </script>
 
 <style scoped>
-.search { padding: 16rpx 24rpx; }
+.search {
-.search input { height: 80rpx; background: #F3F6FB; border-radius: 16rpx; padding: 0 24rpx; }
+  margin: 16rpx 24rpx 8rpx;
-.block { margin: 8rpx 24rpx 24rpx; }
+  height: 72rpx;
-.cat { font-size: 22rpx; color: #4B5563; font-weight: 600; }
+  padding: 0 20rpx;
-.item { display: flex; justify-content: space-between; align-items: center; padding: 24rpx; border-bottom: 1rpx solid #E8ECF2; }
+  background: #fff;
-.t { display: block; font-size: 28rpx; font-weight: 600; }
+  border-radius: 16rpx;
-.d { font-size: 22rpx; color: #6B7280; }
+  display: flex;
-.arr { color: #D1D5DB; }
+  align-items: center;
-.deny { padding: 80rpx; text-align: center; color: #6B7280; }
+  gap: 12rpx;
+  border: 1rpx solid rgba(17, 24, 39, 0.06);
+}
+.search input { flex: 1; height: 72rpx; font-size: 28rpx; }
+.ph { color: #9CA3AF; }
+.clear { width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; }
+.block { margin: 20rpx 24rpx 8rpx; }
+.cat { display: block; margin: 0 8rpx 12rpx; font-size: 24rpx; color: #6B7280; font-weight: 600; }
+.item { display: flex; align-items: center; padding: 22rpx 24rpx; }
+.item + .item { border-top: 1rpx solid #F0F2F5; }
+.ico {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.txt { flex: 1; min-width: 0; margin: 0 20rpx; }
+.t { display: block; font-size: 30rpx; font-weight: 600; color: #111827; }
+.d { display: block; margin-top: 6rpx; font-size: 24rpx; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.empty, .deny { padding: 120rpx 40rpx; text-align: center; color: #6B7280; font-size: 28rpx; }
 </style>