<template>
	<view>
		<view class="tips">已为你展示{{ phone }}手机号关联的账号。登录后，可在切换账号列表快捷切换至其他账号。</view>
		
		<template v-if="accounts.length">
			<ul class="list">
				<li v-for="item in accounts">
					<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.phone }}</view>
						</view>
					</view>
					<view class="btn">登录</view>
				</li>
			</ul>
			<uni-load-more :status="status" />
		</template>
		<empty v-else></empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accounts: uni.getStorageSync('accounts'),
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1500)
		},
		onShow() {
			
		},
		methods: {
			initList() {
				this.page = 1
				this.reachBottom = 0
				this.getList()
			}
		}
	}
</script>

<style scoped lang="scss">
.tips {
	margin-bottom: 20rpx;
	font-size: 24rpx;
	color: #333;
}
.list {
	li {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
	}
	.avatar {
		width: 100rpx;
		height: 100rpx;
		margin-right: 30rpx;
		border-radius: 50%;
	}
	.name {
		margin-bottom: 6rpx;
		font-size: 30rpx;
		color: #333;
	}
	.val {
		font-size: 28rpx;
		color: #333;
	}
	.btn {
		padding: 8rpx 16rpx;
		font-size: 24rpx;
		color: #fff;
		background-color: #2979ff;
		border-radius: 20px;
	}
}
.plus {
	position: fixed;
	bottom: 40rpx;
	right: 40rpx;
}
</style>
