coder-xiaomo/epp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

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

Browse Source
This commit is contained in:
程序员小墨 2022-11-26 22:09:30 +08:00
parent 88f3e0768c
commit 66b2babf79
8 changed files with 229 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
miniprogram/src/app.css
View File

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

25
miniprogram/src/components/DebugComp.vue
View File

@ -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'
})
}
}
}

BIN
miniprogram/src/image/home.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 28 KiB

BIN
miniprogram/src/image/icon/yq.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.0 KiB

15
miniprogram/src/pages/index/index.css
View File

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

156
miniprogram/src/pages/index/index.vue
View File

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

29
miniprogram/src/utils/getUserGroupByRole.js Normal file
View File

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

104
miniprogram/src/utils/menuList.js Normal file
View File

@ -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