YwxAppThink/addon/wxchat/view/backend/wxchattask/index.html

<div class="layui-card" style="margin:15px;">
    <div class="layui-card-header">任务赚钱管理</div>
    <div class="layui-card-body">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <input class="layui-input" name="keyword" placeholder="任务标题" autocomplete="off">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button type="button" class="layui-btn layui-btn-normal" id="addBtn">新增任务</button>
                </div>
            </div>
        </form>
        <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
    </div>
</div>

<script type="text/html" id="barTpl">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/html" id="statusTpl">
    {{# if(d.status == 1){ }}
        <span class="layui-badge layui-bg-green">启用</span>
    {{# } else { }}
        <span class="layui-badge">禁用</span>
    {{# } }}
</script>

<script type="text/html" id="formTpl">
<form class="layui-form" style="padding:20px;" id="taskForm" lay-filter="taskForm">
    <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="title" required lay-verify="required" placeholder="如：每日签到" class="layui-input" value="{{d.title||''}}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">任务类型</label>
        <div class="layui-input-block">
            <input type="text" name="type" required lay-verify="required" placeholder="daily/invite/profile" class="layui-input" value="{{d.type||''}}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">任务描述</label>
        <div class="layui-input-block">
            <input type="text" name="desc" class="layui-input" value="{{d.desc||''}}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">奖励金币</label>
        <div class="layui-input-inline">
            <input type="number" name="reward_coins" class="layui-input" value="{{d.reward_coins||0}}">
        </div>
        <label class="layui-form-label">目标值</label>
        <div class="layui-input-inline">
            <input type="number" name="target" class="layui-input" value="{{d.target||1}}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
            <input type="number" name="sort" class="layui-input" value="{{d.sort||0}}">
        </div>
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <input type="radio" name="status" value="1" title="启用" {{ d.status==undefined||d.status==1?'checked':'' }}>
            <input type="radio" name="status" value="0" title="禁用" {{ d.status==0?'checked':'' }}>
        </div>
    </div>
</form>
</script>

<script>
layui.use(['table','form','layer','laytpl','http', 'ywxapp'], function(){
    var table = layui.table, form = layui.form, layer = layui.layer, laytpl = layui.laytpl, $ = layui.$, http = layui.http;
    var base = '/wxchat/backend/task';

    var tableIns = table.render({
        elem: '#dataTable',
        url: base + '/index',
        page: true,
        limit: 15,
        cols: [[
            {field:'id', title:'ID', width:70},
            {field:'title', title:'标题'},
            {field:'type', title:'类型', width:100},
            {field:'reward_coins', title:'奖励金币', width:100},
            {field:'target', title:'目标值', width:80},
            {field:'participants', title:'参与人数', width:100},
            {field:'claimed', title:'已领取', width:80},
            {field:'sort', title:'排序', width:70},
            {field:'status', title:'状态', width:90, templet:'#statusTpl'},
            {title:'操作', width:140, toolbar:'#barTpl'}
        ]],
        parseData: function(res){ return {code: res.code, msg: res.message, count: res.count||0, data: res.data||[]}; }
    });

    form.on('submit(searchBtn)', function(data){
        tableIns.reload({where: data.field, page:{curr:1}});
        return false;
    });

    function post(action, data){
        return http.post(base + '/'+action, data);
    }

    $('#addBtn').on('click', function(){
        openForm({});
    });

    function openForm(row){
        var tpl = laytpl($('#formTpl').html()).render(row);
        layer.open({
            type:1, title: row.id ? '编辑任务' : '新增任务', area:['520px','auto'], content: tpl,
            btn:['保存','取消'],
            success:function(){ form.render(); },
            yes:function(index){
                var data = $('#taskForm').serialize();
                post('save', data).then(function(res){
                    if(res.code===0){ layer.close(index); layer.msg('保存成功',{icon:1}); tableIns.reload(); }
                    else layer.msg(res.message||'保存失败',{icon:2});
                });
            }
        });
    }

    table.on('tool(dataTable)', function(obj){
        var d = obj.data;
        if(obj.event==='edit'){ openForm(d); }
        else if(obj.event==='del'){
            layer.confirm('确定删除该任务？', function(){
                post('del', {ids: d.id}).then(function(res){
                    if(res.code===0){ layer.msg('已删除',{icon:1}); tableIns.reload(); }
                    else layer.msg(res.message||'删除失败',{icon:2});
                });
            });
        }
    });
});
</script>