uniDataCenter/components/account-scre...

<template>
	<view class="dialog_mask" @touchmove.stop.prevent="moveStop" @click="clearMask">
		<scroll-view class="mask_container"  scroll-y="true" @click.stop="moveStop">
			<view class="screen_li" :class="accountInfo.seller_id==item.seller_id?'active':''" v-for="(item,index) in accountList" :key="index+'accountList'" @click.stop="selectEvent(index)">
				<view class="screen_li_con flex">
					<image v-if="item.platform==2" src="../static/img/dou.png" mode="widthFix" class="icon"></image>
					<image v-if="item.platform==1" src="../static/img/kuai.png" mode="widthFix" class="icon"></image>
					<image :src="item.head" mode="widthFix" class="sellerImg"></image>
					<text>{{item.name}}</text>
				</view>
				<view class="iconfont icon-queren_icon"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 账号筛选 弹框
	export default {
		name:"account-screen",
		props:['accountInfo','accountList'],
		data() {
			return {
				
			};
		},
		methods:{
			clearMask(){
				this.$emit('clearMask')
			},
			moveStop(){},
			selectEvent(index){
				this.$emit('changeAccount',this.accountList[index])
			}
		}
	}
</script>

<style scoped lang="scss">
.dialog_mask{
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(0,0,0,0.5);
		z-index: 2;
	}
	.mask_container{
		width: 100%;
		max-height: 60vh;
		background: #FFFFFF;
		overflow-y: auto;
		position: absolute;
		left: 0;
		z-index: 11;
		.screen_li{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			border-bottom: 2rpx solid #E8E8E8;
			font-size: 28rpx;
			color: #555555;
			line-height: 40rpx;
			padding-right: 40rpx;
			.iconfont{
				color: transparent;
				font-size: 20rpx;
			}
			&.active{
				.iconfont{
					color: #446EF6;
				}
			}
			.sellerImg{
				width:60rpx;
				height: 60rpx;
				border-radius: 4px;
				margin: 0 20rpx;
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>