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

miniprogram/src/app.css

@@ -0,0 +1,15 @@
+/* 右上角小红点 */
+.add-dot {
+  position: relative;
+}
+
+.add-dot::after {
+  content: " ";
+  position: absolute;
+  right: -8rpx;
+  top: -3rpx;
+  width: 12rpx;
+  height: 12rpx;
+  background-color: red;
+  border-radius: 50%;
+}

miniprogram/src/components/DebugComp.vue

@@ -1,6 +1,10 @@
 <template>
   <view v-if="debugMode">
-    <button @tap='debugCleanCache'>清除缓存</button>
+    <button type="warn" size="mini" @tap='debugCleanCache'>清除缓存</button>
+    <view style="border: 3px solid black;">
+      <input v-model="userRole" style="border: 1px solid grey; display: inline-block; width: 40%;" />
+      <button style="width: 50%;" type="primary" size="mini" @tap='updateUserRole'>更新role ({{ userGroup }})</button>
+    </view>
     <textarea maxlength="-1" disabled="true" auto-height="true" style="width: 100%" :value="debugText"></textarea>
   </view>
 </template>
@@ -9,22 +13,33 @@
 import Taro from '@tarojs/taro'
 import { eventCenter, getCurrentInstance } from '@tarojs/taro'
 
+import ENUM from '../utils/const'
+
 export default {
   data() {
     return {
+      userRole: -1,
       debugMode: Taro.getApp().globalData.debugMode,
       debugText: "",
     }
   },
+  props: {
+    params: Object,
+    userGroup: String
+  },
   mounted() {
     eventCenter.once(getCurrentInstance().router.onShow, () => {
+      this.userRole = Taro.getStorageSync("userInfo").role;
+
       const res = Taro.getStorageInfoSync()
       let storage = {};
       res.keys.forEach(key => storage[key] = Taro.getStorageSync(key))
       this.debugText = JSON.stringify({
         TARO_ENV: process.env.TARO_ENV,
         globalData: Taro.getApp().globalData,
+        params: this.params,
         storage: storage,
+        ENUM: ENUM,
         // storageInfo: {
         //   keys: res.keys,
         //   currentSize: res.currentSize,
@@ -46,6 +61,14 @@ export default {
           })
         }
       })
+    },
+    updateUserRole() {
+      let userInfo = Taro.getStorageSync("userInfo");
+      userInfo.role = this.userRole;
+      Taro.setStorageSync("userInfo", userInfo);
+      Taro.reLaunch({
+        url: '/pages/index/index'
+      })
     }
   }
 }

miniprogram/src/pages/index/index.css

@@ -0,0 +1,15 @@
+#menu-view {
+  display: flex;
+  text-align: center;
+  flex-wrap: wrap;
+}
+
+.menu-item {
+  width: 25%;
+  margin-top: 50px;
+}
+
+.item-image {
+  width: 70px;
+  height: 70px;
+}

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;
     }
   }
 }

miniprogram/src/utils/getUserGroupByRole.js

@@ -0,0 +1,29 @@
+const ENUM = require('./const.js');
+
+function getUserGroupByRole(userRole) {
+  const role = ENUM.user.role;
+  userRole = Number(userRole);
+  let userGroupDict = {
+    'visitor': [
+      role.VISITOR,
+    ].includes(userRole),
+    'user': [
+      role.RESIDENTS_OWNER,
+      role.RESIDENTS_MEMBER,
+      role.RESIDENTS_TENENT,
+    ].includes(userRole),
+    'admin': [
+      role.ADMIN,
+      role.STAFF,
+    ].includes(userRole)
+  }
+  console.log("userGroupDict", userGroupDict, userRole, role)
+  for (let userGroup of Object.keys(userGroupDict)) {
+    if (userGroupDict[userGroup]) {
+      return userGroup;
+    }
+  }
+  return 'unknown';
+}
+
+module.exports = getUserGroupByRole;

miniprogram/src/utils/menuList.js

@@ -0,0 +1,104 @@
+const switchTab = "switchTab";
+const navigateTo = "navigateTo";
+let id = 0;
+
+let menuItemDict = {
+  'login': {
+    for: ['unknown'],
+    title: "登录",
+    image: "code.png",
+    switchFunc: switchTab,
+    url: '/pages/residents/code',
+  },
+  'code': {
+    for: ['visitor', 'user'],
+    title: "进出码",
+    image: "code.png",
+    switchFunc: switchTab,
+    url: '/pages/residents/code'
+  },
+  'report': {
+    for: ['user'],
+    title: "体温上报",
+    image: "report.png",
+    switchFunc: switchTab,
+    url: ''
+  },
+  'apply-record': {
+    for: ['visitor', 'user'],
+    title: "申请记录",
+    image: "apply.png",
+    switchFunc: switchTab,
+    url: ''
+  },
+  'apply-approval': {
+    for: ['admin'],
+    title: "申请审批",
+    image: "apply.png", // ApplyReplay
+    switchFunc: switchTab,
+    url: ''
+  },
+  'visitor-apply': {
+    for: ['admin'],
+    title: "访客审批",
+    image: "visitor.png",
+    switchFunc: switchTab,
+    url: ''
+  },
+  'abnormal': {
+    for: ['admin'],
+    title: "异常人员",
+    image: "danger.png",
+    switchFunc: switchTab,
+    url: ''
+  },
+  'feedback-submit': {
+    for: ['visitor', 'user'],
+    title: "提交反馈",
+    image: "fk.png",
+    switchFunc: switchTab,
+    url: ''
+  },
+  'feedback-list': {
+    for: ['visitor', 'user'],
+    title: "反馈查看",
+    image: "feedback.png",
+    switchFunc: switchTab,
+    url: ''
+  },
+  'feedback-reply': {
+    for: ['admin'],
+    title: "反馈回复",
+    image: "feedback.png",
+    switchFunc: switchTab,
+    url: ''
+  },
+  'update-password': {
+    for: ['user', 'admin'],
+    title: "密码修改",
+    image: "updPwd.png",
+    switchFunc: switchTab,
+    url: ''
+  },
+  'assign': {
+    for: ['admin'],
+    title: "分配账号",
+    image: "count.png",
+    switchFunc: switchTab,
+    url: ''
+  },
+  'unfinish': {
+    for: ['admin'],
+    title: "今日未填", // RedList
+    image: "_report.png",
+    switchFunc: switchTab,
+    url: ''
+  }
+}
+let keys = Object.keys(menuItemDict);
+for (let key of keys) {
+  menuItemDict[key].id = id++;
+  menuItemDict[key].addDot = false;
+}
+
+module.exports = menuItemDict