苹果CMS用户提现表单与提现记录模板开发教程

发布时间：2025-02-18共14人阅读

一、提现模板整体说明

苹果CMS用户提现功能分为在线提现提交表单和提现记录列表两大模块，统一存放于同一个模板文件中，实现用户自主申请提现、查看过往提现明细、删除记录等全套功能。模板自动读取网站积分兑换比例、最低提现额度、用户可用积分与冻结积分，实时换算可提现金额。

模板文件路径：html/user/cash.html

提现记录数据通过系统 $list 数组返回，使用 volist 标签循环遍历渲染列表。

二、用户提现申请表单源码

前端提现表单支持银行卡、支付宝、微信多种收款方式录入，自动展示站点提现规则与用户账户积分情况。搭配前端非空校验，避免空数据提交，通过AJAX异步提交至后台提现接口。

<form name="fm" method="post" action="">
    <p>1元等于{$GLOBALS['config']['user']['cash_ratio']}积分，最低提现金额：{$GLOBALS['config']['user']['cash_min']}元</p>
    <p>剩余{$GLOBALS['user']['user_points']}积分，相当于{$GLOBALS['user']['user_points']/$GLOBALS['config']['user']['cash_ratio']}元；冻结{$GLOBALS['user']['user_points_froze']}积分，相当于{$GLOBALS['user']['user_points_froze']/$GLOBALS['config']['user']['cash_ratio']}元；</p>
    银行名称：<input type="text" name="cash_bank_name"  placeholder="请输入开户行名称或支付宝微信" value="">
    银行账号：<input type="text" name="cash_bank_no" placeholder="请输入银行卡号或支付宝微信账号"  value="">
    收款姓名：<input type="text" name="cash_payee_name"  placeholder="请输入收款人姓名与上方账户对应"  value="">
    提现金额：<input type="text" name="cash_money"  placeholder="请输入提现金额"  value="">
    <input type="button" id="btn_submit" value="提交" style="margin: 5px;">
</form>

表单校验与AJAX提交脚本

脚本依次校验开户行、账号、姓名、提现金额是否为空，校验通过后序列化表单数据提交，提交过程切换按钮加载状态，操作完成弹窗提示并刷新页面同步最新数据。

<script>
$("#btn_submit").click(function() {
    var cash_bank_name = $('input[name="cash_bank_name"]').val();
    if(cash_bank_name==''){
        alert('请输入银行名称');
        return;
    }
    var cash_bank_no = $('input[name="cash_bank_no"]').val();
    if(cash_bank_no==''){
        alert('请输入银行账户');
        return;
    }
    var cash_payee_name = $('input[name="cash_payee_name"]').val();
    if(cash_payee_name==''){
        alert('请输入收款人姓名');
        return;
    }
    var cash_money = $('input[name="cash_money"]').val();
    if(cash_money==''){
        alert('请输入提现金额');
        return;
    }
    var data = $("#fm").serialize();
    $.ajax({
        url: "{:url('user/cash')}",
        type: "post",
        dataType: "json",
        data: data,
        beforeSend: function () {
            $("#btn_submit").css("background","#fd6a6a").val("loading...");
        },
        success: function (r) {
            alert(r.msg);
            if(r.code==1){
                location.href="{:url('user/cash')}";
            }
        },
        complete: function () {
            $("#btn_submit").css("background","#fa4646").val("提交");
        }
    });
});
</script>

三、提现记录列表展示源码

通过表格形式结构化展示用户全部提现记录，包含编号、提现积分、提现金额、审核状态、提交时间等字段，支持单选删除、批量删除、清空全部记录功能，状态自动判断展示。

<table width="770" border="0" cellspacing="1" cellpadding="0" class="table">
    <tr>
        <td width="66" height="36" align="center" valign="middle" bgcolor="#f7f7f7">选择</td>
        <td width="80" align="center" valign="middle" bgcolor="#f7f7f7">编号</td>
        <td width="100" align="center" valign="middle" bgcolor="#f7f7f7">提现积分</td>
        <td width="100" align="center" valign="middle" bgcolor="#f7f7f7">提现金额</td>
        <td width="100" align="center" valign="middle" bgcolor="#f7f7f7">状态</td>
        <td width="140" align="center" valign="middle" bgcolor="#f7f7f7">时间</td>
        <td width="80" align="center" valign="middle" bgcolor="#f7f7f7">操作</td>
    </tr>
    <form name="form1" method="post">
        {volist name="list"}
        <tr>
            <td height="36" align="center" valign="middle" bgcolor="#FFFFFF">
            <input type="checkbox" name="ids[]" value="{$vo.cash_id}"/></td>
            <td align="center" valign="middle" bgcolor="#FFFFFF">{$vo.cash_id}</td>
            <td align="center" valign="middle" bgcolor="#FFFFFF">{$vo.cash_points}</td>
            <td align="center" valign="middle" bgcolor="#FFFFFF">{$vo.cash_money}</td>
            <td align="center" valign="middle" bgcolor="#FFFFFF">{if condition="$vo.cash_status eq '1'"}已审核{else/}未审核{/if}</td>
            <td align="center" valign="middle" bgcolor="#FFFFFF">{$vo.cash_time|mac_day}</td>
            <td align="center" valign="middle" bgcolor="#FFFFFF"><a href="javascript:;" onclick="delData({$vo.cash_id},0)" class="delete">删除</a></td>
        </tr>
        {/volist}
    </form>
</table>

记录删除与清空JS脚本

封装通用删除方法，支持单条记录删除、批量选中删除、一键清空全部记录，删除成功后自动刷新列表，保证页面数据实时同步。

<script>
    function delData(ids,all){
        var msg ='删除';
        if(all==1){
            msg='清空';
        }
        if(confirm('确定要'+msg+'记录吗')){
            $.post("{:url('user/cash_del')}",{ids:ids,all:all},function(data) {
                if (data.code == '1') {
                    alert('删除成功');
                    location.reload();
                }else {
                    alert('删除失败：' + data.msg);
                }
            }, 'json')
        }
    }
    $("#btnClear").click(function(){
        delData('',1);
    });
    $("#btnDel").click(function(){
        var ids = MAC.CheckBox.Ids('ids[]');
        if(ids==''){
            alert("请至少选择一个数据");
            return;
        }
        delData(ids,0);
    });
</script>

四、模板功能要点

动态数据读取：自动读取后台提现比例、最低提现额度、用户可用与冻结积分，无需手动修改数值。
完整表单校验：对收款账户信息、提现金额进行非空判断，减少无效提交请求。
状态可视化：自动区分提现订单审核状态，时间字段通过 mac_day 标签智能格式化显示。
灵活删除机制：同时支持单条删除、批量删除、一键清空，适配不同管理需求。
原生接口适配：全程调用系统原生提现、删除接口，兼容官方程序逻辑，无功能冲突。

五、模板修改注意事项

表单 name 字段为后台接收参数，不可随意修改，否则会导致提现提交数据异常。
接口地址 user/cash、user/cash_del 为系统固定路由，禁止自定义更改。
按钮ID、复选框名称需与JS选择器保持一致，否则删除、提交功能会失效。
页面样式可自由美化调整，不影响提现核心交互逻辑。

苹果cms教程