nsgk_mobile/src/views/sunVillage_info/list_chronicles.vue

 <template>
     <div class="home_wrapper">
       <div class="header_main">
           承包方记事
           <div class="return_btn" @click="onClickLeft"></div>
       </div>
       <div class="search_info">
          <div class="search_block">
              <i class="icon"></i>
              <input type="text" class="ipt" v-model="queryParams.cbfmc" placeholder="搜索" >
          </div>
          <div class="total" @click="getCbfCount">查询</div>
       </div>
       <div class="list_main">
         <van-list
           v-model:loading="loading"
           :finished="finished"
           finished-text="没有更多了"
           @load="onRefreshContractor"
           :immediate-check="false"
         >
           <van-swipe-cell v-for="(item,index) in cbfList" :key="'cbfjs'+index">
             <div class="item" style="height: 100px;" @click="$router.push({path:'/sunVillage_info/list_chronicles_single_process',query:{item:item,status:false}})">
               <div class="info">
                 <div class="title">
                   <i class="icon_box"></i>
                   <p class="news_title">{{item.cbfmc}}</p>
                 </div>
                 <div class="time">
                   <p><img src="../../assets/images/sunVillage_info/contractor_icon_04.png" width="14">{{item.lxdh}}</p>
                   <p><img src="../../assets/images/sunVillage_info/contractor_icon_05.png" width="14">{{item.cbfcysl}}</p>
                 </div>
               </div>
               <div style="width: 30%;">
                 <img  :src="'/api'+item.gsjsrqz" width="100%" alt="" v-if="item.gsjsrqz" >
               </div>
             </div>
             <template #right>
               <div class="operation">
                 <div class="opera_btn" @click="$router.push({path:'/sunVillage_info/list_chronicles_single_process',query:{item:item,status:true}})">
                   <img src="../../assets/images/sunVillage_info/contractor_icon_07.png" alt="" width="25">
                   <p>记事签字</p>
                 </div>
               </div>
             </template>
           </van-swipe-cell>
         </van-list>
       </div>
     </div>
 </template>
 <script>
   import { getList} from "@/api/sunVillage_info/sysCbf";
   import request from '@/utils/request'
   export default {
     name: "certificateList",
     data() {
       return {
         loading: false,
         finished: false,
         cbfList:[],
         countcbf:0,
         queryParams:{
           pageNum: 1,
           pageSize: 10,
           cbfbm:null},
       };
     },
     created() {
      this.getCbfCount();
     },
     methods: {
       getCbfCount(){
         getList(this.queryParams).then(res=>{
           this.cbfList = res.rows;
           if(this.cbfList.length >= res.total){
             this.finished = true;
           }else{
             this.loading = false;
             this.queryParams.pageNum += 1 ;
           }
         });
       },
       onRefreshContractor(){
         if(this.loading){
           let params = {
             "cbfbm":this.queryParams.cbfbm,
             "pageNum": this.countcbf+1,
             "pageSize":10,
           }
           getList(params).then((response) => {
             if(response.rows.length>0&&this.cbfList.length<response.total){
               response.rows.map(res => {
                 this.cbfList.unshift(res)
               })
               this.loading = false;
               this.countcbf++
             }else{
               this.finished = true;
             }
           });
         }
       },
     },
   }
 </script>
 <style scoped lang="scss">
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main {
        height: 116px;
        background: url('../../assets/images/sunVillage_info/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;
        position: relative;

        .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;
        }
    }
    .search_info{
        padding:20px 23px 0;
        display: flex;
        .search_block{
          height: 59px;
          flex: .75;
          border-radius: 59px;
          background: #fff;
          display: flex;
          border:2px solid #3494ff;
          padding-right: 35px;
          align-items: center;
          margin-right: 5vw;
          .icon{
              width: 30px;
              height: 30px;
              background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat;
              background-size: 100% 100%;
              display: block;
              margin:0 8px 0 26px;
          }
          .ipt{
          flex: 1;
          font-size: 26px;
          background: none;
          border:0 none;
          line-height: 59px;
          }
        }
        .total{
          flex: .25;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26px;
          color: #ffffff;
          background: #3494ff;
          border-radius: 50PX;
        }
    }
    .list_main {
      padding: 0 22px;
      margin-top: 15PX;

      .item {
        border-radius: 30px;
        background: #fff;
        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
        padding: 25px 32px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;

        .info {
          flex: 1;
          .title {
            display: flex;
            font-size: 32px;
            align-items: center;
            height: 58px;

            .icon_box {
              width: 34px;
              display: block;
              height: 30px;
              background: url('../../assets/images/sunVillage_info/contractor_icon_03.png') no-repeat;
              background-size: 100% 100%;
              margin-right: 10px;
              flex-shrink: 0;
            }

            .news_title {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              word-break: break-all;
              overflow: hidden;
              font-weight: bold;
            }

            .tips_mark {
              background: #ffedcd;
              border-radius: 8px;
              font-size: 24px;
              color: #f8a83d;
              text-align: center;
              line-height: 34px;
              flex-shrink: 0;
              padding: 0 5Px;
              margin-left: auto;
            }

            .tips_mark2 {
              background: #eb1616;
              border-radius: 8px;
              font-size: 24px;
              color: #ffffff;
              text-align: center;
              line-height: 34px;
              flex-shrink: 0;
              padding: 0 5Px;
              margin-left: 10PX;
            }
          }

          .time {
            font-size: 16PX;
            color: #333333;
            display: flex;
            align-items: center;
            margin-top: 5PX;
            p{
              display: flex;
              align-items: center;
              font-size: 14PX;
              margin-right: 10vw;
            }
            img{
              margin-right: 5PX;
            }

            .icon_time {
              width: 25px;
              height: 25px;
              background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;
              background-size: 100% 100%;
              margin-right: 10px;
            }
          }
        }
      }

      .operation {
        display: flex;
        align-items: center;
        justify-content: right;
        text-align: center;
        border-radius: 30px;
        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
        height: 100%;
        margin-left: 10PX;
        background: #79cf13;
        padding: 0 15Px;

        .opera_btn {
          color: #ffffff;
        }
      }
    }
    .bottom_tips{
        font-size: 24px;
         color: #a7a6a6;
         text-align: center;
         margin-top: 32px;
         background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;
         background-size: 260px 2px;
         .xs{
            padding:0 8px;
            background: #e9e9e9;
         }
    }

}

 </style>