ChuangHengWx/pagesMy/teamUser.vue

<template>
	<view class="default_page adffc" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='团队成员'></cus-header>
		<view class="add" @click="handleAdd">+ 添加</view>
		<view class="list" v-if="list.length">
			<u-swipe-action>
				<u-swipe-action-item  v-for="(item, index) in list" :key="index"
				  :options="options" @click="e=>deleteUser(item,e)" :ref="'swipeAction' + index" :threshold="5"
				>
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="swipe-action__content">
							<view class="lbox adfac" @click.prevent="selectUser(item,index)">
								<template v-if="type">
									<image class="lbox-select" v-if="item.select" :src="imgBase+'selected.png'"></image>
									<image class="lbox-select" v-else :src="imgBase+'not_select.png'"></image>
								</template>
								<view class="lbox-info">
									<view class="lbox-info-top adfac">
										<text>{{item.realName}}</text>
										<template v-if="type">
											<view class="type adfac" @click.stop="selectUserCategory(item,index)">
												{{item.categoryName||'选择身份类型'}}
												<image :src="imgBase+'icon_user_down.png'"></image>
											</view>
										</template>
									</view>
									<view class="lbox-info-email">{{item.emailTM}}</view>
								</view>
								<view class="lbox-edit" @click.stop="handleEdit(item)">
									<u-icon name="edit-pen" size="42rpx" color="#B9B9B9"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<view v-else class="adffcacjc" style="flex: 1;">
			<empty text='暂无团队人员,请添加'></empty>
		</view>
		<view class="btn" v-if="type" @click="handleConfirmAdd">确定</view>
		<cus-select :show="show" title="选择身份类型" :list="categoryData" @close="show=false" @confirmTeam="selectConfirm"></cus-select>
	</view>
</template>

<script>
	import empty from '@/components/pageEmpty/index.vue'
	import CusSelect from '@/components/CusSelect/index.vue'
	export default {
		components:{ empty, CusSelect },
		data(){
			return {
				type:'',
				query:{
					page:1,
					limit:10,
					coachId:''
				},
				isOver:false,
				list:[],
				options: [
					{
						text: '删除',
						icon: 'trash',
						iconSize:'32rpx',
						style: {
							backgroundColor: '#f56c6c'
						}
					}
				],
				show:false,
				categoryData:[],
				currentUser:null,
				currentIndex:'',
				eventChannel: null,
			}
		},
		onShow() {
			const eventChannel = this.getOpenerEventChannel();
			if (Object.keys(eventChannel).length) { // 简单判断eventChannel是否有效
				 this.eventChannel = eventChannel;
			}
			
			let pages = getCurrentPages();
			let options = pages[pages.length-1].options;
			this.type = options.type||'';
			this.query.coachId = uni.getStorageSync('userInfo')&&JSON.parse(uni.getStorageSync('userInfo')).id||''
			this.query.page = 1;
			this.isOver = false;
			this.list = [];
			this.getList()
		},
		methods:{
			scrolltolower(){
				if(this.isOver) return
				this.getList()
			},
			getList(){
				this.$api.get('/core/member/page',this.query).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.list = [...this.list,...res.data.list]
					this.list.forEach((l,i)=>{
						l.emailTM = this.$reg.desensitizeContent(l.email);
						this.$set(this.list[i],'category','');
						this.$set(this.list[i],'categoryName','');
						this.$set(this.list[i],'select',false);
					})
					this.query.page++
					if(this.length>=res.data.total) this.isOver = true
				})
			},
			getCategoryData(){
				this.$api.get('/getListByType/UserCategory').then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.categoryData = res.data.map(d=>({name:d.dictLabel,id:d.dictValue}))
					this.show = true;
				})
			},
			selectUser(item,index){
				this.$set(this.list[index],'select',!this.list[index].select);
			},
			selectUserCategory(item,index){
				this.currentUser = item;
				this.currentIndex = index;
				this.getCategoryData()
			},
			deleteUser(item,index){
				uni.showModal({
					title:'温馨提示',
					content:`是否确认删除团队成员【${item.realName}】?`,
					success: (res) => {
						if(res.confirm){
							this.$api.del('/core/member',[item.id]).then(({data:res})=>{
								if(res.code!==0) return this.$showToast(res.msg)
								this.query.page = 1;
								this.list = [];
								this.isOver = false;
								this.getList()
							})
							this.list.forEach((d, i) => {
								this.$refs['swipeAction' + i][0].closeHandler();
							})
						}
					}
				})
			},
			handleAdd(){
				uni.navigateTo({
					url:'/pagesMy/teamUserDetail?type='+this.type
				})
			},
			handleEdit(item){
				uni.navigateTo({
					url:'/pagesMy/teamUserDetail?id='+item.id+'&type='+this.type
				})
			},
			selectConfirm(e){
				this.$set(this.list[this.currentIndex],'category',e.id);
				this.$set(this.list[this.currentIndex],'categoryName',e.name);
				this.show = false;
			},
			handleConfirmAdd(){
				let selectList = this.list.filter(l=>l.select);
				if(selectList.length===0) return this.$showToast('请至少选择一位团队成员')
				let tempuser = selectList.find(s=>!s.category);
				if(tempuser) return this.$showToast(`请为团队人员【${tempuser.realName}】选择身份类型`)
				
				if (this.eventChannel) {
					this.eventChannel.emit('selectUserConfirm', selectList);
					uni.navigateBack();
				}else {
					uni.navigateBack();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-swipe-action-item{
		margin-top: 20rpx;
		background: transparent !important;
	}
	::v-deep .swipe-action{
		border: none !important;
	}
	
	.default_page{
		padding: 0 24rpx;
		box-sizing: border-box;
		.add{
			width: calc(100% - 52rpx);
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			border: 1rpx solid #33A7A7;
			margin: 30rpx 26rpx 0;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #009191;
			line-height: 88rpx;
			text-align: center;
		}
		
		.list{
			flex: 1;
			overflow-y: auto;
			// margin-top: 20rpx;
			.lbox{
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(229,231,235,0.5);
				border-radius: 24rpx;
				padding: 36rpx 24rpx 40rpx;
				// margin-top: 20rpx;
				&-select{
					width: 36rpx;
					height: 36rpx;
					margin-right: 24rpx;
				}
				&-info{
					flex: 1;
					&-top{
						text{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #002846;
							line-height: 32rpx;
						}
						.type{
							background: #FFF7DC;
							border-radius: 21rpx;
							padding: 6rpx 16rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #BA9B31;
							line-height: 30rpx;
							margin-left: 20rpx;
							image{
								width: 24rpx;
								height: 24rpx;
								margin-left: 12rpx;
							}
						}
					}
					&-email{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #667E90;
						line-height: 28rpx;
						margin-top: 30rpx;
					}
				}
				&-edit{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		
		.btn{
			width: calc(100% - 52rpx);
			height: 88rpx;
			background: linear-gradient( 90deg, #33A7A7 0%, #64BBBB 100%);
			border-radius: 44rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			letter-spacing: 2rpx;
			margin: 40rpx 26rpx 54rpx;
		}
	}
</style>