ChuangHengWx/components/CusSelect/index.vue

<template>
	<view class="sdialog adffc" v-if="show">
		<view class="dbox adffc">
			<view class="db-top">{{title}}</view>
			<image class="db-close" :src="imgBase+'remind_close.png'" @click="close"></image>
			<view class="db-bottom" @click="addTeam" v-if="addShow">{{addText}}</view>
			<view class="db-list">
				<view class="db-list-item adfacjb" v-for="(item,index) in originList" :key="item.id" @click="selectItem(item,index)">
					<view class="db-list-item-left" :class="{'active':item.select}">{{item.name}}</view>
					<view class="db-list-item-right">
						<u-icon name="checkbox-mark" color="#199C9C" size="42rpx" v-if="item.select"></u-icon>
					</view>
				</view>
			</view>
			<view class="zt_btn" style="margin-top: 40rpx;" @click="confirmTeam">{{confirmText}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				typeof:String,
				default:'选择团队'
			},
			show:{
				typeof:Boolean,
				default:false
			},
			addShow:{
				typeof:Boolean,
				default:false
			},
			addText:{
				typeof:String,
				default:'+ 新增团队'
			},
			list:{
				typeof:Array,
				default:[]
			},
			confirmText:{
				typeof:String,
				default:'确定'
			}
		},
		data(){
			return {
				originList:[],
				current:null
			}
		},
		watch: {
			list: {
			  handler(newValue) {
				this.originList = newValue;
			  },
			  immediate: true,
			  deep: true 
			}
		},
		mounted() {
			this.originList = this.list;
		},
		methods:{
			close(){
				this.$emit('close')
			},
			selectItem(item,index){
				this.current = item;
				this.originList.forEach((t,i)=>{
					this.$set(this.originList[i],'select',i===index)
				})
			},
			addTeam(){
				this.$emit('addTeam')
			},
			confirmTeam(){
				this.$emit('confirmTeam',this.current)
			}
		}
	}
</script>

<style scoped lang="less">
	.sdialog{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, .4);
		justify-content: flex-end;
		.dbox{
			width: 100%;
			height: 1200rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0,0,0,0.07);
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 41rpx 30rpx 64rpx;
			box-sizing: border-box;
			position: relative;
			.db-top{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #002846;
				line-height: 36rpx;
				text-align: center;
			}
			.db-close{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 35rpx;
				right: 30rpx;
			}
			.db-list{
				flex: 1;
				overflow-y: auto;
				margin-top: 58rpx;
				&-item{
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					padding: 39rpx 0;
					&-left{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #002846;
						line-height: 32rpx;
						&.active{
							font-weight: bold;
							color: #009191;
						}
					}
				}
			}
			.db-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;
			}
		}
	}
</style>