陈战涛
2023-03-14 c29ed2aa867b00eccfdc7c3a68f431008b13ea7d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>申请记录</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="./css/mui.min.css" rel="stylesheet" />
        <style>
            .mui-bar-nav {
                background: #245ca7;
            }
            .mui-title {
               color: #FFFFFF;
            }
            .mui-icon-back:before, .mui-icon-left-nav:before {
                color: #FFFFFF;
            }
            
            .mui-content{
                margin: 0 6px;
            }
            .mui-content>.mui-table-view:first-child {
                margin-top: -1px;
            }
            .mui-table-view-chevron .mui-table-view-cell {
                padding-right: 0px;
            }
            .mui-col-xs-10 {
                width: 100%;
            }
            .mui-h4, h4 {
                font-size: 17px;
                font-weight: 600;
            }
            .first{
                color: #C7254E;
                font-size: 15px;
                float: right;
                margin-right: 20px;
            }
            .mui-h5, h5 {
                font-size: 14px;
                font-weight: 400;
                color: #333;
                margin: 10px 0;
            }
            .mui-table-view-cell p {
               color: #333;
            }
        </style>
    </head>
    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">申请记录</h1>
        </header>
        <div class="mui-content">
            <!--数据列表-->
            <ul id="listData" class="mui-table-view mui-table-view-chevron">
                <!-- <li class="mui-table-view-cell">
                    <div class="mui-table">
                        <div class="mui-table-cell mui-col-xs-10">
                            <h4 class="mui-ellipsis">2021-07-31 10:00<span class="first">待审核</span></h4>
                            <h5>业务类型:<span>门禁</span></h5>
                            <h5>所属分库:<span>黑土一分库</span></h5>
                            <h5>关联仓库:<span>1号仓库</span></h5>
                            <h5>有效开始时间:<span>2020-10-10 10:10</span></h5>
                            <h5>有效截止时间:<span>2020-10-10 10:10</span></h5>
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>
        <script src="./js/mui.js"></script>
        <script src="./js/jquery.min.js"></script>
        <script src="./js/echarts.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init();
            var url; //接口路径
            var dataList; //数据集合
            var data = {
                "interfaceId": "5703",
                "sign": "10703",
                "outId": "10703",
                "reqDateTime": new Date(),
                "tokenAuth": "",
                "data": {}
            };
            mui.plusReady(function() {
                var user = JSON.parse(localStorage.getItem('user'));
                data.tokenAuth = user.tokenAuth;
                url = user.url + "/api-phone/gateway";
                getOrderList();
            })
 
            //获取订单信息
            function getOrderList() {
                //发送请求
                mui.ajax(url, {
                    type: "POST",
                    dataType: "json",
                    crossDomain: true,
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(data),
                    success: function(result) {
                        if (result.code == "0000") {
                            dataList = result.data;
                            renderOrderList();
                        } else {
                            mui.alert(result.msg, '提示', ["确定"], function() {}, "div");
                        }
                    },
                    error: function() {
                        mui.alert('系统繁忙,请重试!', '提示', ["确定"], function() {}, "div");
                    }
                })
            }
            
            //页面渲染
            function renderOrderList() {
                var html = '';
                if (dataList != null && dataList.length > 0) {
                    $.each(dataList, function(index, item) {
                        html += '<li class="mui-table-view-cell"><div class="mui-table">';
                        html += '<div class="mui-table-cell mui-col-xs-10">';
                        html += '<h4 class="mui-ellipsis">' + item.applyTime;
                        html += '<span class="first">' + item.status + '</span></h4>';
                        html += '<h5>业务类型:<span>' + item.type + '</span></h5>';
                        html += '<h5>所属分库:<span>' + item.deptId + '</span></h5>';
                        html += '<h5>关联仓库:<span>' + item.depotId + '</span></h5>';
                        html += '<h5>有效开始时间:<span>' + item.start + '</span></h5>';
                        html += '<h5>有效截止时间:<span>' + item.end + '</span></h5>';
                        html += '</div></div></li>';
                    })
                } else {
                    mui.alert('暂无数据!', '提示', ["确定"], function() {}, "div");
                }
                $("#listData").html(html);
            }
        </script>
    </body>
</html>