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">
								<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">{{'赞助人Sponsor'}}</view>
										</template>
									</view>
									<view class="lbox-info-email">{{item.email}}</view>
								</view>
								<view class="lbox-edit" @click="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">确定</view>
	</view>
</template>

<script>
	import empty from '@/components/pageEmpty/index.vue'
	export default {
		components:{ empty },
		data(){
			return {
				type:'',
				query:{
					page:1,
					limit:10,
					coachId:''
				},
				isOver:false,
				list:[],
				options: [
					{
						text: '删除',
						icon: 'trash',
						iconSize:'32rpx',
						style: {
							backgroundColor: '#f56c6c'
						}
					}
				],
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.query.coachId = uni.getStorageSync('userInfo')&&JSON.parse(uni.getStorageSync('userInfo')).id||''
			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.query.page++
					if(this.length>=res.data.total) this.isOver = true
				})
			},
			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'
				})
			},
			handleEdit(item){
				uni.navigateTo({
					url:'/pagesMy/teamUserDetail?id='+item.id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-swipe-action-item{
		margin-top: 20rpx;
	}
	::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;
						}
					}
					&-email{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						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>