|
|
<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)` }" :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="dom_1" style="width: calc(100% - 20px);margin: 0 auto;border-radius: 8px;background-color: #fff;position: relative;">
|
|
|
<div class="">
|
|
|
<div class="g_flex_row_center" style="padding-top: 10px;">
|
|
|
<div style="width: 64px;height: 64px;overflow: hidden;margin-right: 10px;" class="g_flex_c g_flex_none">
|
|
|
<img :src="agencyInfo.logo || 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/default.svg'"
|
|
|
alt="" style="width: 64px;height: 64px;border-radius: 50%;">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_flex_1" style="padding: 8px 0 16px 0;border-bottom: 1px solid rgba(0, 0, 0, 0.1);">
|
|
|
<div style="color: #000;font-size: 18px;margin-bottom: 8px;text-align: center;" class="g_ell_1">{{ agencyInfo.fullName }}</div>
|
|
|
<div style="color: #999;font-size: 16px;text-align: center;" class="g_ell_1">{{ agencyInfo.agencyName }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<i class="iconfont icon-edit-square" style="font-size: 18px;color: #999;position: absolute;right: 12px;top: 12px;"
|
|
|
@click="goPage('/root/person/info?active=1')"
|
|
|
></i>
|
|
|
</div>
|
|
|
<view class="dom_2" style="margin-top: 10px;" v-if="applyNum && applyNum > 0">
|
|
|
<view class="g_p_16 g_bg_f g_radius_8 g_flex_row_between flex_center g_ml_10 g_mr_10" hover-class="thover"
|
|
|
@click="goPage('/root/merchantManagement/applyManage')" style="padding: 10px 16px;">
|
|
|
<view class="g_flex_row_start flex_center" style="width: 100%">
|
|
|
<img src="https://bocai-cms.oss-cn-beijing.aliyuncs.com/bf586cad-c6f0-4417-86c8-6cf55310ace7_123456.svg" class="g_w_40 g_h_40 g_radius_50 g_flex_none" alt="" />
|
|
|
<view class="g_flex_column_between g_ml_10 g_flex_1 g_mr_10">
|
|
|
<view class="g_fs_17 g_c_0 g_mb_4">新的成员</view>
|
|
|
<view class="g_c_9 g_fs_14" v-if="applyNum">您有{{applyNum}}条申请等待审核</view>
|
|
|
</view>
|
|
|
<div class="g_flex_column_center g_flex_none" >
|
|
|
<div class="g_flex_row_end">
|
|
|
<div style="font-size: 14px;background-color: #ff4d4f; color: #fff; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;">
|
|
|
{{ applyNum }}
|
|
|
</div>
|
|
|
<view class="g_flex_column_center">
|
|
|
<i class="iconfont icon-gengduo11 g_c_c"></i>
|
|
|
</view>
|
|
|
</div>
|
|
|
</div>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<div class="dom_3 r_box g_ml_10 g_mr_10" style="margin-top: 10px;">
|
|
|
<div v-for="item in memberList" :key="item.id" @click="editMember(item)"
|
|
|
class="g_flex_row_between g_fs_18" style="padding: 0 10px">
|
|
|
<div class="g_flex_c g_flex_none g_mr_10">
|
|
|
<img :src="item.avatar || 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/default.svg'"
|
|
|
alt="" style="width: 40px;height: 40px;border-radius: 50%;">
|
|
|
</div>
|
|
|
<div class="g_flex_column_between g_flex_1"
|
|
|
style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);padding: 9px 0;"
|
|
|
>
|
|
|
<div class="g_flex_1 g_flex_row_start" style="font-size: 17px;color: rgba(0, 0, 0, 0.9);">
|
|
|
{{ item.aliasName || item.userName }}
|
|
|
|
|
|
<div class="g_flex_column_center">
|
|
|
<div class="g_flex_row_start">
|
|
|
<div class="g_fs_12 g_pl_2 g_h_18 g_pr_2 g_radius_4 g_flex_c g_ml_4"
|
|
|
v-for="(role, index) in getDisplayRoles(item.agencyRoleNameList)"
|
|
|
:key="index"
|
|
|
:class="role !== '...' ? (role == '创建人' ? 'creator' : role == '管理员' ? 'manager' : 'member') : ''"
|
|
|
v-show="role && role.trim()">
|
|
|
{{ role }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_flex_none" style="font-size: 14px;color: #999999;">
|
|
|
@{{ agencyInfo.fullName }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="dom_4 g_flex_row_start" style="padding: 10px 0px;"
|
|
|
@click="addMemberShow = true"
|
|
|
>
|
|
|
<div class="g_flex_column_center" style="padding: 0 10px;">
|
|
|
<div class="g_flex_c" style="width: 40px;height: 40px;background-color: rgba(2, 122, 255, 0.1);color: #1890ff;border-radius: 50%;">
|
|
|
<i class="iconfont icon-plus"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_flex_column_center" style="font-size: 17px;height: 40px;color: rgba(2, 122, 255, 1);">添加成员。。。</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_h_40"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</scroll-view>
|
|
|
<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/merchantManagement/addOrUpdataMember')">手动添加</view>
|
|
|
<view class="g_p_16 g_border_e_t" @click="goPage('/root/merchantManagement/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>
|
|
|
import gPanelFormItem from "@/components/panel/formItem.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
gPanelFormItem,
|
|
|
},
|
|
|
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/merchantManagement/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({
|
|
|
title: "请选择操作",
|
|
|
itemList: ["添加团队成员", "修改企业资料"],
|
|
|
success: (res) => {
|
|
|
console.log(res);
|
|
|
if (res.tapIndex == 0) {
|
|
|
this.goPage("/root/merchantManagement/addOrUpdataMember");
|
|
|
} else if (res.tapIndex == 1) {
|
|
|
this.goPage("/root/person/info?active=1");
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
// 新增方法：获取要显示的角色列表
|
|
|
getDisplayRoles(roles) {
|
|
|
if (!roles || roles.length <= 2) {
|
|
|
// 过滤掉空值
|
|
|
return (roles || []).filter(role => role && role.trim());
|
|
|
}
|
|
|
// 过滤掉空值并限制最多显示2个加省略号
|
|
|
const filteredRoles = (roles || []).filter(role => role && role.trim());
|
|
|
if (filteredRoles.length <= 3) {
|
|
|
return filteredRoles;
|
|
|
}
|
|
|
return [...filteredRoles.slice(0, 3), '...'];
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.creator {
|
|
|
color: #fff;
|
|
|
background-color: #ff4d4f;
|
|
|
zoom: 0.9;
|
|
|
line-height: 18px;
|
|
|
}
|
|
|
.member {
|
|
|
color: #fff;
|
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
|
zoom: 0.9;
|
|
|
line-height: 18px;
|
|
|
}
|
|
|
.manager {
|
|
|
background-color: rgba(0, 145, 255, 1);
|
|
|
color: #fff;
|
|
|
zoom: 0.9;
|
|
|
line-height: 18px;
|
|
|
}
|
|
|
.sticky {
|
|
|
position: sticky;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
z-index: 999;
|
|
|
}
|
|
|
</style> |