XEH-miniProgram/pages/self/enterpriseTeam.vue

<template>
	<view class="page-wrap">
		<view class="tabs-panel">
			<view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item.value">
				{{ item.label }}
			</view>
		</view>
		<!-- 团队成员 -->
		<view v-if="tabActive === 1" class="list-panel">
			<view class="item">
				<image class="avatar" src="../../static/auth-icon.png" mode="aspectFill"></image>
				<view class="text">
					张无忌 18991397914
					<text class="sub">总经办</text>
				</view>
				<button class="btn" @click="handleOpenAuthSetting">权限设置</button>
				<button class="btn">删除</button>
			</view>
			<view class="item">
				<image class="avatar" src="../../static/auth-icon.png" mode="aspectFill"></image>
				<view class="text">
					张无忌 18991397914
					<text class="sub">总经办</text>
				</view>
				<button class="btn">权限设置</button>
				<button class="btn">删除</button>
			</view>
			<view class="item">
				<image class="avatar" src="../../static/auth-icon.png" mode="aspectFill"></image>
				<view class="text">
					张无忌 18991397914
					<text class="sub">总经办</text>
				</view>
				<button class="btn">待审核</button>
				<button class="btn">删除</button>
			</view>
			<button class="add-btn" @click="handleOpenAddMember">+ 添加团队成员</button>
		</view>
		<!-- 部门管理 -->
		<view v-if="tabActive === 2" class="list-panel">
			<view class="item">
				<view class="text">总经办</view>
				<button class="btn">删除</button>
			</view>
			<view class="item">
				<view class="text">财务部</view>
				<button class="btn">删除</button>
			</view>
			<view class="item">
				<view class="text">行政部</view>
				<button class="btn">删除</button>
			</view>
			<view class="item">
				<view class="text">后勤部</view>
				<button class="btn">删除</button>
			</view>
			<button class="add-btn" @click="handleOpenAddDepartment">+ 添加新部门</button>
		</view>
		<!-- 添加成员弹窗 -->
		<uni-popup ref="memberDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" type="info" title="添加成员" @confirm="dialogInputConfirm">
				<view class="popup-form">
					<view class="popup-form-item">
						<view class="label">姓名</view>
						<input class="input" type="text" placeholder="请输入" maxlength="20" />
					</view>
					<view class="popup-form-item">
						<view class="label">手机号</view>
						<input class="input" type="text" placeholder="请输入" maxlength="11" />
					</view>
					<view class="popup-form-item">
						<view class="label">部门</view>
						<picker class="picker" @change="bindPickerChange" :value="index" :range="array">
							<input class="input" type="text" placeholder="请选择" maxlength="11" :value="test" disabled />
						</picker>
					</view>
					<view class="popup-form-item">
						<view class="label">职务</view>
						<input class="input" type="text" placeholder="请输入" maxlength="11" />
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 添加部门弹窗 -->
		<uni-popup ref="departmentDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" type="info" title="添加部门" @confirm="dialogInputConfirm">
				<view class="popup-form">
					<view class="popup-form-item">
						<view class="label">部门名称</view>
						<input class="input" type="text" placeholder="请输入" maxlength="20" />
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabActive: 1,
			tabList: [
				{
					label: '团队成员',
					value: 1
				},
				{
					label: '部门管理',
					value: 2
				}
			],
			array: ['总经办', '财务部', '行政部'],
			test: ''
		};
	},
	methods: {
		handleOpenAddMember() {
			this.$refs.memberDialog.open();
		},
		handleOpenAddDepartment() {
			this.$refs.departmentDialog.open();
		},
		bindPickerChange(e) {
			this.test = this.array[e.detail.value];
		},
		dialogInputConfirm() {},
		//打开权限设置
		handleOpenAuthSetting() {
			uni.navigateTo({
				url: 'authSetting'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	padding-top: 82.42rpx;
	overflow: hidden;
	// .submit-btn{
	// 	width: 549.45rpx;
	// 	height: 75.55rpx;
	// 	background: #00BCD2;
	// 	font-size: 27.47rpx;
	// 	color: #fff;
	// 	border-radius: 8.24rpx;
	// 	margin: 54.95rpx auto;
	// }
}

.tabs-panel {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	height: 82.42rpx;
	background: #fff;
	display: flex;
	padding: 0 41.21rpx;
	z-index: 1;

	&::before,
	&::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: 1rpx;
		background: #e0e0e0;
	}

	&::before {
		top: 0;
	}

	&::after {
		bottom: 0;
	}

	.item {
		padding: 0 9.62rpx;
		text-align: center;
		font-size: 27.47rpx;
		color: #999;
		line-height: 82.42rpx;
		position: relative;

		& + .item {
			margin-left: 27.47rpx;
		}
	}

	.active {
		color: #00bcd2;

		&::after {
			content: '';
			position: absolute;
			left: 0%;
			right: 0%;
			bottom: 0%;
			height: 5.49rpx;
			background: #00bcd2;
			z-index: 1;
		}
	}
}

.list-panel {
	margin-top: 13.74rpx;

	.item {
		display: flex;
		align-items: center;
		padding: 16.48rpx 27.47rpx;
		min-height: 96.15rpx;
		box-sizing: border-box;
		position: relative;
		background: #fff;

		& + .item::before {
			content: '';
			position: absolute;
			left: 0%;
			right: 0%;
			top: 0%;
			height: 1rpx;
			transform: scaleY(0.5);
			background: #e0e0e0;
		}
	}

	.avatar {
		width: 76.92rpx;
		height: 76.92rpx;
	}

	.text {
		flex: 1;
		font-size: 27.47rpx;
		color: #545e8f;
		margin-left: 13.74rpx;
	}

	.sub {
		display: block;
		font-size: 24.73rpx;
		color: #999999;
	}

	.btn {
		background: none;
		border: none;
		font-size: 27.47rpx;
		color: #f97631;
		white-space: nowrap;
		padding: 0;
		margin-left: 13.74rpx;
	}
	.add-btn {
		margin-top: 27.47rpx;
		font-size: 27.47rpx;
		color: #00bcd2;
		height: 82.42rpx;
		line-height: 82.42rpx;
		display: block;
		text-align: left;
		padding: 0 0 0 54.95rpx;
		background: #fff;
		border: none;
		border-radius: 13.74rpx;
	}
}

.popup-form {
	width: 100%;
	font-size: 27.47rpx;
	&-item {
		display: flex;
		align-items: center;
		height: 82.42rpx;
		position: relative;
		& + &::before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 1rpx;
			background: #e0e0e0;
		}
	}
	.label {
		white-space: nowrap;
		margin-right: 13.74rpx;
	}
	.input {
		flex: 1;
		text-align: right;
	}
	.picker {
		flex: 1;
	}
}
</style>