YwxAppThink/app/backend/view/card/index.html

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">充值卡密管理</div>
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="data-search-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="cardno" placeholder="卡号" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <select name="status">
                            <option value="">全部状态</option>
                            <option value="0">未售</option>
                            <option value="1">已售</option>
                            <option value="2">已兑换</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i class="layui-icon">&#xe615;</i> 搜索</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="btn-reset">重置</button>
                    </div>
                </div>
            </form>
            <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="tableBar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="dataCreate" data-perm="card:add"><i class="layui-icon">&#xe654;</i> 新增</button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="dataBatch" data-perm="card:add"><i class="layui-icon">&#xe674;</i> 批量生成</button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="dataDelete" data-perm="card:del"><i class="layui-icon">&#xe640;</i> 删除</button>
                    <button class="layui-btn layui-btn-sm" lay-event="dataRecybin" data-perm="card:restore"><i class="layui-icon">&#xe64b;</i> 回收站</button>
                </div>
            </script>
            <script type="text/html" id="dataBar">
                <a class="layui-btn layui-btn-xs" lay-event="update" data-perm="card:edit">编辑</a>
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete" data-perm="card:del">删除</a>
            </script>
            <script type="text/html" id="statusTpl">
                <input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-text="开|关" lay-filter="statusSwitch" {{ d.status == 1 ? 'checked' : '' }}>
            </script>
        </div>
    </div>
</div>

<script type="text/html" id="dataFormTpl">
    <form class="layui-form" id="wxapp-form" lay-filter="wxapp-form" style="padding:15px;">
        <input type="hidden" name="id" value="{{ d.id || '' }}">
            <div class="layui-form-item">
                <label class="layui-form-label">卡号</label>
                <div class="layui-input-block">
                    <input type="text" name="cardno" placeholder="请输入卡号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">面值</label>
                <div class="layui-input-block">
                    <input type="text" name="amount" placeholder="请输入面值" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" value="1" checked>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="text" name="sort" placeholder="请输入排序" class="layui-input">
                </div>
            </div>
    </form>
</script>

<script type="text/html" id="batchFormTpl">
    <form class="layui-form" id="wxapp-batch-form" lay-filter="wxapp-batch-form" style="padding:15px;">
        <div class="layui-form-item">
            <label class="layui-form-label">生成数量</label>
            <div class="layui-input-block">
                <input type="number" name="count" value="10" min="1" max="200" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">面值(元)</label>
            <div class="layui-input-block">
                <input type="number" name="amount" value="10" step="0.01" min="0.01" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">卡号前缀</label>
            <div class="layui-input-block">
                <input type="text" name="prefix" placeholder="可选，如 YX" class="layui-input">
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="batchResultTpl">
    <div class="layui-form" style="padding:10px;">
        <blockquote class="layui-elem-quote">已生成 {{ d.list.length }} 张卡密，请妥善保管：</blockquote>
        <table class="layui-table">
            <thead><tr><th>卡号</th><th>密码</th><th>面值</th></tr></thead>
            <tbody>
            {{# layui.each(d.list, function(i, item){ }}
                <tr><td>{{ item.cardno }}</td><td>{{ item.password }}</td><td>{{ d.amount }}</td></tr>
            {{# }); }}
            </tbody>
        </table>
    </div>
</script>

<script type="text/html" id="dataRecybinTpl">
    <table class="layui-hide" id="dataRecybinTable" lay-filter="dataRecybinTable"></table>
    <script type="text/html" id="dataRecybinBarTpl">
        <a class="layui-btn layui-btn-xs" lay-event="restore" data-perm="card:restore">恢复</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="forcedelete" data-perm="card:destroy">彻底删除</a>
    </script>
</script>
<script>
    layui.use('card', layui.factory('card'));
</script>