一.静态数据
menuList: [{
?? ??? ??? ??? ??? ?name: '催缴管理',
?? ??? ??? ??? ??? ?id: 1,
?? ??? ??? ??? ??? ?src: '../../static/homepage/icon_cuijiao@2x.png',
?? ??? ??? ??? ??? ?path: '../callpay/index'
?? ??? ??? ??? ?}, {
?? ??? ??? ??? ??? ?name: '投诉建议',
?? ??? ??? ??? ??? ?id: 2,
?? ??? ??? ??? ??? ?src: '../../static/homepage/wuye_tousu@2x.png',
?? ??? ??? ??? ??? ?path: '../complaint/index'
?? ??? ??? ??? ?}, {
?? ??? ??? ??? ??? ?name: '报事报修',
?? ??? ??? ??? ??? ?id: 3,
?? ??? ??? ??? ??? ?src: '../../static/homepage/wuye_icon_baoshibaoxiu@2x.png',
?? ??? ??? ??? ??? ?path: '../maintain/index'
?? ??? ??? ??? ?}, {
?? ??? ??? ??? ??? ?name: '巡更管理',
?? ??? ??? ??? ??? ?id: 4,
?? ??? ??? ??? ??? ?src: '../../static/homepage/icon_xungeng@2x.png',
?? ??? ??? ??? ??? ?path: '../patro/index'
?? ??? ??? ??? ?}, {
?? ??? ??? ??? ??? ?name: '保洁管理',
?? ??? ??? ??? ??? ?id: 5,
?? ??? ??? ??? ??? ?src: '../../static/homepage/icon_baojie@2x.png',
?? ??? ??? ??? ??? ?path: '../cleaning/index'
?? ??? ??? ??? ?}, {
?? ??? ??? ??? ??? ?name: '绿化管理',
?? ??? ??? ??? ??? ?id: 6,
?? ??? ??? ??? ??? ?src: '../../static/homepage/icon_lvhua@2x.png',
?? ??? ??? ??? ??? ?path: '../green/index'
?? ??? ??? ??? ?}, {
?? ??? ??? ??? ??? ?name: '设备巡检',
?? ??? ??? ??? ??? ?id: 7,
?? ??? ??? ??? ??? ?src: '../../static/homepage/icon_xunjian@2x.png',
?? ??? ??? ??? ??? ?path: '../inspect/index'
?? ??? ??? ??? ?}, {
?? ??? ??? ??? ??? ?name: '设备维保',
?? ??? ??? ??? ??? ?id: 8,
?? ??? ??? ??? ??? ?src: '../../static/homepage/icon_shebei@2x.png',
?? ??? ??? ??? ??? ?path: '../maintmanagement/index'
?? ??? ??? ??? ?}],
?? ??? ??? ??? ?activeIndex: 0,
?? ??? ??? ??? ?list: [{title:'投诉',role:'投诉建议'}, {title:'报修',role:'报事报修'}, {title:'巡更',role:'巡更管理'}, ?{title:'保洁',role:'保洁管理'}, {title:'绿化',role:'绿化管理'},{title:'巡检',role:'设备巡检'} ,{title:'维保',role:'设备维保'} ]二.静态数据渲染后需要和后台数组整合实现点击效果的跳转和提示
<!-- 九宫格 -->
<view class="menu-box">
<view class="menu-item" v-for="(item,index) in menuList" @click="goDetail(item)" >
<image :src="item.src" mode=""></image>
<text>{{item.name}}</text>
</view>
</view>
// 请求接口拿到数据通过code是'IsView'判断是否跳转
created(){
this.getList()
},
methods:{
getList(){
queryUserRightsList().then((res)=>{
res.value.map(item=>{
if (item.authorityList) {
item.authorityList.map(authority=>{
if (authority.code && authority.code === 'IsView') {
this.getDataList.push(item.name);
}
})
}
})
})
}
}
//点击事件
goDetail(items) {
if (this.getDataList && this.getDataList.indexOf(items.name) != -1) {
uni.navigateTo({
url: items.path,
})
} else {
uni.showToast({
title:"没有权限进入"
})
}
}三.房人车显示跳转
<!-- 房人车 -->
<view class="housePersonCar-Box">
<view class="inner-box">
<view class="inner-item" @click="goModule('house')">
<view class="left">
<image src="../../static/homepage/shouye_house@2x.png" mode=""></image>
</view>
<view class="right">
<text class="num commonColor" v-if="projectObject&&projectObject.length>0">{{projectObject[0].cnt_house || '0'}}</text>
<text class="type">总户数</text>
</view>
</view>
<view class="inner-item" @click="goModule('owner')">
<view class="left">
<image src="../../static/homepage/shouye_owner@2x.png" mode=""></image>
</view>
<view class="right">
<text class="num commonColor" v-if="projectObject&&projectObject.length>0">{{projectObject[0].cnt_owner}}</text>
<text class="type">总人数</text>
</view>
</view>
<view class="inner-item" @click="goModule('car')">
<view class="left">
<image src="../../static/homepage/shouye_car@2x.png" mode=""></image>
</view>
<view class="right">
<text class="num commonColor" v-if="projectObject&&projectObject.length>0">{{projectObject[0].cnt_park}}</text>
<text class="type">总车位</text>
</view>
</view>
</view>
</view>
methods:{
// 同构后天数据来判断
goModule(e) {
if (this.getDataList && this.getDataList.indexOf('APP首页') != -1) {
let url = '';
if (e === 'house') {
url = '../houseinfo/index'
} else if (e === 'owner') {
url = '../ownerinfo/index'
} else if (e === 'car') {
url = '../carinfo/index'
} else if (e === 'order') {
url = '../orderlist/index'
} else if (e === 'callpay') {
url = '../callpay/index'
}
uni.navigateTo({
url,
})
} else {
uni.showToast({
title:"没有权限进入"
})
}
},
}四.tab栏切换的显示
<!-- Tab切换 -->
<view class="tab-box">
<navUnit :activeIndex="activeIndex" @chooseItem="chooseItem" :list="gjsList()"></navUnit>
<swiper :indicator-dots="false" :autoplay="false" :interval="1000" :duration="1000" @change="swiperChange"
:current="activeIndex">
<swiper-item v-for="(item,index) in swiperList" :key="index">
<view class="tabContainerBox">
<picker class="picker" :range="timeList" range-key="name" @change="chooseSwiperTime">
<!-- <text class="title">今日{{item.title}}</text> -->
<u--text class="title" suffixIcon="arrow-down" iconStyle="font-size: 30rpx"
:text="swiperDateType.name+item.title"></u--text>
</picker>
<view class="charts-box">
<qiun-data-charts type="arcbar" :chartData="item.progressChartData" :opts="options" />
</view>
<view class="num-box uni-flex-row">
<view class="num-item">
<text>{{item.allcnt}}</text>
<text>{{item.title}}数量</text>
</view>
<view class="num-item">
<text>{{item.finishrateshow}}</text>
<text>完成率</text>
</view>
</view>
<text class="level-text">{{item.finishlevel}}</text>
</view>
</swiper-item>
</swiper>
</view>
//这里的list和gjsList是父子传值
methods:{
gjsList(){
let getDataList = this.getDataList;
if (getDataList && getDataList.length > 0) {
let gjsList = []
this.list.map(v => {
if (getDataList && getDataList.indexOf(v.role) != -1) {
gjsList.push(v);
}
})
return gjsList;
} else {
return []
}
},
}
