hldy_xcx/pages/index/mine.vue

<template>
	<view class="login-container">
		<exit :show="exitshow" @close="exitshow=false" />
		<image class="bgc-imge" src="https://www.focusnu.com/media/directive/index/mine/bgc.png" />
		<view class="ball">
			<image class="ball-imge" src="https://www.focusnu.com/media/directive/index/mine/head.png" />
		</view>
		<!-- <view class="upfont">
			迷路往前走
		</view> -->
		<view style="display: flex;margin-top: 30rpx;">
			<view class="badid">
				ID
			</view>
			<view style="z-index: 1;margin-top: -3rpx;">
				{{platId}}
			</view>
		</view>
		<view class="phone">
			{{phone}}
		</view>

		<view class="white-father">
			<view class="white-card" v-for="(item,index) in cardMenu" :key="index" @click="clickButton(index)">
				<view class="white-left">
					<image class="white-left-imge"
						:src="`https://www.focusnu.com/media/directive/index/mine/${index}.png`" />
					<view style="font-size: 32rpx;">{{item}}</view>
				</view>
				<view class="white-right">
					<view style="font-size: 30rpx;margin-top: -4rpx;" v-if="!index">变更机构信息</view>
					<image class="white-right-imge" src="https://www.focusnu.com/media/directive/index/mine/more.png" />
				</view>
			</view>
		</view>
		<view class="blue-button" @click="change">
			<image class="blue-button-imge" src="https://www.focusnu.com/media/directive/index/mine/change.png" />
			切换账号
		</view>
		<view class="white-button" @click="exitshowopen">
			<image class="blue-button-imge" src="https://www.focusnu.com/media/directive/index/mine/exit.png" />
			退出登录
		</view>
		<downMenu :itemTarget="2" />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import exit from "@/compontent/public/exit.vue"
	import downMenu from '@/compontent/public/downmenu.vue'

	const phone = ref("")
	const openid = ref("")
	const platId = ref("")
	const exitshow = ref(false);
	onMounted(() => {
		phone.value = uni.getStorageSync('tel')
		// openid.value = uni.getStorageSync('openid')
		platId.value = uni.getStorageSync('platId')
		// uni.setStorageSync('platId', res.result.platId);
	})

	const cardMenu = [`机构信息`, `加盟审核`, `宣传页`]

	const change = () => {
		uni.navigateTo({
			url: `/pages/login/threeselectonespec`
		});
	}

	const exitshowopen = () => {
		// uni.exitMiniProgram({});
		exitshow.value = true;
	}

	const clickButton = (index) => {
		switch (index) {
			case 0:
				uni.navigateTo({
					url: `/pages/login/workjoinsuccess`
				});
				break;
			case 1:
				uni.navigateTo({
					url: `/pages/login/workjoin`
				});

				break;
			case 2:
				uni.navigateTo({
					url: `/pages/login/special?no=true`
				});
				break;
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: rgb(247, 247, 247);
		position: relative;
		align-items: center;

		.bgc-imge {
			position: absolute;
			top: 0rpx;
			left: 0;
			width: 100%;
			height: 1200rpx;
		}

		.ball {
			margin-top: 200rpx;
			width: 180rpx;
			height: 180rpx;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			overflow: hidden;
			z-index: 1;

			.ball-imge {
				width: 178rpx;
				height: 178rpx;
				border-radius: 50%;
			}
		}

		.upfont {
			margin: 10rpx 0;
			color: black;
			z-index: 1;
		}

		.phone {
			color: black;
			z-index: 1;
			font-size: 38rpx;
			font-weight: 600;
		}

		.badid {
			background-color: black;
			z-index: 1;
			width: 45rpx;
			height: 30rpx;
			border-radius: 8rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			margin-right: 15rpx;
			margin-top: 3rpx;
		}

		.white-father {
			margin-top: 50rpx;
			width: 94%;
			// min-height: 300rpx;
			border-radius: 40rpx;
			background-color: #fff;
			padding: 30rpx 0;
			z-index: 1;

			.white-card {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;

				.white-left {
					margin-left: 40rpx;
					display: flex;
					align-items: center;
				}

				.white-left-imge {
					margin-right: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.white-right {
					margin-right: 40rpx;
					display: flex;
					align-items: center;
				}

				.white-right-imge {
					margin-left: 20rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}

	.blue-button {
		z-index: 1;
		width: 94%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgb(6, 122, 233);
		border-radius: 40rpx;
		margin-top: 30rpx;
		font-size: 32rpx;


	}

	.blue-button-imge {
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}

	.white-button {
		z-index: 1;
		width: 94%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		// color: rgb(6,122,233);
		border-radius: 40rpx;
		margin-top: 30rpx;
		font-size: 32rpx;
	}
</style>