看不懂就对了，这里本身也只是自己的一个记录而已。

layui和vue的融合，这里只是个过程，代码最终不是这样的。

接上面吧。

加了个滑动下拉加载。本来准备自己写的。jq那版是我自己写的。结果发现网上有个现成的插件，直接调用吧。

上代码。继续上面的代码的。

<style>
    .btn-circle .layui-icon {font-size: 18px;}
</style>

<!-- 正文开始 -->
<div class="layui-fluid mescroll" id="Business_lst_html"  v-cloak >
    <div class="layui-row layui-col-space15" >
          <div class="layui-col-xs12">
             <div class="layui-card">
                    <div class="layui-card-body">
                    <div class="layui-form" lay-filter="butsinLstFormTop" >
                            <div class="layui-block layui-form" style="margin-bottom:10px;"> 
                                    <input type="type" name="seachTest" class="myseach-input" v-model="seachText" lay-verify="required"  placeholder="按事项关键字搜索"  />
                                    <button class="layui-btn icon-btn layui-btn-sm myseach"   lay-submit @click="search" >
                                        <i class="layui-icon">&#xe615;</i>搜
                                    </button>
                                </div>
                        
                            <div class="layui-btn-container">
                                <button class="layui-btn btn-circle"  @click="openWin()" style="bottom: 60px; z-index: 9999;font-size: 18px" title="增加业务">
                                    <i class="layui-icon">&#xe654;</i>
                                </button>
                                
                                <!--<button data-tableid="butsinLstTable" ew-event="exportCsv" class="layui-btn icon-btn layui-btn-sm">
                                    <i class="layui-icon">&#xe67d;</i>导出
                                </button>-->
                                <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="only_debts">
                                    只看欠款
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-danger" v-on:click="wait_works(1)">
                                    待处理
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="wait_works(2)">
                                    处理中
                                </button>
                                <button class="layui-btn layui-btn-sm" v-on:click="wait_works(3)">
                                    待结账
                                </button>
                              
                              </div>
                       
                    </div>
                  </div>   
                </div> 
            </div>
        </div>
      
        <div class="layui-row layui-col-space15 " id="Business_html"   >
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 mymain"    v-for="(obj,index) in listData"  v-bind:key="obj.id" >
                <div class="layui-card">
                    <div class="layui-card-body">
                    <div class="layui-text">
                            <template v-if="obj.img_url != 'assets/images/default.png' ">
                                <div class="user-text-head" >
                                        <img  @click="imgprev(obj.img_url)"  v-bind:src=`${obj.img_url}?x-oss-process=style/thumb`  v-bind:layer-src="obj.img_url" />
                                </div>
                            </template>
                        <div class="con-right ">
                            <h3>事项</h3>
                            <p>{{obj.matters}} </p>
                            <p>{{obj.bus_detailed}}</p>
                        </div>
                        <div class="layui-clear"></div>
                        <div class="layui-text"><span>{{obj.create_time}}</span><span class="pull-right" style="color:#FF5722;" >￥{{obj.actual_pay}}<span></div>
                        <template v-if="obj.phone">
                             <div class="layui-text" >
                                    <span>客户：{{obj.user_name}}</span>
                                    <span style="margin-left:10px;">{{obj.phone}}</span>
                                    <a v-bind:href=`tel:${obj.phone}` class=" pull-right layui-btn layui-btn-primary layui-btn-xs">直拨电话</a> 
                            </div>
                        </template>
                        <div class="layui-text layui-clear" style="margin-top:5px;">
                                <a v-if="obj.status == 1 "  class="layui-btn layui-btn-danger layui-btn-xs" @click="openWin(index)">{{obj.status_text}}</a>
                                <a v-else-if="obj.status == 2 " class="layui-btn layui-btn-normal layui-btn-xs"  @click="openWin(index)">{{obj.status_text}}</a>
                                <a v-else-if="obj.status == 3 " class="layui-btn  layui-btn-xs" @click="openWin(index)">{{obj.status_text}}</a>
                                <template v-else  class="layui-btn  layui-btn-xs">
                                        <span v-if="obj.dabt == 0  "  >完成</span>
                                        <a v-else  class="layui-btn  layui-btn-xs"  @click="openWin(index)"  >欠款{{obj.dabt}}</a>
                                </template>
                                <span  v-if="obj.status == 10 " class="layui-ml10">收款:{{obj.pay_type_title}}</span>
                                <button class="layui-btn layui-btn-xs layui-btn-primary"  @click="del(index)"   style="float: right;"><i class="layui-icon">&#xe640;</i> 删除</button>
            <button class="layui-btn layui-btn-xs layui-btn-primary"   @click="openWin(index)" style="float: right;margin-right: 10px;"><i class="layui-icon">&#xe642;</i> 修改</button>     
                        </div>
                
              </div>
            </div>
            </div>
            </div>
            
            
        </div>

