详情页面（tab切换、动态数据展示（左/中/右）、页面底部标签固定）

最新推荐文章于 2022-07-28 13:19:11 发布

原创最新推荐文章于 2022-07-28 13:19:11 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了一个包含收款详情展示及退款功能的Web页面实现，包括前端页面布局、交互设计及后端逻辑处理，展示了如何通过Ajax进行退款操作并实时更新页面信息。

效果图

toRecordInfoPage.html

<#assign base=base.contextPath />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<link rel="stylesheet" href="../../h5-web/resources/jquery-weui/dist/lib/weui.min.css">
<link rel="stylesheet" href="../../h5-web/resources/jquery-weui/dist/css/jquery-weui.css">
<style type="text/css">
    body {
        background:#fff;
        font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size:12px;
    }
    #top{
        position:fixed;
        top: 0px;
        left: 0px;
        z-index:5;
        width:100%;
        background:#fff;
    } 
    .go-back {
        height: 30px;
        width: 100%;
        text-align: left;
        background-color: #46A3FF;
        padding: 5px 5px;
    }
    .go-back input {
        width: 2.8rem;
        height: 1.5rem;
        line-height: 19px;
        border: 1px solid #ccc;
        font-size: 17px;
        background: #ffffff;
        color: #000000;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }
    .div_class{
        height:40px;
        position:relative;
        border-bottom:1px solid #F0F0F0;
    }
    .desc{
        position:absolute;
        top:10px;
        left:10px;
        line-height: 19px;
        height: 19px;
        font-size:17px;
    }
    .result{
        position:absolute;
        top:10px;
        right: 10px;
        line-height: 19px;
        height: 19px;
        font-size:17px;
    }
    #container{
        height: 40px;
        width: 96%;
        background-color: #FF0000;
        line-height: 40px;
        font-size: 17px;
        position: absolute;
        bottom: 5px;
        text-align: center;
        left: 2%;
        border-radius:5px;
        color:#FFFFFF;
    }
</style>
</head>
<body ontouchstart>
<div id="top">
    <div class="go-back">
        <input name="back" type="button" value="返回" onclick="goBack()"/>
    </div> 
    <div class="div_class">
        <div id="moneyDesc" class="desc"></div>
        <div id="amount" class="result"></div>
    </div>
     <div class="div_class">
        <div id="typeDesc" class="desc">支付方式</div>
        <div id="type" class="result">微信</div>
    </div>
     <div class="div_class">
        <div id="timeDesc" class="desc"></div>
        <div id="orderTime" class="result"></div>
    </div>
     <div class="div_class">
        <div id="orderDesc" class="desc"></div>
        <div id="orderId" class="result"></div>
    </div>
</div>
<div id='id' style="display: none;"></div>
<div id='container' onclick="refund()">退款</div>

<script type="text/javascript" src="../../h5-web/resources/js/jquery/jquery-3.2.1.min.js" charset="utf-8"></script>
<script type='text/javascript' src='../../h5-web/resources/jquery-weui/dist/lib/fastclick.js' charset='utf-8'></script>
<script type='text/javascript' src='../../h5-web/resources/jquery-weui/dist/js/jquery-weui.min.js' charset='utf-8'></script>
<script type="text/javascript" src="../../h5-web/resources/js/swiper/swiper.min.js" charset="utf-8"></script>
<script type="text/javascript" src = 'http://webapi.amap.com/maps?v=1.4.0&key=c22c7110f5cb7b62e26df01c3d972627&plugin=AMap.CitySearch'></script>
<script type='text/javascript' src='../../h5-web/resources/js/base64.min.js' charset='utf-8'></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
  <script type='text/javascript'>
    var id = "${id!''}";
    var amountType = "${amountType!''}";
    var amount = "${amount!''}";
    var refundFlag = "${refundFlag!''}";
    var orderId = "${orderId!''}";
    var orderTime = "${orderTime!''}";
    
    $(document).ready(function(){
        $('#id').html(id);
        $('#moneyDesc').html(amountType + '金额');
        $('#amount').html(amount);
        $('#timeDesc').html(amountType + '时间');
        $('#orderTime').html(orderTime);
        $('#orderDesc').html(amountType + '交易号');
        $('#orderId').html(orderId);
        if('0' == refundFlag) {
            $('#container').hide();
        } else {
            $('#container').show();
        }
    });

    // 返回
    function goBack() {
        location.href = "${base}/integral/toBusinessIncomePage";
    }

    //退款
    function refund() {
        $.ajax({  
            type: "POST",
            dataType: "json",
            url: "${base}/integral/refund",
            data:{id:id},
            cache : false,
            async : false,
            success: function(data){
                $.toast(data.codeMsg);
            },error:function(data){
                $.toast("网络连接超时");
            }
        });
    }
</script>
  
</body>
</html>

后端代码（具体逻辑代码略）

    /**
     * 跳转收款详情页面
     * @param id 商铺分账收款id
     * @return 收款页面
     * @author sucb
     * @date 2019-12-19
     */
    @RequestMapping(value = "toRecordInfoPage", method = RequestMethod.GET)
    public Object toRecordInfoPage(@RequestParam("id") String id) {
        ModelAndView mv = null;
        try {
            mv = new ModelAndView();
            Map<String,Object> data = integralService.getRecordDetail(id);
            mv.addObject("id", data.get("id"));
            mv.addObject("amountType", data.get("amountType"));
            mv.addObject("amount", data.get("amount"));
            mv.addObject("refundFlag", data.get("refundFlag"));
            mv.addObject("orderId", data.get("orderId"));
            mv.addObject("orderTime", data.get("orderTime"));
            mv.setViewName("/web/integral/businessIncomeDetail");
        } catch (Exception e) {
            mv = new ModelAndView("/web/common/reloading");
        }
        return mv;
    }

    /**
     * 退款
     * @param id 记录id
     * @return 退款结果
     * @author sucb
     * @date 2019-12-20
     */
    @RequestMapping(value = "refund", method = RequestMethod.POST)
    @ResponseBody
    public Object refund(@RequestParam("id") String id) {
        try {
            int rd=Math.random()> 0.5 ? 1 : 0;//模拟退款
            String msg = "退款失败";
            if(1 == rd) {
                msg = "退款成功";
            }
            return actionSuccessResultToJson(msg, null);
        } catch (Exception e) {
            e.printStackTrace();
            String msg = e.getMessage();
            if ("".equals(msg)) {
                msg = "获取数据失败";
            }
            return actionFailResultToJson(msg, null);
        }
    }

如果有写的不对的地方，请大家多多批评指正，非常感谢！