mobile-official/src/views/adminCenter/user/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="onClickLeft"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <el-col :span="24">
            <van-tabs v-model="active">
              <van-tab title="待审核">
                <userlist :list="oneList" @shenhebtn="shenhebtn"></userlist>
              </van-tab>
              <van-tab title="审核通过">
                <userlist :list="twoList" @shenhebtn="shenhebtn"></userlist>
              </van-tab>
              <van-tab title="审核拒绝">
                <userlist :list="threeList" @shenhebtn="shenhebtn"></userlist>
              </van-tab>
            </van-tabs>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
import NavBar from '@/layout/common/topInfo.vue';
import userlist from './parts/userlist.vue';
const { mapActions: marketuser } = createNamespacedHelpers('marketuser');
export default {
  name: 'index',
  props: {},
  components: { NavBar, userlist },
  data: () => ({
    // 头部标题
    title: '',
    // meta为true
    isleftarrow: '',
    // 返回
    navShow: true,
    show: false,
    // 用户列表
    active: '1',
    // 待审核
    oneList: [],
    // 审核通过
    twoList: [],
    // 审核拒绝
    threeList: [],
    // 搜索
    value: '',
  }),
  async created() {
    await this.search();
  },
  methods: {
    ...marketuser(['userquery']),
    async search({ ...info } = {}) {
      let user = this.user;
      if (this.user.code == 'JLCJGLY') {
        const res = await this.userquery({ ...info });
        if (this.$checkRes(res)) {
          let one = res.data.filter(i => i.status == '0' && i.isdel == '0');
          if (one) this.$set(this, `oneList`, one);
          let two = res.data.filter(i => i.status == '1' && i.isdel == '0');
          if (two) this.$set(this, `twoList`, two);
          let three = res.data.filter(i => i.status == '2' && i.isdel == '0');
          if (three) this.$set(this, `threeList`, three);
        }
      } else {
        const res = await this.userquery({ code: this.user.code, ...info });
        if (this.$checkRes(res)) {
          let one = res.data.filter(i => i.status == '0' && i.isdel == '0');
          if (one) this.$set(this, `oneList`, one);
          let two = res.data.filter(i => i.status == '1' && i.isdel == '0');
          if (two) this.$set(this, `twoList`, two);
          let three = res.data.filter(i => i.status == '2' && i.isdel == '0');
          if (three) this.$set(this, `threeList`, three);
        }
      }
    },
    // 审核用户。查看用户
    shenhebtn(data) {
      this.$router.push({ path: '/adminCenter/user/detail', query: { id: data.uid, role: data.role } });
    },
    // 返回
    onClickLeft() {
      this.$router.push({ path: '/user/index' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
  position: relative;
  z-index: 999;
}
.main {
  min-height: 570px;
}
</style>