chuangte_bike_newxcx/page_shanghu/guanli/admin_worke.vue

<template>
	<view class="page">
		<view class="bj"></view>
		<view class="toptit" @click="topage(4)">
			<u-icon name="arrow-left" color="#fff" size="38"></u-icon> 用户页面
		</view>
		
		<view class="gonggao" @click="btntopgg">
			<u-icon name="volume-fill" color="#fff" style="position: absolute;left: 20rpx;" size="32"></u-icon>
			<view class="container">
			    <view class="scroll-text">
			      <view class="scroll-item">
			        {{announcements.noticeTitle == null ? '暂无最新公告！！！' : announcements.noticeTitle}}
			      </view>
			    </view>
			</view>
			<u-icon name="arrow-right" color="#fff" style="position: absolute;right: 10rpx;" size="32"></u-icon>
		</view>
		
		<!-- 公告弹窗 -->
		<view class="noticetc" v-if="gonggaoflag">
			<view class="name">
				公告
			</view>
			<view class="biaoti">
				{{gonggaoxq.noticeTitle}}
			</view>
			<!-- <view class="cont" v-html="gonggaoxq.noticeContent"></view> -->
			<u-parse :html="gonggaoxq.noticeContent" style="width: 100%;height: 620rpx;background-color: #efefef;padding: 10rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
			<view class="btn" @click="btnggtc">
				我知道了
			</view>
		</view>
		<view class="mask" v-if="gonggaoflag"></view>
		<view class="cont_box">
			<view class="top" style="margin-top: 0;">
				运营管理
			</view>
			<view class="app_box">
				<view class="cont" @click="btnjs">
					<image src="https://api.ccttiot.com/smartmeter/img/static/urekbXiCM5giUxV4bcge" mode=""></image>
					<view class="text">
						门店管理
					</view>
				</view>
				<view class="cont" @click="topage(10)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uLB9q8EyyKku919PWbxF" mode=""></image>
					<view class="text">
						收费模版
					</view>
				</view>
				<view class="cont" @click="topage(7)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ug2Zhz3dClUFTSzL1xTD" mode=""></image>
					<view class="text">
						故障审核
					</view>
				</view>
				<view class="cont" @click="btnreturnbike">
					<image src="https://api.ccttiot.com/smartmeter/img/static/usv2hT8WU6LTBQXemobM" mode=""></image>
					<view class="text">
						还车审核
					</view>
				</view>
				<view class="cont" @click="topage(12)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uXTQa43wL8rxZVFznyuP" mode=""></image>
					<view class="text">
						运营区域
					</view>
				</view>
				<view class="cont" @click="topage(11)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uBlRceBO9lNsFyZsJkm6" mode=""></image>
					<view class="text">
						运营配置
					</view>
				</view>
			</view>
			<view class="top">
				车辆管理
			</view>
			<view class="app_box">
				<view class="cont" @click="topage(2)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u4jQnprb9OdxcyUSzEfs" mode=""></image>
					<view class="text">
						车辆管理
					</view>
				</view>
				<view class="cont" @click="topage(9)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u9TppL8PmOJh0znzlZRX" mode=""></image>
					<view class="text">
						车型管理
					</view>
				</view>
			</view>
			<view class="top">
				其他
			</view>
			<view class="app_box">
				<view class="cont" @click="btnskzh">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uCHTXshmf1f6uXcyHByo" mode=""></image>
					<view class="text">
						收款账户
					</view>
				</view>
				<view class="cont" @click="btnjm">
					<image src="https://api.ccttiot.com/smartmeter/img/static/umuP2xRE3AgzWymlxU10" mode=""></image>
					<view class="text">
						加盟伙伴
					</view>
				</view>
				<!-- <view class="cont" @click="btngggl">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ui8unTyOFXCkgier5F5P" mode=""></image>
					<view class="text">
						公告管理
					</view>
				</view> -->
				<!-- <view class="cont" @click="btnmz">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ur7n7u3LdDMLKQdzTtD7" mode=""></image>
					<view class="text">
						免责协议
					</view>
				</view>
				<view class="cont" @click="btnggsz">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uov2297NuScFZayry0iH" 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 '@/page_shanghu/components/tab-bar/tab-bar.vue'
