chuangte_bike_newxcx/pages/my.vue

<template>
	<view class="page">
		<u-navbar :is-back="false"  title="我的" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
			height='44'	id="navbar">
		</u-navbar>
		<view class="dahezi">
			<view class="caozuo">
				<image @click="btnpage(1)" src="https://api.ccttiot.com/smartmeter/img/static/uxZWUWMVUuGj1yxr80CE" mode=""></image>
				<image @click="btnpage(2)" src="https://api.ccttiot.com/smartmeter/img/static/u5347pRhWVv1hxhUBIGW" mode=""></image>
				<image @click="btnpage(3)" src="https://api.ccttiot.com/smartmeter/img/static/uRWX6UWgRI0M5YUTCEiC" mode=""></image>
				<image @click="btnpage(4)" src="https://api.ccttiot.com/smartmeter/img/static/uOeXS5XUugoZcEFf1yum" mode=""></image>
			</view>
			
			<view class="ul">
				<view class="li" @click="btnpage(5)">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uJPmBTW1V3fRpMZuwfQI" mode=""></image> 故障上报
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
				<view class="li" @click="btnpage(6)">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/ufkidPEVO3y2lByVO3lU" mode=""></image> 故障上报记录
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
				<view class="li" @click="btnpage(7)">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/upZidosMwoayK4JmCIvb" mode=""></image> 意见反馈
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
				<!-- <view class="li" @click="btnpage(8)">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uIEdBxU7g7HAxYAWHoDG" mode=""></image> 联系客服
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view> -->
				<view class="li" @click="btnpage(9)">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uq9C58MxpNMsXRmzTDPX" mode=""></image> 帮助中心
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
				<view class="li" @click="btnpage(10)" v-if="false">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/u7FXHNwKSzE1B1tVHc2q" mode=""></image> 运维人员
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
				<view class="li" @click="btnpage(11)" v-if="guanliflag">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/usLwGdyxMSqxlDDrEgbn" mode=""></image> 管理人员
					</view>					
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
				<view class="li" @click="btnpage(13)" v-if="adminflag">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uIyce4N0aSPjDaucXyqq" mode=""></image> 设备录入
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
				<view class="li" @click="btnpage(12)">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/ucGg1aB3AGNHfCcDjqw4" mode=""></image> 退出登录
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
			</view>
			<view class="gg">
				<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d" mode=""></image> -->
				<u-swiper @click="btnshangjia" :list="lists"></u-swiper>
			</view>
		</view>
		
		<!-- 平台客服弹窗 -->
		<view class="kefutc" v-if="kefuflag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/umtjJg2CJLiOS6hfAEzo" mode="" @click="kefuflag = false"></image>
			<view class="box">
				<view class="" style="max-height: 170rpx;overflow: scroll;">
					<view class="top" v-for="(item,index) in kefulist" :key="index">
						<view class="dianhua">
							{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
						</view>
						<view class="boda" @click.stop="btnptkf(item.contact)">
							<u-icon name="phone-fill" color="#4297F3" size="28"></u-icon>
							<text>拨打</text>
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="wz">
						平台客服工作时间
					</view>
					<view class="wz">
						08：00~20：00
					</view>
					<view class="wzs">
						客服电话高峰期可能遇忙，请耐心等待
					</view>
				</view>
			</view>
		</view>
		<view class="masks" v-if="kefuflag"></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>
		<tab-bar :indexs='4'></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
                kefuflag:false,
                list: [],
                show: false,
				totype:0,
				displayList: [], // 用于显示的列表
				searchKey: '',
				guanliflag:false,
				adminflag:false,
				user:{},
				kefulist:[],
				lists:[],
				logoflag:false,
				tiaozhuanlist:[]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getareaList()
			this.getkefu()
			this.getlunbo()
		},
		methods: {
			// 点击跳转到商家合作
			btnshangjia(){
				uni.navigateTo({
					url:'/page_user/zhaoshang'
				})
			},
			// 点击跳转轮播图跳转
			btnshangjia(e){
				console.log(e,'1212121',this.tiaozhuanlist[e].urlType);
				if(this.tiaozhuanlist[e].urlType == 1){
					uni.navigateTo({
						url: '/page_fenbao/webview?url=' + this.tiaozhuanlist[e].url
					})
				}else{
					uni.navigateTo({
						url: '/' + this.tiaozhuanlist[e].url
					})
				}
			},
			// 获取广告轮播图
			getlunbo(){
				this.$u.get("/app/ad").then(res => {
					if(res.code == 200){
						this.lists = []
						this.tiaozhuanlist = res.data
						if(res.data.length > 0 && res.data[0] != null){
							res.data.forEach(item =>{
								this.lists.push({
									image:item.picture,
									title: item.adId
								})
							})
						}else{
							this.lists.push({
								image:"https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d",
								title: ""
							})
						}
					}
				})
			},
			// 请求客服
			getkefu(){
				this.$u.get(`/app/customerService/list?pageNum=1&pageSize=999`).then(res =>{
					if(res.code == 200){
						this.kefulist = res.rows
					}
				})
			},
			
			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; // 重置显示列表
			},
			// 选择好运营区
			confirm(e) {
				console.log(e,e[0].value);
				uni.setStorageSync('adminAreaid', e[0].value);
				uni.navigateTo({
					url: `/page_shanghu/guanli/admin_worke?id=${e[0].value}`
				})
			},
			// 请求运营区
			getareaList() {
				this.$u.get("/getInfo").then(res =>{
					if(res.code == 200){
						this.user = res.user
						this.adminflag = res.user.admin
						if(res.roles != null || res.roles.length > 0){
							this.$u.get('/bst/area/list').then((res) => {
								if (res.code == 200) {
									this.guanliflag = true
									this.list = res.rows.map(item => ({
										value: item.id,
										label: item.name,
										deptName: item.name
									}))
									this.displayList = this.list; // 重置显示列表
								}
							})
						}
					}else if(res.code == 401){
						    this.logoflag = true
						}
				})
			},
			// 点击拨打平台客服电话
			btnptkf(){
				uni.makePhoneCall({
					phoneNumber: '18888888888',
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
            // 点击事件进行操作
			btnpage(num){
				if(this.logoflag == true){
					uni.showModal({
						title: '提示',
						content: '您当前未登录，是否前去登录？',
						showCancel: true,
						success: function (res) {
							if (res.confirm) {
								uni.reLaunch({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								// uni.switchTab({
								// 	url:'/pages/index/index'
								// })
							}
						}
					})
				}else{
					if(num == 1){ //实名认证
						uni.navigateTo({
							url:'/page_user/shiming?user=' + JSON.stringify(this.user)
						})
					}else if(num == 2){ //我的订单
					    uni.navigateTo({
					    	url:'/pages/myorder/index'
					    })
					}else if(num == 3){ //用车指南
					    uni.navigateTo({
					    	url:'/page_user/yongche/index?type=1'
					    })
					}else if(num == 4){ //租车指南
					    uni.navigateTo({
					    	url:'/page_user/yongche/index?type=0'
					    })
					}else if(num == 5){ //故障上报
					    uni.navigateTo({
					    	url:'/page_user/guzhang/index'
					    })
					}else if(num == 6){ //故障上报记录
					    uni.navigateTo({
					    	url:'/page_user/guzhang/guzhanglv'
					    })
					}else if(num == 7){ //意见反馈
					    uni.navigateTo({
					    	url:'/page_user/yijian'
					    })
					}else if(num == 8){ //联系客服
					    this.kefuflag = true
					}else if(num == 9){ //帮助中心
					    uni.navigateTo({
					    	url:'/page_user/bangzhu'
					    })
					}else if(num == 10){ //运维人员
					    this.totype = 1
					    if (this.list.length < 2) {
					    	uni.setStorageSync('adminAreaid', this.list[0].value);
					    	uni.navigateTo({
					    		url: '/page_shanghu/fix_index'
					    	})
					    } else {
					    	this.show = true
					    }
					}else if(num == 11){ //管理人员
					       this.totype = 2
					       if (this.list.length < 2) {
					       	uni.setStorageSync('adminAreaid', this.list[0].value);
					       	uni.navigateTo({
					       		url: `/page_shanghu/guanli/admin_worke?id=${this.list[0].value}`
					       	})
					       } else {
					       	   this.show = true
					       }
					}else if(num == 12){
						uni.showModal({
							title: '提示',
							content: '您确定要退出登录吗？',
							showCancel: true,
							success: function (res) {
								if (res.confirm) {
									try {
									    uni.clearStorageSync() // 同步清除
									    console.log('所有缓存已清除')
									    uni.showToast({ title: '缓存已清除', icon: 'success' })
										uni.reLaunch({
											url:'/pages/login/login' 
										})
									  } catch (e) {
									    console.error('清除失败:', e)
									    uni.showToast({ title: '清除失败', icon: 'none' })
									  }
								} else if (res.cancel) {
								    console.log('取消'); // 用户点击取消
								}
							}
						})
					}else if(num == 13){
						uni.navigateTo({
							url:'/page_user/luru/index'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ wx-swiper{
		height: 286rpx !important;
	}
	page {
		background: linear-gradient( 180deg, #CCE5FF 0%, rgba(204,229,255,0) 40%);
	}
	/deep/ .u-title{
		padding-bottom: 18rpx !important;
	}
	.dahezi{
		width: 100%;
		height: 80vh;
		overflow: scroll;
	}
	.masks {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 97;
		height: 100vh;
		width: 100%;
	}
	.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;
					}
				}
			}
		}
	}
	@keyframes fadeIn {
	  from {
	    opacity: 0;
	  }
	  to {
	    opacity: 1;
	  }
	}
	.kefutc{
		animation: fadeIn 0.5s ease-in-out forwards;
		position: fixed;
		top: 660rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		.bot{
			margin-top: 30rpx;
			.wz{
				margin-top: 10rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}
			.wzs{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #7C7C7C;
			}
		}
		.top{
			width: 538rpx;
			height: 122rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 14rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.dianhua{
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
				padding-left: 26rpx;
				box-sizing: border-box;
			}
			.boda{
				width: 94rpx;
				height: 94rpx;
				background: #DCEDFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				padding-top: 8rpx;
				box-sizing: border-box;
				text{
					display: block;
				}
			}
		}
		image{
			position: absolute;
			top: -280rpx;
			z-index: -1;
			left: 50%;
			transform: translateX(-50%);
			width: 614rpx;
			height: 748rpx;
		}
	}
	.clmask{
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 98;
		background-color: rgba(0,0,0,0.08);
		top: 0;
		left: 0;
	}
	.gg{
		width: 692rpx;
		height: 286rpx;
		margin: auto;
		margin-top: 30rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.ul{
		width: 692rpx;
		max-height: 1734rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		padding: 26rpx 56rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 20rpx;
		.li{
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			align-items: center;
			.lt{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #3D3D3D;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 38rpx;
				}
			}
			image{
				width: 52rpx;
				height: 52rpx;
			}
		}
	}
    .caozuo{
		width: 692rpx;
		height: 188rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		display: flex;
		justify-content: space-between;
		padding: 45rpx 56rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 10rpx;
		image{
			width: 112rpx;
			height: 98rpx;
		}
	}
	
</style>