emergencyManagement/pages/team/index.vue

<template>
	<view class="page-wrap">
		<view class="pageTabs">
			<uni-segmented-control :current="tabIdx" :values="tabs" style-type="text" active-color="#007aff" @clickItem="changeTab" />				
		</view>	
		<view class="pageMain">
			<uni-card  v-for="(team,index) in teamItems" :key="team.teamId" margin="10px 0" padding="0">
				<template v-slot:title>
					<view class="teamhead">
						<view class="teamName">
							<text>{{team.teamName}}</text>
						</view>
						<view class="handle-bt" @click="handleTeam('edit',team)">
							<text>编辑</text>
						</view>
						<view class="addbt" @click="handleTeam('add',team.teamType)">
							<view class="word">添加队伍</view>
						</view>
					</view>
				</template>
				<uni-collapse value="0" :ref="`collapse-${index+1}`" accordion>
					<uni-collapse-item :title="team.teamName">
						<view class="teamDuty">
							<text>{{team.teamDuty}}</text>
						</view>
					</uni-collapse-item>
				</uni-collapse>
				<view class="item-container">
					<view class="teamhead">
						<view class="item-select">
							<text>成员列表</text>
						</view>
						<view class="handle-bt" @click="handleMember('add',team.teamId)">
							<text>新增</text>
						</view>
					</view>
					<uni-swipe-action class="item-action-box">
						<uni-card padding="10px 0" margin="5px 0" v-for="item in team.memberList" :key="item.memberId">
							<uni-swipe-action-item class="item-action" :auto-close="true" >
								<template v-slot:right>
									<view class="slot-button">
										<view class="bt edit" @click="handleMember('edit',item)"><text class="slot-button-text">编辑</text></view>
										<view class="bt del" @click="handleMember('del',item)"><text class="slot-button-text">删除</text></view>
									</view>
								</template>
								<view class="item">
									<view class="avatar">
										<image :src="item.memberAvatar" v-if="item.memberAvatar"></image>
										<image class="icon" src="/static/images/avatar.png" v-else></image>
									</view>
									<view class="info">
										<view class="top">
											 <view class="posName">
												 <text>{{item.memberPosition}}</text>
											 </view>							
											<view class="posbox">
												 <view class="tag">
													<uni-tag :inverted="true" :text="item.ifCpc===1?'党员':'不是党员'" 
													:type="item.ifCpc===1?'primary':'success'"></uni-tag>
												</view>								
											</view>
										</view>
										<view class="bottom">
											<view class="user">
												<div class="userinfo">
													<uni-icons type="person-filled" size="24" :color="item.memberSex===1?'#666666':'#ffc0cb'"></uni-icons>
													<view class="name">{{item.memberName}}</view>	
												</div>
											</view>
											<view class="phone" @click="callPhone(item.memberPhone)">
												<image class="icon" src="/static/images/phone.png"></image>
												<view class="phoneNumber">{{item.memberPhone||'未填写'}}</view>
											</view>
										</view>
									</view>
								</view>
							</uni-swipe-action-item>
						</uni-card>
					</uni-swipe-action>
				</view>
			</uni-card>
		</view>
		<MemberForm ref="member" @success="getData"></MemberForm>
		<TeamForm ref="team" @success="getData"></TeamForm>
	</view>
</template>

<script>
	import teamApi from '@/api/team.js'
	import TeamForm from './components/TeamForm.vue'
	import MemberForm from './components/MemberForm.vue'
	export default {
		components:{
			TeamForm,
			MemberForm	
		},
		data() {
			return {
				tabIdx:0,
				tabs:['专业救援队伍','行业救援队伍','综合抢险队伍'],
				teamItems:[]
			}
		},
		onShow() {
			this.getData()
			this.init();
		},
		methods: {
			changeTab({currentIndex}){
				if (this.tabIdx !== currentIndex) {
					this.tabIdx = currentIndex	
					this.getData()
				}
			},
			getData(){
				teamApi.getByListInfo({teamType:this.tabIdx+1}).then((res)=>{
					this.teamItems=res.data					
					for(let i=0;i<res.data.length;i++){
						// #ifdef MP
						this.$nextTick(() => {
							this.$refs[`collapse-${i+1}`][0]&&this.$refs[`collapse-${i+1}`][0].resize()
						})
						// #endif
					}
				})
			},
			handleTeam(type,item){
				this.$refs.team.show(type,item)
			},
			handleMember(type,item){
				const self=this;
				if(type==='del'){
					uni.showModal({
						title: '提示',
						content: '是否确定删除',
						success: function (res) {
							if (res.confirm) {
								teamApi.deleteMemberById(item.teamId,item.memberId).then(()=>{
									uni.showToast({
										title:'删除成功！',
										icon:'none'
									})
									self.getData()
								})				
							}
						}
					});
				}else{
					this.$refs.member.show(type,item)
				}				
			},
			callPhone(phoneNumber) {
			 if(!phoneNumber)return
			  wx.makePhoneCall({
			    phoneNumber
			  })
			},
			init(){
				if(!uni.getStorageSync('teamCat')){
					teamApi.getCatByList().then((res)=>{
						uni.setStorageSync('teamCat',res.data)
					})	
				}
			}			
		}
	}
</script>

<style lang="scss" scoped>
.page-wrap{
	padding:0 20rpx;
	.pageTabs{
		background-color: #fff;
	}
	.pageMain{
		margin-top: 20rpx;
		background-color: #f5f5f5;
		padding-bottom: 50rpx;
		.teamhead{
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.teamName{
				font-weight: 600;
				font-size: 36rpx;
				color: #333;
			}
			.handle-bt{
				padding: 20rpx 30rpx;
				font-size: 28rpx;
				color: #409eff;
				line-height: 1;
				flex-shrink: 0;
			}
		}
		.teamDuty{
			padding: 20rpx;
			line-height: 1.2;
			background-color: #f5f5f5;
		}
		.addbt{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			color: #fff;
			background-color: rgba(64,158,255,0.7);			
			box-shadow:0 0 10rpx rgba(0,0,0,0.4);
			position: fixed;
			right: 10rpx;
			bottom: 20%;
			z-index: 99;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			.word{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin: 5rpx auto;
				font-size: 28rpx;
				letter-spacing: 2px;
			}
		}
		.item-container{
			margin-top: 20rpx;
			padding-bottom: 50rpx;
			.item{
				&{
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.avatar {
					flex-shrink: 0;
					width: 60rpx;
					height: 60rpx;
					overflow: hidden;
					border-radius: 50%;
					background-color: #ddd;
					image{
						width: 60rpx;
						height: 60rpx;	
					}
				}
				.info{
					flex: 1;
					padding:0 14rpx;
					.icon,.icon image{
						display: block;
						width: 30rpx;
						height: 30rpx;
						flex-shrink: 0;
					}
					
					.user,.phone{
						display: flex;
						align-items: center;
						.name,.phoneNumber{
							color: #999;
							font-size: 12px;
							font-weight: normal;
							line-height: 1;
						}
					}
					.user{
						padding: 10rpx 0;
						.userinfo{
							display: flex;
							align-items: center;
						}
					}
					.posbox{
						display: flex;
						justify-content: flex-end;
					}
					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}
			}
			.slot-button{
				width: 260rpx;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				color: #fff;
				.bt{
					width: 50%;
					height: 100%;
					font-size: 30rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					&.edit{
					    background-color:#007aff;
					}
					&.del{
						background-color:#F56C6C;
					}
				}
			}
		}
	}
}
</style>