新人 记录VUE中分页实现

关于函数传值
this.getPurchaseHistoryData(index, num,timeType);第一位是显示的页数，第二是控制首页4上一页-1下一页是2末页是5 第三是是对昨天是1，今天是2，还是一段时间的控制传3，默认是0  
1.关于分页：（1）首页是4上一页是-1下一页是2末页是5，单机查询的时候是1（2）关于pageRecord 函数 currentRecord表示当前页数，showItemRecord表示共⑤页（3）current >= showItem和else{}是用来显示页数是怎么显示的（这个我也有点蒙主要看看pag数组里的）
（4）从后台接收总页数 附在allpageRecord（5）传值的时候将 index传 给pageNumber 显示页码
<body>
<!--内容区-->
<div id="membersShipCard">
    <!--店铺收入数据-->
    <div class="box-body table-responsive">
        <div class="box-header" style="padding-left: 0;">
            <h3 class="box-title" style=" line-height: 43px;">店铺收入数据</h3>
            <div class="box-tools"  style="    left: 128px;">
                <ul class="nav navbar-nav">
                    <li class="dropdown messages-menu">
                        <a href="javascript:void(0)" class="sidebar-toggle a"
                           v-on:click="storeRevenue(1)">昨天</a>
                    </li>
                    <li class="dropdown messages-menu">
                        <a href="javascript:void(0)" class="sidebar-toggle"
                           v-on:click="storeRevenue(2)">今天</a>
                    </li>
                    <li class="dropdown messages-menu">
                        <a href="javascript:void(0)" class="sidebar-toggle"
                           v-on:click="storeRevenue(4)">总收入</a>
                    </li>

                </ul>
                <div class="input-group input-group-sm" style="padding: 7px;width: 150px;">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input placeholder="选择时间" style="    width: 204px;" type="text" class="layui-input" id="shopTime" />
                </div>

            </div>
        </div>
        <ul class="dataAll"
            style="width: 100%;padding: 25px 50px 25px 50px;display: flex;justify-content: space-around;align-items: center;">
            <li class="item">
                <label>代金券销售金额 </label>
                <div>{{allPriceShop}}</div>
            </li>
            <li class="item">
                <label>核销后支付金额</label>
                <div>{{allRealPriceShop}}</div>
            </li>
            <li class="item">
                <label>店铺分成</label>
                <div>{{allRestaurantCommissionShop}}</div>
            </li>
            <li class="item">
                <label>搜城分成</label>
                <div>{{allOfficialCommissionShop}}</div>
            </li>

        </ul>
    </div>

    <!--核销记录-->
    <div class="box box-body table-responsive">
        <div class="box-header" style="padding-left: 0;">
            <h3 class="box-title" style="line-height: 43px;">核销记录</h3>
            <div class="box-tools"  style="    left: 128px;">
                <ul class="nav navbar-nav">
                    <li class="dropdown messages-menu">
                        <a href="javascript:void(0)" class="sidebar-toggle"
                           v-on:click="writeOffRecord(1,1,1)">昨天</a>
                    </li>
                    <li class="dropdown messages-menu">
                        <a href="javascript:void(0)" class="sidebar-toggle"
                           v-on:click="writeOffRecord(1,1,2)">今天</a>
                    </li>
                </ul>
                <div style="display: inline-block">
                    <form class="form-inline"
                          style="display: flex;justify-content: space-around;align-items: center;padding: 0px 50px;line-height: 43px;">
                        <div class="form-group">
                            <label style="text-align: center;">交易时间</label>
                            <input autocomplete="off" placeholder="选择时间" id="HX_date" type="text" name="table_search" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label style="text-align: center;">核销编号</label>
                            <input autocomplete="off" type="text" placeholder="输入订单编号" class="form-control" v-model="codeHX"/>
                        </div>
                        <div class="form-group">
                            <label style="text-align: center;">手机号</label>
                            <input autocomplete="off" type="text" placeholder="输入手机号" class="form-control" v-model="mobileHX"/>
                        </div>

                        <div class="form-group">
                            <button type="button" class="btn btn-block btn-primary"
                                    v-on:click="writeOffRecord(1,1,writeOffRecordNum)">查询
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>

        <div class="box-body table-responsive no-padding">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th v-for="item in writeOffRecordTitle" style="text-align: center;">{{item.typeName}}</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td colspan="11" class="noFound2 disNone"><div>当前暂无记录，您可查看其他的核销记录</div></td>
                </tr>

                <tr v-for="(item,index) in writeOffRecordData">
                    <td style="text-align: center;">{{index+1}}</td>
                    <td style="text-align: center;">{{item.gmtCreate}}</td>
                    <td style="text-align: center;">{{item.code}}</td>
                    <td style="text-align: center;">{{item.wxNickName}}</td>
                    <td style="text-align: center;">{{item.mobile}}</td>
                    <td style="text-align: center;">{{item.vouchersName}}</td>
                    <td style="text-align: center;">{{item.amount/100}}</td>
                    <td style="text-align: center;">{{item.deductionPrice/100}}</td>
                    <td style="text-align: center;">{{item.price/100}}</td>
                    <td style="text-align: center;">{{item.usedVouchersNum}}</td>
                    <td style="text-align: center;">{{item.realPrice/100}}</td>

                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="writeOffRecord" class="main-footer"
         style="margin-left: 0;display: flex;justify-content: flex-end;align-items: center;    border-top: 0px solid #d2d6de;">
        <!--<div v-show="allpage.length >1" style="float: right;margin-right: 10px;" class="pagination">-->
        <!--当前第{{current}}页,共{{allpage}}页-->
        <!--</div>-->
        <ul style="float: right;margin:20px 0" class="pagination">
            <li v-on:click="(currentRecord != 1)? writeOffRecord(1,4,writeOffRecordNum):‘‘"><a
                    href="javascript:void(0);">首页</a>
            </li>
            <li v-on:click="(currentRecord != 1)? writeOffRecord(currentRecord--,-1,writeOffRecordNum):‘‘"><a
                    href="javascript:void(0);">上一页</a>
            </li>
            <li v-for="index in pageRecord" v-on:click="writeOffRecord(index,0,writeOffRecordNum)"
                v-bind:class="{‘active‘:currentRecord == index}" v-bind:key="index">
                <a href="javascript:void(0);">{{index}}</a>
            </li>
            <li v-on:click="(allpageRecord != currentRecord) ? writeOffRecord(currentRecord++,2,writeOffRecordNum):‘‘"><a
                    href="javascript:void(0);">下一页</a>
            </li>
            <li v-on:click="(allpageRecord != currentRecord)?writeOffRecord(allpageRecord,5,writeOffRecordNum):‘‘"><a
                    href="javascript:void(0);">末页</a></li>
        </ul>
    </div>
