Skip to content

H
hms

Evan Liu / hms

通知 10
Star 5
Fork 0
H
hms

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
unpaidList.jsp 14.0 KB
Newer Older
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 
<%--
  Created by IntelliJ IDEA.
  User: liuxing
  Date: 2021/8/16
  Time: 10:03
  File：unpaidList.jsp
  Email: liuxing997@foxmail.com
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>未缴费列表｜酒店后台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
刘
格式化代码、新增注释、修改注释、优化部分页面表单校验方式  
刘兴 已提交
20 
    <%--  引入公共样式和脚本文件  --%>
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
21 
    <jsp:include page="common.jsp"/>
刘
格式化代码、新增注释、修改注释、优化部分页面表单校验方式  
刘兴 已提交
22 
    <%--  引入支付模态框样式  --%>
刘
优化代码、新增支付宝回调更新订单信息  
刘兴 已提交
23 
    <link rel="stylesheet" href="css/alipay.css">
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">缴费管理</a>
                <a>
                    <cite>未缴费列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <%--搜索和新增模块--%>
                <div class="layui-card-body ">
                    <script type="text/html" id="unpaidToolBar">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5" onsubmit="return false;">
                                <div class="layui-inline layui-show-xs-block">
刘
未缴费页面新增支付宝支付  
刘兴 已提交
48 49 
                                    <input type="text" id="searchUnPaidFeeNames"
                                           placeholder="请输入缴费ID、入住ID、顾客ID、房间ID、操作员ID"
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
50 51 52 53 54 55 56 57 58 59 60 61 62 63 
                                           autocomplete="off"
                                           class="layui-input" style="width: 300px;"></div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="sreach"
                                            lay-event="searchUnPaidFee">
                                        <i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                    </script>
                    <%--表格区域--%>
                    <table class="layui-hide" id="unpaid_list" lay-filter="unpaid_list"></table>
                    <%--操作按钮模块--%>
                    <script type="text/html" id="unpaid_list_bar">
刘
未缴费页面新增支付宝支付  
刘兴 已提交
64 65 
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="alipay">支付宝</a>
                        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="cashPayment">现金</a>
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
66 67 68 69 70 71 
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
刘
未缴费页面新增支付宝支付  
刘兴 已提交
72 73 
<!-- 支付宝支付模态框 -->
<div class="site-text" style="margin: 5%; display: none" id="aliPaymentModel">
刘
格式化代码、新增注释、修改注释、优化部分页面表单校验方式  
刘兴 已提交
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 
    <form name=alipayment action="alipay" method="post"
          target="_blank">
        <div id="body1" class="show" name="divcontent">
            <dl class="content">
                <dt>缴费ID ：</dt>
                <dd>
                    <input id="FeeID" name="FeeID" readonly disabled/>
                </dd>
                <hr class="one_line">
                <dt>商户订单号 ：</dt>
                <dd>
                    <input id="WIDout_trade_no" name="WIDout_trade_no" readonly disabled/>
                </dd>
                <hr class="one_line">
                <dt>订单名称 ：</dt>
                <dd>
                    <input id="WIDsubject" name="WIDsubject" readonly disabled/>
                </dd>
                <hr class="one_line">
                <dt>付款金额 ：</dt>
                <dd>
                    <input id="WIDtotal_amount" name="WIDtotal_amount" readonly disabled/>
                </dd>
                <hr class="one_line">
                <dt>商品描述：</dt>
                <dd>
                    <input id="WIDbody" name="WIDbody" placeholder="请输入商品描述，默认：房费"/>
                </dd>
                <hr class="one_line">
                <dt></dt>
                <dd id="btn-dd">
刘
未缴费页面新增支付宝支付  
刘兴 已提交
105 106 
						<span class="new-btn-login-sp">
							<button class="new-btn-login" type="submit"
刘
格式化代码、新增注释、修改注释、优化部分页面表单校验方式  
刘兴 已提交
107 
                                    style="text-align: center;">确认付 款</button>
刘
未缴费页面新增支付宝支付  
刘兴 已提交
108 
						</span> <span class="note-help">如果您点击“付款”按钮，即表示您同意本次付款操作。</span>
刘
格式化代码、新增注释、修改注释、优化部分页面表单校验方式  
刘兴 已提交
109 110 111 112 
                </dd>
            </dl>
        </div>
    </form>
刘
未缴费页面新增支付宝支付  
刘兴 已提交
113 
</div>
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
114 
<!-- 现金支付模态框 -->
刘
未缴费列表实现现金支付功能  
刘兴 已提交
115 
<div class="site-text" style="margin: 5%; display: none" id="cashPaymentModel">
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
116 117 
    <form class="layui-form">
        <div class="layui-form-item">
