chuangte_bike_newxcx/pages/my.vue

<template>
	<view class="page">
		<u-navbar title="我的" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
			height='44'	id="navbar" :custom-back="btnfh">
		</u-navbar>
		<image src="https://api.ccttiot.com/smartmeter/img/static/ufFH9L4H9bN4z0qIuxpw" class="imgbj" mode=""></image>
		<view class="toptx">
			<view class="tx">
				<image src="https://api.ccttiot.com/image-1756371808235.png" mode="aspectFill"></image>
			</view>
			<view class="rt">
				<view class="name" @click="btnpage(1)">
					{{user.nickName == null ? '--' : maskName(user.nickName)}} <text v-if="user.authTypes.some(tag => tag == 1)">已实名</text> <text v-else>未实名</text>
				</view>
				<view class="tel">
					{{user.phonenumber == null ? '--' : maskPhone(user.phonenumber)}}
				</view>
			</view>
		</view>
		<view class="dahezi" style="margin-top: 56rpx;">
			<view class="caozuo">
				<image @click="btnpage(1)" src="https://api.ccttiot.com/smartmeter/img/static/u48cjVnTolMXNsEBKvgo" mode=""></image>
				<image @click="btnpage(2)" src="https://api.ccttiot.com/smartmeter/img/static/ui1FPQf5L9iLqHFzmNUG" mode=""></image>
				<image @click="btnpage(3)" src="https://api.ccttiot.com/smartmeter/img/static/utOOYqE5cFRyqryPOMJU" mode=""></image>
				<image @click="btnpage(4)" src="https://api.ccttiot.com/smartmeter/img/static/uIfDeRSIDaranSwiGq3u" mode=""></image>
			</view>
			
			<view class="ul">
				<view class="li" @click="btnpage(14)">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uKrvvrOmkDfc5mQ4qced" mode=""></image> 我的会员
					</view>					
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
				<view class="li" @click="btnpage(5)">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uoxcJ3zIvnra6FiCGQMU" 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/uLz46q64i6X0gsL4rqid" 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/ubTYyTdY874nrsnPDDuN" 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/uxyCDt6MYGnH9qw6YL1j" mode=""></image> 帮助中心
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
			</view>
			<view class="ul" v-if="guanliflag || adminflag">
				<view class="li" @click="btnpage(11)" v-if="guanliflag">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uMSG8t2mXq0bof7b8OkC" 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/ucsCXBGMSHMoZVeLHEW3" mode=""></image> 设备录入
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
			</view>
			
			<view class="ul" style="padding: 0 56rpx;">
				<view class="li" @click="btnpage(12)" v-if="logoflag == false">
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/u2sCV0mQTo1xZpj6d1ps" mode=""></image> 退出登录
					</view>					
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
				<view class="li" @click="btnpage(15)" v-else>
					<view class="lt">
						<image src="https://api.ccttiot.com/smartmeter/img/static/u2sCV0mQTo1xZpj6d1ps" mode=""></image> 立即登录
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ugxCHoezYra6gtrZPJ4F" mode=""></image>
				</view>
			</view>
			<!-- <view class="tuichu">
				<image src="https://api.ccttiot.com/smartmeter/img/static/u2sCV0mQTo1xZpj6d1ps" mode=""></image> 退出登录
			</view>
			<view class="tuichu" @click="btnpage(15)" v-else>
				<image src="https://api.ccttiot.com/smartmeter/img/static/u2sCV0mQTo1xZpj6d1ps" mode=""></image> 立即登录
			</view> -->
		</view>
		
		<!-- 平台客服弹窗 -->
		<view class="kefutc" v-if="kefuflag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/umtjJg2CJLiOS6hfAEzo" mode="" @click="btmnyc"></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>
		<view class="custom-select" v-if="show">
		    <view class="mask" @click="btnguanli"></view>
		    <view class="select-content">
		      <view class="select-header">
		        <text>选择运营区</text>
		        <text class="close" @click="btnguanli">×</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 == null ? '--' : 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: {
			btnguanli(){
				this.show = false
			},
			// 名称：将第二位替换为 *
			maskName(name) {
				if (!name || typeof name !== 'string') return name
				const chars = Array.from(name)
				if (chars.length < 2) return name
				chars[1] = '*'
				return chars.join('')
			},
			// 手机号：将中间四位替换为 *
			maskPhone(phone) {
				if (!phone) return phone
				const str = String(phone)
				if (str.length < 7) return str
				return str.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
			},
			btnqyc(){
				this.kefuflag = false
			},
			// 点击返回首页
			btnfh(){
				uni.reLaunch({
					url:'/pages/nearbystores/index'
				})
			},
			// 点击跳转到商家合作
			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: ""
							})
						}
					}
				})
			},

			
			handleSearch(e) {
				const value = e.detail.value;
				console.log(e,value);
				if (!value) {
					// 搜索框为空时显示全部数据
					this.displayList = this.list;
				} else {
					// 有搜索内容时过滤数据
					this.displayList = this.list.filter(item => {
					  const label = String(item.label || '').toLowerCase();
					  const deptName = String(item.deptName || '').toLowerCase();
					  const searchValue = String(value || '').toLowerCase();
					  return label.includes(searchValue) || deptName.includes(searchValue);
					});
				}
			}, 
			selectItem(item) {
				this.show = false
				this.searchKey = '' // 选择后清空搜索框
				this.displayList = this.list // 重置显示列表
			},
			// 选择好运营区
			confirm(e) {
				console.log(e,e.value)
				uni.setStorageSync('adminAreaid', e.value)
				uni.navigateTo({
					url: `/page_shanghu/guanli/admin_worke?id=${e.value}`
				})
			},
			// 请求运营区
			getareaList() {
				this.$u.get("/getInfo").then(res =>{
					if(res.code == 200){
						this.logoflag = false
						this.user = res.user
						uni.setStorageSync('user',res.user)
						res.roles.filter(item => {
							if(item == 'sys_admin'){
								this.adminflag = true
							}
						})
						if(res.roles != null || res.roles.length > 0){
							this.$u.get('/bst/area/list?pageNum=1&pageSize=999').then((res) => {
								if (res.code == 200) {
									this.guanliflag = true
									this.list = res.rows.map(item => ({
										value: item.id,
										label: item.name,
										deptName: item.userName
									}))
									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(num == 15){
					uni.reLaunch({
						url:'/pages/login/login'
					})
				}else 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) {
								
							}
						}
					})
				}else{
					if(num == 1){ //实名认证
					uni.navigateTo({
						url:'/page_user/renzheng/index'
					})
						// 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_fenbao/tousu/index'
					    })
					}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
						   console.log(this.list.length,this.list);
					       if (this.list.length < 2) {
							   console.log(111);
					       	    uni.setStorageSync('adminAreaid', this.list[0].value);
					       	    uni.navigateTo({
					       	    	url: `/page_shanghu/guanli/admin_worke?id=${this.list[0].value}`
					       	    })
					       } else {
							   console.log(222);
					       	   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'
						})
					}else if(num == 14){
						uni.navigateTo({
							url:'/page_fenbao/huiyuan/myhuiyuan'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ wx-swiper{
		height: 180rpx !important;
	}
	page {
		background: linear-gradient( 180deg, #CCE5FF 0%, rgba(204,229,255,0) 40%);
	}
	/deep/ .u-title{
		padding-bottom: 18rpx !important;
	}
	.toptx{
		display: flex;
		align-items: center;
		width: 692rpx;
		margin: auto;
		margin-top: 24rpx;
		.tx{
			width: 114rpx;
			height: 114rpx;
			background: #D8D8D8;
			border-radius: 50%;
			margin-right: 44rpx;
		}
		.rt{
			.name{
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
				text{
					display: inline-block;
					width: 102rpx;
					height: 40rpx;
					background: linear-gradient( 145deg, #FFCDAD 2%, #F17F37 100%);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 24rpx;
					color: #984918;
					text-align: center;
					line-height: 40rpx;
					margin-left: 32rpx;
				}		
			}
			.tel{
				font-size: 24rpx;
				color: #6F6F6F;
				margin-top: 14rpx;
			}
		}
	}
	.imgbj{
		width: 100%;
		height: 478rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.tuichu{
		width: 692rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: auto;
		margin-top: 30rpx;
		border: 1px solid #2d8cf0;
		border-radius: 20rpx;
		color: #2d8cf0;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}
	}
	.dahezi{
		width: 100%;
		height: 77vh;
		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: 180rpx;
		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>