nsgk_mobile/src/views/sunVillage_info/information.vue

 <template>
     <div class="home_wrapper">
         <div class="header_main">
             合同信息
             <div class="return_btn" @click="onClickLeft"></div>
             <div class="add_btn" @click="goAdd"></div>
         </div>
         <div class="search_info">
            <div class="search_block">
                <i class="icon"></i>
                <input type="text" class="ipt" placeholder="搜索">
            </div>
            <div class="total">共{{listLength}}个合同</div>
         </div>
         <div class="list_main">
           <van-list
             v-model="loading"
             :finished="finished"
             finished-text="没有更多了"
             @load="getList"
           >
             <!--1-->
            <div class="item" v-for="(item,index) in applicationList">
                <div class="head_block">
                    <i class="icon"></i>
                    <div class="title">{{item.name}}</div>
                </div>
                <div class="order_block">
                    <div class="order">{{item.code}}</div>
                    <div :class="{'describe':true,'suspend':item.contractionStatus == '撤销','normal':item.contractionStatus == '正常','undo':item.contractionStatus == '终止'}">{{item.contractionStatus}}<i class="icon"></i></div>
                </div>
                 <div class="function_block">
                     <div class="value">合同金额<span class="amount">￥{{item.totalAmount}}</span></div>
                     <div class="startStop_time">
                        <div class="time"><div class="unim start">起</div>{{item.startTime}}</div>
                        <div class="time"><div class="unim stop">止</div>{{item.endTime}}</div>
                     </div>
                 </div>
            </div>

           </van-list>

         </div>
<!--         <div class="bottom_tips">-->
<!--            <span class="xs">已经到底啦</span>-->
<!--        </div>-->

    </div>
</template>

 <script>
   import { contractionList } from "@/api/sunVillage_info/fixedAssets";
   export default {
     name: "certificateList",
     data() {
       return {
         applicationList:[],
         applicationListSecond:[],
         assetStatusOptions:[],
         auditStatus:[],
         loading: false,
         finished: false,
         listLength:'0',
         searchInput:'',
         queryParams:{
           pageNum:1,
           pageSize:10,
           orderByColumn:'createTime',
           isAsc:'desc',
           name:'',
         }
       };
     },
     created() {
       this.houseGetDicts("contraction_status").then((response) => {
         this.contractionStatusOptions = response.data;
       });
     },
     methods: {
       getList(){
         setTimeout(() => {
           contractionList(this.queryParams).then(response => {
             this.listLength = response.total;
             for (var i = 0; i < response.rows.length; i++) {
               response.rows[i].contractionStatus = this.selectDictLabel(this.contractionStatusOptions, response.rows[i].contractionStatus);
               response.rows[i].totalAmount = Number(response.rows[i].totalAmount ).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => { return $1 + ","; }).replace(/\.$/, "")
               this.applicationList.push(response.rows[i]);
               this.applicationListSecond.push(response.rows[i]);
             }
             if(this.applicationList.length >= response.total){
               this.finished = true;
               return;
             }else{
               this.loading = false;
               this.queryParams.pageNum += 1 ;
             }
           });
         }, 1000);
       },
       getSearchList(){
         this.loading = true;
         if(this.applicationListSecond.length>0&&this.queryParams.name!=""){
           let newList = []
           for(let j = 0 ;j<this.applicationListSecond.length;j++){
             if(this.applicationListSecond[j].name.indexOf(this.queryParams.name)>-1){
               newList.push(this.applicationListSecond[j]);
             }
           }
           this.applicationList = newList
         }
         if(this.queryParams.name==""){
           this.applicationList = this.applicationListSecond;
         }
         this.loading = false;
       },
       goAdd(){
         this.$router.push('/sunVillage_info/informationAdd')
       },
     },
   }
 </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;
        display: flex;
        .search_block{
        height: 59px;
        width: 535px;
        border-radius: 59px;
        background: #fff;
        display: flex;
        border:2px solid #3494ff;
        padding-right: 35px;
        align-items: center;
        .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: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #858585;
        }
    }
    .list_main{
        padding:0 22px;
        .item{
            height: 207px;
            border-radius: 30px;
            background: #fff;
            box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
            padding:25px 32px;
            margin-bottom: 20px;
            .head_block{
                height: 56px;
                display: flex;
                align-items: center;
                width: 100%;
                 .icon{
                    width: 34px;
                    height: 30px;
                    background: url('../../assets/images/sunVillage_info/fixedAssets_icon_2.png') no-repeat;
                    background-size: 100% 100%;
                    display: block;
                    margin-right: 12px;
                }
                .title{
                    flex:1;
                    font-size: 32px;
                    color: #252525;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-right: 20px;

                }
            }
            .order_block{
                height: 50px;
                display: flex;
                align-items: center;
                width: 100%;
                .order{
                    flex: 1;
                    font-size: 26px;
                    color: #252525;
                }
                .describe{
                    font-size: 26px;
                    display: flex;
                    align-items: center;
                    &.suspend{
                        color: #f69600;
                        .icon{
                            width: 27px;
                            height: 26px;
                            background: url('../../assets/images/sunVillage_info/information_icon_1.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                            margin-left: 15px;
                        }
                    }
                    &.normal{
                        color: #69c100;
                        .icon{
                            width: 32px;
                            height: 26px;
                            background: url('../../assets/images/sunVillage_info/information_icon_2.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                            margin-left: 15px;
                        }
                    }
                    &.undo{
                        color: #858585;
                        .icon{
                            width: 27px;
                            height: 26px;
                            background: url('../../assets/images/sunVillage_info/information_icon_3.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                            margin-left: 15px;
                        }
                    }


                }
            }
            .function_block{
                height: 50px;
                display: flex;
                align-items: center;
                width: 100%;
                .value{
                    flex: 1;
                    font-size: 24px;
                    color: #252525;
                    .amount{
                        color: #eb1616;
                    }
                }
                .startStop_time{
                    display: flex;
                    align-items: center;
                    .time{
                        display: flex;
                        align-items: center;
                        font-size: 24px;
                        color: #002022;
                        margin-left: 25px;
                        .unim{
                            width: 32px;
                            height: 32px;
                            font-size: 22px;
                            color: #fff;
                            text-align: center;
                            line-height: 32px;
                            border-radius: 6px;
                            margin-right: 8px;
                            &.start{background: #3e7df2;}
                            &.stop{background: #eb1616;}
                        }
                    }
                }
            }


        //    <div class="function_block">
        //              <div class="value">合同金额<span class="amount">￥199.00</span></div>
        //              <div class="startStop_time">
        //                 <div class="time"><div class="unim">起</div>2022.05.04</div>
        //                 <div class="time"><div class="unim">起</div>2022.05.04</div>
        //              </div>
        //          </div>


        }
    }
    .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>