FE_occupationlab_miniProgram/user/switchAccount/switchAccount.vue

<template>
	<view class="page">
		<template v-if="list.length">
			<ul class="list">
				<li v-for="item in list" @click="checkChange(item)">
					<view class="left">
						<image class="avatar" :src="item.userAvatars || require('@/static/image/avatar.png')" mode=""></image>
						<view class="info">
							<view class="name">{{ item.userName }}</view>
							<view class="org">{{ item.schoolName }}</view>
						</view>
					</view>
					<uni-icons v-if="curAccount === item.id" type="checkbox" size="30" color="#007EFF"></uni-icons>
					<uni-icons v-else type="circle" size="30" color="#e2e2e2"></uni-icons>
				</li>
			</ul>
			<view class="add" @click="addAccount">
				<view class="icon">
					<uni-icons type="plusempty" size="20" color="#afafaf"></uni-icons>
				</view>
				<text>添加新账号</text>
			</view>
		</template>
	</view>
</template>

<script>
	import { searchAllAccountsByPhone, switchAccounts } from '@/apis/modules/user.js'
	export default {
		data() {
			return {
				openid: uni.getStorageSync('openid'),
				curAccount: '',
				list: [],
				checkList: [{
					text: '',
					value: 1
				}],
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			async getList() {
				const res = await searchAllAccountsByPhone({
					platformId: 1
				})
				this.curAccount = +res.accountId
				this.list = res.data
			},
			// 切换账号
			async checkChange(e) {
				const { data } = await switchAccounts({
					id: e.id,
					openid: this.openid,
					platformId: 1
				})
				uni.setStorageSync('token', data.token)
				uni.switchTab({
					url: '/pages/person/person'
				})
			},
			// 添加账号
			addAccount() {
				this.$util.to(`../reg/reg?openid=${this.openid}&phone=`)
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	min-height: 100%;
	padding: 30rpx;
	background-color: #fff;
}
.list {
	li {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.left {
		display: inline-flex;
		align-items: center;
	}
	.avatar {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}
	.name {
		margin-bottom: 6rpx;
		font-size: 32rpx;
		color: #333;
	}
	.org {
		font-size: 28rpx;
		color: #333;
	}
}
.add {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 50%;
	}
	text {
		margin-left: 20rpx;
		font-size: 28rpx;
	}
}
</style>