partnerApp/pages/tools/addStaff/addStaff.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="addStaffManage d-flex a-center j-center">
			<view class="d-flex a-center j-center flex-column flex-1">
				<view class="d-flex a-center j-center icon iconfont icon-addstaff" @tap="getStaffList(0)"></view>
				<view>未认证</view>
			</view>
			<view class="d-flex a-center j-center flex-column flex-1">
				<view class="d-flex a-center j-center icon iconfont icon-renzheng" @tap="getStaffList(1)"></view>
				<view>已认证</view>
			</view>
			<view class="d-flex a-center j-center flex-column flex-1">
				<view class="d-flex a-center j-center icon iconfont icon-alladdstaff" @tap="getStaffList(2)"></view>
				<view>认证管理</view>
			</view>
		</view>
		<view class="line"></view>

		<!-- 增员菜单Start -->
		<block v-for="(item,index) in menusList" :key="index">
			<my-list-item :item="item" :index="index"></my-list-item>
		</block>
		<!-- 增员菜单End -->

	</view>
</template>

<script>
	import myListItem from "@/components/modules/my/my-list-item.vue";
	export default {
		components: {
			myListItem
		},
		data() {
			return {
				menusList: [{
						icon: "",
						name: "面对面推荐",
						clicktype: "navigateTo",
						url: "/pages/tools/addStaff/recommendCode",
						auth: true
					},
					{
						icon: "",
						name: "扫码下载",
						clicktype: "navigateTo",
						url: "/pages/tools/addStaff/codeDownload",
						auth: true
					},
					{
						icon: "",
						name: "邀请函",
						clicktype: "navigateTo",
						url: "/pages/tools/poster/poster",
						auth: true
					}
				]
			}
		},
		methods: {
			getStaffList(staffType) {
				// 0未认证 1已认证 2全部
				this.navigate({
					url: '/pages/tool-staff-list/tool-staff-list?staffType=' + staffType
				}, "navigateTo", true);
			}
		}
	}
</script>

<style>
	.addStaffManage {
		height: 220upx;
		margin: 0 40upx;
	}

	.addStaffManage>view>view.icon {
		width: 110upx;
		height: 110upx;
		color: #FFFFFF;
		border-radius: 100%;
		margin-bottom: 10upx;
		font-size: 60upx;
	}

	.addStaffManage>view:nth-of-type(1)>view.icon {
		background-color: #78CBFF;
	}

	.addStaffManage>view:nth-of-type(2)>view.icon {
		background-color: #78FF7E;
	}

	.addStaffManage>view:nth-of-type(3)>view.icon {
		background-color: #FF9D4A;
	}

	.line {
		height: 10upx;
		background-color: #EEEEEE;
	}
</style>