</div>


  
<script >
layui.use(['layer', 'form',  'config','common'],
function () {
"use strict";
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var config = layui.config;



var my_html_data = {
        title:'业务',
        mainId:"Business_lst_html",
        addurl:"business/gethtml/method/business_add/",
        searchsUrl:'Business/searchs',        //搜索用地址
        delurl:'Business/del',
        searchKey:'matters' ,   //搜索key
        totalRow:false     //是否开启合计
        ,totalKey:"actual_pay"       //合计字段   
        ,butkey:'status'     //按钮事件key项目,这里是按天
}


var paylst = new Vue({
        el: '#'+ my_html_data.mainId,
        data: {
            mescroll: null,
            seachText:'',
            listData:[],
            initData:my_html_data,
            searchData:{   //请求搜索时的对象
                'page': 1,
                'limit': 30,
                'search':[]
            },
            total_money:'0.00'     //合计金额
            
        },
        
        methods: {
            //计算合计
            toatFun:function(){
                let _that = this;
                let mkey = _that.initData.totalKey ;
                    if(_that.initData.totalRow){
                        let totaldata = _that.listData ;
                        let taoal = 0 ;
                        for (let index = 0; index < totaldata.length; index++) {
                            const element = totaldata[index];
                            const money = parseFloat(element[mkey]);
                            taoal += money;   
                        }
                        _that.total_money = taoal.toFixed(2);
                    }
            },
            //初始加载
            gethtml:function(url){
                let _that = this;
                this.seachInit();
                admin.req(url,_that.searchData, function (res) { 
                        if(res.code != 0) return wx.miniProgram.navigateTo({url:'/pages/start/start'});  
                       // 如果超过了500条，就清空免得影响性能，这么长谁看
                       if(_that.listData.length > 500){
                         _that.listData = [];
                       } 
                    _that.listData = _that.listData.concat(res.data);
                    //如果开启了合计，计算合计
                    _that.toatFun();
                    
                    if(_that.listData.length ==0){
                          layer.msg("暂无数据");
                       }
                    }, 'POST');
            },
           
            //页面参数重新初始化
            seachInit:function(){
                this.searchData.page = 1;
                this.searchData.limit = 10;
                this.listData=[];
            },
            //只看欠账
            only_debts:function(){
                this.searchData.search = {arrears:1};
                this.gethtml(config.base_server + this.initData.searchsUrl);
            },
            //按天年日月统计
            wait_works:function(status_text){
                let skey = this.initData.butkey ;
                this.searchData.search = {[skey]:status_text};
                this.gethtml(config.base_server + this.initData.searchsUrl);
           
            },
            //绑定微信预览图片接口事件
            imgprev:function(src){
                wx.previewImage({
                current: src, // 当前显示图片的http链接
                urls: [src] // 需要预览的图片http链接列表
                });
            },
            //打开窗口事件
            openWin(tabid){
                let _that = this;
                let id = (typeof(tabid) !='undefined') ? 1 : 0;       //因为js中0算假，因此加1判断
                let title = id ? "修改":"增加";
                let url = id ? _that.initData.addurl+'/id/'+_that.listData[tabid].id :  _that.initData.addurl;
                url = config.base_server + url;
                admin.open({
                    title: title + _that.initData.title,
                    url: url,
                    end:function(){
                        if(id){
                            let data = admin.getTempData('tr_temp_data');
                            if(data){
                               let olddata = _that.listData.splice(tabid,1,data);
                                //如果开启了合计，计算合计
                                if(_that.initData.totalRow){
                                    let mkey = _that.initData.totalKey ;
                                    let addmoney = parseFloat(data[mkey]);
                                    let oldmoney = parseFloat(olddata[0][mkey]);
                                    let taoal = parseFloat(_that.total_money);
                                    taoal = taoal + addmoney -oldmoney;
                                    _that.total_money = taoal.toFixed(2);
                                }
                                admin.putTempData('tr_temp_data');    //清除临时缓存
                            }
                        }else{
                            let data = admin.getTempData('tr_temp_data');
                            if(data){
                                _that.listData.unshift(data);      //数组插入到首位
                                if(_that.initData.totalRow){
                                    let mkey = _that.initData.totalKey ;
                                    let addmoney = parseFloat(data[mkey]);
                                    let taoal = parseFloat(_that.total_money);
                                    taoal += addmoney ;
                                    _that.total_money = taoal.toFixed(2);
                                }
                                admin.putTempData('tr_temp_data');    //清除临时缓存
                            }
                        }
                        
                    }
                    
                });
            },
            //删除
            del:function(tabid){
                let _that = this;
                layer.confirm('确定删除吗?注意,删除后不可恢复', function(index){
                        admin.req(_that.initData.delurl,{id:_that.listData[tabid].id}
                        ,function(data){
                            if(data.code==1001){
                                _that.listData.splice(tabid, 1);
                            }
                            layer.msg(data.msg);
                        },'POST'
                            
                        );
                        layer.close(index);
                 });  
            },
            search:function(){      //搜索 
                var that = this;  
                var seachText = that.seachText;
                if (seachText.replace(/(^s*)|(s*$)/g, "").length ==0) return ;
                var key= that.initData.searchKey;     
                that.searchData.search = {[key]:seachText}; 
                this.gethtml(config.base_server + this.initData.searchsUrl);
                return false;
            },
             //上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
			upCallback: function(page) {
					//联网加载数据
                    var self = this;
                    self.searchData.page = page.num;
                    self.searchData.limit = page.size;
                    admin.req(config.base_server + self.initData.searchsUrl,self.searchData, function (res) { 
                        if(res.code != 0) return wx.miniProgram.navigateTo({url:'/pages/start/start'});  
                       // 如果超过了500条，就清空免得影响性能，这么长谁看
                        if(self.listData.length > 500){
                            self.listData = [];
                        } 
                        if(page.num == 1) self.listData = [];
                        let curPageData = res.data ;
                        self.listData = self.listData.concat(res.data);
                        self.toatFun();
                        self.mescroll.endBySize(curPageData.length,res.count); //必传参数(当前页的数据个数, 总数据量)
                    if(self.listData.length ==0){
                          layer.msg("暂无数据");
                       }
                    }, 'POST');
					
				},

        },
     
        mounted:function() {
				//创建MeScroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
				//解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
				var self = this;
				self.mescroll = new MeScroll(my_html_data.mainId, { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
					up: {
						callback: self.upCallback, //上拉回调
						isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
						lazyLoad: {
				        	use: true // 是否开启懒加载,默认false
				        }
						
					}
				});
				
		}
       
    })
})
 
</script>

这个滑动插件真的非常好用，感谢。放上他的链接吧。http://www.mescroll.com/index.html?v=191101