ChuangHengWx/components/CusSelectTeamUser/index.vue

<template>
	<view class="dialog adffc" v-if="show">
		<view class="dialog-box">
			<view class="dialog-box-title">{{title}}</view>
			<image class="dialog-box-close" :src="imgBase+'remind_close.png'" @click="close"></image>
			<div class="dialog-box-select adfacjb">
				<div class="dialog-box-select-left">已选 {{selectNums}} 人</div>
				<div class="dialog-box-select-right adfac" @click="changeAll">
					<image :src="imgBase+'selected.png'" v-if="selectAll"></image>
					<image :src="imgBase+'not_select.png'" v-else></image>
					<text>全选</text>
				</div>
			</div>
			<view class="dialog-box-list">
				<view class="dialog-box-list-item adfac" v-for="(item,index) in list" :key="index" @click="handleSelectUser(item,index)">
					<view class="dialog-box-list-item-status" :class="{'wzd':item.status===0,'yzd':item.status===1}">{{statusCfg[item.status]}}</view>
					<view class="dialog-box-list-item-select">
						<image :src="imgBase+'selected.png'" v-if="item.select"></image>
						<image :src="imgBase+'not_select.png'" v-else></image>
					</view>
					<view>
						<view class="dialog-box-list-item-name adfac">
							<text>{{item.realName}}</text>
							<view class="type">{{item.categoryName}}</view>
						</view>
						<view class="dialog-box-list-item-email">{{item.email}}</view>
					</view>
				</view>
			</view>
			<view class="zt_btn" style="margin-top: 80rpx;" @click="handleConfirm">确认发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			show:{
				typeof:Boolean,
				default:false
			},
			list:{
				typeof:Array,
				default:[]
			}
		},
		data(){
			return {
				title:'发送报告',
				statusCfg:{
					0:'未作答',
					1:'已作答'
				},
				selectNums:0,
				selectAll:false,
			}
		},
		methods:{
			close(){
				this.$emit('close');
			},
			changeAll(){
				this.selectAll = !this.selectAll;
				this.$emit('changeAll',this.selectAll);
			},
			handleSelectUser(item,index){
				this.$emit('handleSelectUser',index);
			},
			handleConfirm(){
				this.$emit('handleConfirm');
			},
		}
	}
</script>

<style scoped lang="scss">
	.dialog{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1001;
		background: rgba(0,0,0,.4);
		justify-content: flex-end;
		&-box{
			width: 100%;
			background: #F7F7F7;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 48rpx 24rpx 64rpx;
			box-sizing: border-box;
			position: relative;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #002846;
				line-height: 32rpx;
				text-align: center;
			}
			&-close{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
			&-select{
				margin-top: 66rpx;
				&-left{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #002846;
					line-height: 36rpx;
				}
				&-right{
					image{
						width: 36rpx;
						height: 36rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #002846;
						line-height: 36rpx;
						margin-left: 10rpx;
					}
				}
			}
			&-bottom{
				width: 100%;
				height: 88rpx;
				background: rgba(25,156,156,0.1);
				border-radius: 44rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #009191;
				line-height: 88rpx;
				text-align: center;
				margin-top: 40rpx;
			}
			&-list{
				height: 900rpx;
				margin-top: 10rpx;
				overflow-y: auto;
				&-item{
					background: #FFFFFF;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					border-radius: 24rpx;
					margin-top: 20rpx;
					position: relative;
					padding: 36rpx 24rpx;
					&-status{
						padding: 11rpx 16rpx 29rpx 37rpx;
						box-sizing: border-box;
						position: absolute;
						top: 0;
						right: 0;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 24rpx;
						&.wzd{
							background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/team_user_wzd.png') no-repeat;
							background-size: 100% 100%;
							color: #193D59;
						}
						&.yzd{
							background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/team_user_yzd.png') no-repeat;
							background-size: 100% 100%;
						}
					}
					&-select{
						padding-right: 24rpx;
						image{
							width: 36rpx;
							height: 36rpx;
						}
					}
					&-name{
						text{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #002846;
							line-height: 32rpx;
						}
						.type{
							margin-left: 20rpx;
							background: #FFF7DC;
							border-radius: 20rpx;
							padding: 5rpx 16rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #BA9B31;
							line-height: 30rpx;
						}
					}
					&-email{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #667E90;
						line-height: 28rpx;
						margin-top: 24rpx;
					}
				}
			}
		}
	}
</style>