优化首页展示

src/manifest.json

@@ -43,7 +43,7 @@
     },
     "quickapp" : {},
     "mp-weixin" : {
-        "appid" : "wx77d0e89349aabd30",
+        "appid" : "wx1dbc76c97a3e4880",
         "setting" : {
             "urlCheck" : false,
             "minified" : true,

src/pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="content">
     <view class="page-section-spacing">
-      <image src="/static/poster-bg-new.png" mode="scaleToFill" style="width: 100%; height: 100%"></image>
+      <image src="/static/poster-bg.jpg" mode="scaleToFill" style="width: 100%; height: 100%"></image>
     </view>
     <view class="notice-box" style="width:90%;margin-top: 50rpx;">
       <view class="notice-title-box" style="margin: 0 auto;">
@@ -21,7 +21,7 @@
     </view>
     <view class="page-nav-box">
       <view v-for="(item, index) in navList" :key="index" class="nav-content" @click="goDetailPage(item, index)">
-        <view class="nav-badge" :style="{ background: badgeOf(item.task_name).color }">{{ badgeOf(item.task_name).label }}</view>
+        <image class="nav-badge" :src="badgeOf(item.task_name, index)" mode="aspectFill"></image>
         <view class="nav-task-name">{{ item.task_name }}</view>
         <view v-if="item.finish_flag" style="color: #ff7356;font-size: 22rpx;">已完成</view>
         <view v-else style="color: #d9001b;font-size: 22rpx;">未完成</view>
@@ -67,16 +67,17 @@
 <script>
 import { request, currentOpenId } from '@/utils/request.js'
 
-// 量表名称 -> 徽标文案/颜色，未命中时回退为取名称前两个字 + 按序号轮换配色
+// 量表名称 -> 徽标图标，取自 static/navList 下现成的图标图（每张已经是带纯色圆底的图，不用再叠文字/颜色）
 const SCALE_BADGE_MAP = {
-  '病史信息': { label: '病史', color: '#ff7356' },
-  '疲劳量表': { label: 'Zzz', color: '#19be6b' },
-  'SAS量表': { label: 'SAS', color: '#5b9bf5' },
-  'SDS量表': { label: 'SDS', color: '#8f8fe0' },
-  '反流量表': { label: 'RSI', color: '#5b6b8c' },
-  'VHI量表': { label: 'VHI', color: '#f2a93b' },
+  '病史信息': '/static/navList/tin-1.png',
+  'VHI-30': '/static/navList/tin-3.png',
+  '反流量表': '/static/navList/tin-5.png',
+  '焦虑和抑郁自评量表': '/static/navList/tin-4.png',
+  '嗓音疲劳指数量表（VFI）': '/static/navList/tin-8.png',
 }
-const FALLBACK_COLORS = ['#ff7356', '#19be6b', '#5b9bf5', '#8f8fe0', '#5b6b8c', '#f2a93b']
+// 未命中时(后台新增了量表、名字对不上)不再回退成文字徽标，而是从没在上面用过的图标里按序号轮换选一张，
+// 样式(具体用哪张)不要求和量表含义对应，只要求始终是图标、不出现文字方案
+const FALLBACK_ICONS = ['/static/navList/tin-2.png', '/static/navList/tin-6.png', '/static/navList/tin-7.png', '/static/navList/tin-9.png', '/static/navList/tin-10.png']
 
 export default {
   data() {
@@ -111,10 +112,9 @@ export default {
     }
   },
   methods: {
-    badgeOf(name) {
+    badgeOf(name, index) {
       if (SCALE_BADGE_MAP[name]) return SCALE_BADGE_MAP[name]
-      const idx = this.navList.findIndex(item => item.task_name === name)
-      return { label: (name || '').slice(0, 2), color: FALLBACK_COLORS[idx % FALLBACK_COLORS.length] }
+      return FALLBACK_ICONS[index % FALLBACK_ICONS.length]
     },
     async getUserTask() {
       const res = await request('user', 'task', { openId: currentOpenId() })