jsm-mall-h5-front/src/packageMine/pages/masterGroup/index.vue

<template>
  <view style="width: 100%; height: 100vh; background: rgb(247, 248, 255)">
    <zj-page-container>
      <view class="toubuyangs">
        <view class="toubuyangsTab">
          <view class="toubuyangsTabItem" @click="tabQiehuan(0)">
            <view>已组队（{{ tongjishuju.teamCount || 0 }}）</view>
            <view :class="{ hengxian: true, xuanzhong: tab == 0 }"> </view>
          </view>
          <view class="toubuyangsTabItem" @click="tabQiehuan(1)">
            <view>待确认（{{ tongjishuju.applyCount || 0 }}）</view>
            <view :class="{ hengxian: true, xuanzhong: tab == 1 }"></view>
          </view>
        </view>
      </view>
      <zj-page-fill>
        <zj-page-layout
          :isScroll="true"
          :refresherTriggered="refresherTriggered"
          @refresherrefresh="refresherrefresh"
          @scrolltolower="scrolltolower"
        >
          <view class="neirongquyu">
            <view class="zhegeshineirong" v-for="(item, index) in dataList" :key="index">
              <view class="neirongbiaot">
                <text>小组1</text>
                <text v-if="true" style="color: blue">{{
                  tab
                    ? { WAIT: '待确认', OK: '通过', FAIL: '失败' }[item.status]
                    : { ON: '启用', OFF: '禁用' }[item.status]
                }}</text>
                <text v-else style="color: red">待确认</text>
              </view>
              <view class="neironglieju">
                <text>网点名称：</text>
                <text>({{ item.websitId }}){{ item.websitName }}</text>
              </view>
              <view class="neironglieju">
                <text>大工名称：</text>
                <text>{{ item.masterWorkerName }}</text>
              </view>
              <view class="neironglieju">
                <text>小工名称：</text>
                <text>{{ item.assistantWorkerName }}</text>
              </view>
              <view class="neironglieju">
                <text>创建时间：</text>
                <text>{{ item.createTime }}</text>
              </view>
              <view class="neironghengxin" v-if="tab"></view>
              <view class="neironganniuqu" v-if="tab && ['WAIT'].includes(item.status)">
                <u-button type="primary" text="确认" @click="queding(item, index)"></u-button>
              </view>
            </view>
            <Loading :loadStatus="loadStatus" :dataList="dataList" />
          </view>
        </zj-page-layout>
      </zj-page-fill>
      <view class="quanjuanniu">
        <u-button type="primary" text="创建组别" @click="quchuangjian"></u-button>
      </view>
    </zj-page-container>
  </view>
</template>

<script>
import zjPageContainer from '@/components/zj-page-container/zj-page-container.vue'
import zjPageFill from '@/components/zj-page-container/zj-page-fill.vue'
export default {
  components: {
    zjPageContainer,
    zjPageFill
  },
  data() {
    return {
      tab: 0,
      pageNum: 1,
      dataList: [],
      refresherTriggered: false,
      getBool: true,
      loadStatus: 0,
      tongjishuju: {}
    }
  },
  onLoad() {
    this.tabQiehuan(this.tab)
    uni.$on('shuaxianliebiao', this.aaaa)
  },
  onUnload() {
    uni.$off('shuaxianliebiao', this.aaaa)
  },
  methods: {
    aaaa() {
      this.tabQiehuan(this.tab, 2)
    },
    quchuangjian() {
      this.$navToPage({
        url: '/packageMine/pages/masterGroup/createGroup'
      })
    },

    tabQiehuan(index, tin = 1) {
      this.tab = index
      this.getBool = true
      this.pageNum = tin
      this.dataList = []
      this.getList()
    },

    queding(item, index) {
      this.$api
        .post('/worker/team/confirm', {
          id: item.id,
          status: 'OK'
        })
        .then(res => {
          this.dataList.splice(index, 1, {
            ...item,
            status: 'OK'
          })
        })
    },

    getList() {
      this.$api.post('/worker/team/count').then(res1 => {
        this.tongjishuju = res1.data
      })
      if (!this.getBool) {
        return
      }
      this.loadStatus = 1
      this.$api
        .post(this.tab ? '/worker/team/page' : '/worker/team/manage/page', {
          pageNum: this.pageNum,
          pageSize: 20
        })
        .then(res => {
          let list = res.data.records
          if (list.length < 20) {
            this.loadStatus = 2
            this.getBool = false
          } else {
            this.loadStatus = 0
          }
          this.dataList = this.dataList.concat(list)
        })
        .catch(() => {
          this.loadStatus = 2
        })
        .finally(res => {
          this.refresherTriggered = false
        })
    },

    // 滚动到底部
    scrolltolower(e) {
      if (this.loadStatus === 0) {
        this.pageNum++
        this.getList()
      }
    },

    // 触发下拉刷新
    async refresherrefresh(e) {
      this.refresherTriggered = true
      this.getBool = true
      this.pageNum = 1
      this.dataList = []
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.quanjuanniu {
  width: 100%;
  height: auto;
  padding: 30rpx;
  box-sizing: border-box;
}
.neirongquyu {
  width: 100%;
  height: auto;
  padding: 30rpx 30rpx 15rpx 30rpx;
  box-sizing: border-box;
  .zhegeshineirong {
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    .neirongbiaot {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      margin-bottom: 40rpx;
      text {
        font-size: 32rpx;
        font-weight: 700;
      }
    }
    .neironglieju {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      margin-bottom: 30rpx;
      text {
        font-size: 28rpx;
      }
    }
    .neironghengxin {
      width: 100%;
      border-bottom: 1rpx solid #aaa;
      margin-bottom: 30rpx;
    }
    .neironganniuqu {
      widows: 100%;
      text-align: right;
    }
  }
}
.toubuyangs {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 30rpx 30rpx 15rpx 30rpx;
  .toubuyangsTab {
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .toubuyangsTabItem {
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .hengxian {
        margin-top: 20rpx;
        width: 100rpx;
      }
      .xuanzhong {
        border-bottom: 4rpx solid #000;
      }
    }
  }
}
</style>