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="appimg.mineUserBg" class="imgbj" mode=""></image>
		<view class="toptx">
			<view class="tx">
				<image :src="appimg.mineDefaultAvatar" mode="aspectFill" style="border-radius: 50%;"></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.userName == null ? '--' : maskPhone(user.userName)}}
				</view>
			</view>
		</view>
		<view class="dahezi" style="margin-top: 56rpx;">
			<view class="caozuo">
				<image @click="btnpage(1)" :src="appimg.mineAuth" mode=""></image>
				<image @click="btnpage(2)" :src="appimg.mineOrder" mode=""></image>
				<image @click="btnpage(3)" :src="appimg.mineUseGuide" mode=""></image>
				<image @click="btnpage(4)" :src="appimg.mineRentGuide" mode=""></image>
			</view>
			<view class="ul">
				<view class="li" @click="btnpage(14)">
					<view class="lt">
						<image :src="appimg.mineVip" mode=""></image> 我的会员
					</view>
					<image src="/static/image/jt.png" mode=""></image>
				</view>
				<view class="li" @click="btnpage(16)">
					<view class="lt">
						<image :src="appimg.mineCouponVerify" mode=""></image> 团购核销
					</view>
					<image src="/static/image/jt.png" mode=""></image>
				</view>
				<view class="li" @click="btnpage(5)">
					<view class="lt">
						<image :src="appimg.mineFaultReport" mode=""></image> 故障上报
					</view>
					<image src="/static/image/jt.png" mode=""></image>
				</view>
				<view class="li" @click="btnpage(7)">
					<view class="lt">
						<image :src="appimg.mineOrderComplaint" mode=""></image> 订单投诉
					</view>
					<image src="/static/image/jt.png" mode=""></image>
				</view>
				<view class="li" @click="btnpage(9)">
					<view class="lt">
						<image :src="appimg.mineHelp" mode=""></image> 帮助中心
					</view>
					<image src="/static/image/jt.png" 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="appimg.mineAdmin" mode=""></image> 管理后台
					</view>
					<image src="/static/image/jt.png" mode=""></image>
				</view>
				<view class="li" @click="btnpage(13)" v-if="adminflag">
					<view class="lt">
						<image :src="appimg.mineDeviceInput" mode=""></image> 设备录入
					</view>
					<image src="/static/image/jt.png" 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="appimg.mineLogout" mode=""></image> 退出登录
					</view>
					<image src="/static/image/jt.png" mode=""></image>
				</view>
				<view class="li" @click="btnpage(15)" v-else>
					<view class="lt">
						<image :src="appimg.mineLogout" mode=""></image> 立即登录
					</view>
					<image src="/static/image/jt.png" mode=""></image>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;color: #ccc;">
				本小程序由创特物联提供技术支持 v1.0.1
			</view>
		</view>
		<!-- 平台客服弹窗 -->
		<view class="kefutc" v-if="kefuflag">
			<image src="/static/image/icon16.png" 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: [],
				appimg: this.$store.state.app.imgConfig
			}
		},
		onLoad() {

		},
		onShow() {
			this.$store.dispatch('jiance');
			this.getareaList()
		},
		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 // 重置显示列表
				console.log(item);
				uni.setStorageSync('adminAreaid', item.value)
				uni.setStorageSync('adminname', item.label)
				uni.navigateTo({
					url: `/page_shanghu/guanli/admin_worke?id=${item.value}`
				})
			},
			// 选择好运营区
			confirm(e) {
				console.log(e, e.value)
				uni.setStorageSync('adminAreaid', e.value)
				uni.setStorageSync('adminname', e.label)
				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=9999').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) { //管理人员
					    if(uni.getStorageSync('user').authTypes.includes('1')){
							if(uni.getStorageSync('wzid')){
								if (this.list.length < 2) {
									uni.setStorageSync('adminAreaid', this.list[0].value);
									uni.setStorageSync('adminname', this.list[0].label)
									uni.navigateTo({
									    url: `/page_shanghu/guanli/admin_worke?id=${this.list[0].value}`
									})
								} else {
									this.show = true
								}
							}else{
								uni.navigateTo({
									url:'/pages/xiqian'
								})
							}
						}else{
							uni.navigateTo({
								url:'/page_user/shiming'
							})
						}
						// this.$u.get(`/app/contract/checkSigned?type=1`).then(res => {
						// 	if (res.code == 200) {
						// 		if (res.data == false) {
						// 			uni.showLoading({
						// 				title: '加载中...',
						// 				mask: 'true',
						// 			})
						// 			let data = {
						// 				type: 1,
						// 				userId: this.user.userId
						// 			}
						// 			this.$u.post(`/app/contract/gen`, data).then(resp => {
						// 				if (resp.code == 200) {
						// 					uni.hideLoading()
						// 					uni.navigateTo({
						// 						url: '/page_fenbao/storedlist/pdfht/index?genFileUrl=' + resp.data.genFileUrl + '&userId=' + this.user.userId + '&id=' + resp.data.id
						// 					})
						// 				} else if (res.code == 10001) {
						// 					uni.hideLoading()
						// 					uni.navigateTo({
						// 						url: '/page_user/shiming'
						// 					})
						// 				} else {
						// 					uni.hideLoading()
						// 					uni.showToast({
						// 						title: res.msg,
						// 						icon: 'none',
						// 						duration: 2000
						// 					})
						// 				}
						// 			})
						// 		} else {
						// 			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.setStorageSync('adminname', this.list[0].label)
						// 				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',
											duration: 3000
										})
										uni.reLaunch({
											url: '/pages/login/login'
										})
									} catch (e) {
										console.error('清除失败:', e)
										uni.showToast({
											title: '清除失败',
											icon: 'none',
											duration: 3000
										})
									}
								} 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'
						})
					} else if (num == 16) {
						uni.navigateTo({
							url: '/page_user/verify/index'
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	::v-deep wx-swiper {
		height: 180rpx !important;
	}

	page {
		background: linear-gradient(180deg, #CCE5FF 0%, rgba(204, 229, 255, 0) 40%);
	}

	::v-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; // 最大高度
			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;
					}
				}
			}
		}
	}

	@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;
				}

				.verify-icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 38rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			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>