jiuyiUniapp/jiuyi2/pages/mine/switch-accounts/index.vue

<template>
	<apex title="个人信息">
		<template v-slot:right>
			<text @click="manage" class="text-primary">{{ usaiDisabled ? '保存' : '管理' }}</text>
		</template>
	</apex>
	<!-- 切换账号 -->

	<view class="app">

		<uni-swipe-action ref="swipeAction" class="uni-swipe-action">
			<uni-swipe-action-item class="item-box" v-for="(item, index) in userInfoList" :key="index" :right-options="options2" :auto-close="true" @change="change" @click="handleClick" :disabled="!usaiDisabled">
				<view class="content-box content-box-p content-box-b" @click.stop="checkLogin(item)">
					<!-- 头像 + 账号 -->
					<view class="avatar-box bfff">
						<image class="avatar float-right " :src="item.userPortrait" mode="aspectFill"></image>
						<text class="account-text">{{ item.userNickname }}</text>
					</view>
					<!-- 当前登录 -->
					<text v-if="item.userId == userinfo.userId" class="current-login">当前登录</text>
				</view>
			</uni-swipe-action-item>
			<uni-swipe-action-item class="item-box" @click="checkLink('pages/login/loginPhone')">
				<view class="add-account-number content-box-p content-box-b">
					<!-- 头像 + 账号 -->
					<text class="add-item float-right ">+</text>
					<text class="account-text">添加账号</text>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>

		<view class="fill" style="height: 90rpx;"></view>
	</view>

</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	const {
		checkLink,
		showToastAndRedirect,
		alert,
		finalLogin
	} = inject('util')
	import util from '@/common/js/util.js'
	// 顶部
	import apex from '@/components/header/apex.vue'
	import api from '@/api/index'

	const {
		userinfo
	} = useStore().state
	const userInfoList = ref([])
	const swipeAction = ref(null)
	const getUserInfoList = () => {
		// 存储的账号信息 userInfoList
		try {
			const uil = uni.getStorageSync('userInfoList')
			userInfoList.value = uil
			console.log('====================================');
			console.log(uil);
			console.log('====================================');
		} catch (error) {
			console.log('====================================');
			console.log('error', error);
			console.log('====================================');
		}
	}
	getUserInfoList()
	const usaiDisabled = ref(false)
	const options2 = [{
		text: '删除',
		style: {
			backgroundColor: '#FF4949'
		}
	}]
	// 切换账号
	const checkLogin = (item) => {
		if (item.userId !== userinfo.userId) {
			// 退出原来的
			util.logout(() => {
				// 重新登录 需要切换的账号
				api.login.userLoginByPassword({
					data: {
						userPhone: item.userPhone,
						userPassword: item.userPassword,
						userImei: uni.getSystemInfoSync().deviceId
					}
				}).then(rs => {
					console.log('userLoginByPassword', rs)
					if (rs.code == 200) {
						finalLogin(rs)
						return
					}
					alert({
						content: rs.msg,
						showCancel: false,
					})
				})
			})
		} else {
			showToastAndRedirect('已登录', 'error')
		}
	}
	// 管理账号
	const manage = () => {
		usaiDisabled.value = !usaiDisabled.value
		swipeAction.value.closeAll()
		if (!usaiDisabled) {
			uni.setStorageSync('userInfoList', userInfoList.value)
			// 提示保存成功
			showToastAndRedirect('保存成功', 'success')
		}
	}

	const handleClick = (event, index) => {
		console.log('====================================');
		console.log(event);
		console.log('====================================');
		switch (event.position) {
			case "right":
				// 删除对应下标的数据
				userInfoList.value.splice(index, 1)
				break;

			default:

				break;
		}
	}

	const change = (event) => {
		console.log('change', event);
	}
</script>

<style lang="scss" scoped>
	.uni-swipe-action {
		margin: 26rpx 32rpx;

		.item-box {
			margin: 26rpx 0;
		}

		.text-primary {
			font-size: 36rpx;
			color: rgba(0, 0, 0, 0.9);
		}
	}

	.add-account-number {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.add-item {
			// 圆形背景
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background: #999999;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 50rpx;
			font-weight: 600;
		}

		.account-text {
			color: #1D2129;
			font-size: 32rpx;
		}
	}

	.float-right {
		margin-right: 20rpx;
	}

	.content-box-p {
		padding: 26rpx 32rpx;
	}

	.content-box-b {
		background: #fff;
		border-radius: 10rpx;
	}

	.content-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		.avatar-box {
			display: flex;
			flex-direction: row;
			align-items: center;

			.current-login {
				font-size: 32rpx;
				color: #1D2129;
			}

			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background: #999999;
			}
		}
	}
</style>