</div>
<!--</div>-->
<!-- jQuery 3 -->
<script src="/js/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/js/bootstrap.min.js"></script>
<script th:inline="javascript">
    new Vue({
        el: "#membersShipCard",
        data: {
            current: 1,
            showItem: 5,
            allpage: 1,
            currentRecord: 1,
            showItemRecord: 5,
            allpageRecord: 1,

            xm: 0,
            saleTitle:[
                {typeName: ‘序号‘},
                {typeName: ‘交易时间‘},
                {typeName: ‘代金券编号‘},
                {typeName: ‘昵称‘},
                {typeName: ‘手机号‘},
                {typeName: ‘代金券名称‘},
                {typeName: ‘代金券价格‘},
                {typeName: ‘购买张数‘},
                {typeName: ‘官方（搜城天下）抽成（元）‘},
                {typeName: ‘店铺抽成（元）‘},
            ],
            writeOffRecordTitle:[
                {typeName: ‘序号‘},
                {typeName: ‘交易时间‘},
                {typeName: ‘核销编号‘},
                {typeName: ‘昵称‘},
                {typeName: ‘手机号‘},
                {typeName: ‘代金券名称‘},
                {typeName: ‘消费总金额（元）‘},
                {typeName: ‘代金券抵扣金额（元）‘},
                {typeName: ‘代金券售卖金额（元）‘},
                {typeName: ‘使用张数‘},
                {typeName: ‘优惠后支付‘},

            ],
            purchaseHistoryData: [],
            code: ‘‘,  //查询
            mobile: ‘‘, //手机号
            beginDate: ‘‘,
            endDate: ‘‘,
            allOfficialCommission: ‘‘,
            allPrice: ‘‘,
            allRealPrice: ‘‘,
            allRestaurantCommission: ‘‘,
//
            timeType:1,//日期
            pageStart:0,
            pageSize:0,
            restaurantId:0,
            soldAllNum:0,
            cancelAllAmount:0,
            soldAllAmount:0,
            cancelAllNum:0,
            noCancelAllNum:0,
            timeNum:0,

//核销
            mobileHX:‘‘,
            codeHX:‘‘,
            writeOffRecordData: [],
            writeOffRecordNum:"",
            indexNum:1

        },
        filters: {},
//        数据初始化
        mounted: function () {
            this.getPurchaseHistoryData(1, 1, 0);
            this.storeRevenue(2);
            this.writeOffRecord(1,1,0)
            var this_ = this;
            layui.use(‘laydate‘, function () {
                var laydate = layui.laydate;
                laydate.render({
                    elem: ‘#jt_date‘,//指定元素;
                    type: ‘date‘,
                    theme: ‘3c8dbc‘,
                    range: ‘~‘,
                    max: new Date().valueOf(),
                    done: function (value, date, endDate) {
                        value = value.split(‘~‘);
                        this_.beginDate = value[0];
                        this_.endDate = value[1];
                        if(value==""){
                            this_.getPurchaseHistoryData(1, 1,2)
                        }else{
                            this_.getPurchaseHistoryData(1, 1,3)
                        }

                    }
                });
                             //核销
                laydate.render({
                    elem: ‘#HX_date‘,//指定元素;
                    type: ‘date‘,
                    theme: ‘3c8dbc‘,
                    range: ‘~‘,
                    max: new Date().valueOf(),
                    done: function (value, date, endDate) {
                        value = value.split(‘~‘);
                        this_.beginDate = value[0];
                        this_.endDate = value[1];
                        if(value==""){
                            this_.writeOffRecord(1, 1,2)
                        }else{
                            this_.writeOffRecord(1, 1,3)
                        }
                    }
                });

            });

        },
        computed: {
            pages: function () {
                var pag = [];
                var current = this.current;
                var showItem = this.showItem;
                if (current >= showItem) { //如果当前的激活的项 小于要显示的条数
                    //总页数和要显示的条数那个大就显示多少条
                    var middle = this.current - Math.floor(this.showItem / 2),//从哪里开始
                        i = this.showItem;
                    if (middle > (this.allpage - this.showItem)) {
                        middle = (this.allpage - this.showItem) + 1
                    }
                    while (i--) {
                        pag.push(middle++);
                    }
                } else { //当前页数大于显示页数了
                    var i = Math.min(this.showItem, this.allpage); //显示数据中低的那个
                    while (i) {
                        pag.unshift(i--);
                    }
                }
                console.log("销售记录"+current,showItem)
                return pag
            },
            pageRecord: function () {
                var pag = [];
                var currentRecord = this.currentRecord;
                var showItemRecord = this.showItemRecord;
                if (currentRecord >= showItemRecord) { //如果当前的激活的项 小于要显示的条数
                    //总页数和要显示的条数那个大就显示多少条
                    var middle = this.currentRecord - Math.floor(this.showItemRecord / 2),//从哪里开始
                        a = this.showItemRecord;
                    console.log("大于"+middle)
                    if (middle > (this.allpageRecord - this.showItemRecord)) {
                        middle = (this.allpageRecord - this.showItemRecord) + 1
                    }
                    while (a--) {
                        pag.push(middle++);
                    }
                } else { //当前页数大于显示页数了
                    var a = Math.min(this.showItemRecord, this.allpageRecord);
                    console.log("当前页大于显示页数"+a)
                    while (a) {
                        pag.unshift(a--);
                    }
                }
                console.log(pag)
                console.log("最后页码"+currentRecord,showItemRecord)
                return pag
            }
        },
        methods: {
            getPurchaseHistoryData: function (index, num,timeType ) {
                if(this.code!=""||this.mobile!=""){
                    timeType = 4;
                    index =1;
                }
                console.log("show"+index, num,timeType)
                if(timeType==null){
                    timeType:this.timeType
                }
                if (index==null){
                    index:this.index
                }
                var this_ = this;
                if (timeType!=null){
                    this_.timeNum=timeType
                }

                if (num == 2) {
                    index = index + 1;
                } else if (num == -1) {
                    index = index - 1;
                }
                else if (num == 1) {
                    index = index
                    this.current = index;
                } else if (num == 0) {
                    if (index == this_.current) return;
                    this.current = index;
                } else if (num == 4) {
                    this_.current = 1;
                    index = index;
                } else if (num == 5) {
                    this_.current = this_.allpage;
                    index = index;
                }

                var dataStr = { };
                if (timeType==3){
                    dataStr.beginDate = this.beginDate;
                    dataStr.endDate = this.endDate;
                    dataStr.timeType = timeType;
                }else{
                    dataStr.beginDate = "";
                    dataStr.endDate = "";
                    dataStr.timeType = timeType;
                }

                dataStr = JSON.stringify({
                    pageNumber: index,
                    code: this.code,
                    mobile: this.mobile,
                    beginDate: this.beginDate,
                    endDate: this.endDate,
                    timeType:timeType,
                    pageStart:0,
                    pageSize:0,
                    restaurantId:this.restaurantId,
                });
                console.log(dataStr)

//                销售记录
                $.ajax({
                    type: ‘post‘,
                    contentType: ‘application/json‘,
                    url: ‘/v1/business/searchcity/voucherCancle/voucherBuyRecord‘,
                    data: dataStr,
                    success: function (res) {
                        console.log(res);

                        if(res.status ==-1999){
                            $(".noFound").removeClass("disNone")
                        }else{
                            $(".noFound").addClass("disNone")
                        }

                        this_.purchaseHistoryData = res.data.result;
                        this_.allpage = res.data.pageCount;
                        this_.allOfficialCommission = res.data.allOfficialCommission;
                        this_.allPrice = res.data.allPrice;
                        this_.allRealPrice = res.data.allRealPrice;
                        this_.allRestaurantCommission = res.data.allRestaurantCommission;
//                        yz
                        this_.soldAllNum = res.data.soldAllNum;
                        this_.soldAllAmount = res.data.soldAllAmount;
                        this_.cancelAllNum = res.data.cancelAllNum;
                        this_.cancelAllAmount = res.data.cancelAllAmount;
                        this_.noCancelAllNum = res.data.noCancelAllNum;

                    },
                    error: function (res) {
                        alert("获取失败")
                    }
                });
            },

//核销记录
//
            writeOffRecord:function(index,num,timeSelection){
                if(this.codeHX!=""||this.mobileHX!=""){
                    timeSelection = 4;
                    index=index;
                }
                console.log("efgh"+index,num,timeSelection)
                var this_ = this;
                if (timeSelection!=null){
                    this_.writeOffRecordNum=timeSelection
                }
                if(timeSelection==null){
                    timeSelection:this.timeSelection
                }
//                if (index==null){
//                    index:this.index
//                }
                if (num == 2) {
                    index = index + 1
                } else if (num == -1) {
                    index = index - 1
                }
                else if (num == 1) {
                    this_.currentRecord = 1;
//                    index= index  注释了

                } else if (num == 0) {
                    if (index == this_.currentRecord) return;
                    this.currentRecord = index;
                } else if (num == 4) {
                    this_.currentRecord = 1;
                    index = index;
                } else if (num == 5) {
                    this_.currentRecord = this_.allpageRecord;
                    index = index;
                }
                var dataSucc = { };
                if (timeSelection==3){
                    dataSucc.beginDate = this.beginDate;
                    dataSucc.endDate = this.endDate;
                    dataSucc.timeType = timeSelection;
                }else{
                    dataSucc.beginDate = "";
                    dataSucc.endDate = "";
                    dataSucc.timeType = timeSelection;
                }
                dataSucc = JSON.stringify({
                    pageNumber: index,
                    code: this.codeHX,
                    mobile: this.mobileHX,
                    beginDate: this.beginDate,
                    endDate: this.endDate,
                    timeType:timeSelection,
                    pageStart:0,
                    pageSize:0,
                    restaurantId:this.restaurantId,
                });
                console.log(dataSucc)

                $.ajax({
                    type: ‘post‘,
                    contentType: ‘application/json‘,
                    url: ‘/v1/business/searchcity/voucherCancle/voucherCancleRecord‘,
                    data: dataSucc,
                    success: function (res) {
                        console.log(res);
                        if (res.status ==-1999){
                            $(".noFound2").removeClass("disNone")
                        }else{
                            $(".noFound2").addClass("disNone")
                        }
                        this_.writeOffRecordData=res.data.result;
                        this_.allpageRecord = res.data.pageCount;

                    },
                    error: function (res) {
                        alert("获取失败")
                    }
                });
            },
        },

    })
