nsgk_mobile/src/views/lawEnforcement/supervise/individual.vue

<template>
    <div class="home_wrapper">
        <div class="header_main">
          个体商户
          <div class="return_btn" @click="onClickLeft"></div>
        </div>
      <div style="height: 58px;"></div>
      <div class="search_box">
        <div class="search">
          <input type="text" v-model="searchInput" placeholder="请输入商户姓名" />
          <img src="../../../../static/images/lawEnforcement/new/index_icon_04.png" @click="getList">
        </div>
      </div>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
      >
        <van-swipe-cell v-for="(item,index) in list" :key="index">
          <van-cell :to="{name:'lawEnforcementIndividualDetail', query: {id:item.id}}">
            <template #title>
              <div class="cellTit">
                <p>{{item.name}}</p>
<!--                <i></i>-->
                <p>信用代码</p>
                <p>{{item.uniformCode}}</p>
              </div>
            </template>
            <template #label>
              <div class="cellLabel">
                <img src="../../../../static/images/lawEnforcement/icon/individual_icon_01.png"/>
                <p>{{item.cardNum}}</p>
                <p><i></i>{{item.phone}}</p>
              </div>
            </template>
          </van-cell>
          <template #right>
            <van-row>
              <van-col>
                <van-button square type="info" :to="{name:'lawEnforcementIndividualRelation', query: {id:item.id}}" class="delete-button" >关联<br/>案件</van-button>
              </van-col>
            </van-row>
          </template>
        </van-swipe-cell>
      </van-list>
    </div>
</template>

<script>
  import { listPersonal } from "@/api/lawEnforcement/index";
  export default {
    name: "caseAllocation",
    data() {
      return {
        loading: false,
        finished: false,
        searchInput:'',
        queryParams: {
          // 分页
          pageNum: 1,
          pageSize: 10,
          // 查询排序
          orderByColumn: "id",
          isAsc: "desc",
          name: null,
        },
        list:[]
      };
    },
    created() {

    },
    methods: {
      getList(){
        if (this.searchInput != ''){
          if (this.searchInput == this.queryParams.name){
            return;
          }
          this.list = [];
          this.loading = false;
          this.finished = false;
          this.queryParams.name = this.searchInput;
          this.queryParams.pageNum = 1 ;
        }
        listPersonal(this.queryParams).then(response => {
          response.rows.map(res=>{
            this.list.push(res);
          })
          console.log(this.list.length)
          if(this.list.length >= response.total){
            this.finished = true;
            return;
          }else{
            this.loading = false;
            this.queryParams.pageNum += 1 ;
          }
        });
      },
      goSearch(){
        if (this.searchInput == ''){
          location.reload()
        }
        if (this.searchInput == this.queryParams.name){
          return;
        }
        this.list = [];
        this.loading = false;
        this.finished = false;
        this.queryParams.name = this.searchInput;
        this.queryParams.pageNum = 1 ;
        // this.getList();
      },
    },
  }
</script>

<style scoped lang="scss">
.home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    padding: 0 3% 0.2rem;
    .search_box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 92%;
      margin: 0PX auto;
      .search{
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 10PX auto;
        border: 1px solid #1D6FE9;
        padding: 1PX 1PX 1PX 12PX ;
        border-radius: 50PX;
        input{
          flex: 1;
          background: transparent;
        }
      }
    }
    .header_main{
        height: 116px;
        background: url('../../../../static/images/lawEnforcement/new/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        z-index: 999;
        .return_btn{
            width: 24px;
            height: 43.2px;
            background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }
        .add_btn{
            width: 56.4px;
            height: 40.8px;
            background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }

}
.cellTit{
  display: flex;
  justify-content: space-between;
  p{
    &:nth-child(1){
      font-size: 0.4rem;
      display: flex;
      align-items: flex-start;
      i{
        display: inline-block;
        width: 10PX;
        height: 10PX;
        background: url("../../../../static/images/lawEnforcement/icon/individual_icon_03.png") no-repeat center;
        background-size: 10PX 10PX;
        margin-top: 5px;
        margin-left: 5px;
      }
    }
    &:nth-child(2){
      color: #B4B0B0;
      font-size: 0.3rem;
      margin-left: auto;
      margin-right: 10PX;
    }
    &:nth-child(3){
      color: #6D6EB8;
      font-size: 0.3rem;
    }
  }
}
.cellLabel{
  display: flex;
  align-items: center;
  font-size: 0.35rem;
  img{
    display: block;
    margin-right: 5PX;
  }
  p{
    display: inline-block;
    color: #666666;
    &:last-child{
      background: rgba(28,184,177,0.2);
      padding: 0 8PX;
      border-radius: 3PX;
      color: #1CB8B1;
      margin-left: auto;
      display: flex;
      align-items: center;
      border-radius: 5PX;
      border-top-left-radius: 30px;
      i{
        display: inline-block;
        width: 10PX;
        height: 10PX;
        background: url("../../../../static/images/lawEnforcement/icon/individual_icon_02.png") no-repeat center;
      }
    }
  }
}
/deep/.van-cell__title span{
  font-family: Arial;
  font-size: 0.4rem;
  font-weight: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
  overflow: hidden;
}
/deep/.van-cell__value{
  flex: 0.3;
  color: #1D6FE9;
  font-weight: bold;
}
/deep/.van-swipe-cell{
  margin-bottom: 0.2rem;
  border-radius: 0.2rem;
  overflow: hidden;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
}
/deep/van-ellipsis{
  font-weight: bold;
}
.van-row{
  height: 100%;
}
.van-col{
  height: 100%;
}
.delete-button {
  height: 100%;
}
</style>