new-cashier/jeepay-ui-uapp-agent/pageWork/developerManagement/developerManagement.vue

<template>
  <div class="global-wrapper bgF2">
    <view class="mch-header">
      <JHeaderTitle bgColor="#f2f2f2" title="拓展员管理" />
      <view class="search bgF2">
        <JSearchInput place="搜索拓展员姓名、手机号" wrapPd="0 30rpx" ref="search" :isDisabled="true" @tap="toSearch" />
        <view class="switch-title">
          <view :class="{ 'active-title': titleFlag }" @tap="titleFlag = true">全部拓展员</view>
          <view :class="{ 'active-title': !titleFlag }" @tap="titleFlag = false">按团队分组</view>
        </view>
      </view>
    </view>

    <view class="expand-wrapper bgF">
      <template v-if="titleFlag">
        <block v-for="v in useDataResult.dataList" :key="v.sysUserId">
          <view class="page-main bgF" @tap="toDetails(v.sysUserId)">
            <image :src="imgList[v.state ? 0 : 1]" />
            <view class="page-left">
              <view class="page-text">
                {{ v.realname }}
                <view class="text-but">
                  <text>{{ v.telphone }}</text>
                  <!-- <text class="team-name single-text-beyond">团队名称</text> -->
                </view>
              </view>
            </view>
            <view class="state-flag" :class="{ 'state-active': v.state == 1, 'state-none': v.state == 0 }">{{
              v.state == 1 ? "已启用" : "已禁用"
            }}</view>
          </view>
        </block>
        <jeepayListNull :isShow="true" :list="useDataResult.dataList.length" />
      </template>
      <template v-else>
        <block v-for="v in dataList.dataList" :key="v.teamId">
          <ExpandCard
            v-bind="v"
            @isOpen="v.flag = !v.flag"
            @jumpPage="jumpPage('/pageWork/developerManagement/newTeam', v)"
          />
        </block>
        <jeepayListNull :isShow="true" :list="dataList.dataList.length" />
      </template>
    </view>
    <view class="add-block"></view>
    <view class="add-wrapper ButtonBor bgF2">
      <view class="add-expand">
        <view @tap="jumpPage('/pageWork/developerManagement/newTeam')">创建团队</view>
        <view @tap="jumpPage('/pageWork/developerManagement/newDeveloper')">创建拓展员</view>
      </view>
    </view>
  </div>
</template>
<script setup>
import { reactive, ref, onUnmounted } from "vue"
import { onBackPress } from "@dcloudio/uni-app"
import { $getTeams, $getDev } from "@/http/apiManager.js"
import useStore from "@/hooks/useStore.js"
import useGetList from "@/hooks/useList.js"
const { setStore } = useStore()
import jeepayListNull from "@/components/jeepayListNull/jeepayListNull" //最后一条数据提示
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle"
import JSearchInput from "@/components/newComponents/JSearchInput/JSearchInput"
import ExpandCard from "./components/ExpandCard"
const imgList = reactive(["/static/iconImg/expand-member.svg", "/static/iconImg/expand-member-close.svg"])
const titleFlag = ref(true)
const { useDataResult, getList } = useGetList({
  requestFun: $getDev,
  params: {
    userType: 3,
  },
})
const { useDataResult: dataList } = useGetList({
  requestFun: $getTeams,
})
const list = ref([])
const params = {}
const searchList = (data) => {
  params.queryNameOrPhone = data == "reset" ? "" : data
  getList(params)
}
const jumpPage = (url, val) => {
  setStore("teamInfo", val)
  uni.navigateTo({ url })
}
const toSearch = () => {
  uni.navigateTo({ url: `/pageWork/SelectedList/SelectedList?title=expand&search=${JSON.stringify({ userType: 3 })}` })
}
const toDetails = (sysUserId) => {
  uni.navigateTo({ url: `/pageWork/developerManagement/developerDetail?id=${sysUserId}` })
}
// 获取搜索组件暴露出来的数据
const search = ref()
onBackPress(() => {
  if (search.value.searchText != "") {
    search.value.searchText = ""
    list(search.value.searchText)
    return true
  } else {
    return false
  }
})
</script>

<style lang="scss" scoped>
.mch-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #f2f2f2;
}
.add-block {
  height: 220rpx;
}
.add-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30rpx 30rpx 55rpx 30rpx;
  .add-expand {
    display: flex;
    text-align: center;
    color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    background: #5124b2;
    view {
      flex: 1;
      padding: 32rpx;
      &:last-child {
        border-radius: 20rpx;
        background: #7737fe;
      }
    }
  }
}
.switch-title {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  .active-title {
    color: $primaryColor;
    font-weight: 700;
  }
  view {
    color: #a6a6a6;
  }
}
.page-main {
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  image {
    width: 93rpx;
    height: 93rpx;
    margin-right: 20rpx;
  }
  .page-left {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f9f9f9;
    .page-text {
      display: flex;
      flex-direction: column;
      font-size: 33rpx;
      font-weight: 700;
      .text-but {
        text {
          margin-top: 15rpx;
          font-size: 25rpx;
          font-weight: 500;
          color: #a6a6a6;
        }
        .team-name {
          margin-left: 15rpx;
        }
      }
    }
  }
  .state-flag {
    display: flex;
    align-items: center;
    align-self: flex-start;
    margin-right: 15rpx;
    transform: translateY(30rpx);
  }
  .state-active::before {
    content: "";
    display: block;
    width: 8rpx;
    height: 8rpx;
    margin-right: 8rpx;
    border-radius: 50%;
    background-color: $primaryColor;
  }
}
</style>