wanzai_school_app/pages/switch/switch.vue

<template>
	<view class="container">
		<!-- 背景图片区域 -->
		<img class="img_bg" src="../../static/images/center-bg.png" />

		<!-- 身份列表区域 -->
		<view class="list">
			<!-- 每一个身份区域 -->
			<view class="list_item" v-for="item in listData" :key="item.id" @click="handleChange(item)">
				<!-- 头像 -->
				<img
					class="item_img"
					mode="aspectFill"
					:src="item.headImage || 'https://wanzai-1306339220.cos.ap-shanghai.myqcloud.com/excelModel/nupp7VVnHWpVa413437dba82ce85374b2a4ee1a6b973.png'"
				/>
				<!-- 姓名 -->
				<view class="item_name">{{ item.name }}</view>
				<!-- 身份类别 -->
				<view v-if="item.identityId === 1" class="item_type parents">家长</view>
				<view v-if="item.identityId === 2" class="item_type student">学生</view>
				<view v-if="item.identityId === 3" class="item_type teacher">老师</view>
				<view v-if="item.identityId === 14" class="item_type else">其他</view>
				<view v-if="item.identityId === 18" class="item_type teacher">年级主任</view>
				<view v-if="item.identityId === 19" class="item_type manage">超级管理员</view>
				<view v-if="item.identityId === 20" class="item_type teacher">班主任</view>

				<!-- 是否设置成默认身份 -->
				<!-- <view class="item_default" @click="handleClick(item)">
					<radio style="transform: scale(0.5)" :checked="item.isCheck"></radio>
					设置默认身份
				</view> -->

				<!-- 是否选中 -->
				<!-- <uni-icons v-if="item.id === currentId" class="item_check" type="checkmarkempty" size="30" color="#00BAAD"></uni-icons> -->
				<div v-if="item.id === currentId" class="item_check">当前身份</div>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

onLoad((options) => {
	let info = JSON.parse(decodeURIComponent(options.info))
	// console.log(info)
	uni.setStorageSync('token', info.token)
	currentId.value = uni.getStorageSync('userInfo').id || ''
	listData.value = info.user
})

// 用户身份列表
const listData = ref([])

// 当前展示身份id
const currentId = ref()

// 点击是否设置默认身份按钮回调
// const handleClick = (item) => {
// 	listData.value.forEach((ele) => {
// 		ele.isCheck = false
// 	})
// 	item.isCheck = true
// }

// 点击每一个身份时的回调
const handleChange = (item) => {
	// console.log(item)
	uni.setStorageSync('userhead', item.userhead)
	uni.setStorageSync('userInfo', item)
	uni.reLaunch({
		url: '/pages/home/home'
	})
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f1f6fe;

	.img_bg {
		position: absolute;
		top: -70rpx;
		right: 0;
		width: 589rpx;
		height: 320rpx;
		pointer-events: none;
	}

	.list {
		z-index: 1;
		position: relative;
		padding: 58rpx 20rpx;

		.list_item {
			position: relative;
			display: flex;
			box-sizing: border-box;
			padding: 30rpx 22rpx;
			margin-bottom: 30rpx;
			width: 710rpx;
			height: 177rpx;
			border-radius: 8rpx;
			background-color: #fff;

			.item_img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				object-fit: cover;
			}

			.item_name {
				margin: 10rpx 16rpx 0 23rpx;
				height: 30rpx;
				font-size: 28rpx;
			}

			.item_type {
				margin-top: 15rpx;
				padding: 0 20rpx;
				height: 30rpx;
				font-size: 20rpx;
				color: #fff;
				border-radius: 28rpx;
			}

			.teacher {
				background-color: #00baad;
			}

			.parents {
				background-color: #0061ff;
			}

			.student {
				background-color: orange;
			}

			.else {
				background-color: #d43030;
			}

			.manage {
				background-color: #d43030;
			}

			.item_default {
				position: absolute;
				top: 118rpx;
				left: 22rpx;
				font-size: 16rpx;
				color: #a6a6a6;
			}

			.item_check {
				position: absolute;
				top: 50%;
				right: 48rpx;
				transform: translateY(-50%);
				color: #00baad;
			}
		}
	}
}
</style>