front-end/hdApp/src/admin/ll/list.vue

<template>
    <view class="app-main app-content">
      <view style="width:100%;font-size:40upx;font-weight:bold;text-align: center;padding-top:30upx;padding-bottom:40upx;background-color: white;">失信人员查询系统</view>
      <view style="background-color: white;">
        <view style="width:100%;">
          <button class="admin-button-com big" :class="[searchType == 0 ? 'blue' : '']" style="margin-left:2%;" @click="changeSearch(0)">手机号</button>
          <button class="admin-button-com big" :class="[searchType == 1 ? 'blue' : '']" style="margin-left:10upx;" @click="changeSearch(1)">微信号</button>
          <button class="admin-button-com big" :class="[searchType == 2 ? 'blue' : '']" style="margin-left:10upx;" @click="changeSearch(2)">身份证</button>
          <button class="admin-button-com big red" style="margin-right:2%;float: right;border: 1upx solid #3385FF;color:white;background-color:#3385FF;" @click="add()">新 增</button>
        </view>
        <view style="width:100%;text-align: center;padding-bottom:30upx;margin-top:10upx;">
          <input v-model="search" name="search" ref="searchRef" type="text" placeholder="这里搜索" @input="goSearch()" @focus="clearSearch()"
          style="border:1upx solid #CCCCCC;width:96%;border-radius: 10upx;height:90upx;margin:0 auto;text-align: left;padding-left:15upx;font-size:32upx;" />
          <view style="width:100%;font-size:30upx;color:black;margin:30upx 0 5upx 2%;text-align: left;font-size:32upx;">
            <text>失信人员 {{totalUserNum}}人</text>
            <text style="float:right;color:#3385FF;text-decoration: underline;margin-right:40upx;" @click.stop="goMy()">我提交的记录</text>
          </view>
        </view>
      </view>
      <div class="list-wrap">
        <block v-if="!$util.isEmpty(list.data)">
          <div class="list" v-for="(item, index) in list.data" :key="index">
            <llUser :item="item"></llUser>
          </div>
        </block>
        <block v-else>
          <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
        </block>
      </div>
    </view>
  </template>
  <script>
  import NotLogin from "@/components/not-login";
  import AppWrapperEmpty from "@/components/app-wrapper-empty";
  import ModalModule from "@/components/plugin/modal";
  import { list } from "@/mixins";
  import { mapGetters } from "vuex";
  import { getUserList} from "@/api/ll";
  import AppSearchModule from "@/components/module/app-search";
  import DropShopSelect from "@/components/module/shopSelect";
  import llUser from "./components/user";
  import DateSelect from "@/components/module/dateSelect";
  export default {
    name: "list",
    components: {
      AppWrapperEmpty,
      ModalModule,
      AppSearchModule,
      DropShopSelect,
      llUser,
      DateSelect,
      NotLogin
    },
    mixins: [list],
    computed: { 
      ...mapGetters({ loginInfo: "getLoginInfo"}) 
    },
    data() {
      return {
        search:'',
        searchType:0,
        totalUserNum:0,
        T:null,
        loginStyle :0
      };
    },
    onPullDownRefresh() {
      this.resetList();
      this.getList()
      uni.stopPullDownRefresh()
    },
    onReachBottom() {
      if (!this.list.finished) {
        this.getList().then((res) => {
          uni.stopPullDownRefresh();
        });
      } else {
        uni.stopPullDownRefresh();
      }
    },
    onLoad() {
      this.getList()
    },
    onShow () {
      if(!this.$util.isEmpty(this.loginInfo.admin) && this.loginInfo.admin.currentShopId > 0){
        this.loginStyle  = 1
      }
    },
    watch: {
      loginInfo(newVal) {
        if(!this.$util.isEmpty(newVal.admin) && newVal.admin.currentShopId > 0){
          this.loginStyle  = 1
        }
      }
	  },
    methods: {
      goSearch(){
        let that = this
        if(this.T != null){
          clearTimeout(this.T)
        }
        this.T = setTimeout(function(){
          that.resetList()
          that.getList()
        },800)
      },
      changeSearch(type){
        this.searchType = type
        this.search = ''
        this.resetList()
      },
      clearSearch(){
        this.search = ''
        this.resetList()
      },
      goMy(){
        if(this.loginStyle == 0){
          this.$util.confirmModal({content:'请先登录'},() => {
            this.$util.pageTo({url: "/admin/home/login?fromType=2",type:2})
          })
        }else{
          this.$util.pageTo({url:"/admin/ll/myEventList"})
        }
      },
      add(){
        if(this.loginStyle == 0){
          this.$util.confirmModal({content:'请先登录'},() => {
            this.$util.pageTo({url: "/admin/home/login?fromType=2",type:2})
          })
        }else{
          this.$util.pageTo({url:"/admin/ll/add"})
        }
      },
      init(){
      },
      getList() {
        return getUserList({search:this.search,searchType:this.searchType}).then(res => {
          this.totalUserNum = res.data.totalUserNum ? res.data.totalUserNum : 0
          this.completes(res)
          if (this.$util.isEmpty(res.data)){
            return false
          }
        })
      }
    }
  };
  </script>
  <style lang="scss" scoped>
  page{
      width: 750upx;
      overflow: hidden;
  }
  .app-content {
    padding-bottom: 1upx;
      overflow: hidden;
    .select-dn_bx {
      padding-left: 18upx;
    }
    .app-tabs {
      position: fixed;
      /* 手机mobile屏幕小于1000px */
      @media screen and (max-width: 1100px) {
        width: 100%;
      }
      /* 收银台cashier屏幕大于1000px */
      @media screen and (min-width:1100px) {
        width: 40%;
      }    
      z-index: 9;
    }
    .input-wrap_box {
      background-color: #fff;
      position: fixed;
      top: 0;
      z-index: 10;
      /* 手机mobile屏幕小于1000px */
      @media screen and (max-width: 1100px) {
        width: 100%;
      }
      /* 收银台cashier屏幕大于1000px */
      @media screen and (min-width:1100px) {
        width: 40%;
      }    
      height: 100upx;
      display: flex;
      align-items: center;
      padding: 0 30upx;
      & > view:nth-child(2) {
        flex: 1;
      }
    }
    .list-wrap {
      padding-top:25upx;
      .list {
        background-color: #fff;
        margin-bottom: 20upx;
      }
    }
      .app-footer {
          justify-content: flex-end;
      }
  }
  .upload-confirm-wrap {
    max-height: 600upx;
    overflow-y: auto;
    .modal-tit {
      @include disFlex(center, center);
      font-size: 40upx;
      margin-top: 30upx;
      margin-bottom: 50upx;
      .iconfont {
        color: #09bb07;
        margin-right: 20upx;
        font-size: 50upx;
      }
    }
    .sel-wrap {
      color: $fontColor2;
      font-size: 32upx;
      .sel-tit {
        text-align: left;
      }
      .sel-btn {
        @include disFlex(center, flex-start);
        flex-wrap: wrap;
        padding: 10upx 0 40upx;
      }
    }
  }
  </style>