首页功能按钮使用v-for渲染；完善调试输出（可以手动修改用户role）

miniprogram/src/pages/index/index.vue

@@ -1,128 +1,56 @@
 <template>
   <view>
-    <image src="../../image/home.jpg" style="width: 100%;height: 145px;"></image>
+    <image src="../../image/home.jpg?t=1" style="width: 100vw; height: 41.5vw;"></image>
     <view style="display: block; padding-left: 30px; padding-top: 12px;">
       <text>欢迎你，{{ displayUsername }}！</text>
     </view>
-
-    <view style="display: block;" v-if="isVisitor">
-      <view style="display: flex;text-align: center;margin-top: 20px;">
-        <view style="width: 25%;">
-          <image src="../../image/icon/code.png" style="width: 40px;height: 40px;" @tap='goCode'></image>
-          <view>进出码</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/feedback.png" style="width: 40px;height: 40px;" bindtap='goFeedback'></image>
-          <view>反馈查看</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/apply.png" style="width: 40px;height: 40px;" bindtap='goApply'></image>
-          <view>申请记录</view>
+    <view id="menu-view">
+      <view class="menu-item" v-for="menuItem in filterMenuItems" :key="menuItem.id">
+        <view :class="{ 'add-dot': menuItem.addDot }" style="display: inline-block;">
+          <image :src="'../../image/icon/' + menuItem.image" class="item-image"
+            @tap='switchTo(menuItem.switchFunc, menuItem.url)'></image>
         </view>
+        <view>{{ menuItem.title }}</view>
       </view>
     </view>
-
-    <view style="display: block;" v-if="isUser">
-      <view style="display: flex;text-align: center;margin-top: 20px;">
-        <view style="width: 25%;">
-          <image src="../../image/icon/code.png" style="width: 40px;height: 40px;" @tap='goCode'></image>
-          <view>进出码</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/feedback.png" style="width: 40px;height: 40px;" bindtap='goFeedback'></image>
-          <view>反馈查看</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/apply.png" style="width: 40px;height: 40px;" bindtap='goApply'></image>
-          <view>申请记录</view>
-        </view>
-      </view>
-      <view style="display: flex;text-align: center;margin-top: 20px;">
-        <view style="width: 25%;">
-          <image src="../../image/icon/yq.png" style="width: 40px;height: 40px;" data-web="xgPage" bindtap='goWebPage'>
-          </image>
-          <view>疫情追踪</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/report.png" style="width: 40px;height: 40px;" bindtap='goReport'></image>
-          <view>今日日报</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/updPwd.png" style="width: 40px;height: 40px;" bindtap='goUpdPwd'></image>
-          <view>密码修改</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/fk.png" style="width: 40px;height: 40px;" bindtap='goKf'></image>
-          <view>提交反馈</view>
-        </view>
-      </view>
-    </view>
-
-    <view style="display: block;" v-if="isAdmin">
-      <view style="display: flex;text-align: center;margin-top: 20px;">
-        <view style="width: 25%;">
-          <image src="../../image/icon/danger.png" style="width: 40px;height: 40px;" bindtap='goCode'></image>
-          <view>不健康人员</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/feedback.png" style="width: 40px;height: 40px;" bindtap='goFeedbackReplay'>
-          </image>
-          <view>反馈回复</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/apply.png" style="width: 40px;height: 40px;" bindtap='goApplyReplay'></image>
-          <view>申请审批</view>
-        </view>
-      </view>
-      <view style="display: flex;text-align: center;margin-top: 20px;">
-        <view style="width: 25%;">
-          <image src="../../image/icon/gg.png" style="width: 40px;height: 40px;" data-web="xgPage" bindtap='goNotice'>
-          </image>
-          <view>公告发布</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/visitor.png" style="width: 40px;height: 40px;" bindtap="goVisitor"></image>
-          <view>访客审批</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/count.png" style="width: 40px;height: 40px;" bindtap='goCount'></image>
-          <view>分配账号</view>
-        </view>
-        <view style="width: 25%;">
-          <image src="../../image/icon/_report.png" style="width: 40px;height: 40px;" bindtap='toRedList'></image>
-          <view>今日未填</view>
-        </view>
-      </view>
-    </view>
-    <DebugComp />
+    <button type="primary" size="mini" @tap="toggleDot('code', true)">显示小红点</button>
+    <button type="primary" size="mini" @tap="toggleDot('code', false)">隐藏小红点</button>
+    <DebugComp :params="debugObject" :userGroup="userGroup" />
   </view>
 </template>
 
 <script>
 import Taro from '@tarojs/taro'
-import ENUM from '../../utils/const.js'
 import DebugComp from '../../components/DebugComp.vue'
+import getUserGroupByRole from '../../utils/getUserGroupByRole'
+import menuItemDict from '../../utils/menuList'
 
 import './index.css'
 
 
 export default {
+  components: {
+    DebugComp
+  },
   data() {
     return {
       userInfo: null,
       displayUsername: "",
-      isVisitor: false,
-      isUser: false,
-      isAdmin: false,
+      userGroup: "unknown",
+      menuItemDict: menuItemDict,
+      debugObject: {},
     }
   },
-  components: {
-    DebugComp
+  computed: {
+    filterMenuItems() {
+      return Object.values(this.menuItemDict)
+        .filter((item) => item.for.indexOf(this.userGroup) != -1)
+    }
   },
 
   onShow() {
     console.log('onShow')
-    console.log("ENUM", ENUM)
+    console.log("menuItemDict", menuItemDict)
     this.userInfo = Taro.getStorageSync("userInfo");
     this.displayUsername = this.userInfo?.username ?? "请登录";
     if (!this.userInfo) {
@@ -131,31 +59,31 @@ export default {
         url: '/pages/index/login'
       })
     } else {
-      const role = ENUM.user.role;
-      this.isVisitor = [
-        role.VISITOR,
-      ].includes(this.userInfo.role);
-      this.isUser = [
-        role.RESIDENTS_OWNER,
-        role.RESIDENTS_MEMBER,
-        role.RESIDENTS_TENENT,
-      ].includes(this.userInfo.role);
-      this.isAdmin = [
-        role.ADMIN,
-        role.STAFF,
-      ].includes(this.userInfo.role);
-      console.log(
-        "isVisitor", this.isVisitor,
-        "isUser", this.isUser,
-        "isAdmin", this.isAdmin
-      )
+      this.userGroup = getUserGroupByRole(this.userInfo.role);
+      this.debugObject = { userGroup: this.userGroup };
     }
   },
   methods: {
+    switchTo(func, pageUrl) {
+      switch (func) {
+        case 'switchTab':
+          Taro.switchTab({ url: pageUrl })
+          break;
+        case 'navigateTo':
+          Taro.navigateTo({ url: pageUrl })
+          break;
+        default:
+          console.log("切换页面失败", func, pageUrl)
+          break;
+      }
+    },
     goCode() {
       Taro.switchTab({
         url: '/pages/residents/code'
       })
+    },
+    toggleDot(iconName, status = true) {
+      this.menuItemDict[iconName].addDot = status;
     }
   }
 }