</script>
</body>
</html>

原文地址：https://www.cnblogs.com/zhenga/p/9687187.html

时间： 2024-10-14 15:50:05

新人 记录VUE中分页实现的相关文章

问题记录---关于posiition脱离文档流及vue中this.$route信息

1.关于position:fixed会脱离文档流 简单例子: 原型有三个div盒子: 将剥box1设置为position:fixed后 从上图可以看出:box1脱离了文档流,且层级显示优先于正常文档,他们之间的层级关系是:z-index负数<正常<float(和文档同级)<position<z-index正数 要使得box2及之下显示正常:要使fixed定位的left和top为0,固定到窗口顶部,是box2的margin-top设置为box1的height <!DOCTYPE

阿里矢量图的应用--flex布局--vue中$router和$route的方法

1.阿里矢量图字体图标的用法 2.flex布局 display:flex:设置父容器为伸缩盒子,会使每一个子元素自动变成伸缩项 接着设置子元素主轴方向上的排列方式 justify-content: flex-start让子元素从父容器的起始位置开始排列: flex-end:让子元素从父容器的结束位置开始排列: ? center:让子元素从父容器的中间位置开始排列: ? space-between:左右对齐父容器的开始和结束,中间平均分页,产生相同的间距: ? space-around:将多余的空