var xBlufi = require("@/components/blufi/xBlufi.js")
export default {
	components: { TabBar },
	data() {
		return {
			bgc: {
				backgroundColor: "#FFFFFF",
			},
			sn: '',
			areaId: 0,
			areaInfo: {},
			list: [],
			show: false,
			info: {},
			userinfo: {},
			deptId: null,
			menuList: [],
			searchKey: '',
			displayList: [], // 用于显示的列表
			gonggaoxq:{},
			gonggaoflag:false,
			announcements: {},
		}
	},
	onLoad() {
		wx.openBluetoothAdapter({
		  success: function (res) {
		    console.log('蓝牙适配器初始化成功')
			xBlufi.initXBlufi(1)
			xBlufi.notifyStartDiscoverBle({'isStart': true})
			xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
		  },
		  fail: function (err) {
		    console.error('蓝牙适配器初始化失败，可能是因为没有权限', err)
		  }
		})
	},
	onShow() {
		this.getgonggao()
		this.deptId = uni.getStorageSync('deptId')
		if (uni.getStorageSync('adminAreaid')) {
			this.areaId = uni.getStorageSync('adminAreaid')
			// this.getArea()
			this.getinfo()
			// this.getareaList()
		}

	},
	computed: {
		userId() {
			return this.$store.getters.userId
		},
		// 添加过滤后的列表计算属性
		filteredList() {
			if (!this.searchKey) return this.list
			return this.list.filter(item =>
				item.label.toLowerCase().includes(this.searchKey.toLowerCase())
			)
		}
	},
	methods: {
		// 点击跳转广告图设置
		btnggsz(){
			uni.navigateTo({
				url:'/page_user/shanghugl/ggsz'
			})
		},
		// 点击跳转免责协议
		btnmz(){
			uni.navigateTo({
				url:'/page_user/shanghugl/mianze'
			})
		},
		// 点击跳转公告管理
		btngggl(){
			uni.navigateTo({
				url:'/page_user/shanghugl/index'
			})
		},
		// 点击跳转到收款账户
		btnskzh(){
			uni.navigateTo({
				url:'/page_user/shoukuan/index'
			})
		},
		// 点击跳转到还车审核
		btnreturnbike(){
			uni.navigateTo({
				url:'/page_user/returnbike'
			})
		},
		// 点击头部滚动通知
		btntopgg(){
			this.$u.get(`/app/notice/${this.announcements.noticeId}`).then(resp =>{
				if(resp.code == 200){
					this.gonggaoxq = resp.data
					this.gonggaoflag = true
				}
			})
		},
		// 点击公告我知道了
		btnggtc(){
			this.gonggaoflag = false
			uni.setStorageSync('noticeIds', this.announcements.noticeId)
		},
		// 获取最新公告
		getgonggao(){
			this.$u.get("/app/notice/new?noticeType=2").then(res =>{
				if(res.code == 200){
					this.announcements = res.data
					this.$u.get(`/app/notice/${res.data.noticeId}`).then(resp =>{
						if(resp.code == 200){
							this.gonggaoxq = resp.data
							if(resp.data.noticeId != uni.getStorageSync('noticeIds')){
								this.gonggaoflag = true
							}
						}
					})
				}
			})
		},
		// 点击提示功能完善中
		btnjs(){
			uni.showToast({
				title: '功能完善中',
				icon: 'none',
				duration: 2000
			})
		},
		// 点击跳转到加盟伙伴
		btnjm(){
			uni.navigateTo({
				url:'/page_fenbao/jiameng/index'
			})
		},
		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 // 重置显示列表
		},
		getinfo() {
			this.$u.get("/getInfo").then((res) => {
				if (res.code == 200) {
					this.userinfo = res.user
				} 
			})
		},
		shows() {
			if (this.list.length < 2) {

			} else {
				this.show = true
			}
		},
		getareaList() {
			this.$u.get('/bst/area/list').then((res) => {
				if (res.code == 200) {
					this.list = res.rows.map(item => ({
						value: item.id,
						label: item.name,
						deptName: item.name
					}))
					this.displayList = this.list // 重置显示列表
				}
			})
		},
		confirm(e) {
			uni.setStorageSync('adminAreaid', e[0].value)
			this.areaId = e[0].value
			this.getArea()
		},
		getArea() {
			let id = this.areaId
			this.$u.get(`/bst/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: '/page_shanghu/gongzuotai/worke_Operation'
				})
			} else if (num == 1) {
				uni.navigateTo({
					url: '/pages_admin/worke/worke_income'
				})
			} else if (num == 2) { //设备管理
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/woke_deviceMgmt'
				})
			} else if (num == 3) {
				uni.navigateTo({
					url: '/pages_admin/worke/worke_user'
				})
			} else if (num == 4) { //用户页面
				uni.switchTab({
					url: '/pages/index/index'
				})
			} else if (num == 5) {
				uni.navigateTo({
					url: '/pages_admin/worke/bind_sn'
				})
			} else if (num == 6) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/AccountDetails'
				})
			} else if (num == 7) { //故障审核
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/shgl'
				})
			} else if (num == 8) {
				uni.navigateTo({
					url: '/pages_adminSet/financialStatement'
				})
			} else if (num == 9) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/CarModel'
				})
			} else if (num == 10) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/ChargingTemplate'
				})
			} else if (num == 11) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/sysSet'
				})
			} else if (num == 12) { //区域设置
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/ParkIngList'
				})
			}
		}
	}
}
</script>

<style lang="scss">
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 9;
	}
	.gonggao{
		width: 680rpx;
		height: 60rpx;
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		background-color: rgba(0, 0, 0, 0.2);
		margin: auto;
		margin-top: 40rpx;
	}
	.container {
	  width: 560rpx;
	  height: 60rpx; /* 根据需要调整高度 */
	  display: flex;
	  align-items: center;
	  margin: auto;
	  overflow: hidden;
	  position: relative;
	  color: #fff;
	  box-sizing: border-box;
	}
	.scroll-text {
	  width: 100%;
	  overflow: hidden;
	  box-sizing: border-box;
	  display: inline-block;
	  white-space: nowrap;
	  animation: scroll 8s linear infinite;
	}
	.scroll-item {
	  display: inline-block;
	  padding: 0 10px;
	  font-size: 16px;
	}
	@keyframes scroll {
	  0% {
	    transform: translateX(100%);
	  }
	  100% {
	    transform: translateX(-100%);
	  }
	}
	.noticetc{
		width: 680rpx;
		height: 950rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		top: 340rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		.btn{
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;
			background-color: #4297F3;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			margin: auto;
			margin-top: 30rpx;
		}
		.name{
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			margin-top: 30rpx;
		}
		.biaoti{
			font-size: 32rpx;
			margin-top: 20rpx;
		}
		.cont{
			width: 100%;
			height: 620rpx;
			overflow: scroll;
			background-color: #ececec;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
	
page {
	background-color: #FFFFFF;
}
.bj{
	width: 750rpx;
	height: 360rpx;
	background: #4297F3;
	border-radius: 0 0 50rpx 50rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
.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; // 最大高度
		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;
				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: 44rpx;
		font-size: 38rpx;
		color: #fff;
		font-weight: 600;
	}
	.cont_box {
		padding: 46rpx 50rpx;
		margin: 40rpx 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;
			margin-top: 40rpx;
			font-weight: 600;
			image {
				margin-right: 16rpx;
				width: 32rpx;
				height: 32rpx;
			}
			font-size: 32rpx;
			color: #3D3D3D;

		}
		.app_box {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			.cont:nth-child(4n) {
				margin-right: 0;
			}
			.cont {
				margin-right: 60rpx;
				margin-top: 20rpx;
				width: 96rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				image {
					width: 80rpx;
					height: 80rpx;
				}
				.text {
					margin-top: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
				}
			}
		}
	}
}
</style>