358 lines
9.0 KiB
Vue
358 lines
9.0 KiB
Vue
<template>
|
||
<view class="index_main" :style="{minHeight:screenH + 'px'}">
|
||
<view class="back-top"></view>
|
||
<!-- 轮播图 -->
|
||
<view class="swiper_nav">
|
||
<swiper autoplay :duration="1000">
|
||
<swiper-item v-for="(item, index) in swiperImg" :key="index">
|
||
<image :src="item" style="width: 100%;height: 100%;"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<!-- 皖送e餐 志愿者服务 -->
|
||
<view class="main_menu" v-if="showFirstMenus">
|
||
<view class="main_menu_item" v-for="(item,index) in firstMenus" :key="index" v-if="item.visible" @click="jumpRouter(item)">
|
||
<image :src="item.icon"></image>
|
||
<view class="main_menu_name">{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getAppUserPermissionInfo,
|
||
getUserInfo
|
||
} from '@/common/api.js';
|
||
import {
|
||
callbackRequest,
|
||
callbackRequestNoLoading,
|
||
setStorage,
|
||
getStorage,
|
||
// alertTip
|
||
} from '@/common/util.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
screenH: '',
|
||
swiperImg: [
|
||
require('@/static/images/system/top.png')
|
||
],
|
||
permissions: [],
|
||
roleList: [],
|
||
firstMenus: [],
|
||
secondMenus: [],
|
||
showFirstMenus: true
|
||
}
|
||
},
|
||
onLoad() {
|
||
// this.getAppUserPermissionInfo()
|
||
// this.getUserInfo()
|
||
},
|
||
mounted() {
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
this.screenH = res.windowHeight
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
// 菜单权限
|
||
getAppUserPermissionInfo() {
|
||
setStorage('userInfo', 'a866a82704044ae0a1a12ddc2a2e4346')
|
||
let userId = getStorage('userInfo') ? getStorage('userInfo') : 'a866a82704044ae0a1a12ddc2a2e4346';
|
||
callbackRequest({
|
||
method: getAppUserPermissionInfo,
|
||
userId: userId,
|
||
}).then(res => {
|
||
uni.hideLoading();
|
||
if (res.returnCode == 1) {
|
||
let returnData = res.returnData;
|
||
this.permissions = returnData.appMenus.length > 0 ? returnData.appMenus : [];
|
||
this.roleList = returnData.roles;
|
||
uni.setStorageSync('permissions', this.permissions);
|
||
this.$nextTick(() => {
|
||
this.handleMenus();
|
||
uni.setStorageSync('roles', returnData.roles);
|
||
});
|
||
} else {
|
||
uni.showToast({title: '权限获取失败',icon: 'none',duration: 2000})
|
||
}
|
||
});
|
||
},
|
||
|
||
getUserInfo() {
|
||
return new Promise((resove, reject) => {
|
||
let params = {
|
||
method: getUserInfo,
|
||
}
|
||
callbackRequest(params).then(res => {
|
||
let userinfo = res.returnData
|
||
uni.setStorageSync('userInfos', userinfo)
|
||
resove()
|
||
});
|
||
})
|
||
},
|
||
|
||
jumpRouter(row) {
|
||
if(row.path == 'wan_e_food') {
|
||
this.$tab.navigateTo('/pages/index')
|
||
}
|
||
if(row.path == 'wan_e_food') {
|
||
|
||
}
|
||
if(row.path == 'stage') {
|
||
// uni.navigateTo({
|
||
// url: '/pages/stage/index',
|
||
// success: (res) => {
|
||
// res.eventChannel.emit('pagesChange', { data: row.children })
|
||
// }
|
||
// })
|
||
}
|
||
},
|
||
|
||
handleMenus() {
|
||
let chunkSize = 8;
|
||
// 一级菜单
|
||
let firstMenusTemp = [];
|
||
// 二级菜单
|
||
let secondMenusTemp = [];
|
||
// 首页菜单
|
||
let permissionsOfIndex = this.permissions.filter(item => item.path == 'app_index' && item.visible);
|
||
// 过滤掉首页菜单
|
||
let permissionsOfOther = this.permissions.filter(item => item.path != 'app_index');
|
||
let showBanner = false;
|
||
console.log('一级菜单',permissionsOfIndex)
|
||
if (permissionsOfIndex && permissionsOfIndex.length > 0) {
|
||
if (permissionsOfIndex[0].children && permissionsOfIndex[0].children.length > 0) {
|
||
permissionsOfIndex[0].children.forEach(child => {
|
||
// 首页轮播图
|
||
if (child.path == "top_banners" && child.visible) {
|
||
showBanner = true;
|
||
}
|
||
// 一级菜单
|
||
if (child.path == "first_menus" && child.visible) {
|
||
firstMenusTemp = child.children;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
this.firstMenus = firstMenusTemp;
|
||
for (var i = 0; i < permissionsOfOther.length; i ++) {
|
||
secondMenusTemp.push(permissionsOfOther[i]);
|
||
}
|
||
|
||
this.secondMenus = secondMenusTemp;
|
||
console.log('二级菜单', this.secondMenus)
|
||
|
||
if (this.secondMenus.length == 1) {
|
||
// let params = !this.secondMenus[0][0].children ? '' : this.secondMenus[0][0].children[0].path;
|
||
let params = this.getLastPathBtn(permissionsOfOther)
|
||
let rolePath = this.getLastPath(permissionsOfOther)
|
||
console.log('直跳截取处理', params, rolePath)
|
||
if (rolePath) {
|
||
let path = rolePath.replace(/\?+$/, ''); // 去掉结尾的所有问号
|
||
// 检查问号，选择合适的拼接符
|
||
let delimiter = path.includes('?') ? '&' : '?';
|
||
// 拼接最终的 URL
|
||
let url = path + delimiter + 'role=' + params;
|
||
uni.redirectTo({
|
||
url: url
|
||
})
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (firstMenusTemp.length == 0 || !showBanner) {
|
||
// this.images = [
|
||
// this.defaultBanner
|
||
// ];
|
||
}
|
||
// 2.没有配置一级菜单时，隐藏一级菜单
|
||
this.showFirstMenus = firstMenusTemp.length == 0 ? false : true;
|
||
},
|
||
|
||
getLastPathBtn(tree) {
|
||
if (!Array.isArray(tree) || tree.length !== 1) {
|
||
return false;
|
||
}
|
||
const rootNode = tree[0];
|
||
if (!rootNode.path || !rootNode.children || rootNode.children.length !== 1) {
|
||
return false;
|
||
}
|
||
function traverse(node) {
|
||
if (node.children && node.children.length === 1) {
|
||
return traverse(node.children[0]);
|
||
} else if (node.children && node.children.length > 1) {
|
||
return false;
|
||
} else {
|
||
return node.path;
|
||
}
|
||
}
|
||
return traverse(rootNode);
|
||
},
|
||
|
||
getLastPath(tree) {
|
||
let lastPath = null;
|
||
let _this = this
|
||
|
||
function traverse(node) {
|
||
// 如果当前节点是我们想要的类型，更新最后的路径 type 1目录 2菜单 3按钮
|
||
// 如果当前节点是我们想要的类型，更新最后的路径
|
||
if (node.type == 2) {
|
||
lastPath = node.path;
|
||
}
|
||
|
||
// 递归遍历子节点
|
||
if (node.type == 2 && node.children && node.children.length == 1) {
|
||
// 当数组是菜单且子节点长度等于1的时候，继续往下递归数组，说明当前数组不是最后一层
|
||
for (let child of node.children) {
|
||
traverse(child);
|
||
}
|
||
} else if (node.type == 2 && node.children && node.children.length > 1 && _this.someTypeTrue(node.children)) {
|
||
console.log('1111', node)
|
||
// 当数组是菜单且子节点长度大于1的时候，就得看下面的子节点是否为都是按钮,都是按钮则返回当前路径
|
||
lastPath = false
|
||
} else if (node.type == 2 && node.children && node.children.length > 1 && !_this.someTypeTrue(node.children)) {
|
||
console.log('2222', node)
|
||
lastPath = node.path;
|
||
} else {
|
||
console.log('3333', node)
|
||
lastPath = lastPath
|
||
}
|
||
}
|
||
|
||
// 遍历每个根节点
|
||
for (let root of tree) {
|
||
traverse(root);
|
||
}
|
||
|
||
return lastPath;
|
||
},
|
||
|
||
// 判断下一层子节点是否全是按钮
|
||
someTypeTrue(arr) {
|
||
const result = arr.some(item => item.type == 3) ? false : true;
|
||
return result
|
||
},
|
||
|
||
jumpPage(item) {
|
||
if(!item.path) {
|
||
uni.showToast({
|
||
title: '敬请期待',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url: item.path
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.index_main {
|
||
background: #F2F6FA;
|
||
overflow: auto;
|
||
padding: 24rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.back-top {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 578rpx;
|
||
background: linear-gradient( 180deg, #D2EAFF 0%, rgba(208,233,254,0) 100%);
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.swiper_nav {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.main_menu {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 24rpx;
|
||
padding: 0 12rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.main_menu_item {
|
||
z-index: 99;
|
||
margin: 0 12rpx;
|
||
padding: 28rpx 0;
|
||
flex: 1;
|
||
height: 208rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.main_menu_name {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #0E1A24;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
image {
|
||
display: flex;
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 34rpx;
|
||
}
|
||
}
|
||
.yiz_menu {
|
||
width: calc(100% - 48rpx);
|
||
min-height: 480rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
margin-top: 24rpx;
|
||
margin-left: 24rpx;
|
||
}
|
||
.yiz_menu_tle {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #0E1A24;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 28rpx 28rpx 0 28rpx;
|
||
}
|
||
.yiz_menu_nav {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
.yiz_menu_nav_item {
|
||
width: calc(100% / 4);
|
||
margin-top: 48rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
image {
|
||
display: block;
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 34rpx;
|
||
}
|
||
.yiz_menu_name {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #0E1A24;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|