YwxAppThink/addon/wxchat/view/backend/wxchatroom/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">
                    <select name="type">
                        <option value="0">全部类型</option>
                        <option value="1">语音</option>
                        <option value="2">视频</option>
                        <option value="3">游戏</option>
                    </select>
                </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>
                </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="members">成员</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="close">关房</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="roomForm" lay-filter="roomForm">
    <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" 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="notice" class="layui-input" value="{{d.notice||''}}">
        </div>
    </div>
    <div class="layui-form-item">
        <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>
        <label class="layui-form-label">弹幕</label>
        <div class="layui-input-inline">
            <input type="radio" name="danmaku_on" value="1" title="开" {{ d.danmaku_on==undefined||d.danmaku_on==1?'checked':'' }}>
            <input type="radio" name="danmaku_on" value="0" title="关" {{ d.danmaku_on==0?'checked':'' }}>
        </div>
    </div>
</form>
</script>

<script type="text/html" id="membersTpl">
<div style="padding:15px;">
    <table class="layui-table">
        <thead><tr><th>UID</th><th>昵称</th><th>角色</th><th>加入时间</th></tr></thead>
        <tbody>
        {{# layui.each(d.members, function(i, m){ }}
            <tr>
                <td>{{m.uid}}</td>
                <td>{{m.nickname||'--'}}</td>
                <td>{{m.role==1?'主播':'观众'}}</td>
                <td>{{m.join_at?layui.util.toDateString(m.join_at*1000,'yyyy-MM-dd HH:mm'):''}}</td>
            </tr>
        {{# }); }}
        {{# if(d.members.length===0){ }}
            <tr><td colspan="4" style="text-align:center;">暂无成员</td></tr>
        {{# } }}
        </tbody>
    </table>
</div>
</script>

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

    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:80, templet:function(d){return d.type==1?'语音':(d.type==2?'视频':'游戏');}},
            {field:'owner_name', title:'房主', width:120},
            {field:'member_count', title:'成员数', width:90},
            {field:'mic_count', title:'麦位数', width:80},
            {field:'hot', title:'热度', width:80},
            {field:'danmaku_on', title:'弹幕', width:70, templet:function(d){return d.danmaku_on==1?'开':'关';}},
            {field:'status', title:'状态', width:90, templet:'#statusTpl'},
            {field:'create_at', title:'创建时间', width:170, templet:function(d){return d.create_at?util.toDateString(d.create_at*1000,'yyyy-MM-dd HH:mm'):'';}},
            {title:'操作', width:230, 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);
    }

    table.on('tool(dataTable)', function(obj){
        var d = obj.data;
        if(obj.event==='members'){
            post('detail', {id: d.id}).then(function(res){
                if(res.code!==0){ layer.msg(res.message||'获取失败',{icon:2}); return; }
                var tpl = laytpl($('#membersTpl').html()).render(res.data);
                layer.open({type:1, title:'房间成员 #'+d.id, area:['560px','auto'], content: tpl});
            });
            return;
        }
        if(obj.event==='edit'){
            var tpl = laytpl($('#formTpl').html()).render(d);
            layer.open({type:1, title:'编辑房间 #'+d.id, area:['520px','auto'], content: tpl,
                btn:['保存','取消'],
                success:function(){ form.render(); },
                yes:function(index){
                    post('save', $('#roomForm').serialize()).then(function(r){
                        if(r.code===0){ layer.close(index); layer.msg('保存成功',{icon:1}); tableIns.reload(); }
                        else layer.msg(r.message||'失败',{icon:2});
                    });
                }
            });
            return;
        }
        if(obj.event==='close'){
            layer.confirm('确定关闭该房间？', function(){
                post('close', {id: d.id}).then(function(r){
                    if(r.code===0){ layer.msg('已关闭',{icon:1}); tableIns.reload(); }
                    else layer.msg(r.message||'失败',{icon:2});
                });
            });
            return;
        }
        if(obj.event==='del'){
            layer.confirm('确定删除该房间（含成员与麦位）？', function(){
                post('del', {ids: d.id}).then(function(r){
                    if(r.code===0){ layer.msg('已删除',{icon:1}); tableIns.reload(); }
                    else layer.msg(r.message||'失败',{icon:2});
                });
            });
        }
    });
});
</script>