Android混合开发 mui例子之列表页(-)

kwlist.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!--标准mui.css-->
        <link rel="stylesheet" href="../../css/mui.css">
        <link rel="stylesheet" href="../../css/iconfont.css">
        <link rel="stylesheet" href="../../css/common.css">
        <!--App自定义的css-->
        <!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
        <style>
            .mui-table h4,
            .mui-table h5,
            .mui-table .mui-h5,
            .mui-table .mui-h6,
            .mui-table p {
                margin-top: 0;
            }
            
            .mui-table h4 {
                line-height: 21px;
                font-weight: 500;
            }
            
            .mui-table .oa-icon {
                position: absolute;
                right: 0;
                bottom: 0;
            }
            
            .mui-table .oa-icon-star-filled {
                color: #f14e41;
            }
            
            .padding {
                padding-right: 5px;
            }
            .select{
                 appearance:none;
                 -moz-appearance:none; 
                 -webkit-appearance:none;
                 outline: none;
                 border: none;
            }
            
            
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav commhead-backgroundcolor">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left commhead-textcolor" ></a>
            <h1 class="mui-title headtext-color commhead-textcolor" >货位库存查看</h1>
            <a class="mui-action-next  mui-pull-right commhead-right" >批号</a>
        </header>
        <div class="mui-content">
            
        </div>
    </body>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/mui.picker.js"></script>
    <script src="../../js/mui.picker.min.js"></script>
    <script>
        var jud=false;
        mui.init({
            swipeBack: true, //启用右滑关闭功能
            gestureConfig:{
                doubletap:true
            },
            subpages:[{
                url:'kwdetail.html',
                id:'kwdetail.html',
                styles:{
                    top: '45px',
                    bottom: '0px',
                }
            }]
        });


    document.querySelector('.mui-action-next').addEventListener('tap', function() {
            jud=!jud;
            if(jud)
            {
                this.text="名称";
            }else
            {
                this.text="批号";
            }
        });
        
        
    </script>

</html>

kwdetail.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!--标准mui.css-->
        <link rel="stylesheet" href="../../css/mui.css">
        <link rel="stylesheet" href="../../css/iconfont.css">
        <!--App自定义的css-->
        <!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
        <style>
            .mui-table h4,
            .mui-table h5,
            .mui-table .mui-h5,
            .mui-table .mui-h6,
            .mui-table p {
                margin-top: 0;
            }
            
            .mui-table h4 {
                line-height: 21px;
                font-weight: 500;
            }
            
            .mui-table .oa-icon {
                position: absolute;
                right: 0;
                bottom: 0;
            }
            
            .mui-table .oa-icon-star-filled {
                color: #f14e41;
            }
            
            .padding {
                padding-right: 5px;
            }
        </style>
    </head>

    <body>
        <!--下拉刷新容器-->
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--数据列表-->
                <ul id="list" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                    <li id="lihwm"></li>
                    <li v-for="item in items" v-if='item' class="mui-table-view-cell">
                        <div class="mui-table">
                            <div class="mui-table-cell mui-col-xs-12">
                                <div><span class="mui-h4">某某某屈臣氏苏打水330ml 1*24灌 8880:{{item.RETURN_PEOPLE_NAME}}</span></div>
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-6">
                                        <span class="mui-h5">规格:{{item.ALLOWED}}</span>
                                    </div>

                                    <div class="mui-table-cell mui-col-xs-6 ">
                                        <span class="mui-h5">数量:{{item.ALLOWED}}</span>
                                    </div>
                                    <div class="mui-table-cell mui-col-xs-6 ">
                                        <span class="mui-h5">件数:{{item.ALLOWED}}</span>
                                    </div>
                                    <div class="mui-table-cell mui-col-xs-6 ">
                                        <span class="mui-h5">描述:{{item.ALLOWED}}</span>
                                    </div>
                                </div>
                                <span class="mui-h5">批号:{{item.USED_CODE}}</span>

                            </div>

                        </div>
                    </li>

                </ul>
            
            </div>
        </div>
    </body>
    <script src="../../js/mui.min.js"></script>
    <script type="text/javascript" src="../../js/vue.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script>
        var pageIndex = 1;
        var list_Data;
        var vm = new Vue({
            el: '#list',
            data: {
                items: []
            }
        });

        mui.init({
            swipeBack: true, //启用右滑关闭功能
            pullRefresh: {
                container: '#pullrefresh',
                down: {
                    callback: pulldownRefresh
                },
                up: {
                    contentrefresh: '正在加载...',
                    callback: pullupRefresh
                }
            }
        });
        var where = {
            groups: [{
                    rules: [

                    ],
                    op: "or"
                },
                {
                    rules: [

                    ],
                    op: "and"
                }
            ],
            op: "and"
        }
        where.groups[0].rules.push({
            field: 'APPLY_PEOPLE',
            value: (localStorage.getItem("username")),
            op: 'equals'
        });
        where.groups[0].rules.push({
            field: 'RETURN_PEOPLE_NAME',
            value: (localStorage.getItem("username")),
            op: 'equals'
        });
        
        where.groups[1].rules.push({
            field: 'GSZD',
            value: (localStorage.getItem("GSZD")),
            op: 'equals'
        });
        where.groups[1].rules.push({
            field: 'IS_BACK',
            value: 1,
            op: 'notequal'
        });

        mui.plusReady(function() {
            console.log(JSON.stringify(where))
            plus.nativeUI.showWaiting();
            mui(".mui-table-view").on('tap', '.mui-table-view-cell',
                function() {
                    //                    openView();
                });
         document.getElementById('lihwm').innerHTML="<div id='divhwm' style='background-color:rgb(174,54,52);color: white;text-align: center; padding-top: 0.625rem;padding-bottom: 0.625rem;'>货位码:ZP-21-40</div>";
            Api_List({
                view: "TB_FDN_MATERIALS_RE_APPLY",
                pageIndex: pageIndex,
                orderName: "INSERT_TIME",
                orderSort: "DESC",
                whereString: JSON.stringify(where),
                success: function(data) {
                    list_Data = eval(data);
                    vm.$data.items = list_Data;
                    plus.nativeUI.closeWaiting();
                },
                error: function() {
                    plus.nativeUI.closeWaiting();
                }

            });

        })

        /**
         * 下拉刷新具体业务实现
         */
        function pulldownRefresh() {
            setTimeout(function() {
                pageIndex = 1;
                Api_List({
                    view: "TB_FDN_MATERIALS_RE_APPLY",
                    pageIndex: pageIndex,
                    orderName: "INSERT_TIME",
                    orderSort: "DESC",
                    whereString: JSON.stringify(where),
                    success: function(data) {
                        vm.$data.items = eval(data);
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                    },
                    error: function() {
                        mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                    }

                });

            }, 1500);
        }

        /**
         * 上拉加载具体业务实现
         */
        function pullupRefresh() {
            setTimeout(function() {

                pageIndex++;

                Api_List({
                    view: "TB_FDN_MATERIALS_RE_APPLY",
                    pageIndex: pageIndex,
                    orderName: "INSERT_TIME",
                    orderSort: "DESC",
                    whereString: JSON.stringify(where),
                    success: function(data) {
                        list_Data = eval(data);
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh((list_Data.length <= 0))
                        list_Data.forEach(function(obj) {
                            vm.$data.items.splice(0, 0, obj)
                        })
                    },
                    error: function() {
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(true)
                    }

                });

            }, 1500);
        }

        mui(".mui-table-view").on('tap', '.mui-table-view-cell', function() {
            //openView();
        })

        window.addEventListener("openview", function() {
            //openView();
        })
    </script>

