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
Download Patch File Download Diff File Expand all files Collapse all files

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