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">
			<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>{{'吴一可'}}</text>
										<view class="type">{{'赞助人Sponsor'}}</view>
									</view>
									<view class="lbox-info-email">{{'123456789@qq.com'}}</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 class="btn" v-if="type">确定</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				type:'',
				list:[1,1,1,1],
				options: [
					{
						text: '删除',
						icon: 'trash',
						iconSize:'32rpx',
						style: {
							backgroundColor: '#f56c6c'
						}
					}
				],
			}
		},
		onLoad(options) {
			this.type = options.type
		},
		methods:{
			scrolltolower(){
				
			},
			deleteUser(item,index){
				this.list.forEach((d, i) => {
					this.$refs['swipeAction' + i][0].closeHandler();
				})
			},
			handleAdd(){
				uni.navigateTo({
					url:'/pagesMy/teamUserDetail'
				})
			},
			handleEdit(item){
				uni.navigateTo({
					url:'/pagesMy/teamUserDetail?user='+encodeURIComponent(JSON.stringify(item))
				})
			},
		}
	}
</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: rgba(173,120,166,0.1);
							border-radius: 21rpx;
							padding: 6rpx 16rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #AD78A6;
							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>