</html>

依赖common.js

/**
 * @description 获取本地设置的服务器ip和port
 */
function GetServerInfo() {
    var serverIp = localStorage.serverIp;
    var serverPort = localStorage.serverPort;
    if(serverIp == null || serverPort == null)
        return ''
    return serverIp + ":" + serverPort;
}

/**
 *@description 加载list页 
 */
function Api_List(options) {
    mui.ajax('http://' + GetServerInfo() + '/Api/List', {
        data: {
            tb: options.view || "",
            pageIndex: options.pageIndex || "",
            orderName: options.orderName || "",
            orderSort: options.orderSort || "",
            whereString: options.whereString || ""
        },
        dataType: 'json', //服务器返回json格式数据
        type: 'get', //HTTP请求类型
        timeout: 10000, //超时时间设置为10秒;

        success: function(data) {
            //console.log(data)
            //            data = JSON.parse(data); 

            if(!data.IsError) {
                if(options.success != null || options.success != undefined) {
                    options.success.call(null, eval(data.Data));
                }
            } else {
                plus.nativeUI.toast(data.Message);
            }
        },
        error: function(xhr, type, errorThrown) {
            if(type == "timeout") {
                plus.nativeUI.toast("网络链接超时");
            } else {
                plus.nativeUI.toast("数据加载异常,请重试");
            }
            plus.nativeUI.toast("数据加载异常,请重试");
            if(options.error != undefined && options.error != null) {
                options.error.call(null, xhr, type, errorThrown)
            }
        }
    });
}

/**
 *@description 加载下拉框
 */
function Api_DropList(options) {
    mui.ajax('http://' + GetServerInfo() + '/Api/DropList', {
        data: {
            view: options.view || "",
            where: options.where || "",
            idfield: options.idfield || "",
            textfield: options.textfield || "",
            valueField: options.valueField || "",
            sortname: options.sortname || "",
            sortorder: options.sortorder || ""
        },
        crossDomain:true,
        dataType: 'json', //服务器返回json格式数据
        type: 'get', //HTTP请求类型
        timeout: 10000, //超时时间设置为10秒;

        success: function(data) {
            data = eval(data);
            if(!data.IsError) {
                if(options.success != null || options.success != undefined) {
                    options.success.call(null, eval(data.Data));
                }
            } else {
                plus.nativeUI.toast(data.Message);
            }

        },
        error: function(xhr, type, errorThrown) {
            if(type == "timeout") {
                plus.nativeUI.toast("网络链接超时");
            } else {
                plus.nativeUI.toast("数据加载异常,请重试");
            }
            plus.nativeUI.toast("数据加载异常,请重试");
            if(options.error != undefined && options.error != null) {
                options.error.call(null, xhr, type, errorThrown)
            }
        }
    });
}