刘
未缴费列表实现现金支付功能  
刘兴 已提交
118 
            <label for="cashFeeId" class="layui-form-label">缴费ID</label>
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
119 
            <div class="layui-input-block">
刘
未缴费页面新增支付宝支付  
刘兴 已提交
120 
                <input type="text" id="cashFeeId" readonly disabled autocomplete="off"
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
121 122 123 124 
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
刘
未缴费列表实现现金支付功能  
刘兴 已提交
125 
            <label for="cashEnterId" class="layui-form-label">入住ID</label>
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
126 
            <div class="layui-input-block">
刘
未缴费页面新增支付宝支付  
刘兴 已提交
127 
                <input type="text" id="cashEnterId" readonly disabled autocomplete="off"
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
128 129 130 131 
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
刘
未缴费列表实现现金支付功能  
刘兴 已提交
132 
            <label for="cashCoustomerId" class="layui-form-label">顾客ID</label>
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
133 
            <div class="layui-input-block">
刘
未缴费页面新增支付宝支付  
刘兴 已提交
134 
                <input type="text" id="cashCoustomerId" readonly disabled autocomplete="off"
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
135 136 137 138 
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
刘
未缴费列表实现现金支付功能  
刘兴 已提交
139 
            <label for="cashHouseId" class="layui-form-label">房间ID</label>
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
140 
            <div class="layui-input-block">
刘
未缴费列表实现现金支付功能  
刘兴 已提交
141 
                <input type="text" id="cashHouseId" readonly disabled autocomplete="off"
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
142 143 144 145 
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
刘
未缴费列表实现现金支付功能  
刘兴 已提交
146 
            <label for="cashDescription" class="layui-form-label">入住人数</label>
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
147 
            <div class="layui-input-block">
刘
未缴费列表实现现金支付功能  
刘兴 已提交
148 149 150 151 152 153 154 
                <input type="text" id="cashDescription" readonly disabled autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="cashUserId" class="layui-form-label">操作员ID</label>
            <div class="layui-input-block">
刘
未缴费页面新增支付宝支付  
刘兴 已提交
155 
                <input type="text" id="cashUserId" readonly disabled autocomplete="off"
刘
未缴费列表实现现金支付功能  
刘兴 已提交
156 157 158 159 160 161 162 
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="cashMoney" class="layui-form-label">待缴金额</label>
            <div class="layui-input-block">
                <input type="text" id="cashMoney" readonly disabled autocomplete="off"
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 
                       class="layui-input">
            </div>
        </div>
    </form>
