bike/pages_admin/admin_worke.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>
					<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>
		</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'
				})
			}

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