From 945cf9c104cabbe81374f04f681458e4a5f2d3db Mon Sep 17 00:00:00 2001
From: weicw1996 <weicw1996@qq.com>
Date: Mon, 12 Oct 2026 18:22:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor(UI):=20=E9=A6=96=E9=A1=B5=20tab=20?=
 =?UTF-8?q?=E4=B8=8E=E8=87=AA=E4=B8=BB=E5=A1=AB=E6=8A=A5=E5=85=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=94=B9=E7=94=A8=20uview=20=E7=9F=A2?=
 =?UTF-8?q?=E9=87=8F=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

e192296 把纯白透明底图片图标垫了深色底块反衬，解决了「白底上看不见」，
但本质是靠底色绕开图源问题，选中态也就只能靠加深底色表达。

改用 u-icon 矢量图标后可直接着色：
- 首页 tab：未选中灰色 #6b7280，选中白色；图标按语义取
  order / clock / checkmark-circle
- 自主填报入口：未选中浅绿底 + 绿色图标，选中深绿底 + 白色图标；
  store/visit 取 home-fill / car-fill

顺带删掉两处为图片补正尺寸的样式（.tab-icon-wrap 白圆底、
.type-icon/.type-icon-store 的宽高补正），矢量图标不需要。

图标名已对照 uview 图标库校验（u-icon 会自动补 uicon- 前缀）。
---
 packageUser/self-report/select.vue | 30 ++++++-------------
 pages/index/index.vue              | 46 +++++++++---------------------
 2 files changed, 22 insertions(+), 54 deletions(-)

diff --git a/packageUser/self-report/select.vue b/packageUser/self-report/select.vue
index 8f16801..59bf54e 100644
--- a/packageUser/self-report/select.vue
+++ b/packageUser/self-report/select.vue
@@ -26,8 +26,8 @@
         @tap="form.type = item.value"
       >
         <view :class="['type-icon-wrap', form.type === item.value ? 'type-icon-wrap-active' : '']">
-          <image :class="['type-icon', item.value === 'store' ? 'type-icon-store' : '']"
-                 :src="item.icon" mode="aspectFit"/>
+          <u-icon :name="item.icon" size="30"
+                  :color="form.type === item.value ? '#ffffff' : '#2fc6a7'"/>
         </view>
         <view class="type-body">
           <view class="type-title">{{ item.title }}</view>
@@ -49,8 +49,8 @@
 <script>
 // 顶部插画：暂无独立设计稿资源，沿用首页自主填报入口所用的同色系插图
 const HERO_AVATAR = 'https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/9c6c98843c2e30247355d86ea47552aa.png'
-const ICON_STORE = 'https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/0fd31838127cd57b1c1db44f2c749353.png'
-const ICON_VISIT = 'https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260127/f5fbb2e4be31bcc830156f174e7931b8.png'
+const ICON_STORE = 'home-fill'
+const ICON_VISIT = 'car-fill'
 
 export default {
   data() {
@@ -220,37 +220,25 @@ export default {
   background: #f1fbf8;
 }
 
-/* 图标本身是纯白图形 + 透明底，直接放浅色卡片上会看不见，
-   所以垫一层彩色圆角底块反衬；选中后加深，兼作选中态提示。
-   底色取偏深的绿，保证白色图形有足够对比度。 */
+/* 图标已改用 uview 矢量图标，可随选中态着色，不再依赖「白图垫深底」。
+   这里保留圆角底块作为视觉容器：未选中浅绿底 + 绿色图标，
+   选中转深绿底 + 白色图标，选中态更醒目。 */
 .type-icon-wrap {
   flex-shrink: 0;
   width: 112rpx;
   height: 100rpx;
   border-radius: 24rpx;
-  background: linear-gradient(135deg, #2fc6a7, #1aa88c);
+  background: #e6f9f4;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .type-icon-wrap-active {
-  background: linear-gradient(135deg, #16a085, #0e7a66);
+  background: linear-gradient(135deg, #2fc6a7, #16a085);
   box-shadow: 0 8rpx 20rpx rgba(47, 198, 167, 0.32);
 }
 
-.type-icon {
-  width: 62rpx;
-  height: 62rpx;
-}
-
-/* 两张图源的内容占比差得多（visit 约占画布 88%×88%，store 只占 75%×50%），
-   同尺寸渲染会让驻店图标明显偏小，这里按可见图形补正。 */
-.type-icon-store {
-  width: 92rpx;
-  height: 92rpx;
-}
-
 .type-body {
   flex: 1;
 }
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 2cf9097..240b4ab 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -53,17 +53,8 @@
         <view v-for="tab in tabs" :key="tab" :class="['tab', activeTab === tab ? 'active' : '']"
               @tap="activeTab = tab">
           <view class="tab-main">
-            <view class="tab-icon-wrap">
-              <image v-if="tab === '新任务'" class="tab-icon"
-                     src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/9c6c98843c2e30247355d86ea47552aa.png"
-                     mode="aspectFit"/>
-              <image v-if="tab === '待执行'" class="tab-icon"
-                     src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260127/f5fbb2e4be31bcc830156f174e7931b8.png"
-                     mode="aspectFit"/>
-              <image v-if="tab === '已完成'" class="tab-icon"
-                     src="https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/eebe6469eb153413dc881f513063f821.png"
-                     mode="aspectFit"/>
-            </view>
+            <u-icon :name="tabIcon(tab)" size="15"
+                    :color="activeTab === tab ? '#ffffff' : '#6b7280'"/>
             <text class="tab-text">{{ tab }}</text>
           </view>
           <view v-if="tab === '待执行' && pendingCount" class="tab-badge">{{ pendingCount }}</view>
@@ -299,6 +290,12 @@ export default {
     }
   },
   methods: {
+    // tab 图标：新任务=任务清单、待执行=时钟、已完成=对勾
+    tabIcon(tab) {
+      if (tab === '新任务') return 'order'
+      if (tab === '待执行') return 'clock'
+      return 'checkmark-circle'
+    },
     async refreshPageData() {
       const res = await getLocationAction().catch(() => {
         uni.showToast({
@@ -748,29 +745,12 @@ export default {
   line-height: 1;
 }
 
-/* tab 图标是纯白图形 + 透明底，而 tab 底图接近纯白，
-   未激活时白图标贴白底看不清，所以垫一层浅绿圆底反衬。
-   激活态下 .tab-main 自己已填 #2fc6a7，两层绿会透出一圈色差边，
-   所以激活时改成完全透明，白图标直接坐在药丸底上。 */
-.tab-icon-wrap {
-  flex-shrink: 0;
-  width: 34rpx;
-  height: 34rpx;
-  border-radius: 999rpx;
-  background: #2fc6a7;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tab.active .tab-icon-wrap {
-  background: none;
-  box-shadow: none;
-}
-
+/* 三个 tab 原先用纯白 PNG 图标，而 tab 底图接近纯白（平均亮度 250/255），
+   未激活时白图标贴白底完全看不清；且原图语义也不对（「新任务」是 NEW 徽章、
+   「待执行」是时钟）。改用 uview 矢量图标，可随激活态着色，无底色依赖。 */
 .tab-icon {
-  width: 24rpx;
-  height: 24rpx;
+  width: 28rpx;
+  height: 28rpx;
 }
 
 .tab.active .tab-main {