apply-assistant-v3/root/person/teamManage.vue

<template>
	<div class="team-manage-container g_flex_column_between g_bg_page">
		<scroll-view class="g_flex_1" enable-flex :style="{ 'min-height': `calc(100vh - ${0}px)`,paddingBottom:'120px' }" :scroll-y="true">
			<div class="g_flex_column_between" :style="{ 'min-height': `calc(100vh - ${0}px)` }">
				<div class>
					<div class="g_h_10"></div>
					<div class="g_flex_row_start g_bg_f g_mb_10" style="padding: 12px 16px" @click="goPage('/root/person/applyManage')" v-if="applyNum !== 0">
						<div class="g_mr_16 g_w_48 g_h_48 t-icon t-icon-wodetuandui" style="background-repeat: no-repeat"></div>
						<div>
							<div class="g_fs_18">新的成员</div>
							<div class="g_c_9 g_fs_14">您有{{ applyNum }}条申请等待审核</div>
						</div>
					</div>
					<!-- <div class="r_box g_fs_20 g_text_c g_h_60 g_ml_10 g_mr_10 g_mb_10 g_fw_600" style="line-height: 60px">
						{{ agencyInfo.fullName || agencyInfo.userName }}
					</div> -->
					<div class="g_mb_12">
						<g-panel-form-item
							:list="[
								{
									icon: '',
									label: agencyInfo.fullName || agencyInfo.userName,
									result: '',
									path: '',
									pRow: 12,
									itype: 'icon',
								},
							]"
							@clickItem="openChoose"
						/>
					</div>
					<div class="r_box g_ml_10 g_mr_10">
						<div v-for="item in memberList" :key="item.id" 
								 @click="editMember(item)" 
								 class="g_border_e_b g_flex_row_between g_fs_18" 
								 style="padding: 19px 12px 19px 22px"
						>
							<div class="g_flex_row_start flex_center" style="font-size: 16px;color: #333333;">
								{{ item.aliasName || item.userName }}
								<div class="g_fs_12 g_pl_2 g_h_18 g_pr_2 g_radius_4 g_flex_row_center flex_center g_ml_4" 
											v-for="i in item.agencyRoleNameList" 
											:class="i ? (i == '创建人' ? 'creator' : i == '管理员' ? 'manager' : 'member') : ''"
								>{{ i }}</div>
							</div>
							<div class="g_flex_row_end flex_center g_c_6" style="font-size: 16px;color: #888;">
								{{ item.tel }}
								<i class="iconfont icon-gengduo11 g_c_c" style="font-size: 16px;"></i>
							</div>
						</div>
					</div>
					<div class="g_h_40"></div>
				</div>
				<g-panel-fixed >
					<div class="g_flex_row_center">
						<div class="g_w_200 g_mr_20">
							<g-button btnText="手动添加" size="auto" @clickBtn="goPage('/root/person/addOrUpdataMember')"></g-button>
						</div>
						<div class="g_w_128"> 
							<g-button btnText="微信邀请" size="auto" type="primary" class @clickBtn="goPage('/root/person/memberApplyQRCode')"></g-button>
						</div>
					</div>
				</g-panel-fixed>
				<!-- <div class="g_h_24"></div> -->
				<!-- <div class="sticky g_bg_f g_flex_row_center g_pt_8" style="padding-bottom: calc(constant(safe-area-inset-bottom) + 16px); padding-bottom: calc(env(safe-area-inset-bottom) + 16px); box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.06)">
					<g-button icon="icon-tianjia g_fsi_16 g_mr_8" btnText="添加成员" class="" @clickBtn="addMember"></g-button>
				</div> -->
			</div>
		</scroll-view>
		<!-- <div class="g_flex_row_end g_bg_f" style="padding: 14px 16px 34px"> -->

		<!-- <g-button btnText="添加部门" size="small" class="g_ml_16" @clickBtn="goLogin"></g-button> -->
		<!-- </div> -->
		<u-popup v-model="addMemberShow" mode="bottom" z-index="999999" border-radius="12" :closeable="false" :mask-close-able="true" @close="addMemberShow = false">
			<view class="g_text_c g_bg_f_5 g_fs_17">
				<view class="g_bg_f">
					<view class="g_c_3">
						<view class="g_p_16 g_border_e_t" @click="goPage('/root/person/addOrUpdataMember')">手动填写信息</view>
						<view class="g_p_16 g_border_e_t" @click="goPage('/root/person/memberApplyQRCode')">微信分享邀请</view>
					</view>
				</view>
				<view class="g_p_16 g_mt_10 g_bg_f" style="padding-bottom: calc(constant(safe-area-inset-bottom) + 16px); padding-bottom: calc(env(safe-area-inset-bottom) + 16px)" @click="addMemberShow = false">取消</view>
			</view>
		</u-popup>
	</div>
</template>

<script>
export default {
	data() {
		return {
			memberList: [],
			addMemberShow: false,
			agencyInfo: uni.getStorageSync("agencyInfo"),
			applyNum: 0,
		};
	},
	onShow() {
		this.getMemberList();
		this.getNewApplyNum();
	},
	onLoad() {},
	created() {
		console.log(123123);
	},

	methods: {
		compare(a, b) {
			let sortList = ["创建人", "管理员",'成员'];
			if (sortList.includes(a) && sortList.includes(b)) {
				return sortList.indexOf(a) - sortList.indexOf(b);
			} else if (sortList.includes(a)) {
				return -1;
			} else if (sortList.includes(b)) {
				return 1;
			} else {
				return a.localeCompare(b);
			}
		},
		getMemberList() {
			let that = this;
			uni.showLoading({
				title: "加载中...",
			});
			this.G.Get(this.api.order_peopleList, { pageSize: 500 }, (res) => {
				console.log("报名人列表：", res);
				that.memberList = res.recordList;
				that.memberList.forEach((item) => {
					item.agencyRoleNameList = item.agencyRoleName.split("；");
					item.agencyRoleNameList = item.agencyRoleNameList.sort(this.compare);
				});

				uni.hideLoading();
			});
		},
		addMember() {
			this.addMemberShow = true;
		},
		editMember(_item) {
			uni.navigateTo({
				url: "/root/person/addOrUpdataMember?info=" + JSON.stringify(_item),
			});
		},
		goPage(url) {
			uni.navigateTo({
				url,
			});
			this.addMemberShow = false;
		},
		getNewApplyNum() {
			let that = this;
			this.G.Get(this.api.order_getNewApplyNum, {}, (res) => {
				console.log("order_getNewApplyNum", res);
				that.applyNum = res;
			});
		},
		openChoose(){
			console.log('openChoose')
			uni.showActionSheet({
				itemList: ['添加团队成员', '修改企业资料'],
				success: (res) => {
					console.log(res)
					if(res.tapIndex == 0){
						this.goPage('/root/person/addOrUpdataMember')
					}else if(res.tapIndex == 1){
						this.goPage('/root/person/info?active=1')
					}
				}
			})
		}
	},
};
</script>

<style lang="scss">
.creator {
	color: #ff4d4f;
	// border: 1px solid #46c7bb;
	background-color: #fff2f0;
}
.member {
	color: #666;
	// border: 1px solid #f9676e;
	background-color: rgba(0, 0, 0, 0.04);
}
.manager {
	color: #1677ff;
	// border: 1px solid #0066d6;
	background-color: #e6f4ff;
}
.sticky {
	position: sticky;
	bottom: 0;
	left: 0;
	z-index: 999;
}
</style>