ChuangHengWx/components/CusTeamUser/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>
			<view class="dialog-box-bottom" @click="addUser">添加人员</view>
			<view class="dialog-box-list">
				<view class="dialog-box-list-item" v-for="(item,index) in list" :key="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-name adfac">
						<text>{{item.realName}}</text>
						<view class="type">{{item.categoryName}}</view>
					</view>
					<view class="dialog-box-list-item-email">{{item.email}}</view>
					<image class="dialog-box-list-item-delete" :src="imgBase+'icon_delete.png'" @click="deleteUser(item,index)" v-if="deluser"></image>
				</view>
			</view>
			<view class="zt_btn" style="margin-top: 40rpx;" @click="handleConfirm">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				typeof:String,
				default:'团队人员'
			},
			show:{
				typeof:Boolean,
				default:false
			},
			deluser:{
				typeof:Boolean,
				default:false
			},
			list:{
				typeof:Array,
				default:[]
			}
		},
		data(){
			return {
				statusCfg:{
					0:'未作答',
					1:'已作答'
				}
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			deleteUser(item,index){
				this.$emit('deleteUser',{item,index})
			},
			addUser(){
				this.$emit('addUser')
			},
			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: 30rpx 24rpx 50rpx;
			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;
			}
			&-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: 40rpx;
				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%;
						}
					}
					&-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;
					}
					&-delete{
						width: 42rpx;
						height: 42rpx;
						position: absolute;
						right: 24rpx;
						top: 70rpx;
					}
				}
			}
		}
	}
</style>