mycajt/pages/switch/switch.vue

<template>
	<view>
		<view class="navbar">
			<view
				class="back"
				@tap="goBack">
				<uni-icons
					type="back"
					size="20"></uni-icons>
			</view>
			<view class="title">切换账号</view>
		</view>
		<!-- 页面内容 -->
		<view
			class="content"
			v-for="item in list"
			:key="item.uid">
			<view
				class="box"
				v-if="item.uid === uid">
				<!-- v-if="item.uid = " -->
				<p class="P1">昵称：{{ item.nickname }}</p>
				<p class="p2">ID: {{ item.uid }}</p>
				<p
					v-if="item.uid === userInfo.uid"
					style="
						color: #ff5500;
						margin-top: 20rpx;
						margin-left: 37rpx;
					"
					>当前登录</p>
			</view>
			<view
				class="boxi"
				v-else
				@click="choose(item.uid)">
				<p class="nc">昵称：{{ item.nickname }}</p>
				<p class="id">ID: {{ item.uid }}</p>
				<p
					v-if="item.uid === userInfo.uid"
					style="
						color: #fff2ef;
						margin-top: 20rpx;
						margin-left: 37rpx;
					"
					>当前登录</p
				>
			</view>
		</view>
		<button
			class="btn"
			@click="add"
			><image
				src="../../static/icon/tj.png"
				style="width: 22rpx; height: 22rpx; margin-right: 20rpx"
				mode=""></image
			>添加新账号</button
		>
		<button
			class="btn1"
			@click="login"
			>登录选中账号</button
		>
		<button
			class="btn1"
			@click="logout"
			>退出登录</button
		>
	</view>
</template>
<script>
	import { mapState, mapMutations } from "vuex";
	import { myList, addZ, change_user, logout } from "@/api/user.js";
	export default {
		data() {
			return {
				list: [],
				uid: 0,
			};
		},

		onLoad() {
			this.myList();
			this.uid = this.userInfo.uid;
			// this.addZ()
		},

		methods: {
			// 获取账号列表
			async myList() {
				const res = await myList();
				console.log("111", res);
				this.list = res.data.list;
			},
			// 获取添加账号

			goBack() {
				uni.navigateTo({
					url: "/pages/userinfo/userinfo",
				});
			},

			choose(choose_uid) {
				this.uid = choose_uid;
			},

			add() {
				uni.showModal({
					title: "确认注册新账号",
					content: "您确定要注册新账号吗？",
					success: confirmRes => {
						if (confirmRes.confirm) {
							console.log("用户点击确定");
							addZ()
								.then(res => {
									console.log(111111, res);
									if (res.status === 200) {
										//弹出注册成功
										uni.showToast({
											title: "注册成功",
											duration: 2000,
											position: "top",
										});
										this.myList();
									} else {
										uni.showToast({
											title: res.msg,
											duration: 2000,
											position: "top",
										});
									}
								})
								.catch(res => {
									uni.showToast({
										title: "111",
										duration: 2000,
										position: "top",
									});
								});
						} else if (confirmRes.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			login() {
				uni.showModal({
					title: "确认切换账号",
					content: "您确定要切换账号吗？",
					success: confirmRes => {
						if (confirmRes.confirm) {
							console.log("用户点击确定");
							change_user({ uid: this.uid })
								.then(res => {
									// 弹出确认对话框
									uni.setStorageSync("token", res.data.token);
									uni.reLaunch({
										url: "/pages/index/index",
									});
								
								})
								.catch(res => {
									uni.showToast({
										title: "切换账号失败，网络异常",
										duration: 2000,
										position: "top",
									});
								});
						} else if (confirmRes.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},

			logout() {
				uni.showModal({
					title: "确认退出账号",
					content: "您确定要退出账号吗？",
					success: confirmRes => {
						if (confirmRes.confirm) {
							console.log("用户点击确定");
							change_user({ uid: this.uid })
								.then(res => {
									// 弹出确认对话框
									uni.setStorageSync("token", res.data.token);
									uni.reLaunch({
										// url: "/pages/index/index",
										url: "/pages/public/login",
									});
									
								})
								.catch(res => {
									uni.showToast({
										title: "切换账号失败，网络异常",
										duration: 2000,
										position: "top",
									});
								});
						} else if (confirmRes.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
		},

		computed: {
			...mapState("user", ["userInfo", "orderInfo", "hasLogin"]),
		},
	};
</script>

<style lang="scss">
	.navbar {
		height: 50rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 12rpx;
	}

	.back {
		width: 20rpx;
		height: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		width: 12rpx;
		height: 12rpx;
	}

	.title {
		flex: 1;
		text-align: center;
		width: 142rpx;
		height: 34rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #282828;
		line-height: 48rpx;
	}

	.box {
		margin-left: 24rpx;
		margin-top: 50rpx;
		width: 702rpx;
		height: 224rpx;
		background: #fffdf5;
		border: 2px solid #ff9205;
		box-shadow: 2rpx 1rpx 36rpx 0rpx rgba(218, 218, 218, 0.56);
		border-radius: 30rpx;
	}
	.box .P1 {
		display: flex;
		justify-content: flex-start;
		margin-top: 75rpx;
		margin-left: 37rpx;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #282828;
		line-height: 48rpx;
	}
	.box .p2 {
		width: 188rpx;
		height: 22rpx;
		margin-top: 25rpx;
		margin-left: 37rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 48rpx;
	}

	.boxi {
		margin-left: 24rpx;
		margin-top: 50rpx;
		width: 702rpx;
		height: 224rpx;
		background: #fff;
		border: 2px;
		box-shadow: 2rpx 1rpx 36rpx 0rpx rgba(255, 255, 255, 0.56);
		border-radius: 30rpx;
		overflow: hidden;
	}
	.boxi .nc {
		margin-top: 48rpx;
		margin-left: 37rpx;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #282828;
		line-height: 48rpx;
	}

	.boxi .id {
		margin-top: 21rpx;
		margin-left: 37rpx;
		height: 22rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 48rpx;
	}

	.btn {
		width: 702rpx;
		height: 82rpx;
		background: #ffffff;
		border-radius: 30rpx;
		margin-top: 18rpx;
	}

	.btn1 {
		margin-left: 65rpx;
		margin-top: 70rpx;
		width: 620rpx;
		height: 100rpx;
		background: #ff6b2e;
		border-radius: 50rpx;
		color: #fff;
		text-align: center;
	}
</style>