cloud_admin_app/pages/userCenter/userCenter.vue

<template>
	<view class="section">
		<up-loading-page loading-text="版本切换中...请稍后" color="#666" :loading="version_loading"></up-loading-page>
		<view class="tops_view">
			{{nickname == null || nickname == ''?  '未知': nickname }}
		</view>
		<view class="position_cicles" :style="{'background-image': `url( ${avatar} )` }">
		</view>
		<view class="cu-card " style="margin-top: 100rpx;">
			<view class="cu-item shadow padding-lr-sm">
				<view class="flex  padding-tb-sm justify-between" @click="accountBalance(1)"
					v-if="now_version == '个人版'">
					<view class="flex">
						<uv-icon name="level" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">个人账户</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view class="flex  padding-tb-sm justify-between" @click="accountBalance(2)"
					v-if="now_version == '车队版' ">
					<view class="flex">
						<uv-icon name="level" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">个人账户</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view class="flex  padding-tb-sm justify-between" @click="accountBalance(3)"
					v-if="now_version == '车队版' ">
					<view class="flex">
						<uv-icon name="level" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">车队账户</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view class="flex  padding-tb-sm justify-between" @click="personalDetails">
					<view class="flex">
						<uv-icon name="home" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">个人信息</view>
					</view>
					<view class="flex">
						<text class="lg text-gray cuIcon-right padding-top-xs"></text>
					</view>
				</view>
				<view class="flex  padding-tb-sm justify-between" @click="gobillingPage">
					<view class="flex">
						<uv-icon name="shopping-cart" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">套餐购买</view>
					</view>
					<view class="flex">
						<text class="lg text-gray cuIcon-right padding-top-xs"></text>
					</view>
				</view>
				<view class="flex padding-tb-sm justify-between" @click="gobillingPage_my">
					<view class="flex">
						<uv-icon name="folder" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">我的套餐</view>
					</view>
					<view class="flex">
						<text class="lg text-gray cuIcon-right padding-top-xs"></text>
					</view>
				</view>
				<view class="flex  padding-tb-sm justify-between" @click="vehicleCertification"
					v-if="now_version == '个人版' ">
					<view class="flex">
						<uv-icon name="car-fill" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">车辆认证</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view class="flex  padding-tb-sm justify-between" @click="personnelCertification">
					<view class="flex">
						<uv-icon name="file-text" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">个人身份认证</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<!-- solids-bottom -->
				<view :class="{'flex':true, 'padding-tb-sm':true, 'justify-between':true}" @click="gomotorCade"
					v-if="now_version == '个人版' ">
					<view class="flex">
						<uv-icon name="car" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">车队绑定</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view :class="{'flex':true, 'padding-tb-sm':true, 'justify-between':true}" @click="gomotorCade_mycar">
					<view class="flex">
						<uv-icon name="photo" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">{{ now_version == '车队版'? '车队车辆': '我的车辆'  }}</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<!--  -->
				<view class="flex padding-tb-sm justify-between" @click="goShiftTurnover">
					<view class="flex">
						<uv-icon name="attach" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">修改密码</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view class="flex padding-tb-sm justify-between" @click="goSetting">
					<view class="flex">
						<uv-icon name="setting" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">其他设置</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view class="flex padding-tb-sm justify-between" @click="subscribeChange">
					<view class="flex">
						<uv-icon name="grid-fill" color="#2cc06c" size="20"></uv-icon>
						<view class="titleFont">切换版本({{now_version}})</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
			</view>
		</view>

		<uv-notify ref="errornotify" message="当前无操作权限,请审核通过后再试" type="error"></uv-notify>
		<uv-modal ref="startswapmodal" title="提示" content='当前站已验证完成,可以进行换电,请点击确认开始换电'
			@confirm="handle_swaping_pay"></uv-modal>
		<uv-modal ref="startchargmodal" title="提示" content='当前枪已验证完成,可以进行充电,请点击开始充电'>
			<template v-slot:confirmButton>
				<view class="" style="margin:0 20px 20px 20px;">
					<button type="primary" @click="startconfirm" style="font-size: 24rpx;">开始充电</button>
				</view>
			</template>
		</uv-modal>
		<uv-picker ref="changepicker" :columns="columns" @confirm="confirm_picker"></uv-picker>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";

	import {
		globalStore
	} from '../../stores/globalData.js';
	const loginStore = globalStore()
	// 声明变量
	// const dataCode = ref()
	const isLogin = ref(false) //判断是否登录
	const nickname = ref(null)
	const phone = ref()
	const avatar = ref()
	const realNameAuthFlag = ref(0)
	const columns = reactive([
		[
			'个人版', '车队版'
		]
	])
	
	const version_loading = ref(false)
	const now_version = ref()

	onLoad(() => {

	})
	onShow(() => {
		isLogin.value = loginStore.isLogin
		now_version.value = uni.getStorageSync("version")
		if (isLogin.value == true) {
			// 展示头像与用户信息
			uni.$request({
				url: config.baseUrl + 'app-api/member/user/get',
			}).then((res) => {
				// console.log(res,'获取基本信息');
				if (res.data.code == 0) {
					avatar.value = res.data.data.avatar
					nickname.value = res.data.data.nickname
					phone.value = res.data.data.mobile
					realNameAuthFlag.value = res.data.data.realNameAuthFlag
					uni.setStorageSync("realNameAuthFlag", res.data.data.realNameAuthFlag)
					uni.setStorageSync("teamId", res.data.data.teamId)
					uni.setStorageSync("mobile", res.data.data.mobile)
					uni.setStorageSync("captainOrNot", res.data.data.captainOrNot)
					
				}
			})
		}
	})


	const changepicker = ref(null)
	const subscribeChange = () => {
		changepicker.value.open()
	}

	const confirm_picker = (e) => {
		let teamId = uni.getStorageSync("teamId")
		let str = uni.getStorageSync("version")
		if (teamId) {
			if (e.value[0] != str) {
				version_loading.value = true
				uni.setStorageSync('version', e.value[0])
				setTimeout(() => {
					version_loading.value = false
					now_version.value = e.value[0]
				}, 2000)
				// ischarging_order.value = false
			} else {
				return
			}
		} else {
			uni.showModal({
				title: '提示',
				showCancel: false,
				content: "未绑定车队的用户,不允许切换版本,请绑定后重试...",
				success: function(res) {

				}
			});
		}
	}
	const errornotify = ref(null)
	// 去设置页面
	const goSetting = () => {
		uni.navigateTo({
			url: './setting/setting'
		})
	}
	const gologin = () => {
		uni.navigateTo({
			url: '../../pagesCenter/login/enter'
		})
	}
	const personalDetails = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: './personalDetails/personalDetails'
			})
		}


	}
	const gobillingPage = () => {
		// console.log('点击了')
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: '../../pagesCenter/billingPage/billingPage'
			})
		}
	}

	const gobillingPage_my = () => {
		// console.log('点击了')
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: '/pagesCenter/billingPage/billingMean/billingMean'
			})
		}
	}
	const vehicleCertification = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: './carIdentification/carIdentification'
			})
		}
	}

	const personnelCertification = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		else {
			uni.navigateTo({
				url: './personneldentification/personneldentification'
			})
		}

	}
	const accountBalance = (type) => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			let url_push = ''
			if (type == 1) {
				url_push = '/pagesCenter/accountBalance/accountBalance'
			} else if (type == 2) {
				url_push = '/pagesCenter/accountBalancePersonnelCar/accountBalancePersonnelCar'
			} else {
				url_push = '/pagesCenter/accountBalanceTeam/accountBalanceTeam'
			}
			uni.navigateTo({
				url: url_push
			})

		}
	}
	const goAbout = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: './about/about'
			})
		}

	}
	const gomotorCade = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: '../../pagesCenter/motorCade/motorCade'
			})
		}
	}

	const gomotorCade_mycar = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: '../../pagesCenter/motorCadeMy/motorCadeMy'
			})
		}
	}
	const goShiftTurnover = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else {
			uni.navigateTo({
				url: `/pagesCenter/login/changepassword?mobile=123`
			})
		}
	}
	const swap_pay_stationNo = ref('')
	const startchargmodal = ref(null)
	const startswapmodal = ref(null)
	const handle_scan = () => {
		uni.scanCode({
			scanType: ['qrCode'],
			success: async function(res) {
				let res_result = JSON.parse(res.result)
				if (res_result.hasOwnProperty('stationNo')) {
					uni.showToast({
						title: '验证成功',
						duration: 1000,
						icon: 'success'
					})
					swap_pay_stationNo.value = res_result.stationNo
					setTimeout(() => {
						startswapmodal.value.open()
					}, 2000)
				} else {
					handle_charging_pay(res_result)
				}

			}
		})
	}
	const handle_swaping_pay = async () => {
		// let stationNo = res_result.stationNo
		await uni.request({
			url: config.baseUrl +
				`app-api/cloud/swapOrder/sendSwap`,
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded',
				'Authorization': 'Bearer ' + uni.getStorageSync('token'),
				'tenant-id': 1
			},
			data: {
				stationNo: swap_pay_stationNo.value
			}
		}).then(response => {
			// console.log(response, '验证');
			if (response.data.code == 0) {
				uni.showLoading({
					title: '充电机启动中...请稍后'
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 2000)
			} else {
				uni.showModal({
					title: '错误',
					showCancel: false,
					content: response.data.msg,
					success: function(res) {}
				});
			}

		}).catch((err) => {
			uni.showToast({
				title: '错误,验证失败',
				duration: 2000,
				icon: 'error'
			});
		})
	}
	const check_chargeEqm = ref('')
	const check_gunNo = ref('')
	const handle_charging_pay = async (res_result) => {
		check_chargeEqm.value = res_result.chargeEqm
		check_gunNo.value = res_result.gunNo
		await uni.$request({
			url: config.baseUrl +
				`app-api/cloud/outCharge/confirmGunCanCharging/${res_result.chargeEqm}/${res_result.gunNo}`,
			method: 'GET'
		}).then(response => {
			if (response.data.code == 0) {
				uni.showToast({
					title: '验证成功',
					duration: 1000,
					icon: 'success'
				})
				setTimeout(() => {
					startchargmodal.value.open()
				}, 2000)
			} else {
				uni.showModal({
					title: '错误',
					showCancel: false,
					content: response.data.msg,
					success: function(res) {}
				});
			}

		}).catch((err) => {
			uni.showToast({
				title: '错误,验证失败',
				duration: 2000,
				icon: 'error'
			});
		})
	}
	const startconfirm = async () => {
		startchargmodal.value.close()

		let config_url = ''
		if (uni.getStorageSync("version") == '个人版') {
			config_url = `app-api/cloud/personal/startCharge/${check_chargeEqm.value}/${check_gunNo.value}`
		} else {
			config_url = `app-api/cloud/team/startCharge/${check_chargeEqm.value}/${check_gunNo.value}`
		}
		await uni.$request({
			url: config.baseUrl + config_url
		}).then(res => {
			if (res.data.code == 0) {
				uni.showLoading({
					title: '充电机启动中...请稍后'
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 2000)
				chargorder.value = res.data.data
				setTimeout(() => {
					handle_chargorder()
				}, 6000)
			} else {
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'error'
				});
			}
			// console.log(res, 'res开始充电');
		}).catch((err) => {

		})
	}
	const handle_chargorder = async () => {
		let config_url = ''
		if (uni.getStorageSync("version") == '个人版') {
			config_url = `app-api/cloud/personal/queryRealTimeOrder/${chargorder.value}`
		} else {
			config_url = `app-api/cloud/team/queryRealTimeOrder/${chargorder.value}`
		}

		clearInterval(timer.value)
		timer.value = null
		await uni.$request({
			url: config.baseUrl + config_url
		}).then(res => {
			// console.log(res, '当前充电订单');
			if (res.data.code == 0) {
				let str = res.data.data
				uni.navigateTo({
					url: '/pages/order/chargorder/detailInf/detailInf?details=' + JSON.stringify(
						str)
				})
			} else {
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'error'
				});
			}
		}).catch((err) => {
			uni.showToast({
				title: '加载失败',
				duration: 2000,
				icon: 'error'
			});
		})
	}
</script>

<style lang='scss' scoped>
	.png {
		width: 50rpx;
		height: 50rpx;
	}

	.section {
		width: 100%;
		height: 100vh;
		/* background: linear-gradient(180deg, #E4EFFF 0%, rgba(228, 239, 255, 0) 100%); */
		background: #fff;
		position: relative;
	}

	.titleImg {
		width: 50rpx;
		height: 50rpx;
	}

	.titleFont {
		font-size: 28rpx;
		color: #000;
		/* margin-top: 8rpx; */
		margin-left: 20rpx;
	}

	.cu-card>.cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}

	.tops_view {
		width: 100%;
		height: 200rpx;
		border-bottom-left-radius: 60rpx;
		border-bottom-right-radius: 60rpx;
		background: #2cc06c;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #fff;
		font-weight: bold;
	}

	.position_cicles {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		/* background-image: url("https://picsum.photos/50/50"); */
		background-size: 100% 100%;
		position: absolute;
		top: 140rpx;
		left: 50%;
		transform: translateX(-50%);
		box-shadow: 1px 1px 1px #ccc;
	}
	.setting_position {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}
</style>