mui下拉上拉（明一）

時間 2019-12-09
標籤 mui 下拉简体版
原文原文鏈接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>訂單大廳</title>
        <link href="../../css/mui.min.css" rel="stylesheet" />
        <link href="../../fonts/iconfont.css" rel="stylesheet" />
        <link href="../../css/lm_reset.css" rel="stylesheet" />
        <link href="../../css/lm_pages.css" rel="stylesheet" />
    </head>
    <body class="lm_graybg">
        <!--頭部開始-->
        <header class="mui-bar mui-bar-nav bg_fff lm_head_zb">
            <h1 class="mui-title lm_head_zb_title">訂單大廳</h1>
        </header>
        <!--頭部結束-->
        <!--正文-主要內容-->
        <div class="mui-content lm_graybg">
            <div class="lm_w94 lm_mar_top15">
                <div>
                    <!--一個訂單-->
                    <div class="lm_task_list_li lm_task_ListC2 bg_fff lm_mar_bot15 lm_smallyj" v-for="(order,index) in order_list" :key="order.order_id">
                        <!--01-->
                        <div class="lm_task_list_num lm_li_pad04 lm_flex lm_flex_justBT lm_bor_bottom lm_f12" :data-order_id="order.order_id"
                         @click="orderDetail">
                            <div class="lm_task_list_l lm_c_666">
                                訂單號：{{order.order_sn}}
                            </div>
                            <div class="lm_task_list_r lm_c_999">
                                {{order.add_time}}
                            </div>
                        </div>
                        <!--01-->
                        <!--02-->
                        <div class="lm_task_listC lm_flex  lm_flex_col_c  lm_bor_bottom" :data-order_id="order.order_id" @click="orderDetail">
                            <!-- <div class="lm_task_date lm_c_666">
                                <div>12:00</div>
                                <div>前送達</div>
                            </div> -->
                            <div class="lm_task_con lm_bor_l" style="width:100%;">
                                <div class="lm_task_con_top ">
                                    <div class="lm_task_con_top_r">
                                        <div class="lm_task_con_li" v-for="(store,index) in order.store_list" :key="store.store_id+''+index">
                                            <span class="lm_c_fff lm_task_con_top_l">取</span><i>{{store.store_name}}</i>
                                        </div>
                                    </div>
                                </div>
                                <div class="lm_task_con_top " style="margin-top: 5px;">
                                    <div class="lm_task_con_top_r">
                                        <div class="lm_task_con_li">
                                            <span class="lm_c_fff lm_task_con_top_l">送</span><i class="lm_song">{{order.city}}{{order.district}}{{order.twon}}{{order.address}}</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="lm_task_money lm_mainc lm_f15 ">
                                &yen;<span class="lm_f15">66.00</span>
                            </div> -->
                        </div>
                        <!--02-->
                        <!--03-->
                        <div class="lm_task_jiedan lm_mar10_top lm_mar10_bot lm_juzhong">
                            <button type="button" class="lm_w100 lm_c_fff lm_mainbg" :data-order_id="order.order_id" @click="I_DO">接單</button>
                        </div>
                        <!--03-->
                    </div>
                    <!--一個訂單-->
                </div>
            </div>
        </div>
        <script src="../../js/mui.js"></script>
        <script src="../../js/vue.js"></script>
        <script src="../../js/domain.js"></script>
        <!--正文-主要內容-->
        <script type="text/javascript" charset="utf-8">
            mui.init({
                pullRefresh: {
                    container: ".lm_w94", //下拉刷新容器標識，querySelector能定位的css選擇器都可，好比：id、.class等
                    down: {
                        style: 'circle', //必選，下拉刷新樣式，目前支持原生5+ ‘circle’ 樣式
                        color: '#2BD009', //可選，默認「#2BD009」 下拉刷新控件顏色
                        height: '50px', //可選,默認50px.下拉刷新控件的高度,
                        range: '100px', //可選 默認100px,控件可下拉拖拽的範圍
                        offset: '0px', //可選 默認0px,下拉刷新控件的起始位置
                        auto: false, //可選,默認false.首次加載自動上拉刷新一次
                        callback: function() { //必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據
                            //重置下拉加載
                            mui('.lm_w94').pullRefresh().refresh(true);
                            //初始化列表
                            mainContainer.page = 1;
                            mainContainer.getOrderList();
                        }
                    },
                    up: {
                        height: 50, //可選.默認50.觸發上拉加載拖動距離
                        auto: false, //可選,默認false.自動上拉加載一次
                        contentrefresh: "正在加載...", //可選，正在加載狀態時，上拉加載控件上顯示的標題內容
                        contentnomore: '沒有更多數據了', //可選，請求完畢若沒有更多數據時顯示的提醒內容；
                        callback: function(){ //必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據；
                            mainContainer.page++;
                            mainContainer.getOrderList();
                        }
                    }
                }
            });
            //實例化vue對象
            var mainContainer = new Vue({
                el: ".mui-content",
                created: function() { var that = this; mui.plusReady(function() { that.getOrderList(); }); },
                data: {
                    order_list: [],
                    page: 1
                },
                methods: {
                    //獲取訂單列表
                    getOrderList: function() {
                        var that = this;
                        mui.ajax(domain + '/Home/Rider/getOrderList', {
                            data: {
                                token: plus.storage.getItem("token"),
                                page:this.page
                            },
                            dataType: 'json', //服務器返回json格式數據
                            type: 'post', //HTTP請求類型
                            timeout: 10000, //超時時間設置爲10秒；
                            success: function(data) {
                                if (data.status == 1) {
                                    if(that.page == 1){
                                        that.order_list = data.data;
                                        //結束下拉刷新
                                        mui(".lm_w94").pullRefresh().endPulldown();
                                    }
                                    else{
                                        that.order_list = that.order_list.concat(data.data);
                                    }
                                    //上拉加載樣式
                                    if(data.data.length < 10){
                                        //結束上拉加載
                                        mui(".lm_w94").pullRefresh().endPullupToRefresh(true);
                                    }else{
                                        //結束上拉加載
                                        mui(".lm_w94").pullRefresh().endPullupToRefresh(false);
                                    }
                                } else {
                                    that.order_list = [];
                                    //結束下拉刷新
                                    mui(".lm_w94").pullRefresh().endPulldown();
                                    //結束上拉加載
                                    mui(".lm_w94").pullRefresh().endPullupToRefresh(true);
                                    classifyStatus(data.status);
                                }
                            },
                            error: function(xhr, type, errorThrown) {
                                mui.toast("網絡異常，請從新嘗試", {
                                    type: "div"
                                });
                                //結束下拉刷新
                                mui(".lm_w94").pullRefresh().endPulldown();
                                //結束上拉加載
                                mui(".lm_w94").pullRefresh().endPullupToRefresh(true);
                            }
                        });
                    },
                    //訂單詳情頁
                    orderDetail(event) {
                        mui.openWindow({
                            id: 'task_detail.html',
                            url: './task_detail.html',
                            extras: {
                                order_id: event.currentTarget.dataset.order_id
                            }
                        });
                    },
                    //接單
                    I_DO(event) {
                        var that = this;
                        //嘗試接單
                        mui.ajax(domain + '/Home/Rider/riderAccepOrder', {
                            data: {
                                token: plus.storage.getItem("token"),
                                order_id: event.currentTarget.dataset.order_id
                            },
                            dataType: 'json', //服務器返回json格式數據
                            type: 'post', //HTTP請求類型
                            timeout: 10000, //超時時間設置爲10秒；
                            success: function(data) {
                                if (data.status == 1) {
                                    mui.toast(data.msg, {
                                        type: "div"
                                    });
                                    that.getOrderList();
                                } else {
                                    mui.toast(data.msg, {
                                        type: "div"
                                    });
                                    that.getOrderList();
                                }
                            },
                            error: function(xhr, type, errorThrown) {
                                mui.toast("網絡異常，請從新嘗試", {
                                    type: "div"
                                });
                            }
                        });
                    }
                }
            });
            //添加刷新列表的自定義事件,切換tap頁時使用
            window.addEventListener("refresh_page", function() {
                mainContainer.getOrderList();
            });
        </script>
    </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。