ASP.NET中分页显示

分页详解,ASP.NET书本  "数据空间应用" (1)使用GridView控件分页显示 步奏:1.添加GridView控件 2.将GrideView控件的AllowPaging属性设置为True,表示允许分页  3.将PageSize属性设置一个数字,用来控制每页中显示的记录数 4.最后在GridView控件的PageIndexChanging事件中设置GridView控件的PageIndex属性为当前页的索引值,并重新绑定GridView控件 (2)DataList控件中的数据 u

基于Vue封装分页组件

使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-sel

vue中$watch源码阅读笔记

项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单的$watch: 1 const v = new Vue({ 2 data:{ 3 a: 1, 4 b: { 5 c: 3 6 } 7 } 8 }) 9 // 实例方法$watch,监听属性"a" 10 v.$watch("a",()=>console.log(&

yii中分页功能的使用

CDbCriteria就是这个类包的使用,这个类包是yii自带专门用来处理类似分类这样的功能的.而我们使用yii框架然后调用这个方法会起到事半功倍的效果,会发现使用这个能够节省很多的时间,让你快速的使用PHP中分页的功能. 还要使用的一个类包就是CPagination,具体的元素属性就不解释了,可以直接连接过去看API 第一步: 在控制器里面加上一下的代码: $criteria = new CDbCriteria(); $criteria->alias = 'post';//要查询表的别名 $c

vue中如何实现数据的双向绑定

vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this.value;会导致循环调用set方法,所以要借助中间对象的形式把值赋给中间对象,获取obj.name的时候我们获取中间对象的最新值即可 let obj = {name:'zhufeng',age:9};//数据 let temp = {name:"lily"};//借助中间对象 let

vue中解决时间在ios上显示NAN的问题

最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:00:59这种"-"连接符. 网上的解决是: var data = '2018-09-01 12:00:00' var time= Date.parse(new Date(data )) 然后用正则匹配改一下,将-替换为/ var date = '2018-09-01 12:00:00' v

vue中assets和static的区别

Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点 不相同点: assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化.而压缩后的静态资源文件最终也都会放置在s