</div>
<script>
    //表格事件
    layui.use('table', function () {
        let table = layui.table;
        table.render({
            elem: '#unpaid_list'
            , url: 'fee/queryByDirectNoPay'
            , toolbar: '#unpaidToolBar' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print']
            , cellMinWidth: 40
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.totalSize,
                    "data": res.data.list
                }
            }
            , title: '未缴费列表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'feeId', title: '缴费ID', align: "center"}
                , {field: 'enterId', title: '入住ID', align: "center", sort: true}
                , {field: 'direct', title: '状态', align: "center", sort: true}
                , {field: 'coustomerId', title: '顾客ID', align: "center", sort: true}
刘
未缴费列表实现现金支付功能  
刘兴 已提交
193 
                , {field: 'money', title: '待缴金额', align: "center", sort: true}
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
194 195 196 197 
                , {field: 'houseId', title: '房间ID', align: "center", sort: true}
                , {field: 'description', title: '描述', align: "center", sort: true}
                , {field: 'userId', title: '操作员ID', align: "center", sort: true}
                , {field: 'fee_type', title: '支付方式', align: "center", sort: true}
刘
未缴费页面新增支付宝支付  
刘兴 已提交
198 
                , {fixed: 'right', title: '确认支付', width: 160, align: "center", toolbar: '#unpaid_list_bar'}
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
199 200 201 202 203 204 205 206 207 
            ]]
            , page: true
            , limit: 10
            , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
        });

        //头工具栏事件
        table.on('toolbar(unpaid_list)', function (obj) {
            switch (obj.event) {
刘
格式化代码、新增注释、修改注释、优化部分页面表单校验方式  
刘兴 已提交
208 
                case 'searchUnPaidFee': //搜索未缴费信息
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
209 210 
                    table.reload('unpaid_list', {
                        url: 'fee/queryOneByIdNoPay',
刘
未缴费页面新增支付宝支付  
刘兴 已提交
211 
                        where: {id: $("#searchUnPaidFeeNames").val()},
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 
                        parseData: function (res) {
                            if (res.code === 0) {
                                return {
                                    "code": res.code,
                                    "msg": res.msg,
                                    "count": res.data.totalSize,
                                    "data": res.data.list
                                }
                            } else {
                                return {
                                    "code": res.code,
                                    "msg": res.msg,
                                    "count": 0,
                                }
                            }
                        }
                        , page: true
                        , limit: 10
                        , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
                    })
                    break;
            }
        });
        //监听行工具事件
        table.on('tool(unpaid_list)', function (obj) {
            let data = obj.data;
刘
未缴费页面新增支付宝支付  
刘兴 已提交
238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 
            if (obj.event === 'alipay') {//支付宝支付
                layer.open({
                    type: 1 //Page层类型
                    , skin: 'layui-layer-molv'
                    , area: '600px'
                    , title: ['支付宝支付', 'font-size:18px']
                    , btn: ['取消支付']
                    , shadeClose: true
                    , shade: 0
                    , maxmin: true
                    , content: $("#aliPaymentModel")  //弹窗路径
                    , success: function (layero, index) {
                        layer.iframeAuto(index)//自适应高度
                        $("#WIDsubject").val("顾客" + data.coustomerId + "的房费");
                        $("#WIDtotal_amount").val(data.money);
刘
支付宝支付时携带缴费ID  
刘兴 已提交
253 
                        $("#FeeID").val(data.feeId);
刘
未缴费页面新增支付宝支付  
刘兴 已提交
254 255 
                    }
                });
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
256 
            } else if (obj.event === 'cashPayment') { //现金支付
刘
未缴费列表实现现金支付功能  
刘兴 已提交
257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 
                layer.open({
                    type: 1 //Page层类型
                    , skin: 'layui-layer-molv'
                    , area: '600px'
                    , title: ['现金支付', 'font-size:18px']
                    , btn: ['已支付', '未支付']
                    , shadeClose: true
                    , shade: 0
                    , maxmin: true
                    , content: $("#cashPaymentModel")  //弹窗路径
                    , success: function (layero, index) {
                        layer.iframeAuto(index)//自适应高度
                        $('#cashFeeId').val(data.feeId);
                        $('#cashEnterId').val(data.enterId);
                        $('#cashCoustomerId').val(data.coustomerId);
                        $('#cashHouseId').val(data.houseId);
                        $('#cashDescription').val(data.description);
                        $('#cashUserId').val(data.userId);
                        $('#cashMoney').val(data.money);
                    }, yes: function (index, layero) {
                        $.ajax({
                            url: "fee/cashPayment",
                            dataType: "json",
                            data: {
刘
未缴费页面新增支付宝支付  
刘兴 已提交
281 
                                feeId: $("#cashFeeId").val(),
刘
未缴费列表实现现金支付功能  
刘兴 已提交
282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 
                            },
                            success: function (data) {
                                if (data.code === 200) {
                                    layer.msg(data.message, {icon: 1, time: 3000}, function () {
                                        layer.close(index);
                                        location.reload();
                                    });
                                } else {
                                    layer.msg(data.message + "请重试", {icon: 2, time: 3000});
                                }
                            },
                            error: function (err) {
                                layer.msg('服务器走丢啦！', {icon: 7, time: 3000});
                            }
                        });
                    }
                });
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
299 300 301 302 
            }
        });
    });
</script>
刘
未缴费页面新增支付宝支付  
刘兴 已提交
303 
<script>
刘
格式化代码、新增注释、修改注释、优化部分页面表单校验方式  
刘兴 已提交
304 
    //生成订单号
刘
未缴费页面新增支付宝支付  
刘兴 已提交
305 306 307 308 309 310 311 312 313 314 
    function GetDateNow() {
        var vNow = new Date();
        var sNow = "";
        sNow += String(vNow.getFullYear());
        sNow += String(vNow.getMonth() + 1);
        sNow += String(vNow.getDate());
        sNow += String(vNow.getHours());
        sNow += String(vNow.getMinutes());
        sNow += String(vNow.getSeconds());
        sNow += String(vNow.getMilliseconds());
刘
格式化代码、新增注释、修改注释、优化部分页面表单校验方式  
刘兴 已提交
315 
        $("#WIDout_trade_no").val(sNow);
刘
未缴费页面新增支付宝支付  
刘兴 已提交
316 
    }
刘
格式化代码、新增注释、修改注释、优化部分页面表单校验方式  
刘兴 已提交
317
刘
未缴费页面新增支付宝支付  
刘兴 已提交
318 319 
    GetDateNow();
</script>
刘
新增已缴费列表显示jsp页面unpaidList.jsp  
刘兴 已提交
320 321 
</body>
</html>