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" :style="{ 'max-height': `calc(100vh - ${0}px)` }" :scroll-y="true">
      <div class="g_h_all">
        <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="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: 18px 10px">
            <div class="g_flex_row_start flex_center g_fw_600">
              {{ 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 g_fw_500" 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">
              {{ item.tel }}
              <i class="iconfont icon-gengduo11 g_c_9"></i>
            </div>
          </div>
        </div>
        <div class="g_h_40"></div>

        <!-- <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);">
          <div class="g_w_128 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>
          <!-- <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
      })
    },
  },
}
</script>

<style lang="scss">
.creator {
  color: #ff4d4f;
  // border: 1px solid #46c7bb;
  background-color: #fff2f0;
}
.member {
  color: rgba(0, 0, 0, 0.88);
  // 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>