newYbyg/pages/users/switch_account/index.vue

<template>
	<view class="content" :style="colorStyle">
		<view class="tit">
			轻触头像以切换帐号
		</view>
		<!-- 当前账号 -->
		<view class="account-wrap">
			<image :src="'../../../static/images/f.png'" mode="" class="u-logo"></image>
			<view class="u-info">
				<view class="info-name">
					{{userInfo.phone}}
				</view>
				<!-- <view class="info-id">
					UID:{{userInfo.uid}}
				</view> -->
			</view>
			<view class="set">
				<view class="new-use">
					<text></text>当前使用
				</view>
			</view>
		</view>
		<!-- 账号列表 -->
		<template v-for="(item,index) in menList">
			<view class="account-wrap" v-if="item.account != userInfo.phone">
				<image v-if="item.avatar" :src="item.avatar" mode="" class="u-logo" @click="login(item)"></image>
				<image v-else src="../../../static/images/f.png" mode="" class="u-logo" @click="login(item)"></image>
				<view class="u-info">
					<view class="info-name">
						{{item.account}}
					</view>
					<view class="info-id" v-if="item.uid">
						UID:{{item.uid}}
					</view>
				</view>
				<view class="set">
					<image src="../../../static/images/sc.png" mode="" @click="scAccount(item,index)"></image>
				</view>
			</view>
		</template>
		<!-- 添加账号 -->
		<view class="account-wrap" @click="openAdd" v-if="menList.length < maxAccountNum">
			<image src="../../../static/images/add.png" mode="" class="add"></image>
			<view class="u-info">
				添加帐号
			</view>
			<view class="set">
			</view>
		</view>
		<!-- 添加账号弹窗 -->
		<uni-popup type="center" ref="add">
			<view class="whiteBg" >
				<view class="tips">
					<view class="tips-btn on">
						<view>添加账号</view>
						<!-- <view class="line"></view> -->
					</view>
				</view>
				<view class="list">
					<!-- <form @submit.prevent="submit"> -->
						<view class="item">
							<view class="acea-row row-middle">
								<image src="../static/phone_1.png" class="itemImg-add"></image>
								<input type="text" placeholder="输入手机号码" v-model="account" maxlength="11" required />
							</view>
						</view>
						<view class="item">
							<view class="acea-row row-middle">
								<image src="../static/code_1.png" class="item-img"></image>
								<input type="password" placeholder="填写登录密码" v-model="password" required />
							</view>
						</view>

					<!-- </form> -->
				</view>
				<view class="logon" @click="addAccount">添加账号</view>
				
			</view>
		</uni-popup>
		<view class="tipaddress" v-show="isCancellation">
			<view class="top"></view>
			<view class="bottom">
				<view class="font1">是否确认删除</view>
				<view class="font2">当前记录将被删除，您确认要删除吗？</view>
				<view class="btn">
					<view class="cancellation-btn btn-sty flex-aj-center" @tap="cancelUser">删除</view>
					<view class="cancel btn-sty flex-aj-center" @tap="isCancellation = false">
						取消
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import colors from '@/mixins/color.js';
	import {
		loginH5,
		loginMobile,
		registerVerify,
		register,
		getCodeApi,
		getUserInfo,
		appleLogin
	} from "@/api/user";
		const BACK_URL = "login_back_url";
	export default {
		mixins: [colors],
		data() {
			return {
				isCancellation: false,
				menList: [],
				userInfo: {},
				account: '',
				password: '',
				maxAccountNum: 6,
				scitem: {},
				scindex: '',
				keyLock: true
			}
		},
		onLoad() {
			this.getUserInfo()
			this.getMenList()
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			// 删除账号
			cancelUser() {
				let that = this;
				that.menList.splice(that.scindex,1);
				that.isCancellation = false;
				try{
					that.$io.storage("MenList.json", that.menList);
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
				
			},
			// 打开删除弹窗
			scAccount(item,index) {
				this.scitem = item;
				this.scindex = index;
				this.isCancellation = true;
			},
			// 添加账号
			addAccount() {
				let that = this;
				if (!that.account) {
					return that.$util.Tips({
						title: '请输入手机号码'
					});
				}
				if (!/^1(2|3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!that.password) {
					return that.$util.Tips({
						title: '请填写登录密码'
					});
				}
				// for(let i = 0;i=)
				let i = false;
				this.menList.forEach(item => {
					if(item.account == that.account) {
						i = true
					}
				})
				if(!i) {
					try{
						that.menList.push({
							account: that.account,
							password: that.password
						})
						that.$io.storage("MenList.json", that.menList).then(e => {
							console.log('结果返回：',e)
							that.account = ''
							that.password = ''
						});
					}catch(e){
						
					}
				}else {
					return that.$util.Tips({
						title: '当前账号已存在'
					});
				}
				
				that.$refs.add.close()
			},
			// 打开添加弹窗
			openAdd() {
				this.$refs.add.open();
			},
			getUserInfo() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
				});
			},
			getMenList() {
				let that = this;
				try {
					that.$io.read("MenList.json").then(res => {
						// res 读取的文件内容
						that.menList = JSON.parse(res);
					}).catch(err => {
						// 找不到该文件就写入一个空白文件。
						// that.$io.storage("MenList.json", []);
						console.log(err, "err");
					})
				} catch (e) {

					console.log(e);
				}

			},
			login(item) {
				try{
					let that = this;
					if (that.keyLock) {
						that.keyLock = !that.keyLock
					} else {
						return that.$util.Tips({
							title: '请勿重复点击'
						});
					}
					loginH5({
							account: item.account,
							password: item.password,
						})
						.then(({
							data
						}) => {
							console.log('登录成功：',data)
							that.$store.commit("LOGIN", {
								'token': data.token,
								'time': data.expires_time - that.$Cache.time()
							});
							let backUrl = "/pages/user/index";
							that.$Cache.clear(BACK_URL);
							getUserInfo().then(res => {
								console.log('获取用户信息成功：',res)
								that.keyLock = true
								that.$store.commit("SETUID", res.data.uid);
								that.$store.commit("UPDATE_USERINFO", res.data);
								console.log('开始跳转：')
								uni.reLaunch({
									url: backUrl
								});
								console.log('跳转结束：')
							}).catch(error => {
								this.keyLock = true
							})
						})
						.catch(e => {
							this.keyLock = true
							that.$util.Tips({
								title: e
							});
						});
				}catch(e){
					//TODO handle the exception
					console.log('错误：',e)
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.main-color {
		color: var(--view-theme);
	}
	.tit {
		font-size: 36rpx;
		text-align: center;
		font-weight: bold;
		padding: 100rpx 0;
	}

	.account-wrap {
		width: 690rpx;
		height: 150rpx;
		margin: auto;
		margin-bottom: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 30rpx;
		border-radius: 20rpx;

		.u-logo {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}

		.add {
			width: 90rpx;
			height: 90rpx;
			flex-shrink: 0;
		}

		.u-info {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: flex-start;
			padding-left: 25rpx;
			font-size: 28rpx;
			color: #999;

			.info-id {
				color: #999;
			}

			.info-name {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				
			}
		}

		.set {
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.new-use {
				font-size: 28rpx;
				font-weight: bold;

				text {
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					background-color: #08c05f;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.whiteBg {
		background-color: #fff;
		margin: -30rpx 56rpx 0rpx 56rpx;
		box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.08);
		border-radius: 8px;
		padding: 60rpx;
	
		.tips {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50rpx;
			margin: 40rpx;
			color: #999;
	
			.tips-btn {
				margin: 0 31rpx 0 48rpx;
				color: #999999;
				font-weight: bold;
				font-size: 32rpx;
	
	
				/* Safari 与 Chrome */
				.line {
					width: 80rpx;
					height: 6rpx;
					background: linear-gradient(135deg, var(--view-minorColor) 0%, var(--view-theme) 100%);
					border-radius: 2px;
					margin: 10rpx auto 0 auto;
					animation: myfirst .3s;
					-webkit-animation: myfirst .3s;
				}
	
				.none {
					width: 80rpx;
					background: #fff;
					height: 6rpx;
				}
			}
	
			@keyframes myfirst {
				0% {
					width: 0rpx;
				}
	
				100% {
					width: 80rpx;
				}
			}
	
			@-webkit-keyframes myfirst
	
			/* Safari 与 Chrome */
				{
				0% {
					width: 0rpx;
				}
	
				100% {
					width: 80rpx;
				}
			}
	
			.tips-btn.on {
				font-size: 36rpx;
				color: var(--view-theme);
			}
		}
	
		.list {
			border-radius: 16rpx;
			overflow: hidden;
	
			.forgetPwd {
				text-align: right;
				margin-top: 10rpx;
				color: #666666;
				font-size: 24rpx;
			}
	
			.item {
				border-bottom: 1px solid #F0F0F0;
				background: #fff;
	
				.row-middle {
					position: relative;
					padding: 16rpx 25rpx;
	
					input {
						flex: 1;
						font-size: 28rpx;
						height: 80rpx;
					}
					.spread {
						flex: 1;
						font-size: 28rpx;
						height: 80rpx;
					}
					.code {
						position: absolute;
						right: 30rpx;
						top: 50%;
						color: var(--view-theme);
						font-size: 26rpx;
						transform: translateY(-50%);
					}
				}
			}
		}
	
		.logon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 86rpx;
			margin-top: 48rpx;
			background: linear-gradient(135deg, var(--view-minorColor) 0%, var(--view-theme) 100%);
			border-radius: 120rpx;
			color: #FFFFFF;
			font-size: 30rpx;
		}
	}
	.code img {
		width: 100%;
		height: 100%;
	}
	
	.acea-row.row-middle {
		input {
			margin-left: 20rpx;
			display: block;
		}
	}
	.itemImg-add {
	  width: 24rpx;
	   height: 34rpx;
	}
	.item-img {
	  width: 28rpx; 
	  height: 32rpx;
	}
	.tipaddress {
		position: fixed;
		left: 13%;
		top: 25%;
		// margin-left: -283rpx;
		width: 560rpx;
		height: 614rpx;
		background-color: #fff;
		border-radius: 10rpx;
		z-index: 100;
		text-align: center;
	
		.top {
			width: 560rpx;
			height: 270rpx;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
			background-image: url('../../../static/images/address.png');
			background-repeat: round;
			background-color: #E93323;
	
			.tipsphoto {
				display: inline-block;
				width: 200rpx;
				height: 200rpx;
				margin-top: 73rpx;
			}
		}
	
		.bottom {
			font-size: 32rpx;
			font-weight: 400;
	
			.font1 {
	
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
				margin: 32rpx 0rpx 22rpx;
			}
	
			.font2 {
				color: #666666;
				margin-bottom: 48rpx;
			}
	
			.btn {
				display: flex;
				margin: 0 20rpx;
	
				.btn-sty {
					height: 82rpx;
					border-radius: 42rpx;
					line-height: 82rpx;
					padding: 24rpx 78rpx;
					margin: 0 auto;
				}
	
				.cancellation-btn {
					background-color: #F5F5F5;
					color: #333333;
				}
	
				.cancel {
					color: #FFFFFF;
					background: linear-gradient(90deg, #F67A38 0%, #F11B09 100%);
				}
	
			}
		}
	
	}
</style>