/**
 *@description Ajax请求二次封装 带loading窗口
 */
function Ajax(options) {

    var wait_ico;
    if(plus != undefined && plus != null) {
        wait_ico = plus.nativeUI.showWaiting();
    }
    mui.ajax('http://' + GetServerInfo() + ((options.url || "").indexOf('/') == 0 ? (options.url || "") : ('/' + options.url || "/")), {
        data: options.data || "",
        dataType: 'json', //服务器返回json格式数据
        type: options.type || 'get', //HTTP请求类型
        timeout: options.timeout || 10000, //超时时间设置为10秒;
        headers: options.headers || "",
        crossDomain:true,
        success: function(data) {
            wait_ico.close();
            //console.log(data)
            data = JSON.parse(data);
            //console.log(data.IsError)
            if(!data.IsError) {
                if(options.success != null || options.success != undefined) {
                    options.success.call(null, data.Data);
                }
            } else {
                plus.nativeUI.toast(data.Message);
            }

        },
        error: function(xhr, type, errorThrown) {
            
            if(wait_ico != null && wait_ico != undefined) {
                wait_ico.close();
            }

            if(type == "timeout") {
                plus.nativeUI.toast("网络链接超时...");
            } else {
                plus.nativeUI.toast("数据加载异常,请重试");
            }

            if(options.error != undefined && options.error != null) {
                options.error.call(null, xhr, type, errorThrown)
            }
        }
    });

}

/**
 *@description Ajax请求二次封装 无loading窗口
 */
function AjaxAnsyc(options) {

    mui.ajax('http://' + GetServerInfo() + ((options.url || "").indexOf('/') == 0 ? (options.url || "") : ('/' + options.url || "/")), {
        data: options.data || "",
        dataType: 'json', //服务器返回json格式数据
        type: options.type || 'get', //HTTP请求类型
        timeout: options.timeout || 10000, //超时时间设置为10秒;

        success: function(data) {

            //console.log(data)
            data = JSON.parse(data);
            //console.log(data.IsError)
            if(!data.IsError) {
                if(options.success != null || options.success != undefined) {
                    options.success.call(null, data.Data);
                }
            } else {
                plus.nativeUI.toast(data.Message);
            }

        },
        error: function(xhr, type, errorThrown) {
//            console.log(errorThrown)
            if(type == "timeout") {
                plus.nativeUI.toast("网络链接超时");
            } else {
                plus.nativeUI.toast("数据加载异常,请重试");
            }
            if(options.error != undefined && options.error != null) {
                options.error.call(null, xhr, type, errorThrown)
            }
        }
    });

}

/**
 *@description 
 * 说明:JS时间Date格式化参数
 * 参数:格式化字符串如:'yyyy-MM-dd HH:mm:ss'
 * 结果:如2016-06-01 10:09:00
 */
Date.prototype.Format = function(fmt) {
    var o = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "H+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3) / 3),
        "S": this.getMilliseconds()
    };
    var year = this.getFullYear();
    var yearstr = year + '';
    yearstr = yearstr.length >= 4 ? yearstr : '0000'.substr(0, 4 - yearstr.length) + yearstr;

    if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (yearstr + "").substr(4 - RegExp.$1.length));
    for(var k in o)
        if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

/**
 *@description 
 * 说明:Json时间(/Date(1410019200000+0800)/)格式化
 * 参数:格式化字符串如:'yyyy-MM-dd HH:mm:ss'
 * 结果:如2016-06-01 10:09:00
 */
String.prototype.FormatJson = function(fmt) {

    var d = eval('new ' + (this.replace(/\//g, '')));
    

    var o = {
        "M+": d.getMonth() + 1,
        "d+": d.getDate(),
        "H+": d.getHours(),
        "m+": d.getMinutes(),
        "s+": d.getSeconds(),
        "q+": Math.floor((d.getMonth() + 3) / 3),
        "S": d.getMilliseconds()
    };
    var year = d.getFullYear();
    var yearstr = year + '';
    yearstr = yearstr.length >= 4 ? yearstr : '0000'.substr(0, 4 - yearstr.length) + yearstr;

    if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (yearstr + "").substr(4 - RegExp.$1.length));
    //console.log(fmt)
    for(var k in o)
        if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;

}

/*
 * @description 字符串转时间类型
 */
function ConvertToDate(strDate) {
    var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/,
        function(a) {
            return parseInt(a, 10) - 1;
        }).match(/\d+/g) + ')');
    return date;
}

 

posted @ 2020-07-09 10:03  萌橙  阅读(476)  评论(0编辑  收藏  举报