481 lines
12 KiB
Vue
481 lines
12 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="toptit" @click="shows()">
|
||
{{ areaInfo.areaName }}
|
||
</view>
|
||
<!-- <u-navbar :is-back='false' title="工作台" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||
height='45'></u-navbar> -->
|
||
|
||
<view class="cont_box">
|
||
<view class="top">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uMlgu6j9jnDqP1ZFL7xj" mode=""></image>
|
||
应用入口
|
||
</view>
|
||
<view class="app_box" v-if="menuList.length > 0">
|
||
<view class="cont" @click="topage(0)" v-if="hasMenuPermission('运营数据')">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/unnmUkUif2eWNKFq9fdg" mode=""></image>
|
||
<view class="text">
|
||
运营数据
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cont" @click="topage(8)" v-if="hasMenuPermission('财务报表')">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/upJFJIIZ4hbSEuchNQi3" mode=""></image>
|
||
<view class="text">
|
||
财务报表
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="topage(2)" v-if="hasMenuPermission('设备管理')">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uNfRjhtxYmMPKaX4DqTS" mode=""></image>
|
||
<view class="text">
|
||
设备管理
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cont" @click="topage(4)" v-if="hasMenuPermission('用户页面')">
|
||
<!-- <image src="https://lxnapi.ccttiot.com/bike/img/static/uM4rBBaXc7b3TmsqQTvz" mode=""></image> -->
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/ui9GMTP9k1K0YC9jlWHu" mode=""></image>
|
||
|
||
<view class="text">
|
||
用户页面
|
||
</view>
|
||
</view>
|
||
<!-- <view class="cont" @click="topage(5)" v-if="hasMenuPermission('车辆绑定')">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uM4rBBaXc7b3TmsqQTvz" mode=""></image>
|
||
<view class="text">
|
||
车辆绑定
|
||
</view>
|
||
</view> -->
|
||
<view class="cont" @click="topage(6)" v-if="hasMenuPermission('账户明细')">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/u47okd0YdEQBsyhLlQIt" mode=""
|
||
style="width: 50rpx;height: 50rpx;"></image>
|
||
<view class="text">
|
||
账户明细
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="topage(7)" v-if="hasMenuPermission('故障审核')">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/u47okd0YdEQBsyhLlQIt" mode=""
|
||
style="width: 50rpx;height: 50rpx;"></image>
|
||
<view class="text">
|
||
故障审核
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="topage(9)" v-if="hasMenuPermission('车型管理')">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/ufE1T9RDOm7OmhLgTzXi" mode=""
|
||
style="width: 100%;height: 100%;"></image>
|
||
|
||
</view>
|
||
<view class="cont" @click="topage(10)" v-if="hasMenuPermission('收费模版')">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uqG3ZQWu986qU0gU9vbb" mode=""
|
||
style="width: 100%;height: 100%;"></image>
|
||
|
||
</view>
|
||
<view class="cont" @click="topage(11)" style="width: 96rpx;height: 96rpx;"
|
||
v-if="hasMenuPermission('运营设置')">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uqCr4GrXEx6irmRNNsfM" mode=""
|
||
style="width: 96rpx;height: 96rpx;"></image>
|
||
|
||
</view>
|
||
<view class="cont" @click="topage(12)" v-if="hasMenuPermission('区域设置')">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uM4rBBaXc7b3TmsqQTvz" mode=""></image>
|
||
<!-- <image src="https://lxnapi.ccttiot.com/bike/img/static/ui9GMTP9k1K0YC9jlWHu" mode=""></image> -->
|
||
|
||
<view class="text">
|
||
区域设置
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-select v-model="show" :list="list" title='选择运营区' @confirm="confirm" v-if="list.length <= 5"></u-select>
|
||
<!-- 自定义选择器 -->
|
||
<view class="custom-select" v-if="show && list.length > 5">
|
||
<view class="mask" @click="show = false"></view>
|
||
<view class="select-content">
|
||
<view class="select-header">
|
||
<text>选择运营区</text>
|
||
<text class="close" @click="show = false">×</text>
|
||
</view>
|
||
|
||
<view class="search-box">
|
||
<input type="text" v-model="searchKey" placeholder="搜索运营区" @input="handleSearch" />
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="select-list">
|
||
<view class="select-item" v-for="item in displayList" :key="item.value" @click="selectItem(item)"
|
||
:class="{ 'highlight': searchKey && item.label.includes(searchKey) }">
|
||
{{ item.label }}
|
||
<view style="font-size: 24rpx;color: #999;margin-left: auto;"> {{ item.deptName }}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<TabBar :indexs='0' style=""></TabBar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TabBar from '@/pages_admin/components/tab-bar/tab-bar.vue';
|
||
export default {
|
||
components: { TabBar },
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#FFFFFF",
|
||
},
|
||
sn: '',
|
||
areaId: 0,
|
||
areaInfo: {},
|
||
list: [],
|
||
show: false,
|
||
info: {},
|
||
userinfo: {},
|
||
deptId: null,
|
||
menuList: [],
|
||
searchKey: '',
|
||
displayList: [], // 用于显示的列表
|
||
}
|
||
},
|
||
onShow() {
|
||
this.deptId = uni.getStorageSync('deptId');
|
||
this.$store.dispatch('userInfo', this.$u).then(() => {
|
||
|
||
// 执行其他操作...
|
||
});
|
||
if (uni.getStorageSync('adminAreaid')) {
|
||
this.areaId = uni.getStorageSync('adminAreaid')
|
||
this.getArea()
|
||
this.getinfo()
|
||
this.getareaList()
|
||
this.getareaInfo()
|
||
}
|
||
|
||
},
|
||
computed: {
|
||
userId() {
|
||
return this.$store.getters.userId;
|
||
},
|
||
// maskedPhoneNumber() {
|
||
// if (!this.info.phonenumber) return '';
|
||
// return this.info.phonenumber.slice(0, 3) + '****' + this.info.phonenumber.slice(7);
|
||
// },
|
||
// maskedName() {
|
||
// if (!this.info.realName) return '';
|
||
// return this.info.realName.charAt(0) + '*'.repeat(this.info.realName.length - 1);
|
||
// },
|
||
// 添加过滤后的列表计算属性
|
||
filteredList() {
|
||
if (!this.searchKey) return this.list;
|
||
return this.list.filter(item =>
|
||
item.label.toLowerCase().includes(this.searchKey.toLowerCase())
|
||
);
|
||
}
|
||
},
|
||
methods: {
|
||
handleSearch(e) {
|
||
const value = e.detail.value;
|
||
if (!value) {
|
||
// 搜索框为空时显示全部数据
|
||
this.displayList = this.list;
|
||
} else {
|
||
// 有搜索内容时过滤数据
|
||
this.displayList = this.list.filter(item =>
|
||
item.label.toLowerCase().includes(value.toLowerCase()) ||
|
||
item.deptName.toLowerCase().includes(value.toLowerCase())
|
||
);
|
||
}
|
||
},
|
||
|
||
selectItem(item) {
|
||
this.confirm([item]);
|
||
this.show = false;
|
||
this.searchKey = ''; // 选择后清空搜索框
|
||
this.displayList = this.list; // 重置显示列表
|
||
},
|
||
hasMenuPermission(menuName) {
|
||
return this.menuList.some(item => item.menuName === menuName);
|
||
},
|
||
getinfo() {
|
||
this.$u.get("/getAppInfo").then((res) => {
|
||
|
||
if (res.code == 200) {
|
||
|
||
this.userinfo = res.user
|
||
this.menuList = res.menu
|
||
console.log(this.menuList, 'menuListmenuListmenuListmenuList');
|
||
} else {
|
||
// setTimeout(() => {
|
||
// this.getinfo()
|
||
// }, 200)
|
||
|
||
}
|
||
});
|
||
},
|
||
getareaInfo() {
|
||
this.$u.get('/appVerify/getDept').then((res) => {
|
||
if (res.code == 200) {
|
||
this.info = res.data
|
||
console.log(this.userId, 'userIduserIduserId');
|
||
}
|
||
}).catch(error => {
|
||
console.error("Error fetching area data:", error);
|
||
});
|
||
},
|
||
shows() {
|
||
|
||
if (this.list.length < 2) {
|
||
|
||
} else {
|
||
this.show = true
|
||
}
|
||
},
|
||
getareaList() {
|
||
|
||
|
||
this.$u.get('/appVerify/getAreaList').then((res) => {
|
||
if (res.code == 200) {
|
||
this.list = res.data.map(item => ({
|
||
value: item.areaId,
|
||
label: item.areaName,
|
||
deptName: item.deptName
|
||
}));
|
||
this.displayList = this.list; // 重置显示列表
|
||
}
|
||
}).catch(error => {
|
||
console.error("Error fetching area data:", error);
|
||
});
|
||
},
|
||
confirm(e) {
|
||
// console.log(e);
|
||
uni.setStorageSync('adminAreaid', e[0].value);
|
||
this.areaId = e[0].value
|
||
this.getArea()
|
||
|
||
},
|
||
getArea() {
|
||
|
||
let id = this.areaId
|
||
this.$u.get("/app/area/" + id).then((res) => {
|
||
|
||
if (res.code == 200) {
|
||
this.areaInfo = res.data
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
},
|
||
topage(num) {
|
||
if (num == 0) {
|
||
uni.navigateTo({
|
||
url: '/pages_admin/worke/worke_Operation'
|
||
})
|
||
} else if (num == 1) {
|
||
uni.navigateTo({
|
||
url: '/pages_admin/worke/worke_income'
|
||
})
|
||
} else if (num == 2) {
|
||
uni.navigateTo({
|
||
url: '/pages_admin/worke/woke_deviceMgmt'
|
||
})
|
||
} else if (num == 3) {
|
||
uni.navigateTo({
|
||
url: '/pages_admin/worke/worke_user'
|
||
})
|
||
} else if (num == 4) {
|
||
uni.navigateTo({
|
||
url: '/pages/index/index'
|
||
})
|
||
} else if (num == 5) {
|
||
uni.navigateTo({
|
||
url: '/pages_admin/worke/bind_sn'
|
||
})
|
||
|
||
} else if (num == 6) {
|
||
uni.navigateTo({
|
||
url: '/pages_admin/worke/AccountDetails'
|
||
})
|
||
} else if (num == 7) {
|
||
uni.navigateTo({
|
||
url: '/pages_adminSet/shgl'
|
||
})
|
||
} else if (num == 8) {
|
||
uni.navigateTo({
|
||
url: '/pages_adminSet/financialStatement'
|
||
})
|
||
} else if (num == 9) {
|
||
uni.navigateTo({
|
||
url: '/pages_adminSet/CarModel'
|
||
})
|
||
} else if (num == 10) {
|
||
uni.navigateTo({
|
||
url: '/pages_adminSet/ChargingTemplate'
|
||
})
|
||
} else if (num == 11) {
|
||
uni.navigateTo({
|
||
url: '/pages_adminSet/sysSet'
|
||
})
|
||
} else if (num == 12) {
|
||
uni.navigateTo({
|
||
url: '/pages_adminSet/ParkIngList'
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.custom-select {
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 999;
|
||
}
|
||
|
||
.select-content {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: #fff;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
z-index: 1000;
|
||
height: 50vh; // 最大高度
|
||
// min-height: 400rpx; // 添加最小高度
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 20rpx;
|
||
|
||
.select-header {
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
.close {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.search-box {
|
||
padding: 15rpx 20rpx;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 30rpx;
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.select-list {
|
||
flex: 1;
|
||
max-height: calc(50vh - 140rpx);
|
||
min-height: 260rpx; // 为列表添加最小高度
|
||
|
||
.select-item {
|
||
display: flex;
|
||
// flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx;
|
||
border-bottom: 1px solid #eee;
|
||
font-size: 28rpx;
|
||
|
||
&.highlight {
|
||
background-color: #f0f9ff;
|
||
color: #2d8cf0;
|
||
}
|
||
|
||
&:active {
|
||
background: #f5f5f5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.page {
|
||
width: 750rpx;
|
||
|
||
.toptit {
|
||
margin-top: 100rpx;
|
||
margin-left: 100rpx;
|
||
font-size: 38rpx;
|
||
}
|
||
|
||
.cont_box {
|
||
padding: 46rpx 50rpx;
|
||
margin: 68rpx auto;
|
||
width: 680rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
.top {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
|
||
image {
|
||
margin-right: 16rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
|
||
}
|
||
|
||
.app_box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.cont:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.cont {
|
||
margin-right: 60rpx;
|
||
margin-top: 70rpx;
|
||
width: 96rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 54rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
.text {
|
||
margin-top: 14rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |