From 942a64df159f584709f961a35c8e2dc0f2834e30 Mon Sep 17 00:00:00 2001
From: liaozetao <1107136310@qq.com>
Date: Wed, 20 Sep 2023 22:11:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=90=AC=E8=BF=81=E3=80=90?=
 =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E7=89=88=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/face/FaceJsonAdminView.vue          |  871 ++++++++++++++
 src/views/family/FamilyAdminView.vue          |  779 +++++++++++++
 src/views/family/FamilyMemberAdminView.vue    |  207 ++++
 src/views/family/FamilyMoneyAdminView.vue     |  478 ++++++++
 src/views/family/FamilyStatisticsView.vue     |  149 +++
 src/views/finance/FinanceStatisticsView.vue   |  191 +++
 .../findlove/PlatformPrizeDataAdminView.vue   |  252 ++++
 src/views/findlove/PoolItemAdminView.vue      |  925 +++++++++++++++
 .../findlove/PrizeDrawRecordAdminView.vue     |  153 +++
 .../firstpage/FirstPageActivityBannerView.vue | 1011 ++++++++++++++++
 src/views/firstpage/FirstPageBannerView.vue   | 1029 +++++++++++++++++
 src/views/firstpage/FirstPageOptView.vue      |  366 ++++++
 src/views/firstpage/FirstPageTabRoomView.vue  |  593 ++++++++++
 src/views/firstpage/FirstPageTabView.vue      |  500 ++++++++
 .../firstpage/RecommendResourceAdminView.vue  |  581 ++++++++++
 .../firstpage/RecommendRoomAdminView.vue      |  338 ++++++
 src/views/floating/FloatingScreenView.vue     |  178 +++
 .../flowteam/FlowTeamGroupManageView.vue      |  486 ++++++++
 .../flowteam/FlowTeamInvitecodeManageView.vue |  403 +++++++
 .../flowteam/FlowTeamMemberAdminView.vue      |  473 ++++++++
 src/views/flowteam/FlowTeamSettlementView.vue |  358 ++++++
 src/views/flowteam/FlowTeamStatisticView.vue  |  793 +++++++++++++
 src/views/flowteam/RefillInviteCodeView.vue   |  272 +++++
 23 files changed, 11386 insertions(+)
 create mode 100644 src/views/face/FaceJsonAdminView.vue
 create mode 100644 src/views/family/FamilyAdminView.vue
 create mode 100644 src/views/family/FamilyMemberAdminView.vue
 create mode 100644 src/views/family/FamilyMoneyAdminView.vue
 create mode 100644 src/views/family/FamilyStatisticsView.vue
 create mode 100644 src/views/finance/FinanceStatisticsView.vue
 create mode 100644 src/views/findlove/PlatformPrizeDataAdminView.vue
 create mode 100644 src/views/findlove/PoolItemAdminView.vue
 create mode 100644 src/views/findlove/PrizeDrawRecordAdminView.vue
 create mode 100644 src/views/firstpage/FirstPageActivityBannerView.vue
 create mode 100644 src/views/firstpage/FirstPageBannerView.vue
 create mode 100644 src/views/firstpage/FirstPageOptView.vue
 create mode 100644 src/views/firstpage/FirstPageTabRoomView.vue
 create mode 100644 src/views/firstpage/FirstPageTabView.vue
 create mode 100644 src/views/firstpage/RecommendResourceAdminView.vue
 create mode 100644 src/views/firstpage/RecommendRoomAdminView.vue
 create mode 100644 src/views/floating/FloatingScreenView.vue
 create mode 100644 src/views/flowteam/FlowTeamGroupManageView.vue
 create mode 100644 src/views/flowteam/FlowTeamInvitecodeManageView.vue
 create mode 100644 src/views/flowteam/FlowTeamMemberAdminView.vue
 create mode 100644 src/views/flowteam/FlowTeamSettlementView.vue
 create mode 100644 src/views/flowteam/FlowTeamStatisticView.vue
 create mode 100644 src/views/flowteam/RefillInviteCodeView.vue

diff --git a/src/views/face/FaceJsonAdminView.vue b/src/views/face/FaceJsonAdminView.vue
new file mode 100644
index 0000000..48cf31d
--- /dev/null
+++ b/src/views/face/FaceJsonAdminView.vue
@@ -0,0 +1,871 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <!-- .content -->
+                <div id="table"></div>
+                <div id="toolbar">
+                    配置类型:
+                    <select name="configType" id="configType" class="input-sm">
+                        <option value="2">表情图片</option>
+                        <option value="1">表情Json</option>
+                    </select>
+                    表情名称:<input type="text" class="input-sm" name="faceName" id="faceName">
+                    表情ID:<input type="text" class="input-sm" name="faceId" id="faceId">
+                    状态:
+                    <select name="faceStatus" id="faceStatus" class="input-sm">
+                        <option value="2">--全部--</option>
+                        <option value="1">显示</option>
+                        <option value="0">隐藏</option>
+                    </select>
+                    类型:
+                    <select name="selectFaceType" id="selectFaceType" class="input-sm">
+                        <option value="">--全部--</option>
+                        <option value="1">普通表情</option>
+                        <option value="2">贵族表情</option>
+                    </select>
+                    <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
+                    &nbsp;<button id="btnAddFaceJson" class="btn btn-sm btn-primary">新增FaceJson</button>
+                    &nbsp;<button id="deletePatch" class="btn btn-sm btn-primary">批量删除</button>
+                    &nbsp;<button id="updateImgs" class="btn btn-sm btn-primary">批量上传图片</button>
+                    &nbsp;<button id="updateFaceInfo" class="btn btn-sm btn-primary">保存更新</button>
+                    &nbsp;&nbsp;&nbsp;&nbsp;<button id="restoreFaceInfo" class="btn btn-sm btn-primary">一键还原</button>
+                    <br />
+                    <!--<div class="form-group" id="versionInfo" hidden="true">-->
+                    <h4 id="version"></h4>
+                    <!--</div>-->
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div class=" modal fade" id="faceJsonImgsUpload" tabindex="-1" role="dialog" aria-labelledby="modalLabel1">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="modalLabel1">新增表情图片</h4>
+                </div>
+                <div class="modal-body" style="overflow:auto;width: 100%;max-height: 80%">
+                    <ul id="bigImg"></ul>
+                </div>
+                <div class="modal-footer" style="height: 20%">
+                    <span>上传图片</span>
+                    <input type="file" name="logoFile1" id="logoFile1" onchange="setImg(this);" style="display:inline;"
+                        accept="image/*" multiple>
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="addImg">提交</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="modal fade" id="renameImg" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <form class="form-horizontal">
+                        <div class="form-group">
+                            <label for="img" class="col-sm-3 control-label">图片:</label>
+                            <div class="col-sm-9">
+                                <img src="" id="img" style="width:90px;height:60px;" alt="">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="beforeImgName" class="col-sm-3 control-label">原图片名:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="beforeImgName"
+                                    id="beforeImgName">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="afterImgName" class="col-sm-3 control-label">重命名:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="afterImgName" id="afterImgName">
+                            </div>
+                        </div>
+                    </form>
+
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                        <button type="button" class="btn btn-primary" id="btnRenameImg">提交</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="faceJsonModal" tabindex="-1" role="dialog" aria-labelledby="modalLabe3">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="modalLabel3">新增表情配置Item</h4>
+                </div>
+                <div class="modal-body" style="overflow:auto;width: 100%;max-height: 80%">
+                    <form class="form-horizontal" id="addForm">
+                        <input type="hidden" class="form-control" name="jsonConfigType" id="jsonConfigType">
+                        <div class="form-group">
+                            <label for="addFaceId" class="col-sm-3 control-label">表情名ID:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="addFaceId" id="addFaceId">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="addFaceName" class="col-sm-3 control-label">表情名称:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="addFaceName"
+                                    id="addFaceName">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="pinyin" class="col-sm-3 control-label">表情拼音:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="pinyin" id="pinyin">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">表情类型</label>
+                            <div class="col-sm-9">
+                                <label class="radio-inline">
+                                    <input name="faceKind" type="radio" id="normalFace" value="1"
+                                        checked="checked">普通</label>
+                                <label class="radio-inline">
+                                    <input name="faceKind" type="radio" id="vipFace" value="2">贵族</label>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">审核中表情状态</label>
+                            <div class="col-sm-9">
+                                <label class="radio-inline"><input name="luckFace" type="radio" id="isLuckFace" value="0"
+                                        checked>显示</label>
+                                <label class="radio-inline"><input name="luckFace" type="radio" id="isLuckFaceNo"
+                                        value="1">隐藏</label>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="imageCount" class="col-sm-3 control-label">表情图片总数:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="imageCount"
+                                    id="imageCount">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="iconPos" class="col-sm-3 control-label">表情封面图片的index:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="iconPos" id="iconPos">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="animStartPos" class="col-sm-3 control-label">表情开始的index:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="animStartPos" id="animStartPos">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="animEndPos" class="col-sm-3 control-label">表情结束的index:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="animEndPos" id="animEndPos">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="animDuration" class="col-sm-3 control-label">表情的展示的总的时间(毫秒):</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="animDuration" id="animDuration">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="resultCount" class="col-sm-3 control-label">表情结束时候公屏展示结束图片的个数:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="resultCount" id="resultCount">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">表情帧动画结束时候结果图片是否互斥:</label>
+                            <div class="col-sm-9">
+                                <label class="radio-inline"><input name="canResultRepeat" type="radio" id="canResultRepeat"
+                                        value="1" checked>不互斥</label>
+                                <label class="radio-inline"><input name="canResultRepeat" type="radio"
+                                        id="canResultRepeatNo" value="0">互斥</label>
+                            </div>
+                        </div>
+
+
+                        <div class="form-group">
+                            <label for="animRepeatCount" class="col-sm-3 control-label">表情帧动画展示的次数:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="canResultRepeatanimRepeatCount"
+                                    id="animRepeatCount">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="resultStartPos" class="col-sm-3 control-label">表情帧动画展示结束，结果图片的开始index:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="resultStartPos" id="resultStartPos">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="resultEndPos" class="col-sm-3 control-label">表情帧动画展示结束，结果图片的结束index:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="resultEndPos" id="resultEndPos">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="resultDuration" class="col-sm-3 control-label">表情帧动画展示结束，结果图片展示的时间(毫秒):</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="resultDuration" id="resultDuration">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">表情显示类型:</label>
+                            <div class="col-sm-9">
+                                <select name="faceType" id="faceType" class="input-sm">
+                                    <option value="1" selected="selected">正常表情，需要在表情面板显示</option>
+                                    <option value="2">功能表情不需要在表情面板显示</option>
+                                    <option value="3">类似一起玩的表情使用</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">结果图片排列的类型:</label>
+                            <div class="col-sm-9">
+                                <select name="displayType" id="displayType" class="input-sm">
+                                    <option value="0" selected="selected">只有一张图片</option>
+                                    <option value="1">紧凑排列</option>
+                                    <option value="2">重叠排列</option>
+                                    <option value="3">并排排列</option>
+                                </select>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer" style="height: 20%">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="addFaceJson">提交</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+const NORMAL_FACE = 1; // 普通表情
+const VIP_FACE = 2; // 贵族表情
+
+export default {
+    name: "FaceJsonAdminView",
+    setup() {
+        function setImg(obj) {
+            var f = $(obj).val();
+            if (f == null || f == undefined || f == '') {
+                return false;
+            }
+            var filePaths = $(obj)[0].files;
+            var num = filePaths.length;
+            var data = new FormData();
+            for (var i = 0; i <= num - 1; i++) {
+                var file = $(obj)[0].files[i];
+                var fileName = file.name;
+                if (!/\.(?:png|jpg|bmp|gif|jpeg|PNG|JPG|BMP|GIF|JPEG)$/.test(fileName)) {
+                    console.log(fileName + '不是图片');
+                    $("#tipMsg").text(fileName + '不是图片');
+                    $("#tipModal").modal('show');
+                    continue;
+                }
+                var fileNameSplit = fileName.split('_');
+                if (fileNameSplit.length < 3) {
+                    console.log(fileName + '不满足(表情名拼音_表情ID_INDEX.后缀名)的规范');
+                    $("#tipMsg").text(fileName + '不满足(表情名拼音_表情ID_INDEX.后缀名)的规范');
+                    $("#tipModal").modal('show');
+                    continue;
+                }
+                data.append('file_' + i, file);
+            }
+            $.ajax({
+                type: "POST",
+                url: "/admin/faceJson/updateImg.action",
+                data: data,
+                cache: false,
+                contentType: false,    //不可缺
+                processData: false,    //不可缺
+                dataType: "json",
+                success: function (json) {
+                    if (json.success == 'false') {
+                        $("#tipMsg").text(json.msg);
+                        $("#tipModal").modal('show');
+                    }
+                    else {
+                        for (var j = 0; j <= json.length - 1; j++) {
+                            $("#tipMsg").text("上传成功");
+                            $("#tipModal").modal('show');
+                            var path = '/admin/faceJson/getPicInputStream.action?type=1&picName=' + json[j];
+                            var info = json[j].split('.');
+                            var name = info[0];
+                            var nameSuffix = info[1];
+                            var div = document.getElementById(json[j]);
+                            var liId = 'l_' + name + '_' + nameSuffix;
+                            if (div != null) {
+                                div.attr("src", path);
+                                return;
+                            }
+                            else {
+                                var a_hidden = "<li id='" + liId + "'>";
+                                var img_html = "<img  src='" + path + "'  width='60' height='60'>";
+                                var a_html = "<a href='#' onclick='deleteImg(\"" + name + "\",\"" + nameSuffix + "\")'>删除</a>";
+                                var li_html = "</li>";
+                                $('#bigImg').append(a_hidden + img_html + '&nbsp;&nbsp;' + json[j] + '&nbsp;&nbsp;&nbsp;&nbsp;' + a_html + li_html);
+                            }
+                        }
+                    }
+                    // if (i >= filePaths.length - 1) {
+                    //     $("#logoFile1").val("");
+                    // }
+                }
+            });
+        }
+
+        function deleteImg(val, valRes) {
+            $.ajax({
+                type: "post",
+                url: "/admin/faceJson/deleteFile.action",
+                data: {
+                    picName: val + '.' + valRes,
+                    type: 1,
+                },
+                dataType: "json",
+                success: function (json) {
+                    if (json.success == 'true') {
+                        var a = 'l_' + val + '_' + valRes;
+                        $('#' + a).remove();
+                        $("#logoFile1").val("");
+                        $("#tipMsg").text("删除成功");
+                        $("#tipModal").modal('show');
+                    } else {
+                        $("#tipMsg").text("删除失败." + json.msg);
+                        $("#tipModal").modal('show');
+                    }
+
+                }
+            });
+        }
+        window.setImg = setImg;
+        window.deleteImg = deleteImg;
+        return {
+            setImg,
+            deleteImg
+        };
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'tmp', title: 'ID', align: 'center', checkbox: true, width: '5%' },
+                        { field: 'id', title: '表情id', align: 'center', width: '5%' },
+                        { field: 'name', title: '表情名', align: 'center', width: '5%' },
+                        {
+                            field: 'pinyinName',
+                            title: '表情图片',
+                            align: 'center',
+                            width: '10%',
+                            formatter: function (val, row, index) {
+                                var info = val.split('.');
+                                if (info.length > 1) {
+                                    var a = '/admin/faceJson/getPicInputStream.action?picName=' + val;
+                                    return "<img src='" + a + "' width='40' height='40'>";
+
+                                }
+                                else {
+                                    return '';
+                                }
+                            }
+                        },
+                        { field: 'pinyinName', title: '表情图片名', align: 'center', width: '8%' },
+                        {
+                            field: 'isLuckFace',
+                            title: '表情状态',
+                            align: 'center',
+                            width: '5%',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    return '隐藏';
+                                } else {
+                                    return '显示';
+                                }
+                            }
+                        },
+                        {
+                            field: 'faceKind',
+                            title: '表情类型',
+                            align: 'center',
+                            width: '5%',
+                            formatter: function (val, row, index) {
+                                if (val === VIP_FACE) {
+                                    return '贵族表情'
+                                } else {
+                                    return '普通表情'
+                                }
+                            }
+                        },
+                        {
+                            field: 'pinyinName',
+                            title: '操作',
+                            align: 'center',
+                            width: '15%',
+                            formatter: function (val, val1, row, index) {
+                                return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit"  data-id=' + val + '>' +
+                                    '<i class="glyphicon glyphicon-edit"></i>编辑</button>' +
+                                    '&nbsp;&nbsp;<button id="btnDelete" name="btnDelete" class="btn btn-sm btn-danger opt-remove" data-id=' + val +
+                                    '><i class="glyphicon glyphicon-remove"></i>删除</button>';
+                            }
+                        }
+                    ],
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 50, 100, 200, 300, 500],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            page: params.pageNumber,
+                            pageSize: params.pageSize,
+                            configType: $('#configType').val(),
+                            faceId: $('#faceId').val(),
+                            faceName: $('#faceName').val(),
+                            faceStatus: $('#faceStatus').val(),
+                            faceKind: $('#selectFaceType').val(),
+                        };
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/faceJson/list.action',
+                    onLoadSuccess: function (json) {  //加载成功时执行
+                        if (json.code != 200) {
+                            console.log(json.msg);
+                        }
+                        else {
+                            var version = json.version;
+                            var fileName = json.fileName;
+                            $("#version").html('当前版本号: ' + version +
+                                '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前文件: ' + fileName);
+                        }
+
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log('加载失败')
+                    }
+                });
+
+                $("#updateImgs").click(function () {
+                    var div = document.getElementById("bigImg");
+                    while (div.hasChildNodes()) {
+                        div.removeChild(div.firstChild);
+                    }
+                    $("#logoFile1").val("");
+                    $("#faceJsonImgsUpload").modal('show');
+                });
+                $("#deletePatch").click(function () {
+                    var rows = $("#table").bootstrapTable("getSelections");
+                    if (rows.length == 0) {
+                        alert("请先选择要删除的记录");
+                        return;
+                    }
+                    var idArr = [];
+                    for (var i = 0; i < rows.length; i++) {
+                        console.log(rows[i]['pinyinName'])
+                        idArr.push(rows[i]['pinyinName']);
+                    }
+                    if (confirm("你确认批量删除该记录吗?" +
+                        "\r\n删除后再也不能找回，请谨慎操作！")) {
+                        $.ajax({
+                            type: 'post',
+                            url: "/admin/faceJson/deletePatch.action",
+                            data: {
+                                ids: JSON.stringify(idArr),
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("删除成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("删除失败");
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+                $("#updateFaceInfo").click(function () {
+                    if (confirm("确认更新吗？")) {
+                        $("#tipMsg").text("正在压缩上传");
+                        $("#tipModal").modal('show');
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/faceJson/updateFaceInfo.action",
+                            data: {},
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("一键更新成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh('#table');
+                                } else {
+                                    $("#tipMsg").text("一键更新失败." + json.msg);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+                $("#restoreFaceInfo").click(function () {
+                    if (confirm("确认还原所有操作吗？")) {
+                        $("#tipMsg").text("正在还原");
+                        $("#tipModal").modal('show');
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/faceJson/restoreFaceInfo.action",
+                            data: {},
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("一键还原成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh('#table');
+                                } else {
+                                    $("#tipMsg").text("一键还原失败." + json.msg);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+
+                $("#btnAddFaceJson").click(function () {
+                    document.getElementById("addForm").reset();
+                    $("#jsonConfigType").val("1");
+                    $("#canResultRepeat").prop("checked", true);
+                    $("#normalFace").prop("checked", true);
+                    $("#isLuckFace").prop("checked", true);
+                    $("#addFaceId").attr("disabled", false);
+                    $("#addFaceName").attr("disabled", false);
+                    $("#pinyin").attr("disabled", false);
+                    $("#divNobleId").hide();
+                    $("#faceJsonModal").modal('show');
+                });
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                });
+
+
+                $("#table").on("click", '.opt-edit', function () {
+                    var id = $(this).attr("data-id");
+                    var info = id.split('.');
+                    if (info.length > 1) {
+                        var path = '/admin/faceJson/getPicInputStream.action?picName=' + id;
+                        $("#img").attr("src", path);
+                        $("#beforeImgName").val(id);
+                        $("#afterImgName").val("");
+                        $('#renameImg').modal('show');
+                    }
+                    else {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/faceJson/getFaceJsonItem.action",
+                            data: {
+                                picName: id,
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.success == 'false') {
+                                    $("#tipMsg").text(json.msg);
+                                    $("#tipModal").modal('show');
+                                }
+                                else {
+                                    $("#addFaceId").attr("disabled", true);
+                                    $("#addFaceName").attr("disabled", true);
+                                    $("#pinyin").attr("disabled", true);
+                                    $("#jsonConfigType").val("2");
+                                    $("#addFaceId").val(json.id);
+                                    $("#addFaceName").val(json.name);
+                                    $("#pinyin").val(json.pinyin);
+                                    $("#imageCount").val(json.imageCount);
+                                    $("#iconPos").val(json.iconPos);
+                                    $("#animStartPos").val(json.animStartPos);
+                                    $("#animEndPos").val(json.animEndPos);
+                                    $("#animDuration").val(json.animDuration);
+                                    $("#resultCount").val(json.resultCount);
+                                    $("#animRepeatCount").val(json.animRepeatCount);
+                                    $("#resultStartPos").val(json.resultStartPos);
+                                    $("#resultEndPos").val(json.resultEndPos);
+                                    $("#resultDuration").val(json.resultDuration);
+                                    $("#displayType").val(json.displayType);
+                                    if (json.canResultRepeat == 1) {
+                                        $("#canResultRepeat").prop("checked", true);
+                                    }
+                                    else {
+                                        $("#canResultRepeatNo").prop("checked", true);
+                                    }
+                                    if (json.isLuckFace) {
+                                        $("#isLuckFaceNo").prop("checked", true);
+                                    }
+                                    else {
+                                        $("#isLuckFace").prop("checked", true);
+                                    }
+                                    if (json.faceKind === VIP_FACE) {
+                                        $("#vipFace").prop("checked", true);
+                                    } else {
+                                        $("#normalFace").prop("checked", true);
+                                    }
+                                    $("#faceType").val(json.faceType);
+                                    $("#faceJsonModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+
+                $("#table").on("click", '.opt-remove', function () {
+                    var id = $(this).attr("data-id");
+                    var info = id.split('.');
+                    if (info.length > 1) {
+                        if (confirm("确认删除表情图片吗?")) {
+                            $.ajax({
+                                type: "post",
+                                url: "/admin/faceJson/deleteFile.action",
+                                data: {
+                                    picName: id,
+                                    type: 2,
+                                },
+                                dataType: "json",
+                                success: function (json) {
+                                    if (json.success == 'true') {
+                                        $("#tipMsg").text("删除成功");
+                                        $("#tipModal").modal('show');
+                                        TableHelper.doRefresh("#table");
+                                    } else {
+                                        $("#tipMsg").text("删除失败." + json.msg);
+                                        $("#tipModal").modal('show');
+                                    }
+                                }
+                            });
+                        }
+                    }
+                    else {
+                        if (confirm("确认删除表情json吗(相应表情图片也将删除)?")) {
+                            $.ajax({
+                                type: "post",
+                                url: "/admin/faceJson/deleteFaceJsonItem.action",
+                                data: {
+                                    picName: id,
+                                },
+                                dataType: "json",
+                                success: function (json) {
+                                    if (json.success == 'true') {
+                                        $("#tipMsg").text("删除成功");
+                                        $("#tipModal").modal('show');
+                                        TableHelper.doRefresh("#table");
+                                    } else {
+                                        $("#tipMsg").text("删除失败." + json.msg);
+                                        $("#tipModal").modal('show');
+                                    }
+                                }
+                            });
+                        }
+                    }
+                });
+
+
+                $("#addImg").click(function () {
+                    $.ajax({
+                        type: "post",
+                        url: "/admin/faceJson/addImg.action",
+                        data: {},
+                        dataType: "json",
+                        success: function (json) {
+                            if (json.success == 'true') {
+                                $("#tipMsg").text("上传成功");
+                                $("#tipModal").modal('show');
+                                $("#faceJsonImgsUpload").modal('hide');
+                            } else {
+                                $("#tipMsg").text("上传失败." + json.msg);
+                                $("#tipModal").modal('show');
+                                $("#faceJsonImgsUpload").modal('hide');
+                            }
+                        }
+                    });
+                });
+
+                $("#btnRenameImg").click(function () {
+                    var beforeImgName = $("#beforeImgName").val();
+                    var afterImgName = $("#afterImgName").val();
+                    $.ajax({
+                        type: "post",
+                        url: "/admin/faceJson/renameImg.action",
+                        data: {
+                            beforeImgName: beforeImgName,
+                            afterImgName: afterImgName,
+                        },
+                        dataType: "json",
+                        success: function (json) {
+                            if (json.success == 'true') {
+                                $("#tipMsg").text("重命名成功");
+                                $("#tipModal").modal('show');
+                                $("#renameImg").modal('hide');
+                                TableHelper.doRefresh("#table");
+                            } else {
+                                $("#tipMsg").text("重命名失败." + json.msg);
+                                $("#tipModal").modal('show');
+                                $("#renameImg").modal('hide');
+                            }
+                        }
+                    });
+                });
+
+                $("#addFaceJson").click(function () {
+                    var jsonConfigType = $("#jsonConfigType").val();
+                    var addFaceId = $("#addFaceId").val();
+                    var addFaceName = $("#addFaceName").val();
+                    var pinyin = $("#pinyin").val();
+                    var nobleId = $("#nobleId").val();
+                    var imageCount = $("#imageCount").val();
+                    var iconPos = $("#iconPos").val();
+                    var animStartPos = $("#animStartPos").val();
+                    var animEndPos = $("#animEndPos").val();
+                    var animDuration = $("#animDuration").val();
+                    var resultCount = $("#resultCount").val();
+                    var animRepeatCount = $("#animRepeatCount").val();
+                    var resultStartPos = $("#resultStartPos").val();
+                    var resultEndPos = $("#resultEndPos").val();
+                    var resultDuration = $("#resultDuration").val();
+                    var displayType = $("#displayType").val();
+                    var faceType = $("#faceType").val();
+                    var canResultRepeat = $('input[name="canResultRepeat"]:checked').val();
+                    var isLuckFace = $('input[name="luckFace"]:checked').val();
+                    var isNobleFace = $('input[name="noble"]:checked').val();
+                    var faceKind = $('input[name="faceKind"]:checked').val();
+                    console.log(canResultRepeat + '--' + isNobleFace);
+                    if ($("#addForm").validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/faceJson/configFaceJsonSingle.action?jsonConfigType=" + jsonConfigType,
+                            data: {
+                                id: addFaceId,
+                                name: addFaceName,
+                                pinyin: pinyin,
+                                nobleId: nobleId,
+                                imageCount: imageCount,
+                                iconPos: iconPos,
+                                animStartPos: animStartPos,
+                                animEndPos: animEndPos,
+                                animDuration: animDuration,
+                                resultCount: resultCount,
+                                canResultRepeat: canResultRepeat,
+                                animRepeatCount: animRepeatCount,
+                                resultStartPos: resultStartPos,
+                                resultEndPos: resultEndPos,
+                                resultDuration: resultDuration,
+                                displayType: displayType,
+                                faceType: faceType,
+                                isLuckFace: isLuckFace,
+                                isNobleFace: isNobleFace,
+                                faceKind: faceKind
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#faceJsonModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败," + json.msg);
+                                    $("#tipModal").modal('show');
+                                    // $("#faceJsonModal").modal('hide');
+                                }
+                            }
+                        });
+                    }
+                });
+            })
+        }
+    },
+};
+</script>
+
+<style scoped>
+.bar1,
+.bar2 {
+    margin-bottom: 10px;
+}
+
+label.col-sm-1 {
+    padding: 0;
+    line-height: 30px;
+    text-align: right;
+    /*padding-right: 4px;*/
+}
+
+label.col-sm-1 {
+    padding: 0;
+    line-height: 30px;
+    text-align: right;
+    /*padding-right: 4px;*/
+}
+
+input,
+select {
+    margin-left: 8px;
+    margin-right: 8px;
+}
+
+.button-wrapper {
+    margin-top: 10px;
+}
+
+.record {
+    margin-top: 10px;
+}
+
+.record .title {
+    font-size: 16px;
+}
+
+.toggle-group {
+    display: none;
+}
+
+.tips {
+    font-size: 13px;
+    color: red;
+}
+
+.opt-group .col-sm-7 {
+    text-align: left;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/family/FamilyAdminView.vue b/src/views/family/FamilyAdminView.vue
new file mode 100644
index 0000000..b29e277
--- /dev/null
+++ b/src/views/family/FamilyAdminView.vue
@@ -0,0 +1,779 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <!-- .content -->
+                <div id="table"></div>
+                <div id="toolbar">
+                    <form id="searchForm" action="/admin/family/export" method="get" target="_blank">
+                        <div class="col-sm-12">
+                            <label for="familyId" class="col-sm-1 control-label">家族ID:</label>
+                            <div class="col-sm-2"><input type="text" class="form-control" name="familyId" id="familyId">
+                            </div>
+
+                            <label for="familyNick" class="col-sm-1 control-label">家族昵称:</label>
+                            <div class="col-sm-2"><input type="text" class="form-control" name="familyNick" id="familyNick">
+                            </div>
+
+                            <label for="leaderId" class="col-sm-1 control-label">族长ID:</label>
+                            <div class="col-sm-2"><input type="text" class="form-control" name="leaderId" id="leaderId">
+                            </div>
+
+                            <label for="leaderNick" class="col-sm-1 control-label">族长昵称:</label>
+                            <div class="col-sm-2"><input type="text" class="form-control" name="leaderNick" id="leaderNick">
+                            </div>
+                        </div>
+                    </form>
+
+                    <div class="col-sm-12">
+                        <button id="btnSearch" class="btn btn-default">
+                            <i class="glyphicon glyphicon-search"></i>搜索
+                        </button>
+                        <button id="btnAdd" class="btn btn-default opt-apply">
+                            <i class="glyphicon glyphicon-adjust"></i>增加
+                        </button>
+                        <button id="btnExport" class="btn btn-default ">
+                            <i class="glyphicon glyphicon-export"></i>导出
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!--新增家族弹窗-->
+    <div class="modal fade" id="addFamilyModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="modalLabel">新增家族</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="addFamilyForm">
+                        <div class="form-group">
+                            <label for="familyName" class="col-sm-3 control-label">家族名称:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="name" id="familyName"
+                                    placeholder="请输入家族名称,不超过15个字">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="leader" class="col-sm-3 control-label">族长ID:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="leader" id="leader"
+                                    placeholder="请输入族长ID">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="enableMo" class="col-sm-3 control-label">是否开放家族币:</label>
+                            <div class="col-sm-9">
+                                <input type="radio" name="openMoney" id="enableMo" value="true">是
+                                <input type="radio" name="openMoney" id="enableMoNo" value="false">否
+                            </div>
+                        </div>
+
+                        <div class="form-group" id="familyMoNameGroup">
+                            <label for="familyMoName" class="col-sm-3 control-label">家族币名称:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="moneyName"
+                                    id="familyMoName" placeholder="请输入家族币名称，不超过3个字">
+                            </div>
+                        </div>
+
+                        <div class="form-group" id="familyMoAwardGroup">
+                            <label for="familyMoAward" class="col-sm-3 control-label">创建家族币奖励:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="money" id="familyMoAward"
+                                    placeholder="请输入创建家族币奖励">
+                            </div>
+                        </div>
+
+                        <div class="form-group" id="familyGameGroup">
+                            <label for="enableGame" class="col-sm-3 control-label">是否开放家族游戏:</label>
+                            <div class="col-sm-9">
+                                <input type="radio" name="openGame" id="enableGame" value="true">是
+                                <input type="radio" name="openGame" id="enableGameNo" value="false">否
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="pic" class="col-sm-3 control-label">家族头像：</label>
+                            <div class="col-sm-9">
+                                <img src="" id="picImage" style="width:250px;height:90px;" alt="">
+                                <input type="file" id="picFile" name="uploadFile"
+                                    accept="image/gif,image/jpeg,image/jpg,image/png,image/svga">
+                                <button class="btn btn-success" type="button"
+                                    onclick="uploadfile('picFile','picImage','pic','picInfo')">上传</button>
+                                <input type="hidden" id="pic" name="icon" class="form-control" />
+                                <span id="picInfo" style="color:red;"></span>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="add">提交</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 编辑家族弹窗 -->
+    <div class="modal fade" id="editFamilyModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="editFamilyLabel">编辑家族</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="editFamilyForm">
+                        <input type="hidden" name="editFamilyId" id="editFamilyId" />
+                        <div class="form-group">
+                            <label for="editFalilyNick" class="col-sm-3 control-label">家族昵称</label>
+                            <div class="col-sm-9">
+                                <input type="text" name="editFalilyNick" id="editFalilyNick"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="editLeaderId" class="col-sm-3 control-label">族长ID</label>
+                            <div class="col-sm-9">
+                                <input type="text" name="editLeaderId" id="editLeaderId" readonly="readonly" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="editYes" class="col-sm-3 control-label">是否开放家族币:</label>
+                            <div class="col-sm-9">
+                                <input type="radio" name="editOpenMoney" id="editYes" value="true">是
+                                <input type="radio" name="editOpenMoney" id="editNo" value="false">否
+                            </div>
+                        </div>
+
+                        <div class="form-group" id="editFamilyMoNameGroup">
+                            <label for="editFamilyMoName" class="col-sm-3 control-label">家族币名称:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="editFamilyMoName" id="editFamilyMoName"
+                                    readonly="readonly">
+                            </div>
+                        </div>
+
+                        <div class="form-group" id="editFamilyGameGroup">
+                            <label for="editEnable" class="col-sm-3 control-label">是否开放家族游戏:</label>
+                            <div class="col-sm-9">
+                                <input type="radio" name="editOpenGame" id="editEnable" value="true">是
+                                <input type="radio" name="editOpenGame" id="editDisable" value="false">否
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="editPic" class="col-sm-3 control-label">家族头像：</label>
+                            <div class="col-sm-9">
+                                <img src="" id="editPicImage" style="width:250px;height:90px;" alt="">
+                                <input type="file" id="editPicFile" name="uploadFile"
+                                    accept="image/gif,image/jpeg,image/jpg,image/png,image/svga">
+                                <button class="btn btn-success" type="button"
+                                    onclick="uploadfile('editPicFile','editPicImage','editPic','editPicInfo')">上传</button>
+                                <input type="hidden" id="editPic" name="icon" class="form-control" />
+                                <span id="editPicInfo" style="color:red;"></span>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="edit">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!--禁用家族弹窗-->
+    <div class="modal fade" id="forbidFamilyModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="forbFamilyLabel">禁用家族</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="forbFamilyForm">
+                        <input type="hidden" name="forbFamilyId" id="forbFamilyId" />
+                        <div class="form-group">
+                            <label for="forbReason" class="col-sm-3 control-label">禁用原因</label>
+                            <div class="col-sm-9">
+                                <input type="text" name="forbReason" id="forbReason"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="forb">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!--解禁家族弹窗-->
+    <div class="modal fade" id="recoverFamilyModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="recoverFamilyLabel">解禁家族</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="recoverFamilyForm">
+                        <input type="hidden" name="forbFamilyId" id="recoverFamilyId" />
+                        <div class="form-group">
+                            <label for="forbReason" class="col-sm-3 control-label">解禁原因</label>
+                            <div class="col-sm-9">
+                                <input type="text" name="forbReason" id="recoverReason"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="recover">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!--解散家族弹窗-->
+    <div class="modal fade" id="dissFamilyModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="dissFamilyLabel">解散家族</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="dissFamilyForm">
+                        <input type="hidden" name="dissFamilyId" id="dissFamilyId" />
+                        <div class="form-group">
+                            <label for="dissReason" class="col-sm-3 control-label">解散原因</label>
+                            <div class="col-sm-9">
+                                <input type="text" name="dissReason" id="dissReason"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="move">提交</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+import ComboboxHelper from '@/assets/plugins/bootstrap-combobox/js/bootstrap-combobox-helper';
+
+export default {
+    name: "FamilyAdminView",
+    setup() {
+        function uploadfile(file, image, path, info) {
+            $(this).attr('disabled', "true");
+            $.ajaxFileUpload({
+                fileElementId: file,    //需要上传的文件域的ID，即<input type="file">的ID。
+                url: '/admin/upload/img', //后台方法的路径
+                type: 'post',   //当要提交自定义参数时，这个参数要设置成post
+                dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
+                secureuri: false,   //是否启用安全提交，默认为false。
+                async: true,   //是否是异步
+                success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
+                    if (json.path) {
+                        $('#' + path).val(json.path);
+                        $('#' + image).attr("src", json.path);
+                        if (json.path != '') {
+                            $("#" + info).html('已上传成功');
+                        } else {
+                            $("#" + info).html('未上传成功');
+                        }
+                        console.log(json.path);
+
+                    } else {
+                        $("#tipMsg").text(json.msg);
+                        $("#tipModal").modal('show');
+                    }
+                },
+                error: function (data, status, e) {  //提交失败自动执行的处理函数。
+                    $(this).removeAttr("disabled");
+                    console.error(e);
+                }
+            });
+        }
+
+        window.uploadfile = uploadfile;
+        return {
+            uploadfile
+        };
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                initTable();
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    $('#table').bootstrapTable('destroy');
+                    initTable();
+                })
+                // 新增家族弹窗
+                $("#btnAdd").click(function () {
+                    clearForm("addFamilyForm");
+                    //默认开放家族币和家族游戏
+                    $("#enableMo").prop("checked", true);
+                    $("#enableGame").prop("checked", true);
+                    $("#addFamilyModal").modal('show');
+                });
+
+                //选择开放家族币联动
+                $("#enableMo").on("click", function () {
+                    $("#familyMoNameGroup").show();
+                    $("#familyMoAwardGroup").show();
+                    $("#familyGameGroup").show();
+                });
+                $("#editYes").on("click", function () {
+                    $("#editFamilyMoNameGroup").show();
+                    $("#editFamilyGameGroup").show();
+                });
+                //不开放家族币联动
+                $("#enableMoNo").on("click", function () {
+                    $("#familyMoNameGroup").hide();
+                    $("#familyMoAwardGroup").hide();
+                    $("#familyGameGroup").hide();
+                });
+                $("#editNo").on("click", function () {
+                    $("#editFamilyMoNameGroup").hide();
+                    $("#editFamilyGameGroup").hide();
+                });
+
+                //新增家族保存
+                $("#add").on("click", function () {
+                    var familyName = $("#familyName").val();
+                    var leaderId = $("#leader").val();
+                    var enableMo = $("#enableMo").is(":checked");
+                    var familyMoName = $("#familyMoName").val();
+                    var familyMoAward = $("#familyMoAward").val();
+                    var enableGame = $("#enableGame").is(":checked");
+                    var pic = $("#pic").val();
+                    if ($("#addFamilyForm").validationEngine('validate')) {
+                        $.ajax({
+                            type: 'post',
+                            url: '/admin/family/saveOrUpdate.action',
+                            data: {
+                                name: familyName,
+                                leader: leaderId,
+                                openMoney: enableMo,
+                                moneyName: familyMoName,
+                                money: familyMoAward,
+                                openGame: enableGame,
+                                icon: pic
+                            },
+                            dataType: 'json',
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#addFamilyModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败." + json.msg);
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                }
+                            }
+                        });
+                    }
+                    
+                });
+            });
+
+            //初始化表格数据
+            function initTable() {
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'tmp', title: 'familyId', align: 'center', checkbox: true, width: '5%', valign: 'middle' },
+                        //{field: 'seq', title: '编号', align: 'center', width: '5%',valign: 'middle'},
+                        { field: 'familyId', title: '家族ID', align: 'center', width: '5%', valign: 'middle' },
+                        { field: 'familyName', title: '家族昵称', align: 'center', width: '5%', valign: 'middle' },
+                        {
+                            field: 'familyIcon',
+                            title: '家族头像',
+                            align: 'center',
+                            width: '5%',
+                            //valign: 'middle',
+                            formatter: function (val, row, index) {
+                                if (val.indexOf("https") == 0) {
+                                    return "<img src='" + val + "' height='106'>";
+                                } else {
+                                    return row.value;
+                                }
+                            }
+                        },
+                        { field: 'leader.erbanNo', title: '族长ID', align: 'center', width: '5%', valign: 'middle' },
+                        { field: 'leader.name', title: '族长昵称', align: 'center', width: '5%', valign: 'middle' },
+                        { field: 'memberCount', title: '家族成员(人)', align: 'center', width: '5%', valign: 'middle' },
+                        { field: 'moneyName', title: '家族币昵称', align: 'center', width: '5%', valign: 'middle' },
+                        { field: 'leader.money', title: '家族币数量', align: 'center', width: '5%', valign: 'middle' },
+                        {
+                            field: 'groups',
+                            title: '家族群',
+                            align: 'center',
+                            width: '5%',
+                            valign: 'middle',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    var count = val.length;
+                                    return count;
+                                } else {
+                                    return '0';
+                                }
+                            }
+                        },
+                        {
+                            field: 'createTime',
+                            title: '创建时间',
+                            align: 'center',
+                            width: '5%',
+                            valign: 'middle',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    var date = new Date(val);
+                                    return date.format("yyyy-MM-dd hh:mm:00");
+                                } else {
+                                    return '-';
+                                }
+                            }
+                        },
+                        {
+                            field: 'temp',
+                            title: '操作',
+                            align: 'center',
+                            width: '5%',
+                            valign: 'middle',
+                            formatter: function (val, row, index) {
+                                var key = row.familyId;
+                                var returnStr = '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + key + '>' +
+                                    '<i class="glyphicon glyphicon-edit"></i> 编辑</button>&nbsp;&nbsp;';
+                                if (row.status == 1) {//正在使用
+                                    returnStr = returnStr + '<button id="btnStop" name="btnStop" class="btn btn-sm btn-success opt-stop" data-id=' + key + '>' +
+                                        '<i class="glyphicon glyphicon-stop"></i> 禁用</button>&nbsp;&nbsp;';
+                                } else if (row.status == 2) {//已禁用
+                                    returnStr = returnStr + '<button id="btnRecover" name="btnStop" class="btn btn-sm btn-danger opt-recover" data-id=' + key + '>' +
+                                        '<i class="glyphicon glyphicon-stop"></i> 解禁</button>&nbsp;&nbsp;';
+                                }
+                                return returnStr + '<button id="btnMove" name="btnMove" class="btn btn-sm btn-success opt-move" data-id=' + key + '>' +
+                                    '<i class="glyphicon glyphicon-move"></i> 解散</button>&nbsp;&nbsp;';
+                            }
+                        }
+                    ],
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 50, 100, 200, 300, 500],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                    //设置为limit可以获取limit, offset, search, sort, order
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            page: params.pageNumber,
+                            pageSize: params.pageSize,
+                            familyId: $('#familyId').val(),
+                            familyNick: $('#familyNick').val(),
+                            leaderId: $('#leaderId').val(),
+                            leaderNick: $('#leaderNick').val(),
+                        };
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/family/list.action',
+                    onLoadSuccess: function () {  //加载成功时执行
+                        $(".bs-checkbox").css({ 'text-align': 'center', 'vertical-align': 'middle' });
+                        console.log("load success");
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                })
+            }
+
+            $("#table").on("click", '.opt-edit', function () {
+                clearForm("editFamilyForm");
+                var id = $(this).attr("data-id");
+                $.ajax({
+                    type: "get",
+                    url: "/admin/family/getById.action",
+                    data: { familyId: id },
+                    dataType: "json",
+                    success: function (json) {
+                        if (json) {
+                            $("#editFamilyId").val(id);
+                            $("#editFalilyNick").val(json.name);
+                            $("#editLeaderId").val(json.leader);
+                            ComboboxHelper.setDef("#editYes", json.openMoney);
+
+                            ComboboxHelper.setDef("#editEnable", json.openGame);
+
+                            // 礼物状态的值跟其他不同, 1为有效 0为无效
+                            if (json.openMoney == true) {
+                                //$("input:radio[name='enable']")[0].checked = true;
+                                $("#editYes").prop("checked", true);
+                                $("#editFamilyMoNameGroup").show();
+                                $("#editFamilyGameGroup").show();
+                            } else {
+                                $("#editNo").prop("checked", true);
+                                $("#editFamilyMoNameGroup").hide();
+                                $("#editFamilyGameGroup").hide();
+                            }
+                            //已经设置过家族币名称
+                            if (json.moneyName != null && json.moneyName != "") {
+                                $("#editFamilyMoName").val(json.moneyName);
+                                $("#editFamilyMoName").attr("readonly", "readonly");
+                            } else {
+                                $("#editFamilyMoName").removeAttr("readonly");
+                            }
+                            if (json.openGame == true) {
+                                $("#editEnable").prop("checked", true);
+                            } else {
+                                $("#editDisable").prop("checked", true);
+                            }
+
+                            // 设置礼物图片
+                            $('#editPic').val(json.icon);
+                            $('#editPicImage').attr("src", json.icon);
+                            if (json.icon != '') {
+                                $("#editPicInfo").html('已上传');
+                            } else {
+                                $("#editPicInfo").html('未上传');
+                            }
+                            // 打开编辑弹窗
+                            $("#editFamilyModal").modal('show');
+                        } else {
+                            $("#tipMsg").text("获取菜单信息出错");
+                            $("#tipModal").modal('show');
+                        }
+                    }
+                });
+            });
+
+            //编辑家族保存
+            $("#edit").on("click", function () {
+                var familyId = $("#editFamilyId").val();
+                var familyName = $("#editFalilyNick").val();
+
+                var enableMo = $("#editYes").is(":checked");
+                var familyMoName = $("#editFamilyMoName").val();
+                var familyMoAward = $("#editFamilyMoAward").val();
+                var enableGame = $("#editEnable").is(":checked");
+                var pic = $("#editPic").val();
+                if ($("#editFamilyForm").validationEngine('validate')) {
+                    $.ajax({
+                        type: 'post',
+                        url: '/admin/family/saveOrUpdate.action',
+                        data: {
+                            id: familyId,
+                            name: familyName,
+                            openMoney: enableMo,
+                            moneyName: familyMoName,
+                            money: familyMoAward,
+                            openGame: enableGame,
+                            icon: pic,
+                            status: 1
+                        },
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.success == 'true') {
+                                $("#tipMsg").text("保存成功");
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                                $("#editFamilyModal").modal('hide');
+                            } else {
+                                $("#tipMsg").text("保存失败." + json.msg);
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                            }
+                        }
+                    });
+                }
+                
+            });
+
+            //打开禁用家族弹窗
+            $("#table").on('click', '.opt-stop', function () {
+                //清除数据
+                clearForm("forbidFamilyForm");
+                //设置数据
+                var familyId = $(this).attr("data-id");
+                $('#forbFamilyId').val(familyId);
+                $('#forbidFamilyModal').modal('show');
+            });
+
+            //禁用家族保存
+            $("#forb").on("click", function () {
+                var familyId = $("#forbFamilyId").val();
+                //TODO 权限教研暂时没做
+                if ($("#forbFamilyForm").validationEngine('validate')) {
+                    $.ajax({
+                        type: 'post',
+                        url: '/admin/family/saveOrUpdate.action',
+                        data: {
+                            id: familyId,
+                            status: 2,
+                        },
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.success == 'true') {
+                                $("#tipMsg").text("保存成功");
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                                $("#forbidFamilyModal").modal('hide');
+                            } else {
+                                $("#tipMsg").text("保存失败." + json.msg);
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                            }
+                        }
+                    });
+                }
+                
+            });
+
+            //打开解禁家族弹窗
+            $("#table").on('click', '.opt-recover', function () {
+                //清除数据
+                clearForm("recoverFamilyForm");
+                //设置数据
+                var familyId = $(this).attr("data-id");
+                $('#recoverFamilyId').val(familyId);
+                $('#recoverFamilyModal').modal('show');
+            });
+
+            //禁用家族保存
+            $("#recover").on("click", function () {
+                var familyId = $("#recoverFamilyId").val();
+                //TODO 权限教研暂时没做
+                if ($("#recoverFamilyForm").validationEngine('validate')) {
+                    $.ajax({
+                        type: 'post',
+                        url: '/admin/family/saveOrUpdate.action',
+                        data: {
+                            id: familyId,
+                            status: 1,
+                        },
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.success == 'true') {
+                                $("#tipMsg").text("保存成功");
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                                $("#recoverFamilyModal").modal('hide');
+                            } else {
+                                $("#tipMsg").text("保存失败." + json.msg);
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                            }
+                        }
+                    });
+                }
+                
+            });
+
+            //打开解散家族弹窗
+            $("#table").on('click', '.opt-move', function () {
+                //清除数据
+                clearForm("dissFamilyForm");
+                //设置数据
+                var familyId = $(this).attr("data-id");
+                $('#dissFamilyId').val(familyId);
+                $('#dissFamilyModal').modal('show');
+            });
+
+            //解散家族保存
+            $("#move").on("click", function () {
+                var familyId = $("#dissFamilyId").val();
+                //TODO 权限教研暂时没做
+                $("#tipMsg").text("操作中，请稍后...");
+                $("#tipModal").modal('show');
+                if ($("#dissFamilyForm").validationEngine('validate')) {
+                    $.ajax({
+                        type: 'post',
+                        url: '/admin/family/remove.action',
+                        data: {
+                            familyId: familyId
+                        },
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.success == 'true') {
+                                $("#tipMsg").text("保存成功");
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                                $("#dissFamilyModal").modal('hide');
+                            } else {
+                                $("#tipMsg").text("保存失败." + json.msg);
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                            }
+                        }
+                    });
+                }
+                
+            });
+
+
+            function clearForm(formId) {
+                var $form = $('#' + formId);
+                debugger;
+                //清空输入框
+                $form.find('input').val('');
+                //清空单选按钮
+                $form.find('input:radio').attr("checked", false);
+                //清空文本域
+                $form.find('textarea').val('');
+                //清空图片
+                $form.find('img').attr("src", "");
+                //清空已上传
+                $form.find('span').html("");
+            }
+
+            /**导出家族列表*/
+            $("#btnExport").on("click", function () {
+                $("#searchForm").submit();
+            })
+        }
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/family/FamilyMemberAdminView.vue b/src/views/family/FamilyMemberAdminView.vue
new file mode 100644
index 0000000..235dbcb
--- /dev/null
+++ b/src/views/family/FamilyMemberAdminView.vue
@@ -0,0 +1,207 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <!-- .content -->
+                <div id="table"></div>
+                <div id="toolbar">
+                    <form id="searchForm" action="/admin/family/member/export" method="get" target="_blank">
+                        <div class="col-sm-12">
+                            <label for="familyId" class="col-sm-1 control-label">家族ID:</label>
+                            <div class="col-sm-2"><input type="text" class="form-control" name="familyId" id="familyId">
+                            </div>
+
+                            <label for="familyNick" class="col-sm-1 control-label">家族昵称:</label>
+                            <div class="col-sm-2"><input type="text" class="form-control" name="familyNick" id="familyNick">
+                            </div>
+
+                            <label for="memberId" class="col-sm-1 control-label">用户ID:</label>
+                            <div class="col-sm-2"><input type="text" class="form-control" name="memberId" id="memberId">
+                            </div>
+
+                            <label for="memberId" class="col-sm-1 control-label">用户昵称:</label>
+                            <div class="col-sm-2"><input type="text" class="form-control" name="memberNick" id="memberNick">
+                            </div>
+                        </div>
+                    </form>
+
+                    <div class="col-sm-12">
+                        <button id="btnSearch" class="btn btn-default">
+                            <i class="glyphicon glyphicon-search"></i>搜索
+                        </button>
+                        <button id="btnExport" class="btn btn-default ">
+                            <i class="glyphicon glyphicon-export"></i>导出
+                        </button>
+                        <button id="btnBatchDel" class="btn btn-default ">
+                            <i class="glyphicon glyphicon-wrench"></i>批量删除
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "FamilyMemberAdminView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                initTable();
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    $('#table').bootstrapTable('destroy');
+                    initTable();
+                });
+
+                //批量删除
+                $("#btnBatchDel").on('click', function () {
+                    var rows = $("#table").bootstrapTable("getSelections");
+                    if (rows.length == 0) {
+                        alert("请先选择要删除的记录");
+                        return;
+                    }
+                    console.log("rows: " + rows.length);
+                    var idArr = [];
+                    var familyIdArr = [];
+                    for (var i = 0; i < rows.length; i++) {
+                        if (rows[i]['position'] == '10') {
+                            alert(rows[i]['name'] + "是" + rows[i]['familyName'] + "家族的族长，不允许删除");
+                            return;
+                        }
+                        idArr.push(rows[i]['uid']);
+                        familyIdArr.push(rows[i]['familyId']);
+                    }
+                    console.log(idArr);
+                    console.log(familyIdArr);
+                    if (confirm("你确认批量删除该记录吗?" +
+                        "\r\n删除后再也不能找回，请谨慎操作！")) {
+                        $.ajax({
+                            type: 'post',
+                            url: "/admin/family/member/del.action",
+                            data: {
+                                'ids': JSON.stringify(idArr),
+                                'familyIds': JSON.stringify(familyIdArr)
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("删除成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("删除失败");
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                })
+            });
+
+            function initTable() {
+                //初始化表格数据
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'tmp', valign: 'middle', title: 'uid', align: 'center', checkbox: true, width: '5%' },
+                        //{field: 'seq', title: '编号', align: 'center', width: '5%',valign: 'middle'},
+                        { field: 'familyId', title: '家族ID', align: 'center', width: '5%', valign: 'middle' },
+                        { field: 'familyName', title: '家族昵称', align: 'center', width: '5%', valign: 'middle' },
+                        { field: 'erbanNo', title: '用户ID', align: 'center', width: '5%', valign: 'middle' },
+                        { field: 'name', title: '用户昵称', align: 'center', width: '5%', valign: 'middle' },
+                        {
+                            field: 'position',
+                            title: '职位',
+                            align: 'center',
+                            width: '5%',
+                            valign: 'middle',
+                            formatter: function (val, row, index) {
+                                if (val == '10') {
+
+                                    return "族长";
+                                } else if (val == '0') {
+                                    return '成员';
+                                } else {
+                                    return '-';
+                                }
+                            }
+
+                        },
+                        { field: 'money', title: '家族币余额', align: 'center', width: '5%', valign: 'middle' },
+                        {
+                            field: 'joinTime',
+                            title: '加入时间',
+                            align: 'center',
+                            width: '5%',
+                            valign: 'middle',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    var date = new Date(val);
+                                    return date.format("yyyy-MM-dd hh:mm:00");
+                                } else {
+                                    return '-';
+                                }
+                            }
+                        }
+                    ],
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 50, 100, 200, 300, 500],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                    //设置为limit可以获取limit, offset, search, sort, order
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            page: params.pageNumber,
+                            pageSize: params.pageSize,
+                            familyId: $('#familyId').val(),
+                            familyNick: $('#familyNick').val(),
+                            memberId: $('#memberId').val(),
+                            memberNick: $('#memberNick').val(),
+                        };
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/family/member/list.action',
+                    onLoadSuccess: function () {  //加载成功时执行
+                        //复选框居中
+                        $(".bs-checkbox").css({ 'text-align': 'center', 'vertical-align': 'middle' });
+                        console.log("load success");
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                });
+            }
+
+            /**导出功能*/
+            $("#btnExport").on("click", function () {
+                $("#searchForm").submit();
+            })
+        }
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/family/FamilyMoneyAdminView.vue b/src/views/family/FamilyMoneyAdminView.vue
new file mode 100644
index 0000000..f26dd42
--- /dev/null
+++ b/src/views/family/FamilyMoneyAdminView.vue
@@ -0,0 +1,478 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <!-- .content -->
+                <div id="table"></div>
+                <div id="toolbar">
+                    家族ID:<input type="text" class="input-sm" name="familyId" id="familyId">
+
+                    家族昵称:<input type="text" class="input-sm" name="familyNick" id="familyNick">
+
+                    <button id="btnSearch" class="btn btn-default">
+                        <i class="glyphicon glyphicon-search"></i>搜索
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!--分配家族币弹窗-->
+    <div class="modal fade" id="distriMoneyModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="distriMoneyLabel">家族币分配</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="distriMoneyForm">
+                        <input type="hidden" name="distriTargetId" id="distriTargetId">
+                        <input type="hidden" name="distriFamilyId" id="distriFamilyId">
+                        <div class="form-group">
+                            <label for="distriAmount" class="col-sm-3 control-label">家族币分配数量:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="distriAmount" id="distriAmount">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="distriType" class="col-sm-3 control-label">分配方式:</label>
+                            <div class="col-sm-9">
+                                <select name="distriType" id="distriType">
+                                    <option value="">-- 请选择 --</option>
+                                    <option value="1">系统奖励</option>
+                                    <option value="2">活动奖励</option>
+                                    <option value="3">活跃奖励</option>
+                                </select>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="distri">提交</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 禁用家族币弹窗 -->
+    <div class="modal fade" id="forbMoneyModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="forbMoneyLabel">禁用家族币</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="forbMoneyForm">
+                        <input type="hidden" name="forbFamilyId" id="forbFamilyId" />
+                        <div class="form-group">
+                            <label for="forbReason" class="col-sm-3 control-label">禁用原因</label>
+                            <div class="col-sm-9">
+                                <input type="text" name="forbReason" id="forbReason"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="forb">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 解禁家族币弹窗 -->
+    <div class="modal fade" id="recoverMoneyModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="recoverMoneyLabel">解禁家族币</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="recoverMoneyForm">
+                        <input type="hidden" name="recoverFamilyId" id="recoverFamilyId" />
+                        <div class="form-group">
+                            <label for="forbReason" class="col-sm-3 control-label">解禁原因</label>
+                            <div class="col-sm-9">
+                                <input type="text" name="forbReason" id="recoverReason"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="recover">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!--扣除家族币弹窗-->
+    <div class="modal fade" id="discountMoneyModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="discountMoneyLabel">扣除家族币</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="discountMoneyForm">
+                        <input type="hidden" name="dissTargetId" id="dissTargetId" />
+                        <input type="hidden" name="dissFamilyId" id="dissFamilyId" />
+                        <div class="form-group">
+                            <label for="discountAmount" class="col-sm-3 control-label">家族币扣除数量</label>
+                            <div class="col-sm-9">
+                                <input type="text" name="discountAmount" id="discountAmount"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="discountReason" class="col-sm-3 control-label">扣除原因</label>
+                            <div class="col-sm-9">
+                                <input type="text" name="discountReason" id="discountReason"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="discount">提交</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "FamilyMoneyAdminView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                initTable();
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    $('#table').bootstrapTable('destroy');
+                    initTable();
+                });
+
+                //打开家族币分配弹窗
+                $("#table").on('click', '.opt-edit', function () {
+                    clearForm("distriMoneyForm");
+                    var targetId = $(this).attr("data-id-1");
+                    var familyId = $(this).attr("data-id-2");
+                    var openMoney = $(this).attr("data-id-3");
+                    if (openMoney == "false") {
+                        $("#tipMsg").text("该家族家族币已被禁用，无法进行分配操作！");
+                        $("#tipModal").modal('show');
+                        return false;
+                    }
+                    $("#distriTargetId").val(targetId);
+                    $("#distriFamilyId").val(familyId);
+                    $("#distriMoneyModal").modal("show");
+                })
+
+                //家族币分配保存
+                $("#distri").on("click", function () {
+                    var familyId = $("#distriFamilyId").val();
+                    var targetId = $("#distriTargetId").val();
+                    var changeAmount = $("#distriAmount").val();
+                    var title = $("#distriType").val();
+                    if (!changeAmount || !title) {
+                        $("#tipMsg").text("分配数量和分配方式不能为空");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    var titles = "交易";
+                    if ("1" == title) {
+                        titles = "系统奖励";
+                    } else if ("2" == title) {
+                        titles = "活动奖励";
+                    } else if ("3" == title) {
+                        titles = "活跃奖励";
+                    }
+                    var password = $("#distriPassword").val();
+                    //TODO 权限密码校验目前没做
+                    $.ajax({
+                        type: 'post',
+                        url: '/admin/family/money/update.action',
+                        data: {
+                            familyId: familyId,
+                            targetId: targetId,
+                            changeAmount: changeAmount,
+                            titles: titles,
+                            type: 1
+                        },
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.success == 'true') {
+                                $("#tipMsg").text("保存成功");
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                                $("#distriMoneyModal").modal('hide');
+                            } else {
+                                $("#tipMsg").text("保存失败." + json.msg);
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                            }
+                        }
+                    });
+                });
+
+                //打开家族币扣除弹窗
+                $("#table").on('click', '.opt-move', function () {
+                    clearForm("discountMoneyModal");
+                    var targetId = $(this).attr("data-id-1");
+                    var familyId = $(this).attr("data-id-2");
+                    var openMoney = $(this).attr("data-id-3");
+                    if (openMoney == "false") {
+                        $("#tipMsg").text("该家族家族币已被禁用，无法进行扣除操作！");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    $("#dissTargetId").val(targetId);
+                    $("#dissFamilyId").val(familyId);
+                    $("#discountMoneyModal").modal("show");
+                })
+
+                //家族币扣除保存
+                $("#discount").on("click", function () {
+                    var familyId = $("#dissFamilyId").val();
+                    var targetId = $("#dissTargetId").val();
+                    var changeAmount = $("#discountAmount").val();
+                    var titles = $("#discountReason").val();
+                    var password = $("#distriPassword").val();
+                    if (!changeAmount || !titles) {
+                        $("#tipMsg").text("扣除数量和扣除原因不能为空");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    //TODO 权限密码校验目前没做
+                    $.ajax({
+                        type: 'post',
+                        url: '/admin/family/money/update.action',
+                        data: {
+                            familyId: familyId,
+                            targetId: targetId,
+                            changeAmount: changeAmount,
+                            titles: titles,
+                            type: 2
+                        },
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.success == 'true') {
+                                $("#tipMsg").text("保存成功");
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                                $("#discountMoneyModal").modal('hide');
+                            } else {
+                                $("#tipMsg").text("保存失败." + json.msg);
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                            }
+                        }
+                    });
+                });
+
+                //打开禁用家族币弹窗
+                $("#table").on('click', '.opt-stop', function () {
+                    //清除数据
+                    clearForm("forbMoneyForm");
+                    //设置数据
+                    var familyId = $(this).attr("data-id-2");
+                    $('#forbFamilyId').val(familyId);
+                    $('#forbMoneyModal').modal('show');
+                });
+
+                //禁用家族币保存
+                $("#forb").on("click", function () {
+                    var familyId = $("#forbFamilyId").val();
+                    //TODO 权限教研暂时没做
+                    $.ajax({
+                        type: 'post',
+                        url: '/admin/family/saveOrUpdate.action',
+                        data: {
+                            id: familyId,
+                            openMoney: 0,
+                        },
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.success == 'true') {
+                                $("#tipMsg").text("保存成功");
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                                $("#forbMoneyModal").modal('hide');
+                            } else {
+                                $("#tipMsg").text("保存失败." + json.msg);
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                            }
+                        }
+                    });
+                });
+
+                //打开解禁家族币弹窗
+                $("#table").on('click', '.opt-recover', function () {
+                    //清除数据
+                    clearForm("recoverMoneyForm");
+                    //设置数据
+                    var familyId = $(this).attr("data-id-2");
+                    $('#recoverFamilyId').val(familyId);
+                    $('#recoverMoneyModal').modal('show');
+                });
+
+                //解禁家族币保存
+                $("#recover").on("click", function () {
+                    var familyId = $("#recoverFamilyId").val();
+                    //TODO 权限教研暂时没做
+                    $.ajax({
+                        type: 'post',
+                        url: '/admin/family/saveOrUpdate.action',
+                        data: {
+                            id: familyId,
+                            openMoney: 1,
+                        },
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.success == 'true') {
+                                $("#tipMsg").text("保存成功");
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                                $("#recoverMoneyModal").modal('hide');
+                            } else {
+                                $("#tipMsg").text("保存失败." + json.msg);
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                            }
+                        }
+                    });
+                });
+
+                function initTable() {
+                    //初始化表格数据
+                    $('#table').bootstrapTable({
+                        columns: [
+                            { field: 'tmp', valign: 'middle', title: 'familyId', align: 'center', checkbox: true, width: '10%' },
+                            //{field: 'seq', title: '编号', align: 'center', width: '5%',valign: 'middle'},
+                            { field: 'familyId', title: '家族ID', align: 'center', width: '10%', valign: 'middle' },
+                            { field: 'familyName', title: '家族昵称', align: 'center', width: '10%', valign: 'middle' },
+                            { field: 'moneyName', title: '家族币名称', align: 'center', width: '10%', valign: 'middle' },
+                            { field: 'income', title: '家族币总收入', align: 'center', width: '10%', valign: 'middle' },
+                            { field: 'cost', title: '家族币总支出', align: 'center', width: '10%', valign: 'middle' },
+                            { field: 'surplus', title: '家族币总剩余', align: 'center', width: '10%', valign: 'middle' },
+                            { field: 'consume', title: '总消耗', align: 'center', width: '10%', valign: 'middle' },
+                            {
+                                field: 'createTime',
+                                title: '创建时间',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    if (val) {
+                                        var date = new Date(val);
+                                        return date.format("yyyy-MM-dd hh:mm:00");
+                                    } else {
+                                        return '-';
+                                    }
+                                }
+                            },
+                            {
+                                field: 'temp',
+                                title: '操作',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    var familyId = row.familyId;
+                                    var leaderId = row.leaderId;
+                                    var openMoney = row.openMoney;
+                                    var returnStr = '<button id="btnGive" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id-1="' + leaderId + '" data-id-2="' + familyId + '" data-id-3="' + openMoney + '">' +
+                                        '<i class="glyphicon glyphicon-edit"></i> 分配</button>&nbsp;&nbsp;';
+                                    if (row.openMoney) {
+                                        returnStr = returnStr + '<button id="btnStop" name="btnStop" class="btn btn-sm btn-success opt-stop" data-id-1="' + leaderId + '" data-id-2="' + familyId + '">' +
+                                            '<i class="glyphicon glyphicon-stop"></i> 禁用</button>&nbsp;&nbsp;';
+                                    } else {
+                                        returnStr = returnStr + '<button id="btnRecover" name="btnStop" class="btn btn-sm btn-danger opt-recover" data-id-1="' + leaderId + '" data-id-2="' + familyId + '">' +
+                                            '<i class="glyphicon glyphicon-stop"></i> 解禁</button>&nbsp;&nbsp;';
+                                    }
+                                    return returnStr + '<button id="btnTake" name="btnMove" class="btn btn-sm btn-success opt-move" data-id-1="' + leaderId + '" data-id-2="' + familyId + '" data-id-3="' + openMoney + '">' +
+                                        '<i class="glyphicon glyphicon-move"></i> 扣除</button>&nbsp;&nbsp;';
+                                }
+                            }
+                        ],
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 20,
+                        pagination: true,
+                        pageList: [20, 50, 100, 200, 300, 500],
+                        search: false,
+                        sidePagination: "server", //表示服务端请求
+                        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                        //设置为limit可以获取limit, offset, search, sort, order
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var param = {
+                                page: params.pageNumber,
+                                pageSize: params.pageSize,
+                                familyId: $('#familyId').val(),
+                                familyNick: $('#familyNick').val(),
+                            };
+                            return param;
+                        },
+                        toolbar: '#toolbar',
+                        url: '/admin/family/money/list.action',
+                        onLoadSuccess: function () {  //加载成功时执行
+                            //复选框居中
+                            $(".bs-checkbox").css({ 'text-align': 'center', 'vertical-align': 'middle' });
+                            $("th[data-field^='income']").attr("title", "族长所有收入");
+                            $("th[data-field^='cost']").attr("title", "族长所有支出");
+                            $("th[data-field^='consume']").attr("title", "家族内所有成员家族币消耗");
+                            console.log("load success");
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    });
+                }
+
+                function clearForm(formId) {
+                    var $form = $('#' + formId);
+                    $form.find('input').val('');
+                    $form.find('select').val('');
+                    $form.find('textarea').val('');
+                }
+            });
+        }
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/family/FamilyStatisticsView.vue b/src/views/family/FamilyStatisticsView.vue
new file mode 100644
index 0000000..eadff98
--- /dev/null
+++ b/src/views/family/FamilyStatisticsView.vue
@@ -0,0 +1,149 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <!-- .content -->
+                <div id="table"></div>
+                <div id="toolbar">
+                    <div class="col-sm-12">
+                        <h3 id="version"></h3>
+                        <div class="pull-left">
+                            <form id="searchForm" class="col-sm-pull-12" action="/admin/family/statistics/export"
+                                method="post" target="_blank">
+                                家族ID :<input type="text" class="input-sm" name="familyId" id="familyId">
+                                <div class="pull-right">
+                                    <label for="beginDate" class="col-sm-2 control-label">开始日期:</label>
+                                    <div class="col-sm-4"><input type="text" class="form-control" name="beginDate"
+                                            id="beginDate">
+                                    </div>
+                                    <label for="endDate" class="col-sm-2 control-label">结束日期:</label>
+                                    <div class="col-sm-4"><input type="text" class="form-control" name="endDate"
+                                            id="endDate"></div>
+                                </div>
+                            </form>
+                        </div>
+                        <div class="pull-right">
+                            <button id="btnSearch" class="btn btn-default">
+                                <i class="glyphicon glyphicon-search"></i>查询
+                            </button>
+                            <button id="btnExport" class="btn btn-default">
+                                <i class="glyphicon glyphicon-export"></i>导出
+                            </button>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "FamilyStatisticsView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'familyId', title: '家族ID', align: 'center', width: '5%' },
+                        { field: 'familyName', title: '家族名', align: 'center', width: '5%' },
+                        { field: 'totalNum', title: '总数', align: 'center', width: '5%' },
+                        // {
+                        //     field: 'dateStr',
+                        //     title: '日期',
+                        //     align: 'center',
+                        //     valign: 'middle',
+                        //     width: '5%',
+                        //     formatter: function (val, row, index) {
+                        //         if (val) {
+                        //             var date = new Date(val);
+                        //             return date.format("yyyy-MM-dd");
+                        //         } else {
+                        //             return '-';
+                        //         }
+                        //     }
+                        // }
+                    ],
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 50, 100, 200, 300, 500],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            page: params.pageNumber,
+                            pageSize: params.pageSize,
+                            familyId: $('#familyId').val(),
+                            beginDate: $('#beginDate').val(),
+                            endDate: $('#endDate').val(),
+                        };
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/family/statistics/list.action',
+                    onLoadSuccess: function (json) {  //加载成功时执行
+                        console.log("load success");
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                });
+
+                // 导出EXCEL
+                $('#btnExport').on('click', function () {
+                    if (!$('#beginDate').val() || !$('#endDate').val()) {
+                        $("#tipMsg").text("请选择导出的开始和结束日期");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    var form = $("#searchForm");
+                    form.submit();
+                });
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                });
+
+                var picker1 = $("#beginDate").datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                });
+                var picker2 = $('#endDate').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                });
+                picker1.on('changeDate', function () {
+                    var date = $('#beginDate').datetimepicker('getDate');
+                    picker2.datetimepicker('beginDate', date);
+                });
+                picker2.on('changeDate', function () {
+                    var date = $('#endDate').datetimepicker('getDate');
+                    picker1.datetimepicker('setEndDate', date);
+                });
+            });
+        }
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/finance/FinanceStatisticsView.vue b/src/views/finance/FinanceStatisticsView.vue
new file mode 100644
index 0000000..ee21eb1
--- /dev/null
+++ b/src/views/finance/FinanceStatisticsView.vue
@@ -0,0 +1,191 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <!-- .content -->
+                <div id="table"></div>
+                <div id="toolbar">
+                    <div class="col-sm-12">
+                        <h3 id="version"></h3>
+                        <div class="pull-left">
+                            <form id="searchForm" class="col-sm-pull-12" action="/admin/finance/export" method="post"
+                                target="_blank">
+                                <div class="col-sm-11">
+                                    <label for="beginDate" class="col-sm-2 control-label">开始日期:</label>
+                                    <div class="col-sm-4"><input type="text" class="form-control" name="beginDate"
+                                            id="beginDate">
+                                    </div>
+                                    <label for="endDate" class="col-sm-2 control-label">结束日期:</label>
+                                    <div class="col-sm-4"><input type="text" class="form-control" name="endDate"
+                                            id="endDate"></div>
+
+                                </div>
+                            </form>
+                        </div>
+                        <div class="pull-right">
+                            <button id="btnSearch" class="btn btn-default">
+                                <i class="glyphicon glyphicon-search"></i>查询
+                            </button>
+                            <button id="btnExport" class="btn btn-default">
+                                <i class="glyphicon glyphicon-export"></i>导出总额
+                            </button>
+                            <button id="btnExportDetail" class="btn btn-default">
+                                <i class="glyphicon glyphicon-export"></i>导出明细
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "FinanceStatisticView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        // {field: 'tmp', title: 'id', align: 'center', checkbox: true, width: '5%'},
+                        {
+                            field: 'billTime',
+                            title: '日期',
+                            align: 'center',
+                            valign: 'middle',
+                            width: '5%',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    var date = new Date(val);
+                                    return date.format("yyyy-MM-dd hh:mm:ss");
+                                } else {
+                                    return '-';
+                                }
+                            }
+                        },
+                        { field: 'goldIncreaseNum', title: '金币增加', align: 'center', width: '5%' },
+                        { field: 'goldDecreaseNum', title: '金币减少', align: 'center', width: '5%' },
+                        { field: 'goldNum', title: '金币余额', align: 'center', width: '5%' },
+                        { field: 'diamondIncreaseNum', title: '钻石增加', align: 'center', width: '5%' },
+                        { field: 'diamondDecreaseNum', title: '钻石减少', align: 'center', width: '5%' },
+                        { field: 'diamondNum', title: '钻石余额', align: 'center', width: '5%' },
+                        { field: 'totalNum', title: '总额', align: 'center', width: '5%' },
+                    ],
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 50, 100, 200, 300, 500],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            pageNum: params.pageNumber,
+                            pageSize: params.pageSize,
+                            selectType: $('#selectType').val(),
+                            beginDate: $('#beginDate').val(),
+                            endDate: $('#endDate').val(),
+                        };
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/finance/statistics.action',
+                    onLoadSuccess: function (json) {  //加载成功时执行
+                        var updateTime = json.updateTime;
+                        $("#version").html('财务数据' + '&nbsp;&nbsp;&nbsp;&nbsp;' + updateTime + '&nbsp;&nbsp;&nbsp;&nbsp;更新');
+                        console.log("load success");
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                });
+
+                // 导出EXCEL
+                $('#btnExport').on('click', function () {
+                    if (!$('#beginDate').val() || !$('#endDate').val()) {
+                        $("#tipMsg").text("请选择导出的开始和结束日期");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    // var rows = $("#table").bootstrapTable("getSelections");
+                    // if (rows.length == 0) {
+                    //     alert("请先选择要导出行");
+                    //     return;
+                    // }
+                    // var idArr = [];
+                    // for (var i = 0; i < rows.length; i++) {
+                    //     console.log(rows[i]['pinyinName'])
+                    //     idArr.push(rows[i]['pinyinName']);
+                    // }
+                    var form = $("#searchForm");
+                    form.attr("action", "/admin/finance/export?type=1");
+                    // form.attr('type', 1);
+                    form.submit();
+                });
+                $('#btnExportDetail').on('click', function () {
+                    if (!$('#beginDate').val() || !$('#endDate').val()) {
+                        $("#tipMsg").text("请选择导出的开始和结束日期");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    // var rows = $("#table").bootstrapTable("getSelections");
+                    // if (rows.length == 0) {
+                    //     alert("请先选择要导出行");
+                    //     return;
+                    // }
+                    // var idArr = [];
+                    // for (var i = 0; i < rows.length; i++) {
+                    //     console.log(rows[i]['pinyinName'])
+                    //     idArr.push(rows[i]['pinyinName']);
+                    // }
+                    var form = $("#searchForm");
+                    form.attr("action", "/admin/finance/export?type=2");
+                    // form.attr('type', 2);
+                    form.submit();
+                });
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                });
+
+                var chargeStart = $('#beginDate').datepicker({
+                    format: 'yyyy-mm-dd',
+                    autoclose: true
+                });
+                var chargeEnd = $('#endDate').datepicker({
+                    format: 'yyyy-mm-dd',
+                    autoclose: true
+                });
+                chargeStart.on('changeDate', function () {
+                    var date = $('#beginDate').datepicker('getDate');
+                    chargeEnd.datepicker('setStartDate', date);
+                });
+                chargeEnd.on('changeDate', function () {
+                    var date = $('#endDate').datepicker('getDate');
+                    chargeStart.datepicker('setEndDate', date);
+                });
+            });
+        }
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/findlove/PlatformPrizeDataAdminView.vue b/src/views/findlove/PlatformPrizeDataAdminView.vue
new file mode 100644
index 0000000..7ded932
--- /dev/null
+++ b/src/views/findlove/PlatformPrizeDataAdminView.vue
@@ -0,0 +1,252 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <section class="content-header">
+                <h1 id="itemTitle"></h1>
+            </section>
+
+            <section class="content">
+                <div id="toolbar">
+                    <form class="form-horizontal" role="form">
+                        <div class="form-group col-sm-4">
+                            <label for="timeBegin" class="control-label">开始时间：</label>
+                            <input type="text" class="input-sm" id="timeBegin" placeholder="开始时间">
+                        </div>
+
+                        <div class="form-group col-sm-4">
+                            <label for="timeEnd" class="control-label">结束时间：</label>
+                            <input type="text" class="input-sm" id="timeEnd" placeholder="结束时间">
+                        </div>
+
+                        <div class="form-group col-sm-4">
+                            <label for="erbanNo" class="control-label">用户ID：</label>
+                            <input type="text" class="input-sm" name="erbanNo" id="erbanNo" placeholder="">
+                        </div>
+                    </form>
+                    <div class="row"></div>
+                    <button class="btn btn-primary" id="searchBtn">查询</button>
+                    <div class="row"></div>
+                    <div class="dataCount">
+                        <p>
+                            <span>抽奖用户总数：</span>
+                            <span id="peopleNum"></span>
+                        </p>
+                        <p>
+                            <span>抽奖记录总数：</span>
+                            <span id="countNum"></span>
+                        </p>
+                        <p>
+                            <span>用户投入钻石总数：</span>
+                            <span id="userInputDiamonds"></span>
+                        </p>
+                        <p>
+                            <span>平台产出总价值：</span>
+                            <span id="giftOutputDiamonds"></span>
+                        </p>
+                    </div>
+                </div>
+
+                <div id="table"></div>
+            </section>
+        </div>
+    </section>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "PlatformPrizeDataAdminView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                var picker1 = $('#timeBegin').datetimepicker({
+                    language: 'zh-CN',
+                    format: 'yyyy-mm-dd',
+                    todayBtn: true,
+                    autoclose: true,
+                    minView: 'month',
+                    endDate: new Date()
+                });
+
+                var picker2 = $('#timeEnd').datetimepicker({
+                    language: 'zh-CN',
+                    format: 'yyyy-mm-dd',
+                    todayBtn: true,
+                    autoclose: true,
+                    minView: 'month',
+                    endDate: new Date()
+                });
+
+                var $timeBegin = '', $timeEnd = '';
+                var main = {
+                    init: function () {
+                        this.eventRegister();
+                        this.valueChange();
+                        this.tableRefresh();
+                    },
+
+                    eventRegister: function () {
+                        picker1.on('changeDate', function () {
+                            var date = $('#timeBegin').datetimepicker('getDate');
+                            picker2.datetimepicker('setStartDate', date);
+                        });
+                        picker2.on('changeDate', function () {
+                            var date = $('#timeEnd').datetimepicker('getDate');
+                            picker1.datetimepicker('setEndDate', date);
+                        });
+
+                        $('#searchBtn').on('click', function () {
+                            var $dataCount = $('.dataCount');
+                            // var $startDate = $('#timeBegin').val().replace(/\//g,'-');
+                            var $startDate;
+                            if ($('#timeBegin').val() == "" || $('#timeBegin').val() == 'undefined') {
+                                $startDate = '';
+                            } else {
+                                /*var arr = $('#timeBegin').val().split('/');
+                                var length = arr.length;
+                                var $startDate = arr[length-1] +'-' + arr[0] + '-' + arr[length - 2];*/
+                                $startDate = $('#timeBegin').val();
+                            }
+
+                            var $endDate;
+                            if ($('#timeEnd').val() == '' || $('#timeEnd').val() == 'undefined') {
+                                $endDate = $startDate;
+                            } else {
+                                /*var arr2 = $('#timeEnd').val().split('/');
+                                var length2 = arr2.length;
+                                var $endDate = arr2[length2-1] + '-' + arr2[0]  + '-' + arr2[length2-2];*/
+                                $endDate = $('#timeEnd').val();
+                            }
+
+                            if ($startDate == '') {
+                                $timeBegin = '';
+                                $timeEnd = '';
+                            } else {
+                                $timeBegin = $startDate + ' 00:00:00';
+                                $timeEnd = $endDate + ' 23:59:59';
+                            }
+
+                            $.get('/admin/findLove/data/platform/total', {
+                                erbanNo: $('#erbanNo').val(),
+                                startDate: $timeBegin,
+                                endDate: $timeEnd,
+                            }, function (res) {
+                                console.log(res);
+
+                                if (res.code == 200) {
+                                    var data = res.data;
+                                    console.info(data)
+                                    $dataCount.find('#peopleNum').html(data.peopleNum);
+                                    $dataCount.find('#countNum').html(data.countNum);
+                                    $dataCount.find('#userInputDiamonds').html(data.userInputDiamonds);
+                                    $dataCount.find('#giftOutputDiamonds').html(data.giftOutputDiamonds);
+                                    main.tableRefresh();
+                                } else {
+                                    console.log('数据错误,导致加载失败,' + res.code);
+                                }
+                            })
+                        });
+
+                        $('#table').on('click', '#details', function () {
+                            console.log($(this).data('id'));
+                        });
+
+
+                    },
+
+                    valueChange: function () {
+                        var $dataCount = $('.dataCount');
+                        $.get('/admin/findLove/data/platform/total', {
+                            erbanNo: $('#erbanNo').val(),
+                            startDate: $timeBegin,
+                            endDate: $timeEnd,
+                        }, function (res) {
+                            console.log(res);
+
+                            if (res.code == 200) {
+                                var data = res.data;
+                                $dataCount.find('#peopleNum').html(data.peopleNum);
+                                $dataCount.find('#countNum').html(data.countNum);
+                                $dataCount.find('#userInputDiamonds').html(data.userInputDiamonds);
+                                $dataCount.find('#giftOutputDiamonds').html(data.giftOutputDiamonds);
+
+                                TableHelper.doRefresh('#table');
+                            } else {
+                                console.log('数据错误,导致加载失败,' + res.code);
+                            }
+                        })
+                    },
+
+                    tableRefresh: function () {
+                        $('#table').bootstrapTable('destroy');
+                        $('#table').bootstrapTable({
+                            columns: [
+                                { field: 'date', title: '日期', align: 'center', valign: 'middle', width: '20%' },
+                                { field: 'peopleNum', title: '抽奖人数', align: 'center', valign: 'middle', width: '10%' },
+                                { field: 'countNum', title: '抽奖记录数', align: 'center', valign: 'middle', width: '10%' },
+                                { field: 'userInputDiamonds', title: '用户投入钻石数', align: 'center', valign: 'middle', width: '10%' },
+                                { field: 'giftOutputDiamonds', title: '平台产出价值数', align: 'center', valign: 'middle', width: '10%' }
+                            ],
+                            cache: false,
+                            striped: true,
+                            showRefresh: false,
+                            pagination: false,
+                            sidePagination: "none", //表示服务端请求
+                            queryParamsType: 'undefined',
+                            queryParams: function queryParams(params) {
+                                var param = {
+                                    startDate: $timeBegin,
+                                    endDate: $timeEnd,
+                                    erbanNo: $('#erbanNo').val(),
+                                };
+                                return param;
+                            },
+                            uniqueId: 'date',
+                            toolbar: '#toolbar',
+                            url: '/admin/findLove/data/platform/list',
+                            onLoadSuccess: function () {
+                                console.log('load success');
+                            },
+                            onLoadError: function () {
+                                console.log('load fail');
+                            }
+                        });
+                    }
+                };
+
+                main.init();
+
+            })
+        }
+    },
+};
+</script>
+
+<style scoped>
+.dataCount {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.dataCount>p {
+    padding: 5px;
+    border-radius: 5px;
+    background: #ccc;
+    margin-right: 10px;
+}
+
+.qry_col {
+    float: left;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/findlove/PoolItemAdminView.vue b/src/views/findlove/PoolItemAdminView.vue
new file mode 100644
index 0000000..cbccdfd
--- /dev/null
+++ b/src/views/findlove/PoolItemAdminView.vue
@@ -0,0 +1,925 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <section class="content-header">
+                <h1 id="itemTitle"></h1>
+            </section>
+
+            <section class="content">
+
+                <div class="header-section">
+                    <div class="pool-line-name">常规线</div>
+                    <div class="dataCount">
+                        <p>
+                            <span>奖池线包含组数：</span>
+                            <span id="baseLineGroupCount"></span>
+                        </p>
+                        <p>
+                            <span>奖池线礼物数：</span>
+                            <span id="baseLinePrizeCount"></span>
+                        </p>
+                        <p>
+                            <span>总礼物价值：</span>
+                            <span id="baseLinePrizeValue"></span>
+                        </p>
+                        <p>
+                            <span>单线比：</span>
+                            <span id="baseLinePrizeRate"></span>
+                        </p>
+                        <p>
+                            <button class="btn btn-primary js-deploy">发布</button>
+                            <button class="btn btn-primary js-deployed">已发布奖池</button>
+                        </p>
+                    </div>
+                </div>
+
+                <div class="group-table-section">
+                    <div class="prize-group-wrapper js-normal-prize-group-wrapper">
+                        <div class="header-wrapper">
+                            <div class="title">普通礼物组</div>
+                            <div class="right-content js-no-editing">
+                                <!--<div class="undeploy js-deploy-status">未发布</div>-->
+                                <div class="action-btn-wrap"><button class="btn btn-primary js-edit-group"
+                                        data-pool-type="1">编辑</button></div>
+                            </div>
+                            <div class="right-content right-content-edit js-editing">
+                                <div class="action-btn-wrap">
+                                    <button class="btn btn-primary js-add-prize" data-pool-type="1">新增</button>
+                                    <button class="btn btn-danger js-save-edit" data-pool-type="1">保存</button>
+                                    <button class="btn btn-default js-cancel-edit" data-pool-type="1">取消</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="data-wrapper">
+                            <div>
+                                <span>礼物个数：</span>
+                                <span class="js-prize-total-count"></span>
+                            </div>
+                            <div>
+                                <span>礼物价值：</span>
+                                <span class="js-prize-total-value"></span>
+                            </div>
+                        </div>
+                        <table class="prize-group-table table table-hover table-striped">
+                            <tr>
+                                <th>名称</th>
+                                <th>礼物等级</th>
+                                <th>平台价值</th>
+                                <th>个数</th>
+                                <th>总价值</th>
+                                <th>核算概率</th>
+                                <th>展示概率</th>
+                            </tr>
+                            <!--                            <tr>-->
+                            <!--                                <td>糖果</td>-->
+                            <!--                                <td>1</td>-->
+                            <!--                                <td>123</td>-->
+                            <!--                                <td>21333</td>-->
+                            <!--                                <td>21.223%</td>-->
+                            <!--                                <td>21.221%</td>-->
+                            <!--                            </tr>-->
+                        </table>
+                    </div>
+                    <div class="prize-group-wrapper js-senior-prize-group-wrapper">
+                        <div class="header-wrapper">
+                            <div class="title">高级礼物组</div>
+                            <div class="right-content js-no-editing">
+                                <!--<div class="undeploy js-deploy-status">未发布</div>-->
+                                <div class="action-btn-wrap"><button class="btn btn-primary js-edit-group"
+                                        data-pool-type="2">编辑</button></div>
+                            </div>
+                            <div class="right-content right-content-edit js-editing">
+                                <div class="action-btn-wrap">
+                                    <button class="btn btn-primary js-add-prize" data-pool-type="2">新增</button>
+                                    <button class="btn btn-danger js-save-edit" data-pool-type="2">保存</button>
+                                    <button class="btn btn-default js-cancel-edit" data-pool-type="2">取消</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="data-wrapper">
+                            <div>
+                                <span>礼物个数：</span>
+                                <span class="js-prize-total-count"></span>
+                            </div>
+                            <div>
+                                <span>礼物价值：</span>
+                                <span class="js-prize-total-value"></span>
+                            </div>
+                        </div>
+                        <table class="prize-group-table table table-hover table-striped">
+                            <tr>
+                                <th>名称</th>
+                                <th>礼物等级</th>
+                                <th>平台价值</th>
+                                <th>个数</th>
+                                <th>总价值</th>
+                                <th>核算概率</th>
+                                <th>展示概率</th>
+                            </tr>
+                            <!--                        <tr>-->
+                            <!--                            <td>糖果</td>-->
+                            <!--                            <td>1</td>-->
+                            <!--                            <td>123</td>-->
+                            <!--                            <td>21333</td>-->
+                            <!--                            <td>21.223%</td>-->
+                            <!--                            <td>21.221%</td>-->
+                            <!--                        </tr>-->
+                        </table>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </section>
+
+    <!-- 添加弹窗 -->
+    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">x</span>
+                    </button>
+
+                    <h4 class="modal-title" id="addModalLabel">新增礼物</h4>
+                </div>
+
+                <div class="modal-body">
+                    <form action="" class="form-horizontal" id="addForm">
+                        <!-- 礼物组 -->
+                        <div class="form-group">
+                            <label for="prizePoolName" class="col-sm-3 control-label">礼物组：</label>
+
+                            <div class="col-sm-8">
+                                <input type="hidden" id="prizePoolType" name="prizePoolType" disabled class=""
+                                    placeholder="">
+                                <input type="text" id="prizePoolName" name="prizePoolName" disabled class="" placeholder="">
+                            </div>
+                        </div>
+                        <!-- 选择奖品 -->
+                        <div class="form-group">
+                            <label for="awardChoose" class="col-sm-3 control-label">选择奖品：</label>
+                            <div class="col-sm-8">
+                                <select name="awardChoose" id="awardChoose">
+                                    <!-- <option value=""></option> -->
+                                </select>
+                            </div>
+                        </div>
+                        <!-- 奖品id -->
+                        <div class="form-group">
+                            <label for="addPrizeId" class="col-sm-3 control-label">奖品id：</label>
+                            <div class="col-sm-8">
+                                <input type="text" id="addPrizeId" name="addPrizeId" disabled placeholder="">
+                            </div>
+                        </div>
+                        <!-- 奖品等级 -->
+                        <div class="form-group">
+                            <label for="prizeLevel" class="col-sm-3 control-label">奖品等级：</label>
+
+                            <div class="col-sm-8">
+                                <input type="text" id="prizeLevel" name="prizeLevel" class="validate[required]"
+                                    placeholder="单行输入">
+                            </div>
+                        </div>
+                        <!-- 奖品个数 -->
+                        <div class="form-group">
+                            <label for="jackpotNumber" class="col-sm-3 control-label">奖品个数：</label>
+
+                            <div class="col-sm-8">
+                                <input type="text" id="jackpotNumber" name="jackpotNumber" class="validate[required]"
+                                    placeholder="单行输入">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+
+                <div class="modal-footer">
+                    <button class="btn btn-default" type="button" id="addCancel">取消</button>
+                    <button class="btn btn-primary" type="button" id="addSave">保存</button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">提示信息</h4>
+                </div>
+                <div class="modal-body" id="tipMsg"></div>
+            </div>
+        </div>
+    </div>
+    <div class="modal fade" id="deployedModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">已发布奖池</h4>
+                </div>
+                <div class="modal-body">
+                    <div>奖池长度：<span id="deployedTotalSize"></span> | 高级奖池长度：<span id="deployedSeniorSize"></span> |
+                        普通奖池长度：<span id="deployedNormalSize"></span></div>
+                    <div>高级奖池：<span id="deployedSeniorItems"></span></div>
+                    <div>普通奖池：<span id="deployedNormalItems"></span></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--<div class="modal fade" id="deployConfirmModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">本次奖池线发布</h4>
+            </div>
+            <div class="modal-body">
+                <div>期望值 <span id="deployedPrizeRate"></span> 变为 <span id="currPrizeRate"></span></div>
+                <div>当前奖池线: <span id="currPoolLineId"></span></div>
+                <div>生效奖池线: <span id="activePoolLineId"></span></div>
+                <div>确认发布?</div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-default" type="button" id="deployCancel">取消发布</button>
+                <button class="btn btn-primary" type="button" id="deployConfirm">确认发布</button>
+            </div>
+        </div>
+    </div>
+</div>-->
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "PoolItemAdminView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                const POOL_TYPE = {
+                    normal: 1,
+                    senior: 2,
+                }
+
+                const POOL_NAME = {
+                    1: '普通礼物组',
+                    2: '高级礼物组',
+                }
+
+                var giftMap = {};
+
+                function calculateStatisticsDatas(normalPrizeItems, seniorPrizeItems) {
+                    let normalPrizeCount = 0;
+                    let normalPrizeTotalValue = 0;
+                    normalPrizeItems.forEach(item => {
+                        normalPrizeCount += item.num;
+                        normalPrizeTotalValue += item.num * item.diamonds
+                    })
+                    let seniorPrizeCount = 0;
+                    let seniorPrizeTotalValue = 0;
+                    seniorPrizeItems.forEach(item => {
+                        seniorPrizeCount += item.num;
+                        seniorPrizeTotalValue += item.num * item.diamonds
+                    })
+
+                    const totalPrizeCount = normalPrizeCount * seniorPrizeCount + seniorPrizeCount;
+                    const totalPrizeValue = normalPrizeTotalValue * seniorPrizeCount + seniorPrizeTotalValue;
+
+                    let prizeRate = 0;
+                    if (totalPrizeCount != 0) {
+                        prizeRate = parseFloat(totalPrizeValue) / (totalPrizeCount * 100)
+                    }
+
+                    return {
+                        normalPrizeCount,
+                        normalPrizeTotalValue,
+                        seniorPrizeCount,
+                        seniorPrizeTotalValue,
+                        totalPrizeCount,
+                        totalPrizeValue,
+                        prizeRate,
+                    };
+                }
+
+                function renderStatisticsDatas(statisticsDatas) {
+                    $('#baseLineGroupCount').text(statisticsDatas.seniorPrizeCount);
+                    $('#baseLinePrizeCount').text(statisticsDatas.totalPrizeCount);
+                    $('#baseLinePrizeValue').text(statisticsDatas.totalPrizeValue);
+                    $('#baseLinePrizeRate').text((100 * statisticsDatas.prizeRate).toFixed(2) + '%');
+                }
+
+                function changeDateValue(poolType, propName, idx, inputValue) {
+                    let prizeGroup;
+                    if (poolType == POOL_TYPE.normal) {
+                        prizeGroup = editingNormalPrizeGroup;
+                    } else if (poolType == POOL_TYPE.senior) {
+                        prizeGroup = editingSeniorPrizeGroup;
+                    } else {
+                        throw Error("unkonw prize pool type")
+                    }
+                    prizeGroup[idx][propName] = inputValue;
+                    // prizeGroup.isUndeploy = true;
+
+                    reRenderPage({
+                        normalPrizeGroup: editingNormalPrizeGroup,
+                        seniorPrizeGroup: editingSeniorPrizeGroup,
+                    })
+                }
+
+                function inputChanged(e) {
+                    const propName = $(e.target).attr("name");
+                    const idx = $(e.target).attr("data-idx");
+                    const poolType = $(e.target).attr("data-pool-type");
+                    const inputValue = e.target.value;
+                    console.debug("input change", e, propName, idx, poolType, inputValue);
+                    changeDateValue(poolType, propName, idx, inputValue);
+                }
+
+                function removePirzeItem(e) {
+                    const idx = $(e.target).attr("data-idx");
+                    const poolType = $(e.target).attr("data-pool-type");
+                    let prizeList = editingNormalPrizeGroup;
+                    if (poolType == POOL_TYPE.senior) {
+                        prizeList = editingSeniorPrizeGroup;
+                    }
+                    if (prizeList.length == 1) {
+                        $('#tipMsg').text('奖池中至少要有一个奖品');
+                        $('#tipModal').modal('show');
+                        return;
+                    }
+                    if (confirm("你确定要从奖池中移除该奖品吗？")) {
+                        prizeList.splice(idx, 1);
+                        console.debug("removePirzeItem prizeList", prizeList)
+                        reRenderPage({
+                            normalPrizeGroup: editingNormalPrizeGroup,
+                            seniorPrizeGroup: editingSeniorPrizeGroup,
+                        });
+                    }
+                }
+
+                function renderPrizeGroup(poolType, prizeGroup, statisticsDatas, isEdit) {
+                    let wrapperClassName = '.js-normal-prize-group-wrapper';
+                    let totalPrizeCount = statisticsDatas.normalPrizeCount;
+                    let totalPrizeValue = statisticsDatas.normalPrizeTotalValue;
+                    if (poolType == POOL_TYPE.senior) {
+                        wrapperClassName = '.js-senior-prize-group-wrapper';
+                        totalPrizeCount = statisticsDatas.seniorPrizeCount;
+                        totalPrizeValue = statisticsDatas.seniorPrizeTotalValue;
+                    }
+                    //console.debug("wrapperClassName", wrapperClassName);
+                    $(`${wrapperClassName} .js-prize-total-count`).text(totalPrizeCount);
+                    $(`${wrapperClassName} .js-prize-total-value`).text(totalPrizeValue);
+                    if (isEdit) {
+                        console.debug("show editing action btns")
+                        $(`${wrapperClassName} .js-no-editing`).hide();
+                        $(`${wrapperClassName} .js-editing`).show();
+                    } else {
+                        console.debug("hide editing action btns")
+                        $(`${wrapperClassName} .js-no-editing`).show();
+                        $(`${wrapperClassName} .js-editing`).hide();
+                        //if (prizeGroup.isUndeploy) {
+                        //    $(`${wrapperClassName} .js-deploy-status`).show();
+                        //} else {
+                        //    $(`${wrapperClassName} .js-deploy-status`).hide();
+                        //}
+                    }
+
+                    const groupTableDom = $(`${wrapperClassName} .prize-group-table`);
+                    $(`${wrapperClassName} .prize-group-table input`).unbind("change");
+                    $(`${wrapperClassName} .prize-group-table .js-remove-item`).unbind("click");
+                    groupTableDom.html("<thead><tr>\n" +
+                        "                                <th>名称</th>\n" +
+                        "                                <th>礼物等级</th>\n" +
+                        "                                <th>平台价值</th>\n" +
+                        "                                <th>个数</th>\n" +
+                        "                                <th>总价值</th>\n" +
+                        "                                <th>核算概率</th>\n" +
+                        "                                <th>展示概率</th>\n" +
+                        "                            </tr></thead>");
+                    const prizeItems = prizeGroup;
+                    groupTableDom.append("<tbody>")
+                    prizeItems.forEach((item, idx) => {
+                        let accountingRate = item.num / (1 + statisticsDatas.normalPrizeCount) * 100;
+                        const tds = [];
+                        if (isEdit) {
+                            tds.push(`<td><i class="glyphicon glyphicon-remove js-remove-item" data-idx="${idx}" data-pool-type="${poolType}"></i>${item.giftName}</td>`);
+                        } else {
+                            tds.push(`<td>${item.giftName}</td>`)
+                        }
+                        if (isEdit) {
+                            tds.push(`<td><input class="input-sm" name="level" data-idx="${idx}" data-pool-type="${poolType}" value="${item.level}"></td>`)
+                        } else {
+                            tds.push(`<td>${item.level}</td>`)
+                        }
+                        tds.push(`<td>${item.diamonds}</td>`);
+                        if (isEdit) {
+                            tds.push(`<td><input type="number" class="input-sm" name="num" data-idx="${idx}" data-pool-type="${poolType}" value="${item.num}"></td>`)
+                        } else {
+                            tds.push(`<td>${item.num}</td>`)
+                        }
+                        tds.push(`<td>${item.num * item.diamonds}</td>`);
+                        tds.push(`<td>${accountingRate.toFixed(4)}%</td>`);
+                        if (isEdit) {
+                            //tds.push(`<td><input type="number" min="0.01" step="0.01" class="input-sm" name="showRate" data-idx="${idx}" data-pool-type="${poolType}" value="${item.showRate}">%</td>`)
+                            tds.push(`<td><input type="text" onkeyup="value=value.replace(/^\\D*(\\d*(?:\\.\\d{0,2})?).*$/g, '$1')" name="showRate" data-idx="${idx}" data-pool-type="${poolType}" value="${item.showRate}">%</td>`)
+                        } else {
+                            tds.push(`<td>${item.showRate}%</td>`);
+                        }
+                        // if (isEdit) {
+                        //     let disabled = false
+                        //     if (poolType == POOL_TYPE.normal && idx == 0) {
+                        //         disabled = true;
+                        //     }
+                        //     tds.push(`<td><input ${disabled ? "disabled" : ""} name="showRatio" data-idx="${idx}" data-pool-type="${poolType}" value="${parseFloat(item.showRatio)/RATE_SCALE.toFixed(3)}">%</td>`)
+                        // } else {
+                        //     tds.push(`<td>${parseFloat(item.showRatio)/RATE_SCALE.toFixed(3)}%</td>`)
+                        // }
+                        let row = `<tr>${tds.join()}</tr>`;
+
+                        groupTableDom.append(row);
+                    })
+                    groupTableDom.append("</tbody>")
+
+                    // 注册输入框变更事件
+                    $(`${wrapperClassName} .prize-group-table input`).bind('change', inputChanged);
+                    // 注册删除事件
+                    $(`${wrapperClassName} .prize-group-table .js-remove-item`).bind("click", removePirzeItem);
+                }
+
+                let normalPrizeGroupCache;
+                let seniorPrizeGroupCache;
+                let deployedNormalPrizes;
+                let deployedSeniorPrizes;
+                let statisticsDatas;
+                let deployedStatisticsDatas;
+                let editingNormalPrizeGroup;
+                let currentPoolLineId;
+                let maxLineId;
+                let editingSeniorPrizeGroup;
+                let isNormalPrizeEditing = false;
+                let isSeniorPrizeEditing = false;
+
+                function renderPageWhenInit(groupData) {
+                    const normalPrizeGroup = groupData.normalPrizeGroup;
+                    const seniorPrizeGroup = groupData.highPrizeGroup;
+                    normalPrizeGroupCache = normalPrizeGroup;
+                    seniorPrizeGroupCache = seniorPrizeGroup;
+                    //deployedNormalPrizes = groupData.deployedNormalPrizes
+                    //deployedSeniorPrizes = groupData.deployedSeniorPrizes
+                    //currentPoolLineId = groupData.currentPoolLineId
+                    //maxLineId = groupData.maxLineId
+                    editingNormalPrizeGroup = null;
+                    editingSeniorPrizeGroup = null;
+                    isNormalPrizeEditing = false;
+                    isSeniorPrizeEditing = false;
+                    statisticsDatas = calculateStatisticsDatas(normalPrizeGroup, seniorPrizeGroup);
+                    //deployedStatisticsDatas = calculateStatisticsDatas(deployedNormalPrizes, deployedSeniorPrizes);
+                    renderStatisticsDatas(statisticsDatas);
+                    renderPrizeGroup(POOL_TYPE.normal, normalPrizeGroup, statisticsDatas, false)
+                    renderPrizeGroup(POOL_TYPE.senior, seniorPrizeGroup, statisticsDatas, false)
+                }
+
+                function getPageInfo() {
+                    $.get('/admin/findLove/getPrizeGroupsInfo', {
+                    }, function (res) {
+                        console.log(res);
+
+                        const data = res.data;
+
+                        renderPageWhenInit(data);
+                    })
+                }
+                getPageInfo();
+
+                function deepClone(o) {
+                    // 判断如果不是引用类型，直接返回数据即可
+                    if (typeof o === 'string' || typeof o === 'number' || typeof o === 'boolean' || typeof o === 'undefined') {
+                        return o
+                    } else if (Array.isArray(o)) { // 如果是数组，则定义一个新数组，完成复制后返回
+                        // 注意，这里判断数组不能用typeof，因为typeof Array 返回的是object
+                        // console.log(typeof [])  // --> object
+                        var _arr = []
+                        o.forEach(item => { _arr.push(deepClone(item)) })
+                        return _arr
+                    } else if (typeof o === 'object') {
+                        var _o = {}
+                        for (let key in o) {
+                            _o[key] = deepClone(o[key])
+                        }
+                        return _o
+                    }
+                }
+
+                $('.js-edit-group').on('click', function () {
+                    const poolType = $(this).attr('data-pool-type');
+                    // 进入编辑状态,则使用深度拷贝复制2组数据
+                    if (!editingNormalPrizeGroup || editingNormalPrizeGroup == null) {
+                        editingNormalPrizeGroup = deepClone(normalPrizeGroupCache);
+                    }
+                    if (!editingSeniorPrizeGroup || editingSeniorPrizeGroup == null) {
+                        editingSeniorPrizeGroup = deepClone(seniorPrizeGroupCache);
+                    }
+                    let prizeGroup;
+                    if (poolType == POOL_TYPE.normal) {
+                        prizeGroup = editingNormalPrizeGroup;
+                        isNormalPrizeEditing = true;
+                    } else if (poolType == POOL_TYPE.senior) {
+                        prizeGroup = editingSeniorPrizeGroup;
+                        isSeniorPrizeEditing = true;
+                    } else {
+                        throw Error("unkonw prize pool type")
+                    }
+
+                    const statisticsDatasCopy = deepClone(statisticsDatas);
+                    renderPrizeGroup(poolType, prizeGroup, statisticsDatasCopy, true)
+
+                });
+
+                function reRenderPage (groupData) {
+                    //console.debug("reRenderPage groupData", groupData)
+                    const normalPrizeGroup = groupData.normalPrizeGroup;
+                    const seniorPrizeGroup = groupData.seniorPrizeGroup;
+                    statisticsDatas = calculateStatisticsDatas(normalPrizeGroup, seniorPrizeGroup);
+                    renderStatisticsDatas(statisticsDatas);
+                    renderPrizeGroup(POOL_TYPE.normal, normalPrizeGroup, statisticsDatas, isNormalPrizeEditing)
+                    renderPrizeGroup(POOL_TYPE.senior, seniorPrizeGroup, statisticsDatas, isSeniorPrizeEditing)
+                }
+
+                $('.js-cancel-edit').on('click', function () {
+                    const poolType = $(this).attr('data-pool-type');
+                    console.debug("js-cancel-edit ", poolType, normalPrizeGroupCache, seniorPrizeGroupCache);
+                    let normalPrizeGroup = normalPrizeGroupCache;
+                    if (isNormalPrizeEditing && poolType != POOL_TYPE.normal) {
+                        // 普通组在编辑,并且当前取消编辑的不是普通组,则使用编辑中的数据来重新渲染页面
+                        normalPrizeGroup = editingNormalPrizeGroup;
+                    }
+                    let seniorPrizeGroup = seniorPrizeGroupCache;
+                    if (isSeniorPrizeEditing && poolType != POOL_TYPE.senior) {
+                        seniorPrizeGroup = editingSeniorPrizeGroup;
+                    }
+                    if (poolType == POOL_TYPE.normal) {
+                        editingNormalPrizeGroup = null;
+                        isNormalPrizeEditing = false;
+                    } else if (poolType == POOL_TYPE.senior) {
+                        editingSeniorPrizeGroup = null;
+                        isSeniorPrizeEditing = false;
+                    }
+
+                    reRenderPage({
+                        normalPrizeGroup,
+                        seniorPrizeGroup,
+                    })
+                });
+
+                $('.js-save-edit').on('click', function () {
+                    const poolType = $(this).attr('data-pool-type');
+                    let prizeGroup;
+                    if (poolType == POOL_TYPE.normal) {
+                        // 普通组在编辑,并且当前取消编辑的不是普通组,则使用编辑中的数据来重新渲染页面
+                        prizeGroup = editingNormalPrizeGroup;
+                        isNormalPrizeEditing = false;
+                    } else if (poolType == POOL_TYPE.senior) {
+                        prizeGroup = editingSeniorPrizeGroup;
+                        isSeniorPrizeEditing = false;
+                    } else {
+                        throw Error("unkonw prize pool type")
+                    }
+
+                    console.debug("js-save-edit prizeGroup", prizeGroup);
+
+                    console.info(JSON.stringify({
+                        poolItems: prizeGroup,
+                        prizePoolType: poolType,
+                    }))
+
+                    $.ajax({
+                        type: "post",
+                        url: "/admin/findLove/saveDraft",
+                        data: JSON.stringify({
+                            poolItems: prizeGroup,
+                            prizePoolType: poolType,
+                        }),
+                        dataType: "json",
+                        contentType: 'application/json',
+                        success: function (json) {
+                            if (json.code == 200) {
+                                $("#tipMsg").text("保存成功");
+                                $("#tipModal").modal('show');
+                                getPageInfo();
+                            } else {
+                                $("#tipMsg").text("保存失败." + json.message);
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    });
+                });
+
+                function getDataFormBack() {
+                    $.get('/admin/gift/getAll', {}, function (res) {
+                        if (res.code == 200) {
+                            //console.log(res);
+                            for (var i = 0; i < res.data.length; i++) {
+                                // id对象存储
+                                var id = '' + res.data[i].giftId;
+                                giftMap[id] = res.data[i];
+                            }
+                            renderAwardOption()
+                        }
+                    });
+                }
+                getDataFormBack();
+
+                function renderAwardOption() {
+                    $('#awardChoose').find('option').remove();
+                    // var str = '<option></option>';
+                    // $('#awardChoose').append(str);
+                    var str;
+                    for (var i in giftMap) {
+                        const gift = giftMap[i]
+                        str = '<option value=' + gift.giftId + '>' + gift.giftId + '-' + gift.giftName + '</option>';
+                        $('#awardChoose').append(str);
+                    }
+                }
+
+                function clearModal() {
+                    $('#addForm').find('input[type=text],select,input[type=hidden]').each(function () {
+                        $(this).val('');
+                    });
+                    $('#editForm').find('input[type=text],select,input[type=hidden]').each(function () {
+                        $(this).val('');
+                    });
+                }
+                // 添加按钮事件
+                $('.js-add-prize').on('click', function () {
+                    const poolType = $(this).attr('data-pool-type');
+                    clearModal();
+                    $('#prizePoolType').val(poolType);
+                    $('#prizePoolName').val(POOL_NAME[poolType]);
+                    $('#addModal').modal('show');
+                });
+
+                // select监听事件
+                $('#addModal').find('#awardChoose').on('change', function (e) {
+                    const chosenPrizeId = $(this).val()
+                    // console.debug("awardChoose change", e, chosenPrizeId)
+                    $('#addPrizeId').val(chosenPrizeId);
+                });
+
+                // 保存按钮事件
+                $('#addSave').on('click', function () {
+                    const chosenPrizeId = $('#awardChoose').val()
+                    const poolType = parseInt($('#prizePoolType').val());
+                    const currAllPrizeItems = [...editingNormalPrizeGroup, ...editingSeniorPrizeGroup];
+                    for (let i = 0; i < currAllPrizeItems.length; i++) {
+                        const exsistsPrize = currAllPrizeItems[i];
+                        if (exsistsPrize.giftId == chosenPrizeId) {
+                            $('#tipMsg').text('所选的奖品已添加到奖池中,不能重复添加');
+                            $('#tipModal').modal('show');
+                            return;
+                        }
+                    }
+
+                    const gift = giftMap[chosenPrizeId];
+                    const newPoolItem = {
+                        giftId: parseInt(chosenPrizeId),
+                        giftName: gift.giftName,
+                        level: parseInt($('#prizeLevel').val()),
+                        num: parseInt($('#jackpotNumber').val()),
+                        prizePoolType: poolType,
+                        diamonds: gift.goldPrice,
+                        showRatio: 0.0,
+                    }
+                    let prizeList = editingNormalPrizeGroup;
+                    if (poolType == POOL_TYPE.senior) {
+                        prizeList = editingSeniorPrizeGroup;
+                    }
+                    // 按平台价值递增排序
+                    let insertIdx = prizeList.length;
+                    for (let i = 0; i < prizeList.length; i++) {
+                        const exsistsPrize = prizeList[i];
+                        if (newPoolItem.diamonds < exsistsPrize.diamonds) {
+                            insertIdx = i;
+                            break;
+                        }
+                    }
+                    prizeList.splice(insertIdx, 0, newPoolItem);
+
+                    reRenderPage({
+                        normalPrizeGroup: editingNormalPrizeGroup,
+                        seniorPrizeGroup: editingSeniorPrizeGroup,
+                    });
+
+                    $('#addModal').modal('hide');
+                });
+
+                $('#addCancel').on('click', function () {
+                    $('#addModal').modal('hide');
+                });
+
+                // 发布
+                $('.js-deploy').on('click', function () {
+                    if (isSeniorPrizeEditing || isNormalPrizeEditing) {
+                        $('#tipMsg').text('当前有礼物组未报错,请先保存礼物组后再尝试发布');
+                        $('#tipModal').modal('show');
+                        return;
+                    }
+                    //if (!normalPrizeGroupCache.isUndeploy && !seniorPrizeGroupCache.isUndeploy) {
+                    //    $('#tipMsg').text('没有待发布的修改');
+                    //    $('#tipModal').modal('show');
+                    //    return;
+                    //}
+                    console.debug('js-deploy data', normalPrizeGroupCache, seniorPrizeGroupCache)
+                    if ((normalPrizeGroupCache.length <= 0) ||
+                        (seniorPrizeGroupCache.length <= 0)) {
+                        $('#tipMsg').text('所有的礼物组都必须至少添加一个奖品');
+                        $('#tipModal').modal('show');
+                        return;
+                    }
+
+                    //$('#deployedPrizeRate').text(deployedStatisticsDatas.prizeRate.toFixed(4));
+                    //$('#currPrizeRate').text(statisticsDatas.prizeRate.toFixed(4));
+                    //$('#currPoolLineId').text(currentPoolLineId);
+                    //$('#activePoolLineId').text(maxLineId + 1);
+
+                    $.ajax({
+                        type: "post",
+                        url: "/admin/findLove/deploy",
+                        dataType: "json",
+                        contentType: 'application/json',
+                        success: function (json) {
+                            if (json.code == 200) {
+                                $("#tipMsg").text("发布成功.等待奖池生成");
+                                $("#tipModal").modal('show');
+                                getPageInfo();
+                            } else {
+                                $("#tipMsg").text(json.message);
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    });
+
+                    //$('#deployConfirmModal').modal('show');
+                })
+                /*$('#deployCancel').on('click', function () {
+                    $('#deployConfirmModal').modal('hide');
+                })
+        
+                $('#deployConfirm').on('click', function () {
+                    $.ajax({
+                        type: "post",
+                        url: "/admin/findLove/deploy",
+                        dataType: "json",
+                        contentType: 'application/json',
+                        success: function (json) {
+                            if (json.code == 200) {
+                                $("#tipMsg").text("发布成功.等待奖池生成");
+                                $("#tipModal").modal('show');
+                                getPageInfo();
+                            } else {
+                                $("#tipMsg").text(json.message);
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    });
+                    $('#deployConfirmModal').modal('hide');
+                })*/
+
+                // 发布
+                $('.js-deployed').on('click', function () {
+
+                    $.ajax({
+                        type: "get",
+                        url: "/admin/findLove/getDeployed",
+                        success: function (json) {
+                            if (json.code == 200) {
+                                const data = json.data
+                                const seniorSize = data.seniorPoolItems.map(i => i.num).reduce((prev, cur) => prev + cur)
+                                const normalSize = data.normalPoolItems.map(i => i.num).reduce((prev, cur) => prev + cur)
+                                $('#deployedSeniorSize').html(seniorSize)
+                                $('#deployedNormalSize').html(normalSize)
+                                $('#deployedTotalSize').html(seniorSize + seniorSize * normalSize)
+                                const seniorItems = data.seniorPoolItems.sort((a, b) => b.num - a.num).map(i => {
+                                    return `${i.giftId}-${i.giftName} x ${i.num}`
+                                }).join("，")
+                                const normalItems = data.normalPoolItems.sort((a, b) => b.num - a.num).map(i => {
+                                    return `${i.giftId}-${i.giftName} x ${i.num}`
+                                }).join("，")
+                                $('#deployedSeniorItems').html(seniorItems)
+                                $('#deployedNormalItems').html(normalItems)
+                            }
+                        }
+                    });
+
+                    $('#deployedModal').modal('show');
+                })
+            })
+        }
+    },
+};
+</script>
+
+<style scoped>
+.pool-line-name {
+    font-size: 20px;
+}
+
+.dataCount {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.dataCount>p {
+    padding: 5px;
+    border-radius: 5px;
+    /*background: #ccc;*/
+    margin-right: 20px;
+}
+
+.group-table-section {
+    display: flex;
+    width: 100%;
+}
+
+.group-table-section .prize-group-wrapper {
+    width: 50%;
+}
+
+.prize-group-wrapper .header-wrapper {
+    display: flex;
+    justify-content: space-between;
+    max-width: 512px;
+}
+
+.prize-group-wrapper .header-wrapper .title {
+    font-size: 20px;
+}
+
+.prize-group-wrapper .header-wrapper .right-content {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.prize-group-wrapper .header-wrapper .right-content.right-content-edit {
+    display: none;
+}
+
+.prize-group-wrapper .header-wrapper .action-btn-wrap button:not(last-child) {
+    margin-right: 10px;
+}
+
+.prize-group-wrapper .header-wrapper .right-content .undeploy {
+    color: red;
+    margin-right: 10px;
+}
+
+.prize-group-wrapper .data-wrapper {
+    display: flex;
+    margin-top: 12px;
+}
+
+.prize-group-wrapper .data-wrapper div {
+    margin-right: 20px;
+}
+
+.prize-group-wrapper .prize-group-table {
+    margin-top: 12px;
+    margin-right: 10px;
+    max-width: 1024px;
+
+}
+
+.prize-group-wrapper .prize-group-table {
+    color: red;
+    cursor: pointer;
+
+}
+
+#deployConfirmModal .modal-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+
+#deployConfirmModal .modal-body #currPrizeRate {
+    color: red;
+
+}
+
+#deployConfirmModal .modal-body div:first-child {
+    margin-bottom: 10px;
+}
+
+#deployConfirmModal .modal-body div:last-child {
+    margin-top: 10px;
+}</style>
\ No newline at end of file
diff --git a/src/views/findlove/PrizeDrawRecordAdminView.vue b/src/views/findlove/PrizeDrawRecordAdminView.vue
new file mode 100644
index 0000000..dfc9cdd
--- /dev/null
+++ b/src/views/findlove/PrizeDrawRecordAdminView.vue
@@ -0,0 +1,153 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <section class="content-header">
+                <h1 id="itemTitle"></h1>
+            </section>
+
+            <section class="content">
+                <div id="table"></div>
+                <div id="toolbar">
+                    <div class="col-sm-12">
+                        <div class="pull-left">
+                            <form action="/admin/findLove/data/export.action" id="searchForm">
+                                平台号：<input type="text" id="msNo" name="msNo" class="input-sm" placeholder="请输入平台号">
+
+                                奖品名称：<input type="text" id="prizeName" name="prizeName" class="input-sm"
+                                    placeholder="请输入奖品名称">
+
+                                日期：<input type="text" name="startDate" id="timeBegin" class="input-sm datetime"
+                                    placeholder="起始时间">
+                                - <input type="text" name="endDate" id="timeEnd" class="input-sm datetime"
+                                    placeholder="结束时间">
+
+                            </form>
+                        </div>
+
+                        <div class="pull-right">
+                            &nbsp;&nbsp;&nbsp;&nbsp;<button id="searchBtn" class="btn btn-primary">筛选</button>
+                            <button id="exportBtn" class="btn btn-primary">导出</button>
+                        </div>
+                    </div>
+
+                </div>
+            </section>
+        </div>
+    </section>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "PrizeDrawRecordAdminView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+
+                $('.datetime').datetimepicker({
+                    language: 'zh-CN',
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                });
+
+                var main = {
+                    init: function () {
+                        this.eventRegister();
+                        this.getDataFromBack();
+                    },
+
+                    eventRegister: function () {
+                        // 筛选按钮点击事件
+                        $('#searchBtn').on('click', function () {
+                            TableHelper.doRefresh('#table');
+                        });
+
+                        $("#exportBtn").on('click', function () {
+                            $("#searchForm").submit();
+                        })
+                    },
+
+                    getDataFromBack: function () {
+
+                    }
+                };
+                main.init();
+
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'erbanNo', title: '平台号', align: 'center', valign: 'middle', width: '10%' },
+                        { field: 'nick', title: '用户昵称', align: 'center', valign: 'middle', width: '10%' },
+                        { field: 'giftName', title: '奖品名称', align: 'center', valign: 'middle', width: '10%' },
+                        { field: 'num', title: '数量', align: 'center', valign: 'middle', width: '10%' },
+                        {
+                            field: 'createTime', title: '抽奖时间', align: 'center', valign: 'middle', width: '20%', formatter: function (val, row, index) {
+                                if (val) {
+                                    var date = new Date(val);
+                                    return date.format('yyyy-MM-dd hh:mm:ss');
+                                } else {
+                                    return '-';
+                                }
+                            }
+                        },
+                        { field: 'level', title: '礼物等级', align: 'center', valign: 'middle', width: '10%' },
+                        { field: 'diamonds', title: '钻石单价', align: 'center', valign: 'middle', width: '10%' },
+                        {
+                            field: 'poolType', title: '礼物组类型', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
+                                switch (row.poolType) {
+                                    case 1:
+                                        return '普通礼物组';
+                                     
+                                    case 2:
+                                        return '高级礼物组';
+                
+
+                                }
+                            }
+                        }
+                    ],
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 30, 50],
+                    sidePagination: 'server',
+                    queryParamsType: 'undefined',
+                    queryParams: function queryParams(params) {
+                        var param = {
+                            pageSize: params.pageSize,
+                            pageNumber: params.pageNumber,
+                            startDate: $('#timeBegin').val(),
+                            endDate: $('#timeEnd').val(),
+                            msNo: $('#msNo').val(),
+                            prizeName: $("#prizeName").val()
+                        };
+                        return param;
+                    },
+                    uniqueId: 'id',
+                    toolbar: '#toolbar',
+                    url: '/admin/findLove/data/listDrawRecord',
+                    onLOadSuccess: function () {
+                        console.log('load success');
+                    },
+                    onLoadError: function () {
+                        console.log('load fail');
+                    }
+                });
+            })
+        }
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/firstpage/FirstPageActivityBannerView.vue b/src/views/firstpage/FirstPageActivityBannerView.vue
new file mode 100644
index 0000000..a84d369
--- /dev/null
+++ b/src/views/firstpage/FirstPageActivityBannerView.vue
@@ -0,0 +1,1011 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <section class="content">
+                    <div id="table"></div>
+                    <div id="toolbar">
+                        跳转类型: <select name="skipType" id="skipType" class="input-m">
+                            <option value="0">--全部--</option>
+                            <option value="1">跳转app内部</option>
+                            <option value="2">跳转房间</option>
+                            <option value="3">跳转H5页面</option>
+                        </select>
+                        状态: <select name="status" id="status" class="input-m">
+                            <option value="0">--全部--</option>
+                            <option value="1">激活启用中</option>
+                            <option value="2">未激活</option>
+                        </select>
+                        app: <select name="app" id="app" class="input-m">
+                            <option value="">--全部--</option>
+                        </select>
+                        &nbsp;&nbsp;&nbsp;
+                        开始日期:&nbsp;&nbsp;<input type="text" name="timeBegin" id="beginTime" class="input-sm" value="">
+                        &nbsp;&nbsp;&nbsp;&nbsp;
+                        结束日期:&nbsp;&nbsp;<input type="text" name="timeEnd" id="endTime" class="input-sm" value="">
+                        <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
+
+                        <button id="add" class="btn btn-default">
+                            <i class="glyphicon glyphicon-plus"></i>增加
+                        </button>
+
+                        <button id="btnMultiDel" class="btn btn-default">
+                            <i class="glyphicon"></i>删除选中
+                        </button>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </section>
+    <div class="modal fade" id="bannerModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="modalLabel">banner信息</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="bannerForm">
+                        <div class="form-group">
+                            <label for="name" class="col-sm-3 control-label">Banner名字:</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control validate[required]" name="bannerName" id="name">
+                                <input type="hidden" id="bannerId" name="bannerId">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">banner图:</label>
+                            <div class="col-sm-8">
+                                <img src="" id="imgUrl" style="width:250px;height:90px;" alt="">
+                                <input type="file" id="uploadFile" name="uploadFile">
+                                <button class="btn btn-success" type="button" id="uploadBtn">上传</button>
+                                <span class="attention">注意:图片尺寸请注意在750*250,选择图片后请点击上传按钮</span>
+                                <input type="hidden" id="bannerPic" name="bannerPic"
+                                    class="form-control validate[required]" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">跳转链接:</label>
+                            <select name="skipType" id="skipUrlSort" class="col-sm-2">
+                                <option value="1">跳转app内部</option>
+                                <option value="2">跳转房间</option>
+                                <option value="3">跳转H5页面</option>
+                            </select>
+                            <div class="col-sm-6">
+                                <input type="text" class="form-control validate[required]" name="skipUri"
+                                    id="skipUrlContent">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="startDate" class="col-sm-3 control-label">起始时间:</label>
+                            <div class="col-sm-8">
+                                <input id="startDate" type="date" name="startTime" class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="endDate" class="col-sm-3 control-label">结束时间:</label>
+                            <div class="col-sm-8">
+                                <input id="endDate" type="date" name="endTime" class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="seqNo" class="col-sm-3 control-label">排序设置:</label>
+                            <div class="col-sm-3">
+                                <input type="text" id="seqNo" name="seqNo" class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="iosVersion" class="col-sm-3 control-label">ios版本号:</label>
+                                <div class="col-sm-3">
+                                    <input type="text" id="iosVersion" name="iosVersion"
+                                        class="form-control validate[required]">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="androidVersion" class="col-sm-3 control-label">安卓版本号:</label>
+                                <div class="col-sm-3">
+                                    <input type="text" id="androidVersion" name="androidVersion"
+                                        class="form-control validate[required]">
+                                </div>
+                            </div>
+                            <span style="color:red; padding-left: 60px">注:app版本号大于配置的版本号才显示该banner</span>
+                        </div>
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="noShowChannels" class="col-sm-3 control-label">不展示的渠道:</label>
+                                <div class="col-sm-8">
+                                    <input type="text" id="noShowChannels" name="noShowChannels" class="form-control ">
+                                </div>
+                            </div>
+                            <span style="color:red; padding-left: 60px">注:留空则为所有渠道展示。多个渠道用英文逗号“,”隔开</span>
+                        </div>
+                        <div class="form-group">
+                            <label for="bannerStatus" class="col-sm-3 control-label">激活设置:</label>
+                            <select name="bannerStatus" id="bannerStatus" class="col-sm-2">
+                                <option value="1">激活</option>
+                                <option value="2">不激活</option>
+                            </select>
+                        </div>
+                        <!--<div class="form-group">-->
+                        <!--<label for="appId" class="col-sm-3 control-label">app:</label>-->
+                        <!--<select name="appId" id="appId" class="col-sm-2">-->
+                        <!--</select>-->
+                        <!--</div>-->
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">Banner位置:</label>
+                            <div class="col-sm-4">
+                                <select name="bannerType" id="bannerType" class="col-sm-10"
+                                    onchange="selectOnChange(this.value)">
+                                    <option value="9">活动banner</option>
+                                </select>
+                            </div>
+                            <div class="col-sm-5 hidden titleListDev">
+                                <select name="titleId" id="titleList" class="col-sm-10 titleList">
+
+                                </select>
+                            </div>
+
+                        </div>
+                        <div id="bannerTypeDiv">
+                            <div class="form-group">
+                                <label for="platform" class="col-sm-3 control-label">展示平台:</label>
+                                <select name="platform" id="platform" class="col-sm-3">
+                                    <option value="all">全平台展示</option>
+                                    <option value="ios">只展示IOS</option>
+                                    <option value="android">只展示安卓</option>
+                                    <option value="none">都不展示</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div id="actLimitDiv">
+                            <div class="form-group">
+                                <label for="limitLevelExper" class="col-sm-3 control-label">活动限制等级经验:</label>
+                                <div class="col-sm-8">
+                                    <input type="text" class="form-control " name='limitLevelExper' id="limitLevelExper">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="showType" class="col-sm-3 control-label">h5页面是否全屏展示:</label>
+                                <select name="showType" id="showType" class="col-sm-2">
+                                    <option value="1">全屏</option>
+                                    <option value="2">非全屏</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="showRule" class="col-sm-3 control-label">活动入口展示规则:</label>
+                                <select name="showRule" id="showRule" class="col-sm-4">
+                                    <option value="1">始终展示</option>
+                                    <option value="2">达到限制等级展示</option>
+                                </select>
+                            </div>
+                        </div>
+
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="save">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal fade" id="addBannerModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="addModalLabel">新增banner</h4>
+                </div>
+                <div class="modal-body">
+                    <form id="addBannerForm" class="form-horizontal">
+                        <div class="form-group">
+                            <label for="addName" class="col-sm-3 control-label">Banner名字:</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control validate[required]" name="bannerName" id="addName">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">banner图:</label>
+                            <div class="col-sm-8">
+                                <img src="" id="addImgUrl" style="width:250px;height:90px;" alt="">
+                                <input type="file" id="addUploadFile" name="uploadFile">
+                                <button class="btn btn-success" type="button" id="addUploadBtn">上传</button>
+                                <input type="hidden" id="addBannerPic" name="bannerPic"
+                                    class="form-control validate[required]" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">跳转链接:</label>
+                            <select name="skipType" id="addSkipUrlSort" class="col-sm-2">
+                                <option value="1">跳转app内部</option>
+                                <option value="2">跳转房间</option>
+                                <option value="3">跳转H5页面</option>
+                            </select>
+                            <div class="col-sm-6">
+                                <input type="text" class="form-control validate[required]" name="skipUri"
+                                    id="addSkipUrlContent">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="addStartDate" class="col-sm-3 control-label">起始时间:</label>
+                            <div class="col-sm-8">
+                                <input id="addStartDate" type="date" name="startTime"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="addEndDate" class="col-sm-3 control-label">结束时间:</label>
+                            <div class="col-sm-8">
+                                <input id="addEndDate" type="date" name="endTime" class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="seqNo" class="col-sm-3 control-label">排序设置:</label>
+                            <div class="col-sm-3">
+                                <input type="text" id="addSeqNo" name="seqNo" class="form-control validate[required]">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="iosVersion" class="col-sm-3 control-label">ios版本号:</label>
+                                <div class="col-sm-3">
+                                    <input type="text" id="addIosVersion" name="iosVersion"
+                                        class="form-control validate[required]">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="androidVersion" class="col-sm-3 control-label">安卓版本号:</label>
+                                <div class="col-sm-3">
+                                    <input type="text" id="addAndroidVersion" name="androidVersion"
+                                        class="form-control validate[required]">
+                                </div>
+                            </div>
+                            <span style="color:red; padding-left: 60px ">注意:app版本号大于配置的版本号才显示该banner</span>
+                        </div>
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="noShowChannels" class="col-sm-3 control-label">不展示的渠道:</label>
+                                <div class="col-sm-8">
+                                    <input type="text" id="addNoShowChannels" name="noShowChannels" class="form-control ">
+                                </div>
+                            </div>
+                            <span style="color:red; padding-left: 60px">注:留空则为所有渠道展示。多个渠道用英文逗号“,”隔开</span>
+                        </div>
+                        <div class="form-group">
+                            <label for="bannerStatus" class="col-sm-3 control-label">激活设置:</label>
+                            <select name="bannerStatus" id="addBannerStatus" class="col-sm-2">
+                                <option value="1">激活</option>
+                                <option value="2">不激活</option>
+                            </select>
+                        </div>
+                        <!--<div class="form-group">-->
+                        <!--<label for="appId" class="col-sm-3 control-label">app:</label>-->
+                        <!--<select name="appId" id="addAppId" class="col-sm-2 validate[required]">-->
+                        <!--<option value="">请选择</option>-->
+                        <!--</select>-->
+                        <!--</div>-->
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">Banner位置:</label>
+                            <div class="col-sm-4">
+                                <select name="bannerType" id="addBannerType" class="col-sm-10"
+                                    onchange="addSelectOnChange(this.value)">
+                                    <option value="9">活动banner</option>
+                                </select>
+                            </div>
+                            <div class="col-sm-5 hidden titleListDev">
+                                <select name="titleId" id="addTitleList" class="col-sm-10 titleList">
+
+                                </select>
+                            </div>
+                        </div>
+                        <div id="addBannerTypeDiv">
+                            <div class="form-group">
+                                <label for="platform" class="col-sm-3 control-label">展示平台:</label>
+                                <select name="platform" id="addPlatform" class="col-sm-3">
+                                    <option value="all">全平台展示</option>
+                                    <option value="ios">只展示IOS</option>
+                                    <option value="android">只展示安卓</option>
+                                    <option value="none">都不展示</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div id="addActLimitDiv">
+                            <div class="form-group">
+                                <label for="limitLevelExper" class="col-sm-3 control-label">活动限制等级经验:</label>
+                                <div class="col-sm-8">
+                                    <input type="text" class="form-control " name='limitLevelExper' id="addLimitLevelExper">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="showType" class="col-sm-3 control-label">h5页面是否全屏展示:</label>
+                                <select name="showType" id="addShowType" class="col-sm-2">
+                                    <option value="1">全屏</option>
+                                    <option value="2">非全屏</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="showRule" class="col-sm-3 control-label">活动入口展示规则:</label>
+                                <select name="showRule" id="addShowRule" class="col-sm-4">
+                                    <option value="1">始终展示</option>
+                                    <option value="2">达到限制等级展示</option>
+                                </select>
+                            </div>
+                        </div>
+
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="addSave">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="imgMask"><img src="" alt=""></div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+var app = {};
+var validApp = {};
+export default {
+    name: "FirstPageActivityBannerView",
+    setup() {
+        function selectOnChange(val) {
+            if (val == 1) {
+                $("#bannerTypeDiv").show();
+                $("#actLimitDiv").hide();
+            } else if (val == 2) {
+                $("#actLimitDiv").show();
+                $("#bannerTypeDiv").hide();
+            } else {
+                $("#bannerTypeDiv").hide();
+                $("#actLimitDiv").hide();
+            }
+        }
+        function addSelectOnChange(val) {
+            if (val == 1) {
+                $("#addBannerTypeDiv").show();
+                $("#addActLimitDiv").hide();
+            } else if (val == 2) {
+                $("#addActLimitDiv").show();
+                $("#addBannerTypeDiv").hide();
+            } else {
+                $("#addBannerTypeDiv").hide();
+                $("#addActLimitDiv").hide();
+            }
+        }
+        window.selectOnChange = selectOnChange;
+        window.addSelectOnChange = addSelectOnChange;
+        return {
+            selectOnChange,
+            addSelectOnChange
+        };
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                var isEdit = false;
+                $('#table').bootstrapTable('destroy');
+                initTable();
+
+                //getAppNames();
+                // function getAppNames() {
+                //     $.get('/admin/appName/listAll', {}, function (res) {
+                //         if (res.rows.length > 0) {
+                //             renderSelect(res.rows);
+                //             renderAppObj(res.rows);
+                //         }
+                //     })
+                // }
+
+                // function renderSelect(data) {
+                //     var $select = $('#app');
+                //     for (var i = 0; i < data.length; i++) {
+                //         var $option = $('<option value="' + data[i].app + '" />');
+                //         $option.html(data[i].appName);
+                //         $select.append($option);
+                //     }
+                // }
+                //
+                // function renderAppObj(rows) {
+                //     for(var i = 0; i < rows.length; i++) {
+                //         var row = rows[i];
+                //         app[row.app] = row.appName;
+                //         // 有效的app
+                //         if(row.status == 1) {
+                //             validApp[row.app] = row.appName;
+                //         }
+                //     }
+                // }
+
+                function initTable() {
+                    $('#table').bootstrapTable({
+                        columns: [
+                            { field: 'sel', title: 'ID', align: 'center', valign: 'middle', checkbox: true, width: '1%' },
+                            { field: 'bannerId', title: 'bannerID', align: 'center', valign: 'middle', width: '5%' },
+                            { field: 'bannerName', title: '名称', align: 'center', valign: 'middle', width: '10%' },
+                            {
+                                field: 'bannerType', title: 'banner位置', align: 'center', valign: 'middle', width: '10%',
+                                formatter: function (val, row, index) {
+                                    switch (val) {
+                                        case 1:
+                                            return '首页';
+                            
+                                        case 2:
+                                            return '房间内';
+                                
+                                        case 3:
+                                            return '我的装扮';
+                             
+                                        case 9:
+                                            return '活动banner';
+                                    
+                                    }
+                                }
+                            },
+                            {
+                                field: 'bannerPic',
+                                title: 'banner图',
+                                align: 'center',
+                                width: '10%',
+                                formatter: function (val, row, index) {
+                                    return "<img src='" + val + "' width='60' height='50'>";
+                                }
+                            },
+                            {
+                                field: 'skipType', title: '跳转类型', align: 'center', valign: 'middle', width: '10%',
+                                formatter: function (val, row, index) {
+                                    switch (val) {
+                                        case 1:
+                                            return 'App页面';
+                                       
+                                        case 2:
+                                            return '聊天室';
+                                            
+                                        case 3:
+                                            return 'H5页面';
+                                         
+                                    }
+                                }
+                            },
+                            {
+                                field: 'seqNo',
+                                title: 'banner排序',
+                                align: 'center',
+                                width: '8%',
+                                valign: 'middle'
+                            },
+                            {
+                                field: 'bannerStatus',
+                                title: '状态',
+                                align: 'center',
+                                width: '10%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    console.log(val);
+                                    switch (val) {
+                                        case 1:
+                                            return '正在启用';
+                                        
+                                        case 2:
+                                            return '未激活';
+                                  
+                                    }
+                                }
+                            },
+                            {
+                                field: 'platform', title: '展示平台', align: 'center', valign: 'middle', width: '10%',
+                                formatter: function (val, row, index) {
+                                    if (row.bannerType == 1) {
+                                        switch (val) {
+                                            case 'all':
+                                                return '所有平台展示';
+                                            
+                                            case 'none':
+                                                return '都不展示';
+                                             
+                                            case 'ios':
+                                                return '只在IOS展示';
+                                              
+                                            case 'android':
+                                                return '只在安卓展示';
+                                     
+                                        }
+                                    } else {
+                                        return '-'
+                                    }
+                                }
+                            },
+                            { field: 'iosVersion', title: 'ios版本号', align: 'center', valign: 'middle', width: '10%' },
+                            { field: 'androidVersion', title: '安卓版本号', align: 'center', valign: 'middle', width: '10%' },
+                            { field: 'noShowChannels', title: '不展示的渠道', align: 'center', valign: 'middle', width: '10%' },
+                            {
+                                field: 'startTime',
+                                title: '活动开始时间',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    if (val) {
+                                        var date = new Date(val);
+                                        return date.format("yyyy-MM-dd hh:mm:ss");
+                                    } else {
+                                        return '-';
+                                    }
+                                }
+                            },
+                            {
+                                field: 'endTime',
+                                title: '活动结束时间',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    if (val) {
+                                        var date = new Date(val);
+                                        return date.format("yyyy-MM-dd hh:mm:ss");
+                                    } else {
+                                        return '-';
+                                    }
+
+                                }
+                            },
+                            { field: 'operator', title: '操作人', align: 'center', width: '5%' },
+                            {
+                                field: 'updateTime',
+                                title: '操作时间',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    if (val) {
+                                        var date = new Date(val);
+                                        return date.format("yyyy-MM-dd hh:mm:ss");
+                                    } else {
+                                        return '-';
+                                    }
+
+                                }
+                            },
+                            {
+                                field: 'tmp',
+                                title: '操作',
+                                align: 'center',
+                                width: '10%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    var key = row.bannerId;
+                                    var str;
+                                    str = "<button class='btn btn-sm btn-success opt-edit' data-id=" + key + ">编辑</button>";
+                                    str += "<button class='btn btn-sm btn-success opt-del' data-id=" + key + ">删除</button>";
+                                    return str;
+                                }
+                            }
+                        ],
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 10,
+                        pagination: true,
+                        pageList: [10, 20, 30, 50],
+                        sidePagination: "server", //表示服务端请求
+                        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                        //设置为limit可以获取limit, offset, search, sort, order
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var beginTime = ($('#beginTime').val()) ? ($("#beginTime").val() + ' 00:00:00') : null;
+                            var endTime = ($('#endTime').val()) ? ($('#endTime').val() + ' 23:59:59') : null;
+                            var param = {
+                                pageSize: params.pageSize,
+                                pageNumber: params.pageNumber,
+                                beginTime: beginTime,
+                                endTime: endTime,
+                                bannerStatus: parseInt($('#status').val()),
+                                skipType: parseInt($('#skipType').val()),
+                                bannerType: 9,
+                                // appId: ($('#app').val()) ? $('#app').val() : null
+                            };
+                            //                console.log(param);
+                            return param;
+                        },
+                        uniqueId: 'code',
+                        toolbar: '#toolbar',
+                        url: '/admin/banner/list.action',
+                        onLoadSuccess: function () {  //加载成功时执行
+                            console.log("load success");
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    })
+                }
+
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                })
+
+
+                // 获取信息
+                $("#table").on("click", '.opt-edit', function () {
+                    $('#titleList').html('');
+                    $('.titleListDev').addClass("hidden");
+                    var bannerId = parseInt($(this).data('id'));
+                    isEdit = true;
+                    debugger
+                    $.ajax({
+                        type: "get",
+                        url: "/admin/banner/get.action",
+                        data: { bannerId: bannerId },
+                        dataType: "json",
+                        success: function (json) {
+                            if (json.code == 200) {
+                                var date = json.data.endTime ? new Date(json.data.endTime).format("yyyy-MM-dd hh:mm:ss") : '';
+                                var startDate = json.data.startTime ? new Date(json.data.startTime).format("yyyy-MM-dd hh:mm:ss") : '';
+                                $('#name').val(json.data.bannerName);
+                                $('#imgUrl').attr('src', json.data.bannerPic);
+                                $('#bannerPic').val(json.data.bannerPic);
+                                $('#skipUrlSort').val(json.data.skipType);
+                                $('#skipUrlContent').val(json.data.skipUri);
+                                $("#bannerType").val(json.data.bannerType);
+                                $('#seqNo').val(json.data.seqNo);
+                                //$("#appId").val(json.data.appId);
+                                $('#iosVersion').val(json.data.iosVersion);
+                                $('#androidVersion').val(json.data.androidVersion);
+                                $('#noShowChannels').val(json.data.noShowChannels);
+                                $('#bannerStatus').val(json.data.bannerStatus);
+                                $('#startDate').val(startDate);
+                                $('#endDate').val(date);
+                                $('#bannerId').val(json.data.bannerId);
+                                $('#platform').val(json.data.platform);
+                                $('#limitLevelExper').val(json.data.limitLevelExper);
+                                $('#showType').val(json.data.showType);
+                                $('#showRule').val(json.data.showRule);
+                                window.selectOnChange(json.data.bannerType, json.data.titleId);
+                                $('#titleList').val(json.data.titleId);
+                                $('#bannerModal').modal('show');
+                                // picker1.datetimepicker('setStartDate', startDate);
+                            } else {
+                                $("#tipMsg").text("获取信息出错");
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    });
+                });
+
+
+                function cleanModal(obj) {
+                    $('#addBannerForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
+                        $(this).val('');
+                    })
+                    $('#addBannerForm').find('img').attr('src', '');
+                    //清空输入框
+                    obj.find('input:text').val('');
+                    //清空隐藏域
+                    obj.find('input:hidden').val('');
+                    //清空单选按钮
+                    obj.find('input:radio').attr("checked", false);
+                    //清空文本域
+                    obj.find('textarea').val('');
+                    //清空图片
+                    obj.find('img').attr("src", "");
+                    //清空已上传
+                }
+                // 事件编辑
+                var $timeBegin = $('#beginTime').datepicker({
+                    format: 'yyyy-mm-dd',
+                    autoclose: true
+                });
+                var $timeEnd = $('#endTime').datepicker({
+                    format: 'yyyy-mm-dd',
+                    autoclose: true,
+                });
+
+                $timeBegin.on('changeDate', function () {
+                    var date = $('#beginTime').datepicker('getDate');
+                    $timeEnd.datepicker('setStartDate', date);
+                });
+                $timeEnd.on('changeDate', function () {
+                    var date = $('#endTime').datepicker('getDate');
+                    $timeBegin.datepicker('setEndDate', date);
+                });
+                $('#save').on('click', function () {
+                    // if(!$('#appId').val()){
+                    //     $("#tipMsg").text("请选择app");
+                    //     $("#tipModal").modal('show');
+                    //     return;
+                    // }
+                    if ($('#bannerForm').validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/banner/save.action?startTimeString=" + $('#startDate').val()
+                                + "&endTimeString=" + $('#endDate').val(),
+                            data: $('#bannerForm').serialize(),
+                            dataType: 'json',
+                            success: function (json) {
+                                if (json.code == 200) {
+                                    $("#bannerModal").modal('hide');
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("保存失败，错误码：" + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        })
+                    }
+                });
+                $("#add").on('click', function () {
+                    cleanModal($("#addBannerForm"));
+                    $('#addTitleList').html('');
+                    $('#addStartDate').val('');
+                    $('#addEndDate').val('');
+
+                    // 处理appId
+                    // $('#addAppId').empty();
+                    // $('#addAppId').append('<option value="">请选择</option>');
+                    // for(var key in validApp) {
+                    //     $('#addAppId').append('<option value="'+key+'">'+validApp[key]+'</option>');
+                    // }
+
+                    $('#addBannerTypeDiv').hide();
+                    $('#addActLimitDiv').hide();
+
+                });
+                $('#addSave').on('click', function () {
+                    var startDateVal = $('#addStartDate').val();
+                    var endDateVal = $('#addEndDate').val();
+
+                    if (!startDateVal || !endDateVal) {
+                        $("#tipMsg").text("请选择日期");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+
+                    if ($('#addBannerForm').validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/banner/save.action?startTimeString=" + $('#addStartDate').val()
+                                + "&endTimeString=" + $('#addEndDate').val(),
+                            data: $('#addBannerForm').serialize(),
+                            dataType: 'json',
+                            success: function (json) {
+                                console.log(json);
+                                if (json.code == 200) {
+                                    $('#addBannerModal').modal('hide');
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("保存失败，错误码：" + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        })
+                    }
+                });
+
+                var picker2 = $('#addStartDate').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                })
+                var picker3 = $('#addEndDate').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                })
+                picker2.on('changeDate', function () {
+                    var date = $('#addStartDate').datetimepicker('getDate');
+                    picker2.datetimepicker('setStartDate', date);
+                });
+                picker3.on('changeDate', function () {
+                    var date = $('#addEndDate').datetimepicker('getDate');
+                    picker3.datetimepicker('setEndDate', date);
+                });
+                var picker4 = $('#startDate').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                })
+                var picker5 = $('#endDate').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                })
+                picker4.on('changeDate', function () {
+                    var date = $('#startDate').datetimepicker('getDate');
+                    picker4.datetimepicker('setStartDate', date);
+                });
+                picker5.on('changeDate', function () {
+                    var date = $('#endDate').datetimepicker('getDate');
+                    picker5.datetimepicker('setEndDate', date);
+                });
+                $('#uploadBtn').on('click', function () {
+                    var options = {
+                        type: 'post',
+                        url: '/admin/banner/upload.action',
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.code == 200) {
+                                $('#bannerPic').val(json.data);
+                                $('#imgUrl').attr("src", json.data);
+                            } else {
+                                $("#tipMsg").text(json.msg);
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    }
+                    $("#bannerForm").ajaxSubmit(options);
+                })
+                $('#addUploadBtn').on('click', function () {
+                    var options = {
+                        type: 'post',
+                        url: '/admin/banner/upload.action',
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.code == 200) {
+                                $('#addBannerPic').val(json.data);
+                                $('#addImgUrl').attr('src', json.data);
+                                console.log(json.data);
+                            } else {
+                                $('#tipMsg').text(json.msg);
+                                $('#tipModal').modal('show');
+                            }
+                        }
+                    }
+                    $('#addBannerForm').ajaxSubmit(options);
+                })
+                $('#add').on('click', function () {
+                    isEdit = false;
+                    $('#addBannerForm')[0].reset();
+                    $('#addImgUrl').attr('src', '');
+                    $('#addBannerPic').val('');
+                    //ComboboxHelper.setDef("#displayType", 0);
+                    // // 处理appId
+                    // $('#addAppId').empty();
+                    // $('#addAppId').append('<option value="">请选择</option>');
+                    // for(var key in validApp) {
+                    //     $('#addAppId').append('<option value="'+key+'">'+validApp[key]+'</option>');
+                    // }
+                    $('#addBannerModal').modal('show');
+                })
+                $('#table').on('mouseenter', 'img', function (e) {
+                    console.log($(this), e.clientX);
+                    var src = $(this).attr('src');
+                    $('#imgMask img').attr('src', src);
+                    $('#imgMask').show();
+                    $('#imgMask').css({
+                        top: e.clientY + 20,
+                        left: e.clientX + 20
+                    })
+                })
+                $('#table').on('mouseleave', 'img', function (e) {
+                    console.log('移出');
+                    $('#imgMask').hide();
+                })
+
+                $('#btnMultiDel').on('click', function () {
+                    var rows = $("#table").bootstrapTable("getSelections");
+                    if (rows.length == 0) {
+                        alert("请先选择要删除的记录");
+                        return;
+                    }
+                    var idArr = [];
+
+                    for (var i = 0; i < rows.length; i++) {
+                        idArr.push(rows[i]['bannerId']);
+                    }
+
+                    if (confirm("你确认删除选中Banner吗?")) {
+                        $.ajax({
+                            type: 'post',
+                            url: "/admin/banner/delete.action",
+                            data: {
+                                'ids': JSON.stringify(idArr)
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.code == 200) {
+                                    $("#tipMsg").text("已删除选中Banner");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("操作失败");
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+
+
+                $('#table').on('click', '.opt-del', function () {
+                    var key = parseInt($(this).attr('data-id'));
+                    var idArr = [];
+                    idArr.push(key);
+                    if (confirm("你确认删除Banner吗?")) {
+                        $.ajax({
+                            type: 'post',
+                            url: "/admin/banner/delete.action",
+                            data: {
+                                'ids': JSON.stringify(idArr)
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.code == 200) {
+                                    $("#tipMsg").text("已删除Banner");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("操作失败");
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                })
+            });
+        }
+    },
+};
+</script>
+
+<style scoped>
+#skipType,
+#status {
+    margin-right: 10px;
+}
+
+.btn {
+    margin: 0 4px;
+}
+
+#uploadBtn,
+#addUploadBtn {
+    margin-top: 4px;
+}
+
+#skipUrlSort,
+#bannerStatus,
+#addSkipUrlSort,
+#addBannerStatus {
+    height: 34px;
+}
+
+.attention {
+    line-height: 30px;
+    display: inline-block;
+    margin-top: 4px;
+    color: red;
+}
+
+#imgMask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 450px;
+    height: 150px;
+    padding: 4px;
+    background: #fff;
+    z-index: 999;
+    display: none;
+}
+
+#imgMask img {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/firstpage/FirstPageBannerView.vue b/src/views/firstpage/FirstPageBannerView.vue
new file mode 100644
index 0000000..50c2cef
--- /dev/null
+++ b/src/views/firstpage/FirstPageBannerView.vue
@@ -0,0 +1,1029 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <section class="content">
+                    <div id="table"></div>
+                    <div id="toolbar">
+                        跳转类型: <select name="skipType" id="skipType" class="input-m">
+                            <option value="0">--全部--</option>
+                            <option value="1">跳转app内部</option>
+                            <option value="2">跳转房间</option>
+                            <option value="3">跳转H5页面</option>
+                        </select>
+                        状态: <select name="status" id="status" class="input-m">
+                            <option value="0">--全部--</option>
+                            <option value="1">激活启用中</option>
+                            <option value="2">未激活</option>
+                        </select>
+                        app: <select name="app" id="app" class="input-m">
+                            <option value="">--全部--</option>
+                        </select>
+                        banner位置: <select name="bannerType" id="searchBannerType" class="input-m">
+                            <option value="">--全部--</option>
+                            <option value="1">首页</option>
+                            <option value="2">房间内</option>
+                            <option value="3">我的装扮</option>
+                            <option value="10">个人中心</option>
+                        </select>
+                        &nbsp;&nbsp;&nbsp;
+                        开始日期:&nbsp;&nbsp;<input type="text" name="timeBegin" id="beginTime" class="input-sm" value="">
+                        &nbsp;&nbsp;&nbsp;&nbsp;
+                        结束日期:&nbsp;&nbsp;<input type="text" name="timeEnd" id="endTime" class="input-sm" value="">
+                        <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
+
+                        <button id="add" class="btn btn-default">
+                            <i class="glyphicon glyphicon-plus"></i>增加
+                        </button>
+
+                        <button id="btnMultiDel" class="btn btn-default">
+                            <i class="glyphicon"></i>删除选中
+                        </button>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </section>
+    <div class="modal fade" id="bannerModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="modalLabel">banner信息</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="bannerForm">
+                        <div class="form-group">
+                            <label for="name" class="col-sm-3 control-label">Banner名字:</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control validate[required]" name="bannerName" id="name">
+                                <input type="hidden" id="bannerId" name="bannerId">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">banner图:</label>
+                            <div class="col-sm-8">
+                                <img src="" id="imgUrl" style="width:250px;height:90px;" alt="">
+                                <input type="file" id="uploadFile" name="uploadFile">
+                                <button class="btn btn-success" type="button" id="uploadBtn">上传</button>
+                                <span class="attention">注意:图片尺寸请注意在750*250,选择图片后请点击上传按钮</span>
+                                <input type="hidden" id="bannerPic" name="bannerPic"
+                                    class="form-control validate[required]" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">跳转链接:</label>
+                            <select name="skipType" id="skipUrlSort" class="col-sm-2">
+                                <option value="1">跳转app内部</option>
+                                <option value="2">跳转房间</option>
+                                <option value="3">跳转H5页面</option>
+                            </select>
+                            <div class="col-sm-6">
+                                <input type="text" class="form-control validate[required]" name="skipUri"
+                                    id="skipUrlContent">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="startDate" class="col-sm-3 control-label">起始时间:</label>
+                            <div class="col-sm-8">
+                                <input id="startDate" type="date" name="startTime" class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="endDate" class="col-sm-3 control-label">结束时间:</label>
+                            <div class="col-sm-8">
+                                <input id="endDate" type="date" name="endTime" class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="seqNo" class="col-sm-3 control-label">排序设置:</label>
+                            <div class="col-sm-3">
+                                <input type="text" id="seqNo" name="seqNo" class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="iosVersion" class="col-sm-3 control-label">ios版本号:</label>
+                                <div class="col-sm-3">
+                                    <input type="text" id="iosVersion" name="iosVersion"
+                                        class="form-control validate[required]">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="androidVersion" class="col-sm-3 control-label">安卓版本号:</label>
+                                <div class="col-sm-3">
+                                    <input type="text" id="androidVersion" name="androidVersion"
+                                        class="form-control validate[required]">
+                                </div>
+                            </div>
+                            <span style="color:red; padding-left: 60px">注:app版本号大于配置的版本号才显示该banner</span>
+                        </div>
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="noShowChannels" class="col-sm-3 control-label">不展示的渠道:</label>
+                                <div class="col-sm-8">
+                                    <input type="text" id="noShowChannels" name="noShowChannels" class="form-control ">
+                                </div>
+                            </div>
+                            <span style="color:red; padding-left: 60px">注:留空则为所有渠道展示。多个渠道用英文逗号“,”隔开</span>
+                        </div>
+                        <div class="form-group">
+                            <label for="bannerStatus" class="col-sm-3 control-label">激活设置:</label>
+                            <select name="bannerStatus" id="bannerStatus" class="col-sm-2">
+                                <option value="1">激活</option>
+                                <option value="2">不激活</option>
+                            </select>
+                        </div>
+                        <!--<div class="form-group">-->
+                        <!--<label for="appId" class="col-sm-3 control-label">app:</label>-->
+                        <!--<select name="appId" id="appId" class="col-sm-2">-->
+                        <!--</select>-->
+                        <!--</div>-->
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">Banner位置:</label>
+                            <div class="col-sm-4">
+                                <select name="bannerType" id="bannerType" class="col-sm-10"
+                                    onchange="selectOnChange(this.value)">
+                                    <option value="1">首页</option>
+                                    <option value="2">房间内</option>
+                                    <option value="3">我的装扮</option>
+                                    <option value="10">个人中心</option>
+                                </select>
+                            </div>
+                            <div class="col-sm-5 hidden titleListDev">
+                                <select name="titleId" id="titleList" class="col-sm-10 titleList">
+
+                                </select>
+                            </div>
+
+                        </div>
+                        <div id="bannerTypeDiv">
+                            <div class="form-group">
+                                <label for="platform" class="col-sm-3 control-label">展示平台:</label>
+                                <select name="platform" id="platform" class="col-sm-3">
+                                    <option value="all">全平台展示</option>
+                                    <option value="ios">只展示IOS</option>
+                                    <option value="android">只展示安卓</option>
+                                    <option value="none">都不展示</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div id="actLimitDiv">
+                            <div class="form-group">
+                                <label for="limitLevelExper" class="col-sm-3 control-label">活动限制等级经验:</label>
+                                <div class="col-sm-8">
+                                    <input type="text" class="form-control " name='limitLevelExper' id="limitLevelExper">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="showType" class="col-sm-3 control-label">h5页面是否全屏展示:</label>
+                                <select name="showType" id="showType" class="col-sm-2">
+                                    <option value="1">全屏</option>
+                                    <option value="2">非全屏</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="showRule" class="col-sm-3 control-label">活动入口展示规则:</label>
+                                <select name="showRule" id="showRule" class="col-sm-4">
+                                    <option value="1">始终展示</option>
+                                    <option value="2">达到限制等级展示</option>
+                                </select>
+                            </div>
+                        </div>
+
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="save">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal fade" id="addBannerModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="addModalLabel">新增banner</h4>
+                </div>
+                <div class="modal-body">
+                    <form id="addBannerForm" class="form-horizontal">
+                        <div class="form-group">
+                            <label for="addName" class="col-sm-3 control-label">Banner名字:</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control validate[required]" name="bannerName" id="addName">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">banner图:</label>
+                            <div class="col-sm-8">
+                                <img src="" id="addImgUrl" style="width:250px;height:90px;" alt="">
+                                <input type="file" id="addUploadFile" name="uploadFile">
+                                <button class="btn btn-success" type="button" id="addUploadBtn">上传</button>
+                                <input type="hidden" id="addBannerPic" name="bannerPic"
+                                    class="form-control validate[required]" />
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">跳转链接:</label>
+                            <select name="skipType" id="addSkipUrlSort" class="col-sm-2">
+                                <option value="1">跳转app内部</option>
+                                <option value="2">跳转房间</option>
+                                <option value="3">跳转H5页面</option>
+                            </select>
+                            <div class="col-sm-6">
+                                <input type="text" class="form-control validate[required]" name="skipUri"
+                                    id="addSkipUrlContent">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="addStartDate" class="col-sm-3 control-label">起始时间:</label>
+                            <div class="col-sm-8">
+                                <input id="addStartDate" type="date" name="startTime"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="addEndDate" class="col-sm-3 control-label">结束时间:</label>
+                            <div class="col-sm-8">
+                                <input id="addEndDate" type="date" name="endTime" class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="seqNo" class="col-sm-3 control-label">排序设置:</label>
+                            <div class="col-sm-3">
+                                <input type="text" id="addSeqNo" name="seqNo" class="form-control validate[required]">
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="iosVersion" class="col-sm-3 control-label">ios版本号:</label>
+                                <div class="col-sm-3">
+                                    <input type="text" id="addIosVersion" name="iosVersion"
+                                        class="form-control validate[required]">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="androidVersion" class="col-sm-3 control-label">安卓版本号:</label>
+                                <div class="col-sm-3">
+                                    <input type="text" id="addAndroidVersion" name="androidVersion"
+                                        class="form-control validate[required]">
+                                </div>
+                            </div>
+                            <span style="color:red; padding-left: 60px ">注意:app版本号大于配置的版本号才显示该banner</span>
+                        </div>
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="noShowChannels" class="col-sm-3 control-label">不展示的渠道:</label>
+                                <div class="col-sm-8">
+                                    <input type="text" id="addNoShowChannels" name="noShowChannels" class="form-control ">
+                                </div>
+                            </div>
+                            <span style="color:red; padding-left: 60px">注:留空则为所有渠道展示。多个渠道用英文逗号“,”隔开</span>
+                        </div>
+                        <div class="form-group">
+                            <label for="bannerStatus" class="col-sm-3 control-label">激活设置:</label>
+                            <select name="bannerStatus" id="addBannerStatus" class="col-sm-2">
+                                <option value="1">激活</option>
+                                <option value="2">不激活</option>
+                            </select>
+                        </div>
+                        <!--<div class="form-group">-->
+                        <!--<label for="appId" class="col-sm-3 control-label">app:</label>-->
+                        <!--<select name="appId" id="addAppId" class="col-sm-2 validate[required]">-->
+                        <!--<option value="">请选择</option>-->
+                        <!--</select>-->
+                        <!--</div>-->
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">Banner位置:</label>
+                            <div class="col-sm-4">
+                                <select name="bannerType" id="addBannerType" class="col-sm-10"
+                                    onchange="addSelectOnChange(this.value)">
+                                    <option value="1">首页</option>
+                                    <option value="2">房间内</option>
+                                    <option value="3">我的装扮</option>
+                                    <option value="10">个人中心</option>
+                                </select>
+                            </div>
+                            <div class="col-sm-5 hidden titleListDev">
+                                <select name="titleId" id="addTitleList" class="col-sm-10 titleList">
+
+                                </select>
+                            </div>
+                        </div>
+                        <div id="addBannerTypeDiv">
+                            <div class="form-group">
+                                <label for="platform" class="col-sm-3 control-label">展示平台:</label>
+                                <select name="platform" id="addPlatform" class="col-sm-3">
+                                    <option value="all">全平台展示</option>
+                                    <option value="ios">只展示IOS</option>
+                                    <option value="android">只展示安卓</option>
+                                    <option value="none">都不展示</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div id="addActLimitDiv">
+                            <div class="form-group">
+                                <label for="limitLevelExper" class="col-sm-3 control-label">活动限制等级经验:</label>
+                                <div class="col-sm-8">
+                                    <input type="text" class="form-control " name='limitLevelExper' id="addLimitLevelExper">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="showType" class="col-sm-3 control-label">h5页面是否全屏展示:</label>
+                                <select name="showType" id="addShowType" class="col-sm-2">
+                                    <option value="1">全屏</option>
+                                    <option value="2">非全屏</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="showRule" class="col-sm-3 control-label">活动入口展示规则:</label>
+                                <select name="showRule" id="addShowRule" class="col-sm-4">
+                                    <option value="1">始终展示</option>
+                                    <option value="2">达到限制等级展示</option>
+                                </select>
+                            </div>
+                        </div>
+
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="addSave">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="imgMask"><img src="" alt=""></div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+var app = {};
+var validApp = {};
+
+export default {
+    name: "FirstPageBannerView",
+    setup() {
+        function selectOnChange(val) {
+            if (val == 1) {
+                $("#bannerTypeDiv").show();
+                $("#actLimitDiv").hide();
+            } else if (val == 2) {
+                $("#actLimitDiv").show();
+                $("#bannerTypeDiv").hide();
+            } else {
+                $("#bannerTypeDiv").hide();
+                $("#actLimitDiv").hide();
+            }
+        }
+        function addSelectOnChange(val) {
+            if (val == 1) {
+                $("#addBannerTypeDiv").show();
+                $("#addActLimitDiv").hide();
+            } else if (val == 2) {
+                $("#addActLimitDiv").show();
+                $("#addBannerTypeDiv").hide();
+            } else {
+                $("#addBannerTypeDiv").hide();
+                $("#addActLimitDiv").hide();
+            }
+        }
+        window.selectOnChange = selectOnChange;
+        window.addSelectOnChange = addSelectOnChange;
+        return {
+            selectOnChange,
+            addSelectOnChange
+        };
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+
+            $(function () {
+                var isEdit = false;
+                $('#table').bootstrapTable('destroy');
+                initTable();
+
+                //getAppNames();
+                // function getAppNames() {
+                //     $.get('/admin/appName/listAll', {}, function (res) {
+                //         if (res.rows.length > 0) {
+                //             renderSelect(res.rows);
+                //             renderAppObj(res.rows);
+                //         }
+                //     })
+                // }
+
+                // function renderSelect(data) {
+                //     var $select = $('#app');
+                //     for (var i = 0; i < data.length; i++) {
+                //         var $option = $('<option value="' + data[i].app + '" />');
+                //         $option.html(data[i].appName);
+                //         $select.append($option);
+                //     }
+                // }
+                //
+                // function renderAppObj(rows) {
+                //     for(var i = 0; i < rows.length; i++) {
+                //         var row = rows[i];
+                //         app[row.app] = row.appName;
+                //         // 有效的app
+                //         if(row.status == 1) {
+                //             validApp[row.app] = row.appName;
+                //         }
+                //     }
+                // }
+
+                function initTable() {
+                    $('#table').bootstrapTable({
+                        columns: [
+                            { field: 'sel', title: 'ID', align: 'center', valign: 'middle', checkbox: true, width: '1%' },
+                            { field: 'bannerId', title: 'bannerID', align: 'center', valign: 'middle', width: '5%' },
+                            { field: 'bannerName', title: '名称', align: 'center', valign: 'middle', width: '10%' },
+                            {
+                                field: 'bannerType', title: 'banner位置', align: 'center', valign: 'middle', width: '10%',
+                                formatter: function (val, row, index) {
+                                    switch (val) {
+                                        case 1:
+                                            return '首页';
+                                     
+                                        case 2:
+                                            return '房间内';
+                                  
+                                        case 3:
+                                            return '我的装扮';
+                                        case 10:
+                                            return '个人中心';
+                                       
+                                    }
+                                }
+                            },
+                            {
+                                field: 'bannerPic',
+                                title: 'banner图',
+                                align: 'center',
+                                width: '10%',
+                                formatter: function (val, row, index) {
+                                    return "<img src='" + val + "' width='60' height='50'>";
+                                }
+                            },
+                            {
+                                field: 'skipType', title: '跳转类型', align: 'center', valign: 'middle', width: '10%',
+                                formatter: function (val, row, index) {
+                                    switch (val) {
+                                        case 1:
+                                            return 'App页面';
+                                        
+                                        case 2:
+                                            return '聊天室';
+                                         
+                                        case 3:
+                                            return 'H5页面';
+                                      
+                                    }
+                                }
+                            },
+                            {
+                                field: 'seqNo',
+                                title: 'banner排序',
+                                align: 'center',
+                                width: '8%',
+                                valign: 'middle'
+                            },
+                            {
+                                field: 'bannerStatus',
+                                title: '状态',
+                                align: 'center',
+                                width: '10%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    console.log(val);
+                                    switch (val) {
+                                        case 1:
+                                            return '正在启用';
+                                     
+                                        case 2:
+                                            return '未激活';
+                                       
+                                    }
+                                }
+                            },
+                            {
+                                field: 'platform', title: '展示平台', align: 'center', valign: 'middle', width: '10%',
+                                formatter: function (val, row, index) {
+                                    if (row.bannerType == 1) {
+                                        switch (val) {
+                                            case 'all':
+                                                return '所有平台展示';
+                                        
+                                            case 'none':
+                                                return '都不展示';
+                                        
+                                            case 'ios':
+                                                return '只在IOS展示';
+                                          
+                                            case 'android':
+                                                return '只在安卓展示';
+                                           
+                                        }
+                                    } else {
+                                        return '-'
+                                    }
+                                }
+                            },
+                            { field: 'iosVersion', title: 'ios版本号', align: 'center', valign: 'middle', width: '10%' },
+                            { field: 'androidVersion', title: '安卓版本号', align: 'center', valign: 'middle', width: '10%' },
+                            { field: 'noShowChannels', title: '不展示的渠道', align: 'center', valign: 'middle', width: '10%' },
+                            {
+                                field: 'startTime',
+                                title: '活动开始时间',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    if (val) {
+                                        var date = new Date(val);
+                                        return date.format("yyyy-MM-dd hh:mm:ss");
+                                    } else {
+                                        return '-';
+                                    }
+                                }
+                            },
+                            {
+                                field: 'endTime',
+                                title: '活动结束时间',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    if (val) {
+                                        var date = new Date(val);
+                                        return date.format("yyyy-MM-dd hh:mm:ss");
+                                    } else {
+                                        return '-';
+                                    }
+
+                                }
+                            },
+                            { field: 'operator', title: '操作人', align: 'center', width: '5%' },
+                            {
+                                field: 'updateTime',
+                                title: '操作时间',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    if (val) {
+                                        var date = new Date(val);
+                                        return date.format("yyyy-MM-dd hh:mm:ss");
+                                    } else {
+                                        return '-';
+                                    }
+
+                                }
+                            },
+                            {
+                                field: 'tmp',
+                                title: '操作',
+                                align: 'center',
+                                width: '10%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    var key = row.bannerId;
+                                    var str;
+                                    str = "<button class='btn btn-sm btn-success opt-edit' data-id=" + key + ">编辑</button>";
+                                    str += "<button class='btn btn-sm btn-success opt-del' data-id=" + key + ">删除</button>";
+                                    return str;
+                                }
+                            }
+                        ],
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 10,
+                        pagination: true,
+                        pageList: [10, 20, 30, 50],
+                        sidePagination: "server", //表示服务端请求
+                        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                        //设置为limit可以获取limit, offset, search, sort, order
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var beginTime = ($('#beginTime').val()) ? ($("#beginTime").val() + ' 00:00:00') : null;
+                            var endTime = ($('#endTime').val()) ? ($('#endTime').val() + ' 23:59:59') : null;
+                            var param = {
+                                pageSize: params.pageSize,
+                                pageNumber: params.pageNumber,
+                                beginTime: beginTime,
+                                endTime: endTime,
+                                bannerStatus: parseInt($('#status').val()),
+                                skipType: parseInt($('#skipType').val()),
+                                bannerType: $('#searchBannerType').val(),
+                                // appId: ($('#app').val()) ? $('#app').val() : null
+                            };
+                            //                console.log(param);
+                            return param;
+                        },
+                        uniqueId: 'code',
+                        toolbar: '#toolbar',
+                        url: '/admin/banner/list.action',
+                        onLoadSuccess: function () {  //加载成功时执行
+                            console.log("load success");
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    })
+                }
+
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                })
+                $('#table').on('click', '.opt-edit', function () {
+                    $('#titleList').html('');
+                    $('.titleListDev').addClass("hidden");
+                    var id = parseInt($(this).data('id'));
+                    isEdit = true;
+                    // // 处理appId
+                    // $('#appId').empty();
+                    // $('#appId').append('<option value="">请选择</option>');
+                    // for(var key in app) {
+                    //     $('#appId').append('<option value="'+key+'">'+app[key]+'</option>');
+                    // }
+                    $.ajax({
+                        type: 'get',
+                        url: '/admin/banner/get.action',
+                        data: { 'bannerId': id },
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.code == 200) {
+                                var date = json.data.endTime ? new Date(json.data.endTime).format("yyyy-MM-dd hh:mm:ss") : '';
+                                var startDate = json.data.startTime ? new Date(json.data.startTime).format("yyyy-MM-dd hh:mm:ss") : '';
+                                $('#name').val(json.data.bannerName);
+                                $('#imgUrl').attr('src', json.data.bannerPic);
+                                $('#bannerPic').val(json.data.bannerPic);
+                                $('#skipUrlSort').val(json.data.skipType);
+                                $('#skipUrlContent').val(json.data.skipUri);
+                                $("#bannerType").val(json.data.bannerType);
+                                $('#seqNo').val(json.data.seqNo);
+                                //$("#appId").val(json.data.appId);
+                                $('#iosVersion').val(json.data.iosVersion);
+                                $('#androidVersion').val(json.data.androidVersion);
+                                $('#noShowChannels').val(json.data.noShowChannels);
+                                $('#bannerStatus').val(json.data.bannerStatus);
+                                $('#startDate').val(startDate);
+                                $('#endDate').val(date);
+                                $('#bannerId').val(json.data.bannerId);
+                                $('#platform').val(json.data.platform);
+                                $('#limitLevelExper').val(json.data.limitLevelExper);
+                                $('#showType').val(json.data.showType);
+                                $('#showRule').val(json.data.showRule);
+                                window.selectOnChange(json.data.bannerType, json.data.titleId);
+                                $('#titleList').val(json.data.titleId);
+                                $('#bannerModal').modal('show');
+                                // picker1.datetimepicker('setStartDate', startDate);
+                            } else {
+                                $("#tipMsg").text("获取信息出错");
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    })
+                });
+                function cleanModal(obj) {
+                    $('#addBannerForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
+                        $(this).val('');
+                    })
+                    $('#addBannerForm').find('img').attr('src', '');
+                    //清空输入框
+                    obj.find('input:text').val('');
+                    //清空隐藏域
+                    obj.find('input:hidden').val('');
+                    //清空单选按钮
+                    obj.find('input:radio').attr("checked", false);
+                    //清空文本域
+                    obj.find('textarea').val('');
+                    //清空图片
+                    obj.find('img').attr("src", "");
+                    //清空已上传
+                }
+                // 事件编辑
+                var $timeBegin = $('#beginTime').datepicker({
+                    format: 'yyyy-mm-dd',
+                    autoclose: true
+                });
+                var $timeEnd = $('#endTime').datepicker({
+                    format: 'yyyy-mm-dd',
+                    autoclose: true,
+                });
+
+                $timeBegin.on('changeDate', function () {
+                    var date = $('#beginTime').datepicker('getDate');
+                    $timeEnd.datepicker('setStartDate', date);
+                });
+                $timeEnd.on('changeDate', function () {
+                    var date = $('#endTime').datepicker('getDate');
+                    $timeBegin.datepicker('setEndDate', date);
+                });
+                $('#save').on('click', function () {
+                    // if(!$('#appId').val()){
+                    //     $("#tipMsg").text("请选择app");
+                    //     $("#tipModal").modal('show');
+                    //     return;
+                    // }
+                    if ($('#bannerForm').validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/banner/save.action?startTimeString=" + $('#startDate').val()
+                                + "&endTimeString=" + $('#endDate').val(),
+                            data: $('#bannerForm').serialize(),
+                            dataType: 'json',
+                            success: function (json) {
+                                if (json.code == 200) {
+                                    $("#bannerModal").modal('hide');
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("保存失败，错误码：" + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        })
+                    }
+                });
+                $("#add").on('click', function () {
+                    cleanModal($("#addBannerForm"));
+                    $('#addTitleList').html('');
+                    $('#addStartDate').val('');
+                    $('#addEndDate').val('');
+
+                    // 处理appId
+                    // $('#addAppId').empty();
+                    // $('#addAppId').append('<option value="">请选择</option>');
+                    // for(var key in validApp) {
+                    //     $('#addAppId').append('<option value="'+key+'">'+validApp[key]+'</option>');
+                    // }
+
+                    $('#addBannerTypeDiv').hide();
+                    $('#addActLimitDiv').hide();
+
+                });
+                $('#addSave').on('click', function () {
+                    var startDateVal = $('#addStartDate').val();
+                    var endDateVal = $('#addEndDate').val();
+
+                    if (!startDateVal || !endDateVal) {
+                        $("#tipMsg").text("请选择日期");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    // if(!$('#addAppId').val()){
+                    //     $("#tipMsg").text("请选择app");
+                    //     $("#tipModal").modal('show');
+                    //     return;
+                    // }
+                    if ($('#addBannerForm').validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/banner/save.action?startTimeString=" + $('#addStartDate').val()
+                                + "&endTimeString=" + $('#addEndDate').val(),
+                            data: $('#addBannerForm').serialize(),
+                            dataType: 'json',
+                            success: function (json) {
+                                console.log(json);
+                                if (json.code == 200) {
+                                    $('#addBannerModal').modal('hide');
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("保存失败，错误码：" + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        })
+                    }
+                });
+
+                var picker2 = $('#addStartDate').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                })
+                var picker3 = $('#addEndDate').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                })
+                picker2.on('changeDate', function () {
+                    var date = $('#addStartDate').datetimepicker('getDate');
+                    picker2.datetimepicker('setStartDate', date);
+                });
+                picker3.on('changeDate', function () {
+                    var date = $('#addEndDate').datetimepicker('getDate');
+                    picker3.datetimepicker('setEndDate', date);
+                });
+                var picker4 = $('#startDate').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                })
+                var picker5 = $('#endDate').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                })
+                picker4.on('changeDate', function () {
+                    var date = $('#startDate').datetimepicker('getDate');
+                    picker4.datetimepicker('setStartDate', date);
+                });
+                picker5.on('changeDate', function () {
+                    var date = $('#endDate').datetimepicker('getDate');
+                    picker5.datetimepicker('setEndDate', date);
+                });
+                $('#uploadBtn').on('click', function () {
+                    var options = {
+                        type: 'post',
+                        url: '/admin/banner/upload.action',
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.code == 200) {
+                                $('#bannerPic').val(json.data);
+                                $('#imgUrl').attr("src", json.data);
+                            } else {
+                                $("#tipMsg").text(json.msg);
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    }
+                    $("#bannerForm").ajaxSubmit(options);
+                })
+                $('#addUploadBtn').on('click', function () {
+                    var options = {
+                        type: 'post',
+                        url: '/admin/banner/upload.action',
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.code == 200) {
+                                $('#addBannerPic').val(json.data);
+                                $('#addImgUrl').attr('src', json.data);
+                                console.log(json.data);
+                            } else {
+                                $('#tipMsg').text(json.msg);
+                                $('#tipModal').modal('show');
+                            }
+                        }
+                    }
+                    $('#addBannerForm').ajaxSubmit(options);
+                })
+                $('#add').on('click', function () {
+                    isEdit = false;
+                    $('#addBannerForm')[0].reset();
+                    $('#addImgUrl').attr('src', '');
+                    $('#addBannerPic').val('');
+                    //ComboboxHelper.setDef("#displayType", 0);
+                    // // 处理appId
+                    // $('#addAppId').empty();
+                    // $('#addAppId').append('<option value="">请选择</option>');
+                    // for(var key in validApp) {
+                    //     $('#addAppId').append('<option value="'+key+'">'+validApp[key]+'</option>');
+                    // }
+                    $('#addBannerModal').modal('show');
+                })
+                $('#table').on('mouseenter', 'img', function (e) {
+                    console.log($(this), e.clientX);
+                    var src = $(this).attr('src');
+                    $('#imgMask img').attr('src', src);
+                    $('#imgMask').show();
+                    $('#imgMask').css({
+                        top: e.clientY + 20,
+                        left: e.clientX + 20
+                    })
+                })
+                $('#table').on('mouseleave', 'img', function (e) {
+                    console.log('移出');
+                    $('#imgMask').hide();
+                })
+
+                $('#btnMultiDel').on('click', function () {
+                    var rows = $("#table").bootstrapTable("getSelections");
+                    if (rows.length == 0) {
+                        alert("请先选择要删除的记录");
+                        return;
+                    }
+                    var idArr = [];
+
+                    for (var i = 0; i < rows.length; i++) {
+                        idArr.push(rows[i]['bannerId']);
+                    }
+
+                    if (confirm("你确认删除选中Banner吗?")) {
+                        $.ajax({
+                            type: 'post',
+                            url: "/admin/banner/delete.action",
+                            data: {
+                                'ids': JSON.stringify(idArr)
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.code == 200) {
+                                    $("#tipMsg").text("已删除选中Banner");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("操作失败");
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+
+
+                $('#table').on('click', '.opt-del', function () {
+                    var key = parseInt($(this).attr('data-id'));
+                    var idArr = [];
+                    idArr.push(key);
+                    if (confirm("你确认删除Banner吗?")) {
+                        $.ajax({
+                            type: 'post',
+                            url: "/admin/banner/delete.action",
+                            data: {
+                                'ids': JSON.stringify(idArr)
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.code == 200) {
+                                    $("#tipMsg").text("已删除Banner");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("操作失败");
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                })
+            });
+        }
+    },
+};
+</script>
+
+<style scoped>
+#skipType,
+#status {
+    margin-right: 10px;
+}
+
+.btn {
+    margin: 0 4px;
+}
+
+#uploadBtn,
+#addUploadBtn {
+    margin-top: 4px;
+}
+
+#skipUrlSort,
+#bannerStatus,
+#addSkipUrlSort,
+#addBannerStatus {
+    height: 34px;
+}
+
+.attention {
+    line-height: 30px;
+    display: inline-block;
+    margin-top: 4px;
+    color: red;
+}
+
+#imgMask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 450px;
+    height: 150px;
+    padding: 4px;
+    background: #fff;
+    z-index: 999;
+    display: none;
+}
+
+#imgMask img {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/firstpage/FirstPageOptView.vue b/src/views/firstpage/FirstPageOptView.vue
new file mode 100644
index 0000000..b60136e
--- /dev/null
+++ b/src/views/firstpage/FirstPageOptView.vue
@@ -0,0 +1,366 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <section class="content-header">
+                <h1 id="itemTitle">男神女神</h1>
+            </section>
+            <section class="content">
+                <div id="table"></div>
+                <div id="toolbar">
+                    <!-- <button id="addBtn" class="btn btn-default">
+                    <i class="glyphicon glyphicon-plus"></i>增加
+                </button>&nbsp;&nbsp;&nbsp;-->
+                    tab名称: <input type="text" id='seachName'>
+                    &nbsp;&nbsp;&nbsp;
+                    状态: <select name="status" id="seachStatus" class="input-m">
+                        <option value="">--全部--</option>
+                        <option value="1">展示</option>
+                        <option value="2">隐藏</option>
+                    </select>
+                    <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
+                </div>
+            </section>
+        </div>
+    </section>
+    <div class="modal fade" id="actModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="addModalLabel">新增</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="actForm">
+                        <input type="hidden" name="id" id="id" value="0">
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="name" class="col-sm-3 control-label">名称:</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control validate[required]" name="name" id="name"
+                                        style="width:400px">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="status" class="col-sm-3 control-label">状态:</label>
+                                <select name="status" id="status" class="col-sm-2">
+                                    <option value="1">展示</option>
+                                    <option value="2">隐藏</option>
+                                </select>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="save">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="editModalLabel">编辑</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="editForm">
+                        <input type="hidden" name="id" id="e_id">
+                        <div class="form-group">
+                            <label for="name" class="col-sm-3 control-label">名称:</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="name" id="e_name"
+                                    style="width:400px">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="status" class="col-sm-3 control-label">状态:</label>
+                            <select name="status" id="e_status" class="col-sm-2">
+                                <option value="1">展示</option>
+                                <option value="2">隐藏</option>
+                            </select>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="edit">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal fade" id="sureModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-primary" id="sure">确定</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "FirstPageOptView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                initTable();
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    $('#table').bootstrapTable('destroy');
+                    initTable();
+                });
+
+                $('#addBtn').on('click', function () {
+                    cleanModal();
+                    $("#actForm")[0].reset();
+                    $('#actModal').modal('show');
+                });
+                $('#table').on('click', '.opt-edit', function () {
+                    var id = $(this).attr("data-id-1");
+                    var name = $(this).attr("data-id-2");
+                    var status = $(this).attr("data-id-3");
+                    cleanModal();
+
+                    $('#e_id').val(id);
+                    $('#e_name').val(name);
+                    $('#e_status').val(status);
+                    $('#editModal').modal('show');
+                });
+                $('#save').on('click', function () {
+                    if ($('#actForm').validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/firstpageopt/add.action",
+                            data: $('#actForm').serialize(),
+                            dataType: 'json',
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#actModal").modal('hide');
+                                    $("#tipMsg").text(json.msg);
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("保存失败，错误码：" + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        })
+                    }
+                });
+                $('#edit').on('click', function () {
+                    if ($('#editForm').validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/firstpageopt/update.action",
+                            data: $('#editForm').serialize(),
+                            dataType: 'json',
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#editModal").modal('hide');
+                                    $("#tipMsg").text(json.msg);
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("修改失败，错误码：" + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        })
+                    }
+                });
+                $("#table").on("click", '.opt-del', function () {
+                    var id = $(this).attr("data-id");
+                    if (id == 'undefined') {
+                        $("#tipMsg").text("id参数有误");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    if (confirm("你确认删除吗?")) {
+                        $.ajax({
+                            type: 'post',
+                            url: '/admin/firstpageopt/delete.action',
+                            data: { 'id': id },
+                            dataType: 'json',
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("删除成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("删除失败，错误码：" + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+
+                function cleanModal() {
+                    $('#actForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
+                        $(this).val('');
+                    })
+                    $('#actForm').find('img').attr('src', '');
+                }
+                function initTable() {
+                    $('#table').bootstrapTable({
+                        columns: [
+                            { field: 'id', title: '序号', align: 'center', valign: 'middle', width: '5%' },
+                            { field: 'name', title: '名称', align: 'center', valign: 'middle', width: '5%' },
+                            {
+                                field: 'status',
+                                title: '状态',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    console.log(val);
+                                    switch (val) {
+                                        case 1:
+                                            return '展示';
+                                        
+                                        case 2:
+                                            return '隐藏';
+                                  
+                                    }
+                                }
+                            },
+                            {
+                                field: 'type',
+                                title: '类型',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    console.log(val);
+                                    switch (val) {
+                                        case 1:
+                                            return '男';
+                                          
+                                        case 2:
+                                            return '女';
+                                           
+                                        case 3:
+                                            return '不限';
+                                       
+                                    }
+                                }
+                            },
+                            {
+                                field: 'updateTime',
+                                title: '更新时间',
+                                align: 'center',
+                                width: '10%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    if (val) {
+                                        var date = new Date(val);
+                                        return date.format("yyyy-MM-dd hh:mm:ss");
+                                    } else {
+                                        return '-';
+                                    }
+                                }
+                            },
+                            {
+                                field: 'createTime',
+                                title: '创建时间',
+                                align: 'center',
+                                width: '10%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    if (val) {
+                                        var date = new Date(val);
+                                        return date.format("yyyy-MM-dd hh:mm:ss");
+                                    } else {
+                                        return '-';
+                                    }
+                                }
+                            },
+                            {
+                                field: 'tmp',
+                                title: '操作',
+                                align: 'center',
+                                width: '10%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    var id = row.id;
+                                    var name = row.name;
+                                    var status = row.status;
+                                    return '<button class="btn btn-sm btn-success opt-edit" data-id-1 ="' + id + ' "data-id-2="' + name + '" data-id-3="' + status + '">' + '编辑</button>';
+
+                                }
+                            }
+                        ],
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 20,
+                        pagination: true,
+                        pageList: [10, 20, 30, 50],
+                        sidePagination: "server", //表示服务端请求
+                        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                        //设置为limit可以获取limit, offset, search, sort, order
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var param = {
+                                pageSize: params.pageSize,
+                                pageNumber: params.pageNumber,
+                                name: $("#seachName").val(),
+                                status: ($('#seachStatus').val()) ? $('#seachStatus').val() : null
+                            };
+                            //                console.log(param);
+                            return param;
+                        },
+                        uniqueId: 'name',
+                        toolbar: '#toolbar',
+                        url: '/admin/firstpageopt/list.action',
+                        onLoadSuccess: function () {  //加载成功时执行
+                            console.log("load success");
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    })
+                }
+            })
+        }
+    },
+};
+</script>
+
+<style scoped>
+#imgMask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 250px;
+    height: 600px;
+    padding: 4px;
+    background: #fff;
+    z-index: 999;
+    display: none;
+}
+
+#imgMask img {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/firstpage/FirstPageTabRoomView.vue b/src/views/firstpage/FirstPageTabRoomView.vue
new file mode 100644
index 0000000..06517eb
--- /dev/null
+++ b/src/views/firstpage/FirstPageTabRoomView.vue
@@ -0,0 +1,593 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <!-- .content -->
+                <div id="table"></div>
+                <div id="toolbar">
+                    <div class="col-sm-12">
+
+                        tab名称:<input type="text" name="tabName" id="name" placeholder="请输入tab名称">
+                        &nbsp;&nbsp;&nbsp;
+                        平台号:
+                        <input type="text" name="erbanNo" id="erbanNo" placeholder="请输入用户ID">
+                    </div>
+
+                    <div class="col-sm-12">
+                        <button id="btnSearch" class="btn btn-primary">
+                            <i class="glyphicon"></i>查询
+                        </button>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                        <button id="addRoom" class="btn btn-default">
+                            <i class="glyphicon"></i>添加房间
+                        </button>
+                        <!-- <button id="btnMultiDel" class="btn btn-default">
+                        <i class="glyphicon"></i>删除选中
+                    </button>-->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <input type="hidden" name="id" id="id">
+    <input type="hidden" name="roomUid" id="roomUid">
+    <div class="modal fade" id="addTabRoomModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="addTabRoomModalLabel">添加房间</h4>
+                </div>
+                <div class="modal-body">
+                    <form id="addTabRoom" class="form-horizontal">
+
+                        <div class="form-group">
+                            <label for="tabName" class="col-sm-3 control-label">选择tab:</label>
+                            <div class="col-sm-9">
+                                <select name="tabName" id="tabName">
+                                    <option value="">-- 请选择 --</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group erbanNo">
+                            <label for="erbanNo" class="col-sm-3 control-label">用户ID:</label>
+                            <div class="col-sm-10">
+                                <input type="text" id="uid" name="erbanNo" class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <!--<div class="form-group seqNo">
+                        <label for="seqNo" class="col-sm-3 control-label">排序:</label>
+                        <div class="col-sm-8 control-label">
+                            <input type="text" class="form-control validate[required]" name="seqNo" id="seqNo"
+                                   placeholder="相同tab的房间排序不可重复">
+                        </div>
+                    </div>-->
+                        <div class="form-group status">
+                            <label class="col-sm-3 control-label">展示状态:</label>
+                            <div class="col-sm-8">
+                                <select name="status" id="status" class="col-sm-2">
+                                    <option value="1">展示</option>
+                                    <option value="0">隐藏</option>
+                                </select>
+                            </div>
+                        </div>
+                        <!--<div class="form-group">
+                        <label for="roomBadge" class="col-sm-3 control-label">角标:</label>
+                        <div class="col-sm-9">
+                            <img src="" id="roomBadgeUrl" style="width:250px;height:90px;" alt="">
+                            <input type="file" id="uploadRoomBadgeFile" name="uploadRoomBadgeFile"
+                                   accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
+                            <button class="btn btn-success" type="button" id="uploadBtn">上传</button>
+                            <input type="hidden" class="form-control validate[required]" name="roomBadge"
+                                   id="roomBadge"
+                                   style="width:400px">
+                        </div>
+                    </div>-->
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">角标:</label>
+                            <div class="col-sm-8">
+                                <img src="" id="addImgUrl" style="width:250px;height:90px;" alt="">
+                                <input type="file" id="addUploadFile" name="uploadFile"
+                                    accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
+                                <button class="btn btn-success" type="button" id="addUploadBtn">上传</button>
+                                <input type="hidden" id="addRoomBadge" name="roomBadge"
+                                    class="form-control validate[required]" />
+                            </div>
+                        </div>
+                        <!--<div class="form-group roomBadge">
+                        <label for="roomBadge" class="col-sm-3 control-label">角标:</label>
+                        <div class="col-sm-8 control-label">
+                            <input type="text" class="form-control" name="roomBadge" id="roomBadge">
+                        </div>
+                    </div>-->
+
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="saveRoom">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="editTabModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="editTabModalLabel">编辑房间</h4>
+                </div>
+                <div class="modal-body">
+                    <form id="editTab" class="form-horizontal">
+                        <div class="form-group">
+                            <label for="tabName" class="col-sm-3 control-label">tab名称:</label>
+                            <span id="e_tabName"></span>
+                        </div>
+                        <div class="form-group seqNo">
+                            <label for="erbanNo" class="col-sm-3 control-label">用户ID:</label>
+                            <span id="erbanNoEdit"></span>
+                        </div>
+                        <!--<div class="form-group seqNo">
+                        <label for="seqNo" class="col-sm-3 control-label">排序:</label>
+                        <div class="col-sm-8 control-label">
+                            <input type="text" class="form-control validate[custom[integer]]" name="seqNo" id="e_seqNo">
+                        </div>
+                    </div>-->
+                        <!--<div class="form-group">
+                        <span style="padding-left: 70px">*数字越小，房间排序越靠前，排序数字不可重复</span>
+                    </div>-->
+                        <div class="form-group showStatus">
+                            <label class="col-sm-3 control-label">展示状态:</label>
+                            <div class="col-sm-8">
+                                <select name="status" id="roomStatus" class="col-sm-2">
+                                    <option value="1">展示</option>
+                                    <option value="0">隐藏</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">角标:</label>
+                            <div class="col-sm-8">
+                                <img src="" id="imgUrl" style="width:250px;height:90px;" alt="">
+                                <input type="file" id="uploadFile" name="uploadFile"
+                                    accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
+                                <button class="btn btn-success" type="button" id="uploadBtn">上传</button>
+                                <span class="attention">注意:图片尺寸750*250,选择图片后请点击上传按钮</span>
+                                <input type="hidden" id="roomBadge" name="roomBadge"
+                                    class="form-control validate[required]" />
+                                <a href="javascript:void(0)" id="removeBadge">下角标</a>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="edit">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "FirstPageTabRoomView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                getTitles();
+                function getTitles() {
+                    $.get('/admin/firstpagetab/getTabNameList', {}, function (res) {
+                        if (res.rows.length > 0) {
+                            renderSelect(res.rows);
+                        }
+                    })
+                }
+
+                function renderSelect(data) {
+                    var $select = $('#tabName');
+                    for (var i = 0; i < data.length; i++) {
+                        var $option = $('<option value="' + data[i].tabId + '" />');
+                        $option.html(data[i].name);
+                        $select.append($option);
+                    }
+                }
+
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 10,
+                    pagination: true,
+                    pageList: [10, 20, 30, 50],
+                    sidePagination: "server", //表示服务端请求
+                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                    //设置为limit可以获取limit, offset, search, sort, order
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            pageSize: params.pageSize,
+                            pageNumber: params.pageNumber,
+                            tabName: $('#name').val(),
+                            erbanNo: $('#erbanNo').val()
+                        };
+                        return param;
+                    },
+                    uniqueId: 'id',
+                    toolbar: '#toolbar',
+                    url: '/admin/firstpagetabroom/list.action',
+                    onLoadSuccess: function () {  //加载成功时执行
+                        console.log("load success");
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    },
+                    columns: [
+                        { field: 'id', title: '序号', align: 'center', valign: 'middle', width: '1%', visible: false },
+                        { field: 'tabId', title: '', align: 'center', valign: 'middle', width: '1%', visible: false },
+                        { field: 'tabName', title: 'tab名称', align: 'center', valign: 'middle', width: '10%' },
+                        { field: 'erbanNo', title: '平台号', align: 'center', valign: 'middle', width: '5%' },
+                        { field: 'roomTitle', title: '房间标题', align: 'center', valign: 'middle', width: '15%' },
+                        {
+                            field: 'status',
+                            title: '状态',
+                            align: 'center',
+                            width: '5%',
+                            valign: 'middle',
+                            formatter: function (val, row, index) {
+                                console.log(val);
+                                switch (val) {
+                                    case 1:
+                                        return '展示';
+                             
+                                    case 0:
+                                        return '隐藏';
+                                   
+                                }
+                            }
+                        },
+                        //{field: 'seqNo', title: '排序', align: 'center', valign: 'middle', width: '5%'},
+                        //{field: 'roomBadge', title: '角标', align: 'center', valign: 'middle', width: '10%'},
+                        {
+                            field: 'roomBadge',
+                            title: '角标',
+                            align: 'center',
+                            width: '5%',
+                            formatter: function (val, row, index) {
+                                if (val == null || val == '') {
+                                    return '-';
+                                }
+                                return "<img src='" + val + "' width='60' height='50'>";
+                            }
+                        },
+                        {
+                            field: 'createTime',
+                            title: '房间创建时间',
+                            align: 'center',
+                            valign: 'middle',
+                            width: '10%',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    var date = new Date(val);
+                                    return date.format("yyyy-MM-dd hh:mm:ss");
+                                } else {
+                                    return '-';
+                                }
+                            }
+                        },
+                        {
+                            field: 'tmp',
+                            title: '操作',
+                            align: 'center',
+                            width: '12%',
+                            valign: 'middle',
+                            formatter: function (val, row, index) {
+                                var key = row.id;
+                                var status = row.status;
+
+                                var str;
+                                str = "<button class='btn btn-sm btn-success opt-edit' style='margin-right: 4px;' data-id=" + key + ">编辑</button>";
+                                str += "<button class='btn btn-sm btn-danger opt-del' data-id=" + key + ">删除</button>";
+
+                                return str;
+                            }
+                        }
+
+                    ]
+                })
+
+                var picker1 = $('#startTime').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                })
+                var picker2 = $("#endTime").datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                });
+
+                $('#table').on('click', '.opt-del', function () {
+                    var id = $(this).attr("data-id");
+                    if (id == 'undefined') {
+                        $("#tipMsg").text("id参数有误");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    if (confirm("你确认删除吗?")) {
+                        $.ajax({
+                            type: 'post',
+                            url: '/admin/firstpagetabroom/delete.action',
+                            data: { 'id': id },
+                            dataType: 'json',
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("删除成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("删除失败，错误码：" + json.msg);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+                $('#table').on('click', '.opt-edit', function () {
+                    var id = $(this).data('id');
+                    if (id == 'undefined' || !id) {
+                        return;
+                    }
+                    var data = $('#table').bootstrapTable('getRowByUniqueId', id);
+                    console.log(data);
+                    $('#id').val(id);
+                    $('#e_tabName').html(data.tabName);
+                    $('#erbanNoEdit').html(data.erbanNo);
+                    $("#roomStatus").val(data.status == true ? 1 : 0);
+                    //$("#e_seqNo").val(data.seqNo);
+                    $("#roomUid").val(data.roomUid);
+                    $('#imgUrl').attr('src', data.roomBadge);
+                    $("#roomBadge").val(data.roomBadge);
+                    $('#editTabModal').modal('show');
+                })
+
+                /*$('#table').on('click', '.opt-show', function () {
+                    var id = $(this).data('id');
+                    if (id == 'undefined' || !id) {
+                        return;
+                    }
+                    var data = $('#table').bootstrapTable('getRowByUniqueId', id);
+        
+                    var status = (data.status == false) ? 1 : 0;
+                    $.ajax({
+                        type: 'post',
+                        url: '/admin/firstpagetabroom/changeRoomStatus.action',
+                        data: {
+                            status: status,
+                            id: id
+                        },
+                        dataType: 'json',
+                        success: function (res) {
+                            if (res.code == 200) {
+                                $("#tipMsg").text("修改状态成功");
+                                $("#tipModal").modal('show');
+                                TableHelper.doRefresh("#table");
+                            } else {
+                                $("#tipMsg").text("修改失败，错误码：" + res.code);
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    })
+                })*/
+
+                function cleanModal(obj) {
+                    $('#addTabRoom').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
+                        $(this).val('');
+                    })
+                    $('#addTabRoom').find('img').attr('src', '');
+                    //清空输入框
+                    obj.find('input:text').val('');
+                    //清空隐藏域
+                    obj.find('input:hidden').val('');
+                    //清空单选按钮
+                    obj.find('input:radio').attr("checked", false);
+                    //清空文本域
+                    obj.find('textarea').val('');
+                    //清空图片
+                    obj.find('img').attr("src", "");
+                    //清空select
+                    obj.find('select').val("");
+                }
+
+                $('#edit').on('click', function () {
+                    if ($('#editTab').validationEngine('validate')) {
+                        $.ajax({
+                            type: 'post',
+                            url: '/admin/firstpagetabroom/update.action',
+                            dataType: 'json',
+                            data: {
+                                id: $('#id').val(),
+                                //seqNo: $('#e_seqNo').val(),
+                                status: $('#roomStatus').val(),
+                                roomBadge: $('#roomBadge').val(),
+                                roomUid: $('#roomUid').val()
+                            },
+                            success: function (res) {
+                                if (res.success == 'true') {
+                                    $("#editTabModal").modal('hide');
+                                    $("#tipMsg").text("编辑成功");
+                                    $("#tipModal").modal('show');
+                                    //$('.seqNo').show();
+                                    $(".showStatus").show();
+                                    $(".roomBadge").show();
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("编辑失败，错误码：" + res.code);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        })
+                    }
+                })
+
+                $("#addRoom").on('click', function () {
+                    cleanModal($("addTabRoom"));
+                    $('#addTabRoomModal').modal('show');
+                })
+
+                $('#saveRoom').on('click', function () {
+                    if ($('#addTabRoom').validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/firstpagetabroom/add.action?tabId=" + $('#tabName').val()
+                                + "&tabName=" + $("#tabName").find("option:selected").text(),
+                            dataType: 'json',
+                            data: $('#addTabRoom').serialize(),
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#addTabRoomModal").modal('hide');
+                                    $("#tipMsg").text(json.msg);
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("保存失败，错误：" + json.msg);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        })
+                    }
+                });
+
+                $('#addUploadBtn').on('click', function () {
+                    var options = {
+                        type: 'post',
+                        url: '/admin/firstpagebanner/headimg.action',
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.path) {
+                                $('#addRoomBadge').val(json.path);
+                                $('#addImgUrl').attr('src', json.path);
+                                console.log(json.path);
+                            } else {
+                                $('#tipMsg').text(json.msg);
+                                $('#tipModal').modal('show');
+                            }
+                        }
+                    }
+                    $('#addTabRoom').ajaxSubmit(options);
+                });
+                $('#uploadBtn').on('click', function () {
+                    var options = {
+                        type: 'post',
+                        url: '/admin/firstpagebanner/headimg.action',
+                        dataType: 'json',
+                        success: function (json) {
+                            if (json.path) {
+                                $('#roomBadge').val(json.path);
+                                $('#imgUrl').attr("src", json.path);
+                                console.log(json.path);
+                            } else {
+                                $("#tipMsg").text(json.msg);
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    };
+                    $("#editTab").ajaxSubmit(options);
+                });
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                });
+                $('#removeBadge').on('click', function () {
+                    $('#imgUrl').attr('src', '');
+                    $('#uploadFile').val('');
+                    $('#roomBadge').val('');
+                });
+
+                $('#btnMultiDel').on('click', function () {
+                    var rows = $("#table").bootstrapTable("getSelections");
+                    if (rows.length == 0) {
+                        alert("请先选择要删除的记录");
+                        return;
+                    }
+
+                    console.log("rows: " + rows.length);
+                    var idArr = [];
+                    var moduleIdArr = null;
+                    var uidArr = [];
+
+                    for (var i = 0; i < rows.length; i++) {
+                        idArr.push(rows[i]['id']);
+                        if (moduleIdArr == null) {
+                            moduleIdArr = rows[i]['moduleId'] + "#" + rows[i]['uid'];
+                        } else {
+                            moduleIdArr += "," + rows[i]['moduleId'] + "#" + rows[i]['uid'];
+                        }
+                        uidArr.push(rows[i]['uid']);
+                    }
+                    console.log(idArr);
+
+                    if (confirm("你确认删除选中房间吗?")) {
+                        $.ajax({
+                            type: 'post',
+                            url: "/admin/firstpagetabroom/delete.action",
+                            data: {
+                                'ids': JSON.stringify(idArr),
+                                'moduleIds': moduleIdArr,
+                                'uids': JSON.stringify(uidArr)
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.code == 200) {
+                                    $("#tipMsg").text("已删除选中房间");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("操作失败");
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+        }
+    },
+};
+</script>
+
+<style scoped>
+.col-sm-1 {
+    width: 15.333333%;
+}
+
+.col-sm-2 {
+    width: 34.666667%;
+}
+
+.col-sm-10 {
+    width: 73.333333%;
+}
+
+#removeBadge {
+    margin-left: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/firstpage/FirstPageTabView.vue b/src/views/firstpage/FirstPageTabView.vue
new file mode 100644
index 0000000..4e75eea
--- /dev/null
+++ b/src/views/firstpage/FirstPageTabView.vue
@@ -0,0 +1,500 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <section class="content-header">
+                <h1 id="itemTitle">新版首页tab配置</h1>
+            </section>
+            <section class="content">
+                <div id="table"></div>
+                <div id="toolbar">
+                    <button id="addBtn" class="btn btn-default">
+                        <i class="glyphicon glyphicon-plus"></i>增加
+                    </button>&nbsp;&nbsp;&nbsp;
+                    tab名称: <input type="text" id='name'>
+                    &nbsp;&nbsp;&nbsp;
+                    状态: <select name="status" id="seachStatus" class="input-m">
+                        <option value="">--全部--</option>
+                        <option value="1">展示</option>
+                        <option value="2">隐藏</option>
+                    </select>
+                    app: <select name="app" id="app" class="input-m">
+                        <option value="">--全部--</option>
+                    </select>
+                    &nbsp;&nbsp;&nbsp;
+                    开始日期:&nbsp;&nbsp;<input type="text" name="timeBegin" id="beginTime" class="input-sm" value="">
+                    &nbsp;&nbsp;&nbsp;&nbsp;
+                    结束日期:&nbsp;&nbsp;<input type="text" name="timeEnd" id="endTime" class="input-sm" value="">
+                    <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
+                </div>
+            </section>
+        </div>
+    </section>
+    <input type="hidden" name="tabId" id="id">
+    <div class="modal fade" id="actModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="addModalLabel">新增</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="actForm">
+                        <input type="hidden" name="id" id="actId" value="0">
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="name" class="col-sm-3 control-label">tab名称:</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control validate[required]" name="name" id="tabName"
+                                        style="width:400px">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="status" class="col-sm-3 control-label">状态:</label>
+                                <select name="status" id="status" class="col-sm-2">
+                                    <option value="1">展示</option>
+                                    <option value="2">隐藏</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="showType" class="col-sm-3 control-label">展示类型:</label>
+                                <select name="showType" id="showType" class="col-sm-2">
+                                    <!--<option value="1">3+N</option>-->
+                                    <option value="2">2*N</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="appId" class="col-sm-3 control-label">app:</label>
+                                <select name="appId" id="appId" class="col-sm-2 validate[required]">
+                                    <option value="">请选择</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="seqNo" class="col-sm-3 control-label">排序:</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control validate[required]" name="seqNo" id="seqNo"
+                                        style="width:400px" placeholder="数字越小越靠前">
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="save">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="editModalLabel">编辑</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="editForm">
+                        <input type="hidden" name="tabId" id="tabId" value="0">
+                        <div class="form-group">
+                            <div class="form-group">
+                                <label for="name" class="col-sm-3 control-label">tab名称:</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control validate[required]" name="name" id="e_tabName"
+                                        style="width:400px">
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <label for="status" class="col-sm-3 control-label">状态:</label>
+                                <select name="status" id="e_status" class="col-sm-2">
+                                    <option value="1">展示</option>
+                                    <option value="2">隐藏</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="showType" class="col-sm-3 control-label">展示类型:</label>
+                                <select name="showType" id="e_showType" class="col-sm-2">
+                                    <!--<option value=1>3+N</option>-->
+                                    <option value=2>2*N</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="appId" class="col-sm-3 control-label">app:</label>
+                                <select name="appId" id="e_appId" class="col-sm-2">
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="seqNo" class="col-sm-3 control-label">排序:</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control validate[required]" name="seqNo" id="e_seqNo"
+                                        style="width:400px" placeholder="数字越小越靠前">
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="edit">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal fade" id="sureModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-primary" id="sure">确定</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+var app = {};
+var validApp = {};
+export default {
+    name: "FirstPageTabView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                initTable();
+
+                getAppNames();
+                function getAppNames() {
+                    $.get('/admin/appName/listAll', {}, function (res) {
+                        if (res.rows.length > 0) {
+                            renderSelect(res.rows);
+                            renderAppObj(res.rows);
+                        }
+                    })
+                }
+
+                function renderSelect(data) {
+                    var $select = $('#app');
+                    for (var i = 0; i < data.length; i++) {
+                        var $option = $('<option value="' + data[i].app + '" />');
+                        $option.html(data[i].appName);
+                        $select.append($option);
+                    }
+                }
+                function renderAppObj(rows) {
+                    for (var i = 0; i < rows.length; i++) {
+                        var row = rows[i];
+                        app[row.app] = row.appName;
+                        // 有效的app
+                        if (row.status == 1) {
+                            validApp[row.app] = row.appName;
+                        }
+                    }
+                }
+
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    $('#table').bootstrapTable('destroy');
+                    initTable();
+                });
+
+                $('#addBtn').on('click', function () {
+                    cleanModal();
+                    $("#actForm")[0].reset();
+                    // 处理appId
+                    $('#appId').empty();
+                    $('#appId').append('<option value="">请选择</option>');
+                    for (var key in validApp) {
+                        $('#appId').append('<option value="' + key + '">' + validApp[key] + '</option>');
+                    }
+
+                    $('#actModal').modal('show');
+                });
+                $('#table').on('click', '.opt-edit', function () {
+                    cleanModal();
+                    // 处理appId
+                    $('#e_appId').empty();
+                    $('#e_appId').append('<option value="">请选择</option>');
+                    for (var key in app) {
+                        $('#e_appId').append('<option value="' + key + '">' + app[key] + '</option>');
+                    }
+                    var tabId = $(this).attr("data-id-1");
+                    var name = $(this).attr("data-id-2");
+                    var seqNo = $(this).attr("data-id-5");
+                    var appId = $(this).attr("data-id-6");
+                    var data = $('#table').bootstrapTable('getRowByUniqueId', tabId);
+                    $('#tabId').val(tabId);
+                    $('#e_tabName').val(name);
+                    $('#e_status').val(data.status);
+                    $('#e_showType').val(data.showType);
+                    $('#e_seqNo').val(seqNo);
+                    $('#e_appId').val(data.appId);
+                    $('#editModal').modal('show');
+                });
+                // 事件编辑
+                var $timeBegin = $('#beginTime').datepicker({
+                    format: 'yyyy-mm-dd',
+                    autoclose: true
+                });
+                var $timeEnd = $('#endTime').datepicker({
+                    format: 'yyyy-mm-dd',
+                    autoclose: true,
+                });
+
+                $timeBegin.on('changeDate', function () {
+                    var date = $('#beginTime').datepicker('getDate');
+                    $timeEnd.datepicker('setStartDate', date);
+                });
+                $timeEnd.on('changeDate', function () {
+                    var date = $('#endTime').datepicker('getDate');
+                    $timeBegin.datepicker('setEndDate', date);
+                });
+                $('#save').on('click', function () {
+                    if (!$('#appId').val()) {
+                        $("#tipMsg").text("请选择app");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    if ($('#actForm').validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/firstpagetab/add.action",
+                            data: $('#actForm').serialize(),
+                            dataType: 'json',
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#actModal").modal('hide');
+                                    $("#tipMsg").text(json.msg);
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("保存失败，错误码：" + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        })
+                    }
+                });
+                $('#edit').on('click', function () {
+                    /*if(!$('#appId').val()){
+                        $("#tipMsg").text("请选择app");
+                        $("#tipModal").modal('show');
+                        return;
+                    }*/
+                    if ($('#editForm').validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/firstpagetab/update.action",
+                            data: $('#editForm').serialize(),
+                            dataType: 'json',
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#editModal").modal('hide');
+                                    $("#tipMsg").text(json.msg);
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("修改失败，错误码：" + json.msg);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        })
+                    }
+                });
+                $("#table").on("click", '.opt-del', function () {
+                    var tabId = $(this).attr("data-id");
+                    if (tabId == 'undefined') {
+                        $("#tipMsg").text("id参数有误");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    if (confirm("你确认删除吗?")) {
+                        $.ajax({
+                            type: 'post',
+                            url: '/admin/firstpagetab/delete.action',
+                            data: { 'tabId': tabId },
+                            dataType: 'json',
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("删除成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("删除失败，错误码：" + json.msg);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+
+                function cleanModal() {
+                    $('#actForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
+                        $(this).val('');
+                    })
+                    $('#actForm').find('img').attr('src', '');
+                }
+                function initTable() {
+                    $('#table').bootstrapTable({
+                        columns: [
+                            { field: 'tabId', title: '序号', align: 'center', valign: 'middle', width: '10%' },
+                            { field: 'name', title: 'tab名称', align: 'center', valign: 'middle', width: '10%' },
+                            { field: 'seqNo', title: '排序', align: 'center', valign: 'middle', width: '10%' },
+                            {
+                                field: 'status',
+                                title: '状态',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    switch (val) {
+                                        case '1':
+                                            return '展示';
+                                          
+                                        case '2':
+                                            return '隐藏';
+                                       
+                                    }
+                                }
+                            },
+                            {
+                                field: 'appId',
+                                title: 'app',
+                                align: 'center',
+                                width: '10%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    var name = app[val];
+                                    if (name != null) {
+                                        return name;
+                                    }
+                                    return val;
+                                }
+                            },
+                            {
+                                field: 'showType',
+                                title: '展示类型',
+                                align: 'center',
+                                width: '5%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    switch (val) {
+                                        case 1:
+                                            return '3+N';
+                                     
+                                        case 2:
+                                            return '2*N';
+                                      
+                                    }
+                                }
+                            },
+                            {
+                                field: 'createTime',
+                                title: '创建时间',
+                                align: 'center',
+                                width: '10%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    if (val) {
+                                        var date = new Date(val);
+                                        return date.format("yyyy-MM-dd hh:mm:ss");
+                                    } else {
+                                        return '-';
+                                    }
+                                }
+                            },
+                            {
+                                field: 'tmp',
+                                title: '操作',
+                                align: 'center',
+                                width: '10%',
+                                valign: 'middle',
+                                formatter: function (val, row, index) {
+                                    var id = row.tabId;
+                                    var name = row.name;
+                                    var status = row.status;
+                                    var showType = row.showType;
+                                    var seqNo = row.seqNo;
+                                    var appId = row.appId;
+                                    return '<button class="btn btn-sm btn-success opt-edit" data-id-1 ="' + id
+                                        + '"data-id-2="' + name
+                                        + '"data-id-3="' + status
+                                        + '"data-id-6="' + appId
+                                        + '"data-id-4="' + showType
+                                        + '"data-id-5="' + seqNo + '">' + '编辑</button>' + "&nbsp;&nbsp;&nbsp;" +
+                                        "<button class='btn btn-sm btn-danger opt-del' data-id=" + id + ">删除</button>";
+
+                                }
+                            }
+                        ],
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 20,
+                        pagination: true,
+                        pageList: [10, 20, 30, 50],
+                        sidePagination: "server", //表示服务端请求
+                        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                        //设置为limit可以获取limit, offset, search, sort, order
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var beginTime = ($('#beginTime').val()) ? ($("#beginTime").val() + ' 00:00:00') : null;
+                            var endTime = ($('#endTime').val()) ? ($('#endTime').val() + ' 23:59:59') : null;
+                            var param = {
+                                pageSize: params.pageSize,
+                                pageNumber: params.pageNumber,
+                                beginTime: beginTime,
+                                endTime: endTime,
+                                name: ($('#name').val()) ? $('#name').val() : null,
+                                status: ($('#seachStatus').val()) ? $('#seachStatus').val() : null,
+                                appId: ($('#app').val()) ? $('#app').val() : null
+                            };
+                            return param;
+                        },
+                        uniqueId: 'tabId',
+                        toolbar: '#toolbar',
+                        url: '/admin/firstpagetab/list.action',
+                        onLoadSuccess: function () {  //加载成功时执行
+                            console.log("load success");
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    })
+                }
+            })
+        }
+    },
+};
+</script>
+
+<style scoped>
+#imgMask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 250px;
+    height: 600px;
+    padding: 4px;
+    background: #fff;
+    z-index: 999;
+    display: none;
+}
+
+#imgMask img {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/firstpage/RecommendResourceAdminView.vue b/src/views/firstpage/RecommendResourceAdminView.vue
new file mode 100644
index 0000000..da55d82
--- /dev/null
+++ b/src/views/firstpage/RecommendResourceAdminView.vue
@@ -0,0 +1,581 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <div id="toolbar">
+                    <div class="col-sm-12">
+                        <button id="btnSearch" class="btn btn-default">
+                            <i class="glyphicon glyphicon-search"></i>查询
+                        </button>
+                        <button id="btnAdd" class="btn btn-default">
+                            <i class="glyphicon glyphicon-plus"></i>增加
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- .content -->
+            <div id="table"></div>
+        </div>
+    </section>
+
+    <div class="modal fade" id="roomTagModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="modalLabel">资源位</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="addForm">
+                        <input type="hidden" name="id" id="id" />
+                        <!--A策略-->
+                        <div class="form-group">
+                            <label for="resourceA" class="col-sm-3 control-label">A策略<font color="red">*</font>：</label>
+                            <div class="col-sm-9">
+                                <select name="status" id="resourceA" class="form-control validate[required]">
+                                    <option value=""></option>
+                                    <option value="1">牌照房</option>
+                                    <option value="2">相亲房</option>
+                                    <option value="3">PK房</option>
+                                    <option value="4">游戏房</option>
+                                    <option value="5">H5</option>
+                                    <option value="6">自定义房间</option>
+                                    <option value="7">个播房</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">A图标<font color="red">*</font>：</label>
+                            <div class="col-sm-8">
+                                <img src="" id="iconImgUrlA" style='width:108px;height:45px;' alt="">
+                                <input type="file" id="iconFileA" name='uploadFile'
+                                    accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
+                                <button class="btn btn-success" type='button' id="iconBtnA">上传</button>
+                                <input type="hidden" id="iconUrlA" name='alertWinPic'
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group" id="boxA">
+                            <label for="contentA" class="col-sm-3 control-label" id="contentLabA"></label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="name" id="contentA">
+                            </div>
+                        </div>
+
+                        <!--B策略-->
+                        <div class="form-group">
+                            <label for="resourceB" class="col-sm-3 control-label">B策略<font color="red">*</font>：</label>
+                            <div class="col-sm-9">
+                                <select name="status" id="resourceB" class="form-control validate[required]">
+                                    <option value=""></option>
+                                    <option value="1">牌照房</option>
+                                    <option value="2">相亲房</option>
+                                    <option value="3">PK房</option>
+                                    <option value="4">游戏房</option>
+                                    <option value="5">H5</option>
+                                    <option value="6">自定义房间</option>
+                                    <option value="7">个播房</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">B图标<font color="red">*</font>：</label>
+                            <div class="col-sm-8">
+                                <img src="" id="iconImgUrlB" style='width:108px;height:45px;' alt="">
+                                <input type="file" id="iconFileB" name='uploadFile'
+                                    accept='image/gif,image/jpeg,image/jpg,image/png,image/svg'>
+                                <button class="btn btn-success" type='button' id="iconBtnB">上传</button>
+                                <input type="hidden" id="iconUrlB" name='alertWinPic'
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group" id="boxB">
+                            <label for="contentB" class="col-sm-3 control-label" id="contentLabB"></label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="name" id="contentB">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="col-sm-3 control-label">生效时段<font color="red">*</font>:</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="input-sm datetime validate[required]" name="beginTime"
+                                    id="beginTime">
+                                -<input type="text" class="input-sm datetime validate[required]" name="endTime"
+                                    id="endTime">
+                            </div>
+                        </div>
+
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="add">确定</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+import { serverError, formatTime } from '@/utils/maintainer';
+
+export default {
+    name: "RecommendResourceAdminView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+
+                $('.datetime').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                });
+
+                $("#beginTime").datetimepicker({
+                    minView: "month",
+                    language: 'zh-CN',
+                    todayBtn: 1,
+                    autoclose: 1
+                }).on("changeDate", function (event) {
+                    $("#endTime").datetimepicker('setStartDate', event.date);
+                });
+
+                $("#endTime").datetimepicker({
+                    minView: "month",
+                    language: 'zh-CN',
+                    todayBtn: 1,
+                    autoclose: 1,
+                    useCurrent: false
+                }).on("changeDate", function (event) {
+                    $("#beginTime").datetimepicker('setEndDate', event.date);
+                });
+
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'id', title: '序号', align: 'center', width: '5%' },
+                        {
+                            field: 'resourceA',
+                            title: 'A',
+                            align: 'center',
+                            width: '15%',
+                            formatter: function (val) {
+                                return pardeResourceType(val);
+                            }
+                        },
+                        {
+                            field: 'resourceB',
+                            title: 'B',
+                            align: 'center',
+                            width: '15%',
+                            formatter: function (val) {
+                                return pardeResourceType(val);
+                            }
+                        },
+                        {
+                            field: 'beginTime', title: '开始时间', align: 'center', valign: 'middle', width: '10%',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    var date = new Date(val);
+                                    return date.format('yyyy-MM-dd hh:mm:ss');
+                                } else {
+                                    return '-';
+                                }
+                            }
+                        },
+                        {
+                            field: 'endTime', title: '结束时间', align: 'center', valign: 'middle', width: '10%',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    var date = new Date(val);
+                                    return date.format('yyyy-MM-dd hh:mm:ss');
+                                } else {
+                                    return '-';
+                                }
+                            }
+                        },
+                        {
+                            field: 'id',
+                            title: '操作',
+                            align: 'center',
+                            width: '10%',
+                            formatter: function (val, row, index) {
+                                if (row.isDefault) return '';
+                                return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
+                                    '<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
+                                    '&nbsp;&nbsp;<button class="btn btn-sm btn-danger opt-remove" data-id=' + val +
+                                    '><i class="glyphicon glyphicon-remove"></i>删除</button>';
+                            }
+                        }
+                    ],
+                    undefinedText: "-",
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 10,
+                    pagination: true,
+                    pageList: [20, 50, 100, 200, 300, 500],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            pageNum: params.pageNumber,
+                            pageSize: params.pageSize
+                        };
+                        return param;
+                    },
+                    ajax: function (request) {                    //使用ajax请求
+                        $.ajax({
+                            type: "GET",
+                            url: '/admin/home/resource/list.action',
+                            contentType: 'application/json;charset=utf-8',
+                            dataType: 'json',
+                            data: request.data,
+                            success: function (res) {
+                                apiResult(res);
+                                request.success({
+                                    rows: res.data.rows,
+                                    total: res.data.total,
+                                });
+                            },
+                            error: function (req) {
+                                serverError(req);
+                            }
+                        })
+                    },
+                    toolbar: '#toolbar',
+                    onLoadSuccess: function () {  //加载成功时执行
+                        console.log("load success");
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                });
+
+
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                });
+
+                //新建标签
+                $("#btnAdd").click(function () {
+                    clearModal();
+                    $("#boxA").hide();
+                    $("#boxB").hide();
+                    $("#roomTagModal").modal('show');
+                });
+
+                $("#add").click(function () {
+                    var strategySeq = $("#id").val();
+                    var resourceA = $("#resourceA").val();
+                    var resourceB = $("#resourceB").val();
+
+                    var iconA = $("#iconUrlA").val();
+                    var iconB = $("#iconUrlB").val();
+
+                    var contentA = $("#contentA").val();
+                    var contentB = $("#contentB").val();
+
+                    var beginTime = $("#beginTime").val();
+                    var endTime = $("#endTime").val();
+
+                    if (iconA == null || iconA == '') {
+                        $("#tipMsg").text("保存失败，请先上传图片！");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+
+                    if (iconB == null || iconB == '') {
+                        $("#tipMsg").text("保存失败，请先上传图片！");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+
+                    if ($("#addForm").validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/home/resource/saveResource.action",
+                            data: {
+                                strategySeq: strategySeq,
+                                resourceA: resourceA,
+                                resourceB: resourceB,
+                                iconA: iconA,
+                                iconB: iconB,
+                                contentA: contentA,
+                                contentB: contentB,
+                                beginTime: beginTime,
+                                endTime: endTime
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.code == 200) {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#roomTagModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#roomTagModal").modal('hide');
+                                }
+                            }
+                        });
+                    }
+
+                });
+
+                $("#table").on("click", '.opt-edit', function () {
+                    var seq = $(this).attr("data-id");
+                    clearModal();
+
+                    $.ajax({
+                        type: "get",
+                        url: "/admin/home/resource/getResourceByStrategySeq.action",
+                        data: { seq: seq },
+                        dataType: "json",
+                        success: function (res) {
+                            var json = res.data;
+                            if (json) {
+                                $("#id").val(seq);
+                                $("#resourceA").val(json.resourceA);
+                                $("#resourceB").val(json.resourceB);
+
+                                if (json.resourceA == 5 || json.resourceA == 6) {
+                                    $("#contentA").val(json.contentA);
+                                    $("#boxA").show();
+                                } else {
+                                    $("#contentA").val('');
+                                    $("#boxA").hide();
+                                }
+                                if (json.resourceB == 5 || json.resourceB == 6) {
+                                    $("#contentB").val(json.contentB);
+                                    $("#boxB").show();
+                                } else {
+                                    $("#contentB").val('');
+                                    $("#boxB").hide();
+                                }
+
+                                $("#beginTime").val(formatTime(json.beginTime));
+                                $("#endTime").val(formatTime(json.endTime));
+
+
+                                $('#iconUrlA').val(json.iconA);
+                                $('#iconImgUrlA').attr('src', json.iconA);
+
+                                $('#iconUrlB').val(json.iconB);
+                                $('#iconImgUrlB').attr('src', json.iconB);
+
+                                // 打开编辑弹窗
+                                $("#roomTagModal").modal('show');
+                                $("#modalLabel").text("编辑房间标签");
+                            } else {
+                                $("#tipMsg").text("获取信息出错");
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    });
+                });
+
+                $("#table").on("click", '.opt-remove', function () {
+                    var seq = $(this).attr("data-id");
+                    if (seq == 'undefined') {
+                        $("#tipMsg").text("id参数有误");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    if (confirm("你确认删除该记录吗? \r\n 删除后再也不能找回，请谨慎操作！")) {
+                        $.ajax({
+                            type: 'post',
+                            url: "/admin/home/resource/deleteByStrategySeq.action",
+                            data: { seq: seq },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.code == 200) {
+                                    $("#tipMsg").text("删除成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("删除失败");
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+
+                function apiResult(json) {
+                    if (json.code == 200 && json.message == 'success') {
+                        return true;
+                    }
+                    $("#tipMsg").text("请求失败，错误信息：" + json.message);
+                    $("#tipModal").modal('show');
+                    return false;
+                }
+
+
+                $('#iconBtnA').on('click', function () {
+                    if ($('#iconFileA').val() == '') {
+                        $('#tipMsg').text('上传图片为空');
+                        $('#tipModal').modal('show');
+                        return;
+                    }
+                    $.ajaxFileUpload({
+                        fileElementId: 'iconFileA',    //需要上传的文件域的ID，即<input type="file">的ID。
+                        url: '/admin/upload/img', //后台方法的路径
+                        type: 'post',   //当要提交自定义参数时，这个参数要设置成post
+                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
+                        secureuri: false,   //是否启用安全提交，默认为false。
+                        async: true,   //是否是异步
+                        success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
+                            if (json.path) {
+                                $('#iconUrlA').val(json.path);
+                                $('#iconImgUrlA').attr("src", json.path);
+
+                                console.log(json.path);
+
+                            } else {
+                                $("#tipMsg").text(json.msg);
+                                $("#tipModal").modal('show');
+                            }
+                        },
+                        error: function (data, status, e) {  //提交失败自动执行的处理函数。
+                            console.error(e);
+                        }
+                    });
+                })
+
+                $('#iconBtnB').on('click', function () {
+                    if ($('#iconFileB').val() == '') {
+                        $('#tipMsg').text('上传图片为空');
+                        $('#tipModal').modal('show');
+                        return;
+                    }
+                    $.ajaxFileUpload({
+                        fileElementId: 'iconFileB',    //需要上传的文件域的ID，即<input type="file">的ID。
+                        url: '/admin/upload/img', //后台方法的路径
+                        type: 'post',   //当要提交自定义参数时，这个参数要设置成post
+                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
+                        secureuri: false,   //是否启用安全提交，默认为false。
+                        async: true,   //是否是异步
+                        success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
+                            if (json.path) {
+                                $('#iconUrlB').val(json.path);
+                                $('#iconImgUrlB').attr("src", json.path);
+
+                                console.log(json.path);
+
+                            } else {
+                                $("#tipMsg").text(json.msg);
+                                $("#tipModal").modal('show');
+                            }
+                        },
+                        error: function (data, status, e) {  //提交失败自动执行的处理函数。
+                            console.error(e);
+                        }
+                    });
+                });
+
+                $("#resourceA").change(function () {
+                    var optVal = $(this).val();
+                    if (optVal != undefined && optVal == 5) {
+                        $('#contentA').val('');
+                        $('#contentLabA').html('网址链接<font color="red">*</font>:');
+
+                        $("#boxA").show();
+                    } else if (optVal != undefined && optVal == 6) {
+                        $('#contentA').val('');
+                        $('#contentLabA').html('房主平台号<font color="red">*</font>:');
+                        $("#boxA").show();
+                    } else {
+                        $('#contentA').val('');
+                        $("#boxA").hide();
+                    }
+
+                });
+
+                $("#resourceB").change(function () {
+                    var optVal = $(this).val();
+                    if (optVal != undefined && optVal == 5) {
+                        $('#contentB').val('');
+                        $('#contentLabB').html('网址链接<font color="red">*</font>:');
+
+                        $("#boxB").show();
+                    } else if (optVal != undefined && optVal == 6) {
+                        $('#contentB').val('');
+                        $('#contentLabB').html('房主平台号<font color="red">*</font>:');
+                        $("#boxB").show();
+                    } else {
+                        $('#contentB').val('');
+                        $("#boxB").hide();
+                    }
+
+                });
+
+                function pardeResourceType(val) {
+                    if (val == 1) {
+                        return '牌照房';
+                    } else if (val == 2) {
+                        return '相亲房';
+                    } else if (val == 3) {
+                        return 'PK房';
+                    } else if (val == 4) {
+                        return '游戏房';
+                    } else if (val == 5) {
+                        return 'H5';
+                    } else if (val == 6) {
+                        return '自定义房间';
+                    } else if (val == 7) {
+                        return '个播房';
+                    } else {
+                        return '';
+                    }
+                }
+
+
+                function clearModal() {
+                    $("#id").val('');
+
+                    $('#iconUrlA').val('');
+                    $('#iconImgUrlA').attr('src', '');
+                    $('#iconFileA').val('');
+
+                    $('#iconUrlB').val('');
+                    $('#iconImgUrlB').attr('src', '');
+                    $('#iconFileB').val('');
+
+                    $('#contentA').val('');
+                    $('#contentB').val('');
+
+
+                    $('#resourceA').val('');
+                    $('#resourceB').val('');
+
+                    $('#beginTime').val('');
+                    $('#endTime').val('');
+                }
+
+            });
+        }
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/firstpage/RecommendRoomAdminView.vue b/src/views/firstpage/RecommendRoomAdminView.vue
new file mode 100644
index 0000000..ca2785e
--- /dev/null
+++ b/src/views/firstpage/RecommendRoomAdminView.vue
@@ -0,0 +1,338 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <div id="toolbar">
+                    <div class="col-sm-12">
+                        <label for="erban_no" class="qry_col control-label">平台号:</label>
+                        <div class="col-sm-2"><input type="text" class="form-control" name="erbanNo" id="erban_no"></div>
+
+                        <label for="label_type" class="qry_col control-label">标签分类:</label>
+                        <div class="col-sm-2"><select name="status" id="label_type" class="form-control"
+                                data-btn-class="btn-warning">
+                                <option value="" selected="selected">全部</option>
+                                <option value="1">男</option>
+                                <option value="2">女</option>
+                            </select>
+                        </div>
+
+                        <label for="status" class="qry_col control-label">状态:</label>
+                        <div class="col-sm-2"><select name="status" id="status" class="form-control"
+                                data-btn-class="btn-warning">
+                                <option value="" selected="selected">全部</option>
+                                <option value="1">待推荐</option>
+                                <option value="2">推荐中</option>
+                                <option value="3">已失效</option>
+                            </select></div>
+
+                    </div>
+                    <div class="col-sm-12">
+                        <button id="btnSearch" class="btn btn-default">
+                            <i class="glyphicon glyphicon-search"></i>查询
+                        </button>
+                        <button id="btnAdd" class="btn btn-default">
+                            <i class="glyphicon glyphicon-plus"></i>增加房间
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- .content -->
+            <div id="table"></div>
+
+        </div>
+    </section>
+
+    <div class="modal fade" id="recommendModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="modalLabel">新增房间</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="addForm">
+                        <div class="form-group">
+                            <label for="erbanNo" class="col-sm-2 control-label">平台号:</label>
+                            <div class="col-sm-10">
+                                <input type="text" class="form-control validate[required]" name="erbanNo" id="erbanNo">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="labelType" class="col-sm-2 control-label">标签分类：</label>
+                            <div class="col-sm-10">
+                                <select name="labelType" class="form-control" id="labelType">
+                                    <option value="1">男</option>
+                                    <option value="2">女</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="seqNo" class="col-sm-2 control-label">排序</label>
+                            <div class="col-sm-10">
+                                <input type="text" class="form-control validate[required]" name="seqNo" id="seqNo">
+                            </div>
+                            <span style="padding-left: 120px">*必填!数字小的排前面，相同推荐时间内不可重复</span>
+                        </div>
+                        <div class="form-group">
+                            <label for="startTime" class="col-sm-2 control-label">开始时间</label>
+                            <div class="col-sm-10">
+                                <input id="startTime" type="date" name="startTime"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="endTime" class="col-sm-2 control-label">结束时间</label>
+                            <div class="col-sm-10">
+                                <input id="endTime" type="date" name="endTime"
+                                    class="form-control validate[required]">
+                            </div>
+                        </div>
+
+                    </form>
+                </div>
+                <div class="modal-footer">
+
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="add">确定</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "RecommendRoomAdminView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'roomUid', title: '房主uid', align: 'center', width: '10%' },
+                        { field: 'erbanNo', title: '平台号', align: 'center', width: '10%' },
+                        { field: 'roomTitle', title: '房间标题', align: 'center', width: '15%' },
+                        {
+                            field: 'labelType', title: '标签分类', align: 'center', valign: 'middle', width: '10%',
+                            formatter: function (val, row, index) {
+                                if (val == 1) {
+                                    return '男';
+                                } else if (val == 2) {
+                                    return '女';
+                                } else {
+                                    return '-';
+                                }
+
+                            }
+                        },
+                        {
+                            field: 'status', title: '列表状态', align: 'center', valign: 'middle', width: '10%',
+                            formatter: function (val, row, index) {
+                                if (val == 1) {
+                                    return '待推荐';
+                                } else if (val == 2) {
+                                    return '推荐中';
+                                } else {
+                                    return '已失效';
+                                }
+
+                            }
+                        },
+                        { field: 'seqNo', title: '排序', align: 'center', width: '5%' },
+                        {
+                            field: 'startTime', title: '上线时间', align: 'center', valign: 'middle', width: '10%',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    var date = new Date(val);
+                                    return date.format('yyyy-MM-dd hh:mm');
+                                } else {
+                                    return '-';
+                                }
+                            }
+                        },
+                        {
+                            field: 'endTime', title: '下线时间', align: 'center', valign: 'middle', width: '10%',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    var date = new Date(val);
+                                    return date.format('yyyy-MM-dd hh:mm');
+                                } else {
+                                    return '-';
+                                }
+                            }
+                        },
+                        {
+                            field: 'id',
+                            title: '操作',
+                            align: 'center',
+                            width: '5%',
+                            formatter: function (val, row, index) {
+                                if (row.status != 3) {
+                                    return '<button  class="btn btn-sm btn-success opt-remove" data-id=' + val + '>' +
+                                        '<i class="glyphicon glyphicon-remove"></i>下线</button>';
+                                } else {
+                                    return '-';
+                                }
+
+                            }
+                        }
+                    ],
+                    undefinedText: 0,
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 50, 100, 200, 300, 500],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            pageNum: params.pageNumber,
+                            pageSize: params.pageSize,
+                            erbanNo: $('#erban_no').val(),
+                            status: $('#status').val(),
+                            labelType: $('#label_type').val()
+                        };
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/firstpage/room/recommend/list.action',
+                    onLoadSuccess: function () {  //加载成功时执行
+                        console.log("load success");
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                });
+
+
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                });
+                var chargeStart = $('#startTime').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true,
+                    startDate: new Date()
+                });
+
+                var chargeEnd = $('#endTime').datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true,
+                    startDate: new Date()
+                });
+
+                //新建标题
+                $("#btnAdd").click(function () {
+                    $("#erbanNo").val("");
+                    $("#seqNo").val("");
+                    $("#startTime").val("");
+                    $("#endTime").val("");
+                    $("#recommendModal").modal('show');
+                });
+
+                $("#add").click(function () {
+                    var erbanNo = $("#erbanNo").val();
+                    var seqNo = $("#seqNo").val();
+                    var labelType = $("#labelType").val();
+
+                    var startTime = $("#startTime").val();
+                    var endTime = $("#endTime").val();
+                    if (seqNo <= 0) {
+                        $("#tipMsg").text("请填写合理的排序位置");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    if (endTime <= new Date().format('yyyy-MM-dd hh:mm:ss') || endTime <= startTime) {
+                        $("#tipMsg").text("请选择合理的结束时间");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+
+                    if ($("#addForm").validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/firstpage/room/recommend/add.action",
+                            data: {
+                                erbanNo: erbanNo,
+                                seqNo: seqNo,
+                                labelType: labelType,
+                                startTime: startTime,
+                                endTime: endTime
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.code == 200) {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#recommendModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败，错误信息：" + json.data);
+                                    $("#tipModal").modal('show');
+                                    //TableHelper.doRefresh("#table");
+                                    // $("#recommendModal").modal('hide');
+                                }
+                            }
+                        });
+                    }
+
+                });
+
+                $("#table").on("click", '.opt-remove', function () {
+                    var id = $(this).attr("data-id");
+                    if (id == 'undefined') {
+                        $("#tipMsg").text("id参数有误");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    if (confirm("你确认下线该房间吗？")) {
+                        $.ajax({
+                            type: 'post',
+                            url: "/admin/firstpage/room/recommend/offline.action",
+                            data: { id: id },
+                            dataType: "json",
+                            success: function (json) {
+                                console.log(json)
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("下线成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("下线失败，错误信息：" + json.msg);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+        }
+    },
+};
+</script>
+
+<style scoped>
+.qry_col {
+    float: left;
+}</style>
\ No newline at end of file
diff --git a/src/views/floating/FloatingScreenView.vue b/src/views/floating/FloatingScreenView.vue
new file mode 100644
index 0000000..ec3a2a1
--- /dev/null
+++ b/src/views/floating/FloatingScreenView.vue
@@ -0,0 +1,178 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <!-- .content -->
+                <div id="table"></div>
+                <div id="toolbar">
+                    <div class="col-sm-12">
+                        <button id="btnAdd" class="btn btn-default">
+                            <i class="glyphicon glyphicon-plus-sign"></i>新增
+                        </button>
+                        <button id="btnSearch" class="btn btn-default">
+                            <i class="glyphicon glyphicon-search"></i>查询
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="modalLabel">H5活动通用飘屏配置</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal">
+                        <input type="hidden" name="id" id="id" />
+                        <div class="form-group">
+                            <label for="fromErbanNo" class="col-sm-3 control-label">Peko号（非必填）：</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="fromErbanNo">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="type" class="col-sm-3 control-label">表示形式：</label>
+                            <div class="col-sm-9">
+                                <select name="type" id="type" class="form-control validate[required]">
+                                    <option value="0">房间静态飘屏</option>
+                                    <option value="1">全服动态飘屏</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="floatingContent" class="col-sm-3 control-label">发送内容：</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="floatingContent">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-primary" id="save">保存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">提示信息</h4>
+                </div>
+                <div class="modal-body" id="tipMsg"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+export default {
+    name: "FloatingScreenView.vue",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'fromErbanNo', title: 'Peko号', align: 'center', width: '5%' },
+                        { field: 'content', title: '发送内容', align: 'center', width: '5%' },
+                        { field: 'type', title: '表示形式', align: 'center', width: '5%' },
+                        { field: 'createTime', title: '创建时间', align: 'center', width: '5%' },
+                    ],
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 50, 100],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                    //设置为limit可以获取limit, offset, search, sort, order
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            page: params.pageNumber,
+                            pageSize: params.pageSize,
+                        };
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/floating/screen/page',
+                    onLoadSuccess: function () {  //加载成功时执行
+                        console.log("load success");
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                });
+
+                $('#btnAdd').on('click', function () {
+                    $("#fromErbanNo").val('');
+                    $("#type").val('');
+                    $("#floatingContent").val('');
+                    $("#editModal").modal('show');
+                });
+
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                });
+
+                $("#save").click(function () {
+                    const msg = '确定要保存吗？';
+                    if (confirm(msg)) {
+                        var data = {
+                            erbanNo: $('#erbanNo').val(),
+                            type: $('#type').val(),
+                            content: $('#floatingContent').val(),
+                        };
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/floating/screen/save",
+                            data: data,
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.success == 'true' || json.code == 200) {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#editModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                    $("#editModal").modal('hide');
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+        }
+    },
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/flowteam/FlowTeamGroupManageView.vue b/src/views/flowteam/FlowTeamGroupManageView.vue
new file mode 100644
index 0000000..393003b
--- /dev/null
+++ b/src/views/flowteam/FlowTeamGroupManageView.vue
@@ -0,0 +1,486 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <div id="toolbar">
+                    <div class="col-sm-12">
+                        <label for="groupName" class="col-sm-4 control-label">团队名称:</label>
+                        <div class="col-sm-8"><input type="text" class="form-control" name="groupName" id="groupName"
+                                placeholder="输入团队名称"></div>
+                    </div>
+                    <div class="col-sm-12">
+                        <button id="btnSearch" class="btn btn-default">
+                            <i class="glyphicon glyphicon-search"></i>查询
+                        </button>
+                        <button id="addBtn" class="btn btn-default">
+                            <i class="glyphicon glyphicon-plus"></i>新增团队
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- .content -->
+            <div id="table"></div>
+
+        </div>
+    </section>
+
+    <div class="modal fade" id="addGroupModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="modalLabel">添加/编辑</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="addForm">
+                        <input type="hidden" name="groupId" id="groupId" />
+                        <div class="form-group">
+                            <label for="modal_groupName" class="col-sm-3 control-label">团队名称</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="groupName"
+                                    id="modal_groupName">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="save">确定</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="teamInfoModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="teamModalTitle"></h4>
+                </div>
+                <div class="modal-body">
+                    <div id="teamDetailTable"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="createTeam">创建小组</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+
+    <div class="modal fade" id="addTeamModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="addTeamModalLabel">创建/编辑小组</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="addTeamAddForm">
+                        <input type="hidden" name="teamId" id="teamId" />
+                        <input type="hidden" name="groupId" id="add-team-modal-groupId" />
+                        <div class="form-group">
+                            <label for="add-team-modal-groupName" class="col-sm-3 control-label">团队名称</label>
+                            <div class="col-sm-9">
+                                <input type="text" disabled="disabled" class="form-control" name="groupName"
+                                    id="add-team-modal-groupName">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="add-team-modal-teamName" class="col-sm-3 control-label">小组名称</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="teamName"
+                                    id="add-team-modal-teamName">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="saveTeam">确定</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+let groupName = '';
+let modal_groupId = '';
+
+export default {
+    name: "FlowTeamGroupManageView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'groupId', title: '团队ID', align: 'center', width: '5%' },
+                        { field: 'groupName', title: '团队名称', align: 'center', width: '5%' },
+                        {
+                            field: 'groupLeaders', title: '团长', align: 'center', width: '5%',
+                            formatter: function (val) {
+                                if (val == null || val.length == 0) {
+                                    return '暂未设置'
+                                } else {
+                                    const options = [];
+                                    for (let i = 0; i < val.length; i++) {
+                                        const leader = val[i];
+                                        options.push(leader.memberName + '&nbsp;&nbsp;' + leader.memberPhone + '&nbsp;&nbsp;<br>')
+                                    }
+                                    return options.join('');
+                                }
+                            }
+                        },
+                        { field: 'teamNum', title: '小组数量', align: 'center', width: '5%' },
+                        { field: 'memberNum', title: '有效成员数量', align: 'center', width: '5%' },
+                        {
+                            field: 'status', title: '当前状态', align: 'center', width: '5%',
+                            formatter: function (val, row, index) {
+                                if (val == 1) {
+                                    return `<span class="text-success">有效</span>`;
+                                } else {
+                                    return `<span style="color: grey">无效</span>`;
+                                }
+                            }
+                        },
+                        {
+                            field: 'createTime', title: '团队创建时间', align: 'center', width: '5%',
+                            formatter: function (val) {
+                                var date = new Date(val);
+                                return date.format('yyyy-MM-dd hh:mm:ss');
+                            }
+                        },
+                        {
+                            field: 'memberId',
+                            title: '操作',
+                            align: 'center',
+                            width: '10%',
+                            formatter: function (val, row, index) {
+                                let statusChangeBtn = '<button class="btn btn-sm btn-success opt-change-status" data-idx=' + row.groupId + ' data-new-status=' + 1 + '>设为生效</button>';
+                                if (row.status == 1) {
+                                    statusChangeBtn = '<button class="btn btn-sm btn-primary opt-change-status" data-idx=' + row.groupId + ' data-new-status=' + 0 + '>设为无效</button>';
+                                }
+                                return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-edit" data-idx=' + row.groupId + '>' +
+                                    '<i class="glyphicon glyphicon-edit"></i> 编辑基本信息</button>' +
+                                    '<button class="btn btn-sm btn-success opt-show-team-detail" data-idx=' + row.groupId + '><i class="glyphicon glyphicon-edit"></i>编辑小组信息</button>'
+                                    + statusChangeBtn;
+                            }
+                        }
+                    ],
+                    undefinedText: 0,
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 50, 100, 200, 300, 500],
+                    search: false,
+                    uniqueId: 'groupId',
+                    sidePagination: "server", //表示服务端请求
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            page: params.pageNumber,
+                            pageSize: params.pageSize,
+                            groupName: $('#groupName').val(),
+                        };
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/flowteam/group/listGroupByPage',
+                    onLoadSuccess: function (data) {  //加载成功时执行
+                        console.log("load success", data);
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                });
+
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                });
+
+                //新建标签
+                $("#addBtn").click(function () {
+                    $('#groupId').val(''),
+                        $('#modal_groupName').val(''),
+                        $("#addGroupModal").modal('show');
+                });
+
+                //编辑成员信息
+                $('#table').on('click', '.opt-edit', function () {
+                    const groupId = $(this).attr('data-idx');
+                    var group = $('#table').bootstrapTable('getRowByUniqueId', groupId);
+                    console.log("group ========", group);
+                    $('#groupId').val(group.groupId),
+                        $('#modal_groupName').val(group.groupName),
+                        $("#addGroupModal").modal('show');
+                });
+
+                // 新增
+                $("#save").click(function () {
+                    if ($("#addForm").validationEngine('validate')) {
+                        const requestParam = {
+                            groupId: $('#groupId').val(),
+                            groupName: $('#modal_groupName').val(),
+                        }
+
+                        $.ajax({
+                            type: "get",
+                            url: "/admin/flowteam/group/saveOrUpdateGroup",
+                            data: requestParam,
+                            dataType: "json",
+                            contentType: 'application/json',
+                            success: function (json) {
+                                if (json.success) {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#addGroupModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+
+                });
+
+                $('#table').on('click', '.opt-change-status', function () {
+                    const groupId = $(this).attr('data-idx');
+                    const newStatus = $(this).attr('data-new-status');
+                    var group = $('#table').bootstrapTable('getRowByUniqueId', groupId);
+                    let action = ""
+                    if (newStatus == 0) {
+                        action = `确定将“${group.groupName}”设为无效?`
+                    } else if (newStatus == 1) {
+                        action = `确定将“${group.groupName}”设为有效?`
+                    } else if (newStatus == -1) {
+                        action = `确定删除“${group.groupName}”?`
+                    }
+                    if (confirm(action)) {
+                        const requestParam = {
+                            groupId: groupId,
+                            status: newStatus
+                        }
+
+                        $.ajax({
+                            type: "get",
+                            url: "/admin/flowteam/group/changeGroupStatus",
+                            data: requestParam,
+                            dataType: "json",
+                            contentType: 'application/json',
+                            success: function (json) {
+                                if (json.success) {
+                                    $("#tipMsg").text("修改成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("修改失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+
+                $("#table").on("click", '.opt-show-team-detail', function () {
+                    const groupId = $(this).attr('data-idx');
+                    const group = $('#table').bootstrapTable('getRowByUniqueId', groupId);
+                    console.debug('---row', group);
+                    groupName = group.groupName;
+                    modal_groupId = groupId
+                    $('#teamInfoModal #teamModalTitle').text(`【${group.groupName}】小组管理  小组个数：${group.teamNum}`)
+                    $('#teamDetailTable').bootstrapTable('destroy');
+                    $('#teamDetailTable').bootstrapTable({
+                        columns: [
+                            { field: 'teamId', title: '小组ID', align: 'center', width: '5%' },
+                            { field: 'teamName', title: '小组名称', align: 'center', width: '5%', },
+                            {
+                                field: 'teamLeaders', title: '组长', align: 'center', width: '5%',
+                                formatter: function (val) {
+                                    if (val == null || val.length == 0) {
+                                        return '暂未设置'
+                                    } else {
+                                        const options = [];
+                                        for (let i = 0; i < val.length; i++) {
+                                            const leader = val[i];
+                                            options.push(leader.memberName + '&nbsp;&nbsp;' + leader.memberPhone + '&nbsp;&nbsp;<br>')
+                                        }
+                                        return options.join('');
+                                    }
+                                }
+                            },
+                            { field: 'memberNum', title: '有效成员人数', align: 'center', width: '5%', },
+                            {
+                                field: 'tmp',
+                                title: '操作',
+                                align: 'center',
+                                width: '10%',
+                                formatter: function (val, row, index) {
+                                    return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-edit" ' +
+                                        'data-idx=' + row.teamId + '>' +
+                                        '<i class="glyphicon glyphicon-edit"></i> 编辑基本信息</button>' +
+                                        '<button class="btn btn-sm btn-success opt-del-team" data-idx=' + row.teamId + '><i class="glyphicon glyphicon-remove"></i>删除</button>';
+                                }
+                            }
+                        ],
+                        undefinedText: 0,
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 20,
+                        pagination: true,
+                        uniqueId: 'teamId',
+                        pageList: [20, 50, 100, 200, 300, 500],
+                        search: false,
+                        sidePagination: "server", //表示服务端请求
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var param = {
+                                page: params.pageNumber,
+                                pageSize: params.pageSize,
+                                groupId: groupId
+                            };
+                            return param;
+                        },
+                        url: '/admin/flowteam/group/listGroupTeamByPage',
+                        onLoadSuccess: function () {  //加载成功时执行
+                            $("#teamInfoModal").modal('show');
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    });
+                });
+
+                // 创建小组
+                $("#createTeam").click(function () {
+                    $('#teamId').val(''),
+                        $('#modal_groupName').val(''),
+                        $('#add-team-modal-groupName').val(groupName),
+                        $('#add-team-modal-groupId').val(modal_groupId),
+                        $('#add-team-modal-teamName').val(''),
+                        $("#addTeamModal").modal('show');
+                });
+
+                //编辑小组信息
+                $('#teamDetailTable').on('click', '.opt-edit', function () {
+                    const teamId = $(this).attr('data-idx');
+                    var team = $('#teamDetailTable').bootstrapTable('getRowByUniqueId', teamId);
+                    console.log("group ========", team);
+                    $('#teamId').val(teamId),
+                        $('#add-team-modal-groupName').val(groupName),
+                        $('#add-team-modal-groupId').val(modal_groupId),
+                        $('#add-team-modal-teamName').val(team.teamName),
+                        $("#addTeamModal").modal('show');
+                });
+
+                // 新增编辑小组
+                $("#saveTeam").click(function () {
+                    if ($("#addTeamAddForm").validationEngine('validate')) {
+                        const requestParam = {
+                            groupId: $('#add-team-modal-groupId').val(),
+                            teamName: $('#add-team-modal-teamName').val(),
+                            teamId: $('#teamId').val()
+                        }
+
+                        $.ajax({
+                            type: "get",
+                            url: "/admin/flowteam/group/saveOrUpdateTeam",
+                            data: requestParam,
+                            dataType: "json",
+                            contentType: 'application/json',
+                            success: function (json) {
+                                if (json.success) {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#teamDetailTable");
+                                    TableHelper.doRefresh("#table");
+                                    $("#addTeamModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+
+                });
+
+                // 删除小组
+                $('#teamDetailTable').on('click', '.opt-del-team', function () {
+                    const teamId = $(this).attr('data-idx');
+                    var team = $('#teamDetailTable').bootstrapTable('getRowByUniqueId', teamId);
+                    if (confirm('删除后该小组将永久解散并删除数据，无法恢复！！是否确认删除？')) {
+                        const requestParam = {
+                            teamId: teamId
+                        }
+                        $.ajax({
+                            type: "get",
+                            url: "/admin/flowteam/group/delTeam",
+                            data: requestParam,
+                            dataType: "json",
+                            contentType: 'application/json',
+                            success: function (json) {
+                                if (json.success) {
+                                    $("#tipMsg").text("删除成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#teamDetailTable");
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("删除失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+
+                });
+
+
+                $('#addTeamModal').on("hidden.bs.modal", function () {
+                    $(document.body).addClass('modal-open');
+                });
+
+
+            });
+        }
+    },
+};
+</script>
+
+<style scoped>#teamInfoModal .modal-dialog {
+    width: 60%;
+    height: 50%;
+}</style>
\ No newline at end of file
diff --git a/src/views/flowteam/FlowTeamInvitecodeManageView.vue b/src/views/flowteam/FlowTeamInvitecodeManageView.vue
new file mode 100644
index 0000000..389247a
--- /dev/null
+++ b/src/views/flowteam/FlowTeamInvitecodeManageView.vue
@@ -0,0 +1,403 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <div id="toolbar">
+                    <div class="col-sm-12">
+                        <label for="erbanNo" class="col-sm-4 control-label">用户ID:</label>
+                        <div class="col-sm-8"><input type="text" class="form-control" name="erbanNo" id="erbanNo"
+                                placeholder="输入用户ID"></div>
+                    </div>
+                    <div class="col-sm-12">
+                        <button id="btnSearch" class="btn btn-default">
+                            <i class="glyphicon glyphicon-search"></i>查询
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- .content -->
+            <div id="table"></div>
+
+        </div>
+    </section>
+
+
+
+
+    <div class="modal fade" id="changeInviteModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="addTeamModalLabel">换绑邀请码</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="changeInviteForm">
+                        <input type="hidden" name="uid" id="modal_uid" />
+                        <div class="form-group">
+                            <label for="query-groupSelector" class="col-sm-3 control-label">所属团队</label>
+                            <div class="col-sm-9">
+                                <select onchange="initTeamSelector(this.options[this.selectedIndex].value)"
+                                    id="query-groupSelector" class="form-control" data-btn-class="btn-warning">
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="query-teamSelector" class="col-sm-3 control-label">所属小组</label>
+                            <div class="col-sm-9">
+                                <select id="query-teamSelector"
+                                    onchange="initMemberSelector(this.options[this.selectedIndex].value)"
+                                    class="form-control" data-btn-class="btn-warning"></select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="query-memberSelector" class="col-sm-3 control-label">成员名称</label>
+                            <div class="col-sm-9">
+                                <select id="query-memberSelector"
+                                    onchange="initInvitecodeSelector(this.options[this.selectedIndex].value)"
+                                    class="form-control" data-btn-class="btn-warning"></select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="query-invitecodeSelector" class="col-sm-3 control-label">邀请码</label>
+                            <div class="col-sm-9">
+                                <select id="query-invitecodeSelector" class="form-control"
+                                    data-btn-class="btn-warning"></select>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="saveChange">确定</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+
+const TEAM_ROLE = {
+    "1": '组员',
+    "2": '组长',
+    "3": '团长',
+};
+let flowTeams;
+let flowTeamsMap = {};
+
+let flowGroups = [];
+let flowGroupsMap = {};
+let memberList = [];
+let groupName = '';
+export default {
+    name: "FlowTeamInvitecodeManageView",
+    setup() {
+        // 初始化小组选择器
+        function initTeamSelector(groupId) {
+            const options = [];
+            options.push('<option value="">选择小组</option>')
+            $.ajax({
+                type: "get",
+                url: "/admin/flowTeam/listTeamByGroupId.action",
+                data: {
+                    groupId: groupId
+                },
+                dataType: "json",
+                success: function (json) {
+                    if (json.success) {
+                        for (let i = 0; i < json.data.length; i++) {
+                            const flowTeam = json.data[i];
+                            //拼接成多个<option><option/>
+                            options.push('<option value="' + flowTeam.teamId + '">' + flowTeam.teamName + '</option>')
+                        }
+                        $('#query-teamSelector').html(options.join(' '));
+                    }
+                }
+            });
+        }
+
+
+        // 初始化成员选择器
+        function initMemberSelector(teamId) {
+            const options = [];
+            options.push('<option value="">选择成员</option>')
+            $.ajax({
+                type: "get",
+                url: "/admin/flowTeam/listMember",
+                data: {
+                    teamId: teamId
+                },
+                dataType: "json",
+                success: function (json) {
+                    if (json.success) {
+                        for (let i = 0; i < json.data.length; i++) {
+                            const flowTeam = json.data[i];
+                            //拼接成多个<option><option/>
+                            options.push('<option value="' + flowTeam.memberId + '">' + flowTeam.memberName + '</option>')
+                        }
+                        $('#query-memberSelector').html(options.join(' '));
+                    }
+                }
+            });
+        }
+
+
+
+        // 初始化邀请码选择器
+        function initInvitecodeSelector(memberId) {
+            const options = [];
+            options.push('<option value="">选择邀请码</option>')
+            $.ajax({
+                type: "get",
+                url: "/admin/flowTeam/listMemberInviteCode",
+                data: {
+                    memberId: memberId
+                },
+                dataType: "json",
+                success: function (json) {
+                    if (json.success) {
+                        for (let i = 0; i < json.data.length; i++) {
+                            const flowTeam = json.data[i];
+                            //拼接成多个<option><option/>
+                            options.push('<option >' + flowTeam.inviteCode + '</option>')
+                        }
+                        $('#query-invitecodeSelector').html(options.join(' '));
+                    }
+                }
+            });
+        }
+        window.initTeamSelector = initTeamSelector;
+        window.initMemberSelector = initMemberSelector;
+        window.initInvitecodeSelector = initInvitecodeSelector;
+        return {
+            initTeamSelector,
+            initMemberSelector,
+            initInvitecodeSelector
+        };
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            // 加载流量团队配置
+            $.ajax({
+                type: "get",
+                url: "/admin/flowTeam/listTeam.action",
+                dataType: "json",
+                success: function (json) {
+                    if (json.success) {
+                        if (json.data) {
+                            flowTeams = json.data;
+                            for (let i = 0; i < flowTeams.length; i++) {
+                                const flowTeam = flowTeams[i];
+                                flowTeamsMap[flowTeam.teamId] = flowTeam;
+                            }
+                        } else {
+                            flowTeams = [];
+                            flowTeamsMap = {};
+                        }
+                    }
+                }
+            });
+
+            // 加载流量团队配置
+            $.ajax({
+                type: "get",
+                url: "/admin/flowteam/group/listGroupByPage",
+                data: {
+                    page: 1,
+                    pageSize: 2147483647,
+                    groupName: ''
+                },
+                dataType: "json",
+                success: function (json) {
+                    console.log("init group success", json);
+                    flowGroups = json.rows;
+                    if (flowGroups.length > 0) {
+                        for (let i = 0; i < flowGroups.length; i++) {
+                            const flowGroup = flowGroups[i];
+                            flowGroupsMap[flowGroup.groupId] = flowGroup;
+                        }
+                    }
+                }
+            });
+
+            initGroupSelector();
+            $(function () {
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'uid', title: 'uid', align: 'center', visible: false, width: '5%' },
+                        { field: 'nick', title: '被邀请用户昵称', align: 'center', width: '5%' },
+                        { field: 'groupName', title: '所属团队', align: 'center', width: '5%' },
+                        { field: 'teamName', title: '所属小组', align: 'center', width: '5%', },
+                        { field: 'memberName', title: '所属成员', align: 'center', width: '5%' },
+                        { field: 'inviteCode', title: '所属邀请码', align: 'center', width: '5%' },
+                        {
+                            field: 'inviteTime', title: '邀请时间', align: 'center', width: '5%',
+                            formatter: function (val) {
+                                var date = new Date(val);
+                                return date.format('yyyy-MM-dd hh:mm:ss');
+                            }
+                        },
+                        {
+                            field: 'memberId',
+                            title: '操作',
+                            align: 'center',
+                            width: '10%',
+                            formatter: function (val, row, index) {
+                                return '<button id="btn-del" name="btnEdit" class="btn btn-sm btn-primary opt-del" data-idx=' + row.uid + '>' +
+                                    '<i class="glyphicon glyphicon-edit"></i>解绑</button>' +
+                                    '<button class="btn btn-sm btn-success opt-change" data-idx=' + row.uid + '>' +
+                                    '<i class="glyphicon glyphicon-edit"></i>换绑</button>';
+                            }
+                        }
+                    ],
+                    undefinedText: 0,
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 50, 100, 200, 300, 500],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            page: params.pageNumber,
+                            pageSize: params.pageSize,
+                            erbanNo: $('#erbanNo').val(),
+                        };
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/flowteam/group/listFlowTeamInfoWithUser',
+                    onLoadSuccess: function (data) {  //加载成功时执行
+                        console.log("load success", data);
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                });
+
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                });
+
+                //新建标签
+                $("#addBtn").click(function () {
+                    $('#groupId').val(''),
+                        $('#modal_groupName').val(''),
+                        $("#addGroupModal").modal('show');
+                });
+
+                // 换绑
+                $('#table').on('click', '.opt-change', function () {
+                    const uid = $(this).attr('data-idx');
+                    $('#modal_uid').val(uid);
+                    $('#query-groupSelector').val('');
+                    $('#query-teamSelector').val('');
+                    $('#query-memberSelector').val('');
+                    $('#query-invitecodeSelector').val('');
+                    $("#changeInviteModal").modal('show');
+                });
+
+                $('#saveChange').click(function () {
+                    const requestParam = {
+                        uid: $('#modal_uid').val(),
+                        groupId: $('#query-groupSelector').val(),
+                        teamId: $('#query-teamSelector').val(),
+                        memberId: $('#query-memberSelector').val(),
+                        inviteCode: $('#query-invitecodeSelector').val(),
+                        optType: 1
+                    };
+                    console.log('requestParam', JSON.stringify(requestParam))
+                    $.ajax({
+                        type: "post",
+                        url: "/admin/flowteam/group/updateFlowTeamInviteInfo",
+                        data: JSON.stringify(requestParam),
+                        dataType: "json",
+                        contentType: 'application/json',
+                        success: function (json) {
+                            if (json.success) {
+                                $("#tipMsg").text("换绑成功");
+                                $("#tipModal").modal('show');
+                                $("#changeInviteModal").modal('hide');
+                                TableHelper.doRefresh("#table");
+                            } else {
+                                $("#tipMsg").text("换绑失败." + json.message);
+                                $("#tipModal").modal('show');
+                            }
+                        }
+                    });
+                });
+
+                // 解绑
+                $('#table').on('click', '.opt-del', function () {
+                    const uid = $(this).attr('data-idx');
+                    if (confirm('确认要解绑该邀请码吗？（注：该操作不可恢复！！）')) {
+                        const requestParam = {
+                            uid: uid,
+                            optType: 2,
+                        };
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/flowteam/group/updateFlowTeamInviteInfo",
+                            data: JSON.stringify(requestParam),
+                            dataType: "json",
+                            contentType: 'application/json',
+                            success: function (json) {
+                                if (json.success) {
+                                    $("#tipMsg").text("换绑成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("换绑失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+
+            });
+
+        }
+    },
+};
+
+// 初始化团队选择器
+function initGroupSelector() {
+    const options = [];
+    options.push('<option value="">选择团队</option>')
+    for (var i = 0; i < flowGroups.length; i++) {
+        var item = flowGroups[i];
+        //拼接成多个<option><option/>
+        options.push('<option value="' + item.groupId + '">' + item.groupName + '</option>')
+    }
+    $("#query-groupSelector").html(options.join(' '));
+}
+</script>
+
+<style scoped>
+#teamInfoModal .modal-dialog {
+    width: 60%;
+    height: 50%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/flowteam/FlowTeamMemberAdminView.vue b/src/views/flowteam/FlowTeamMemberAdminView.vue
new file mode 100644
index 0000000..fc6cc8d
--- /dev/null
+++ b/src/views/flowteam/FlowTeamMemberAdminView.vue
@@ -0,0 +1,473 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <div id="toolbar">
+                    <div class="col-sm-12">
+                        <label for="groupSelector" class="col-sm-1 control-label">选择团队:</label>
+                        <div class="col-sm-3">
+                            <select name="query-teamSelector" id="groupSelector"
+                                onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name, false)"
+                                class="form-control group-selector" data-btn-class="btn-warning">
+                            </select>
+                        </div>
+                        <label for="query-teamSelector" class="col-sm-1 control-label">选择小组:</label>
+                        <div class="col-sm-3">
+                            <select name="teamSelector" id="query-teamSelector" class="form-control"
+                                data-btn-class="btn-warning">
+                            </select>
+                        </div>
+                    </div>
+                    <div class="col-sm-12">
+                        <label for="memberName" class="col-sm-1 control-label">姓名:</label>
+                        <div class="col-sm-3"><input type="text" class="form-control" name="memberName" id="memberName"
+                                placeholder="输入成员姓名"></div>
+                        <label for="memberPhone" class="col-sm-1 control-label">手机号:</label>
+                        <div class="col-sm-3"><input type="text" class="form-control" name="memberPhone" id="memberPhone"
+                                placeholder="输入成员手机号"></div>
+                        <label for="inviteCode" class="col-sm-1 control-label">邀请码:</label>
+                        <div class="col-sm-3"><input type="text" class="form-control" name="inviteCode" id="inviteCode"
+                                placeholder="输入邀请码"></div>
+                    </div>
+                    <div class="col-sm-12">
+                        <button id="btnSearch" class="btn btn-default">
+                            <i class="glyphicon glyphicon-search"></i>查询
+                        </button>
+                        <button id="addBtn" class="btn btn-default">
+                            <i class="glyphicon glyphicon-plus"></i>新增成员
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- .content -->
+            <div id="table"></div>
+
+        </div>
+    </section>
+
+    <div class="modal fade" id="addClanModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="modalLabel">添加</h4>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="addForm">
+                        <input type="hidden" name="editMemberId" id="editMemberId" />
+                        <div class="form-group">
+                            <label for="editMemberName" class="col-sm-3 control-label">姓名</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control validate[required]" name="editMemberName"
+                                    id="editMemberName">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="editMemberPhone" class="col-sm-3 control-label">电话</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" name="editMemberPhone" id="editMemberPhone">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="teamRoleSelector" class="col-sm-3 control-label">职务</label>
+                            <div class="col-sm-9">
+                                <select name="teamRoleSelector" id="teamRoleSelector">
+                                    <option value="1">组员</option>
+                                    <option value="2">组长</option>
+                                    <option value="3">团长</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="modal-groupSelector" class="col-sm-3 control-label">所属团队</label>
+                            <div class="col-sm-9">
+                                <select name="modal-teamSelector" id="modal-groupSelector"
+                                    onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name, false)">
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="modal-teamSelector" class="col-sm-3 control-label">所属小组</label>
+                            <div class="col-sm-9">
+                                <select name="modal-teamSelector" id="modal-teamSelector">
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="editInviteCodes" class="col-sm-3 control-label">邀请码</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="input-sm form-control datetime" name="editInviteCodes"
+                                    id="editInviteCodes" placeholder="用,隔开填多个">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="save">确定</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+const TEAM_ROLE = {
+    "1": '组员',
+    "2": '组长',
+    "3": '团长',
+};
+let flowTeams;
+let flowTeamsMap = {};
+
+let flowGroups = [];
+let flowGroupsMap = {};
+let memberList = [];
+let editMemberInfo;
+export default {
+    name: "FlowTeamMemberAdminView",
+    setup() {
+
+        // 初始化小组选择器
+        function initTeamSelector(groupId, childrenSelectId, isEdit) {
+            const options = [];
+            $.ajax({
+                type: "get",
+                url: "/admin/flowTeam/listTeamByGroupId.action",
+                data: {
+                    groupId: groupId
+                },
+                dataType: "json",
+                success: function (json) {
+                    if (json.success) {
+                        for (let i = 0; i < json.data.length; i++) {
+                            const flowTeam = json.data[i];
+                            //拼接成多个<option><option/>
+                            options.push('<option value="' + flowTeam.teamId + '">' + flowTeam.teamName + '</option>')
+                        }
+                        if (options.length == 0) {
+                            options.push('<option value="">暂无数据</option>')
+                        }
+                        $('#' + `${childrenSelectId}`).html(options.join(' '));
+                        if (isEdit) {
+                            initEditModalData();
+                        }
+                    }
+                }
+            });
+        }
+        window.initTeamSelector = initTeamSelector;
+        return {
+            initTeamSelector
+        };
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+
+            $(function () {
+                // 加载流量团队配置
+                $.ajax({
+                    type: "get",
+                    url: "/admin/flowTeam/listTeam.action",
+                    dataType: "json",
+                    success: function (json) {
+                        if (json.success) {
+                            if (json.data) {
+                                flowTeams = json.data;
+                                for (let i = 0; i < flowTeams.length; i++) {
+                                    const flowTeam = flowTeams[i];
+                                    flowTeamsMap[flowTeam.teamId] = flowTeam;
+                                }
+                            } else {
+                                flowTeams = [];
+                                flowTeamsMap = {};
+                            }
+                        }
+                    }
+                });
+
+                // 加载流量团队配置
+                $.ajax({
+                    type: "get",
+                    url: "/admin/flowteam/group/listGroupByPage",
+                    data: {
+                        page: 1,
+                        pageSize: 2147483647,
+                        groupName: ''
+                    },
+                    dataType: "json",
+                    success: function (json) {
+                        console.log("init group success", json);
+                        flowGroups = json.rows;
+                        if (flowGroups.length > 0) {
+                            for (let i = 0; i < flowGroups.length; i++) {
+                                const flowGroup = flowGroups[i];
+                                flowGroupsMap[flowGroup.groupId] = flowGroup;
+                            }
+                        }
+                    }
+                });
+                
+                // 初始化团队选择器
+                function initGroupSelector() {
+                    const options = [];
+                    options.push('<option value="">选择团队</option>')
+                    $.get('/admin/flowteam/group/listGroupByPage',
+                        {
+                            page: 1,
+                            pageSize: 2147483647,
+                            groupName: ''
+                        }, function (res) {
+                            if (res) {
+                                for (let i = 0; i < res.rows.length; i++) {
+                                    var item = res.rows[i];
+                                    //拼接成多个<option><option/>
+                                    options.push('<option value="' + item.groupId + '">' + item.groupName + '</option>')
+                                }
+                                $("#groupSelector").html(options.join(' '));
+                                $("#modal-groupSelector").html(options.join(' '));
+                            }
+                        });
+                }
+                initGroupSelector();
+
+
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    $('#table').bootstrapTable('destroy');
+                    $('#table').bootstrapTable({
+                        columns: [
+                            { field: 'memberName', title: '姓名', align: 'center', width: '5%' },
+                            { field: 'memberPhone', title: '电话', align: 'center', width: '5%' },
+                            {
+                                field: 'groupId', title: '所属团队', align: 'center', width: '5%',
+                                formatter: function (val) {
+                                    const group = flowGroupsMap[val];
+                                    if (group) {
+                                        return group.groupName;
+                                    } else {
+                                        return '-'
+                                    }
+                                }
+                            },
+                            {
+                                field: 'teamId', title: '所属小组', align: 'center', width: '5%',
+                                formatter: function (val, row, index) {
+                                    const team = flowTeamsMap[val];
+                                    if (team) {
+                                        return team.teamName;
+                                    } else {
+                                        return '-'
+                                    }
+                                }
+                            },
+                            {
+                                field: 'teamRole', title: '职务', align: 'center', width: '5%',
+                                formatter: function (val, row, index) {
+                                    const teamRole = TEAM_ROLE[val];
+                                    if (teamRole) {
+                                        return teamRole;
+                                    } else {
+                                        return '-'
+                                    }
+                                }
+                            },
+                            {
+                                field: 'memberStatus', title: '当前状态', align: 'center', width: '5%',
+                                formatter: function (val, row, index) {
+                                    if (val == 1) {
+                                        return `<span class="text-success">生效</span>`;
+                                    } else {
+                                        return `<span style="color: grey">无效</span>`;
+                                    }
+                                }
+                            },
+                            { field: 'inviteCodes', title: '邀请码', align: 'center', width: '5%' },
+                            {
+                                field: 'memberId',
+                                title: '操作',
+                                align: 'center',
+                                width: '10%',
+                                formatter: function (val, row, index) {
+                                    let statusChangeBtn = '<button class="btn btn-sm btn-success opt-change-status" data-idx=' + index + ' data-new-status=' + 1 + '>设为生效</button>';
+                                    if (row.memberStatus == 1) {
+                                        statusChangeBtn = '<button class="btn btn-sm btn-primary opt-change-status" data-idx=' + index + ' data-new-status=' + 0 + '>设为无效</button>';
+                                    }
+                                    return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-edit" data-idx=' + index + '>' +
+                                        '<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
+                                        statusChangeBtn;
+                                    //statusChangeBtn +
+                                    //'<button class="btn btn-sm btn-danger opt-change-status" data-idx=' + index + ' data-new-status="-1"><i class="glyphicon glyphicon-remove"></i>删除</button>';
+                                }
+                            }
+                        ],
+                        undefinedText: 0,
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 20,
+                        pagination: true,
+                        pageList: [20, 50, 100, 200, 300, 500],
+                        search: false,
+                        sidePagination: "server", //表示服务端请求
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var param = {
+                                pageNumber: params.pageNumber,
+                                pageSize: params.pageSize,
+                                memberName: $('#memberName').val(),
+                                memberPhone: $('#memberPhone').val(),
+                                inviteCode: $('#inviteCode').val(),
+                                teamId: $('#query-teamSelector').val(),
+                                groupId: $('#groupSelector').val()
+                            };
+                            return param;
+                        },
+                        toolbar: '#toolbar',
+                        url: '/admin/flowTeam/listFlowMembersByPage.action',
+                        onLoadSuccess: function (data) {  //加载成功时执行
+                            console.log("load success", data);
+                            memberList = data.rows;
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    });
+                });
+
+                //新建标签
+                $("#addBtn").click(function () {
+                    $('#modal-groupSelector').attr('disabled', false);
+                    $('#modal-groupSelector').val('');
+                    let teamSelector = document.getElementById("modal-teamSelector");
+                    $('#modal-teamSelector').attr('disabled', false);
+                    teamSelector.options.length = 0;
+                    $('#editMemberId').val('');
+                    $('#editMemberName').val('');
+                    $('#editMemberPhone').val('');
+                    $('#teamRoleSelector').val('1');
+                    $('#editInviteCodes').val('');
+                    $("#addClanModal").modal('show');
+                });
+
+                //编辑成员信息
+                $('#table').on('click', '.opt-edit', function () {
+                    const idx = $(this).attr('data-idx');
+                    editMemberInfo = memberList[idx];
+                    console.log("memberInfo=======", editMemberInfo)
+                    window.initTeamSelector(editMemberInfo.groupId, "modal-teamSelector", true)
+                });
+
+                // 新增
+                $("#save").click(function () {
+                    if ($("#addForm").validationEngine('validate')) {
+                        const requestParam = {
+                            memberId: $('#editMemberId').val(),
+                            groupId: $('#modal-groupSelector').val(),
+                            teamId: $('#modal-teamSelector').val(),
+                            memberName: $('#editMemberName').val(),
+                            memberPhone: $('#editMemberPhone').val(),
+                            teamRole: $('#teamRoleSelector').val(),
+                            inviteCodes: $('#editInviteCodes').val(),
+                        }
+
+                        console.debug('------requestParam', requestParam);
+
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/flowTeam/saveMember.action",
+                            data: JSON.stringify(requestParam),
+                            dataType: "json",
+                            contentType: 'application/json',
+                            success: function (json) {
+                                if (json.success) {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#addClanModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+
+                });
+
+                $('#table').on('click', '.opt-change-status', function () {
+                    const idx = $(this).attr('data-idx');
+                    const memberInfo = memberList[idx];
+                    console.debug('=======memberInfo', memberInfo);
+                    const memberId = memberInfo.memberId;
+                    const newStatus = $(this).attr('data-new-status');
+                    let action = ""
+                    if (newStatus == 0) {
+                        action = `确定将“${memberInfo.memberName}”设为无效?`
+                    } else if (newStatus == 1) {
+                        action = `确定将“${memberInfo.memberName}”设为有效?`
+                    } else if (newStatus == -1) {
+                        action = `确定删除“${memberInfo.memberName}”?`
+                    }
+                    if (confirm(action)) {
+                        const requestParam = {
+                            memberId: memberId,
+                            memberStatus: newStatus,
+                        }
+
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/flowTeam/changeMemberStatus.action",
+                            data: JSON.stringify(requestParam),
+                            dataType: "json",
+                            contentType: 'application/json',
+                            success: function (json) {
+                                if (json.success) {
+                                    $("#tipMsg").text("修改成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                } else {
+                                    $("#tipMsg").text("修改失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+            });
+        }
+    },
+};
+
+
+// 初始化编辑弹窗
+function initEditModalData() {
+    $('#editMemberId').val(editMemberInfo.memberId),
+        $('#modal-groupSelector').val(editMemberInfo.groupId),
+        $('#modal-groupSelector').attr('disabled', true),
+        $('#editMemberName').val(editMemberInfo.memberName),
+        $('#editMemberPhone').val(editMemberInfo.memberPhone),
+        $('#teamRoleSelector').val(editMemberInfo.teamRole),
+        $('#modal-teamSelector').val(editMemberInfo.teamId),
+        $('#modal-teamSelector').attr('disabled', true),
+        $('#editInviteCodes').val(editMemberInfo.inviteCodes),
+        $("#addClanModal").modal('show');
+}
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/flowteam/FlowTeamSettlementView.vue b/src/views/flowteam/FlowTeamSettlementView.vue
new file mode 100644
index 0000000..d50457c
--- /dev/null
+++ b/src/views/flowteam/FlowTeamSettlementView.vue
@@ -0,0 +1,358 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <div id="toolbar">
+                    <form id="searchForm" action="/admin/flowteamSettlement/export" method="get" target="_blank">
+                        <div class="col-sm-12">
+                            <label for="query-groupSelector" class="col-sm-3 control-label">选择查询团队:</label>
+                            <div class="col-sm-3">
+                                <select name="query-teamSelector"
+                                    onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name)"
+                                    id="query-groupSelector" class="form-control" data-btn-class="btn-warning">
+                                </select>
+                            </div>
+                            <label for="query-teamSelector" class="col-sm-3 control-label">选择查询小组:</label>
+                            <div class="col-sm-3">
+                                <select name="teamSelector" id="query-teamSelector" class="form-control"
+                                    data-btn-class="btn-warning">
+                                </select>
+                            </div>
+                        </div>
+                    </form>
+                    <div class="col-sm-12">
+                        <button id="btnSearch" class="btn btn-default">
+                            <i class="glyphicon glyphicon-search"></i>查询
+                        </button>
+                        <button id="btnExport" class="btn btn-default">
+                            <i class="glyphicon glyphicon-Export"></i>导出
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- .content -->
+            <div id="table"></div>
+
+        </div>
+    </section>
+
+    <div class="modal fade" id="teamDetailModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="teamDetailModalTitle">分组明细</h4>
+                </div>
+                <div class="modal-body">
+                    <div>
+                        <input type="text" id="queryErbanNo" placeholder="输入用户ID">
+                    </div>
+                    <button type="button" class="btn btn-default" id="searchTeamDetail">搜索</button>
+                    <button type="button" class="btn btn-primary" id="exportTeamDetail">导出</button>
+                    <div id="teamDetaillTable"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+const TEAM_ROLE = {
+    "1": '组员',
+    "2": '组长',
+    "3": '团长',
+};
+let flowTeams;
+let flowTeamsMap = {};
+
+let flowGroups = [];
+let flowGroupsMap = {};
+const groupTeamIds = [];
+export default {
+    name: "FlowTeamSettlementView",
+    setup() {
+        // 初始化小组选择器
+        function initTeamSelector(groupId, childrenSelectId) {
+            const options = ['<option value="">全部</option>'];
+            $.ajax({
+                type: "get",
+                url: "/admin/flowTeam/listTeamByGroupId.action",
+                data: {
+                    groupId: groupId
+                },
+                dataType: "json",
+                success: function (json) {
+                    if (json.success) {
+                        // 清空数组
+                        groupTeamIds.length = 0;
+                        for (let i = 0; i < json.data.length; i++) {
+                            const flowTeam = json.data[i];
+                            //拼接成多个<option><option/>
+                            options.push('<option value="' + flowTeam.teamId + '">' + flowTeam.teamName + '</option>')
+                            groupTeamIds.push(flowTeam.teamId);
+                        }
+                        $('#' + `${childrenSelectId}`).html(options.join(' '));
+                    }
+                }
+            });
+        }
+        window.initTeamSelector = initTeamSelector;
+        return {
+            initTeamSelector
+        };
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                // 加载流量团队配置
+                $.ajax({
+                    type: "get",
+                    url: "/admin/flowTeam/listTeam.action",
+                    dataType: "json",
+                    success: function (json) {
+                        if (json.success) {
+                            if (json.data) {
+                                flowTeams = json.data;
+                                for (let i = 0; i < flowTeams.length; i++) {
+                                    const flowTeam = flowTeams[i];
+                                    flowTeamsMap[flowTeam.teamId] = flowTeam;
+                                }
+                            } else {
+                                flowTeams = [];
+                                flowTeamsMap = {};
+                            }
+                        }
+                    }
+                });
+
+                // 加载流量团队配置
+                $.ajax({
+                    type: "get",
+                    url: "/admin/flowteam/group/listGroupByPage",
+                    data: {
+                        page: 1,
+                        pageSize: 2147483647,
+                        groupName: ''
+                    },
+                    dataType: "json",
+                    success: function (json) {
+                        console.log("init group success", json);
+                        flowGroups = json.rows;
+                        if (flowGroups.length > 0) {
+                            for (let i = 0; i < flowGroups.length; i++) {
+                                const flowGroup = flowGroups[i];
+                                flowGroupsMap[flowGroup.groupId] = flowGroup;
+                            }
+                        }
+                    }
+                });
+                
+                let listQueryParams = {};
+                let teamDetailQueryParams = {};
+                // function initTeamSelector() {
+                //     const options = ['<option value="">请选择</option>'];
+                //     for(var i=0,len=flowTeams.length;i<len;i++){
+                //         var item = flowTeams[i];
+                //         //拼接成多个<option><option/>
+                //         options.push('<option value="'+item.teamId+'">'+item.teamName+'</option>')
+                //     }
+                //     $("#teamSelector").html(options.join(' '));
+                // }
+                //
+                // initTeamSelector();
+
+                // 初始化团队选择器
+                function initGroupSelector() {
+                    const options = [];
+                    options.push('<option value="">选择团队</option>')
+                    for (var i = 0; i < flowGroups.length; i++) {
+                        var item = flowGroups[i];
+                        //拼接成多个<option><option/>
+                        options.push('<option value="' + item.groupId + '">' + item.groupName + '</option>')
+                    }
+                    $("#query-groupSelector").html(options.join(' '));
+                }
+
+                initGroupSelector();
+
+
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'month', title: '时间', align: 'center', width: '5%' },
+                        { field: 'newUserNum', title: '新增用户', align: 'center', width: '10%' },
+                        { field: 'newUserChargeAmount', title: '当月新增充值', align: 'center', width: '10%', valign: 'center' },
+                        { field: 'totalChargeAmount', title: '累计充值(美元)', align: 'center', width: '5%', },
+                        { field: 'totalChargeUserNum', title: '累计充值人数', align: 'center', width: '5%', },
+                        { field: 'totalChargeNum', title: '累计充值次数', align: 'center', width: '5%', },
+                        {
+                            field: 'month',
+                            title: '操作',
+                            align: 'center',
+                            width: '10%',
+                            formatter: function (val, row, index) {
+                                const month = row.month;
+                                return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-show-team-detail" data-month=' + month + '>' +
+                                    '查看明细</button>';
+                            }
+                        }
+                    ],
+                    uniqueId: 'month',
+                    undefinedText: 0,
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 20,
+                    pagination: true,
+                    pageList: [20, 50, 100, 200, 300, 500],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        const teamId = $('#query-teamSelector').val();
+                        var param = {
+                            groupId: $('#query-groupSelector').val(),
+                            teamId: teamId
+                        };
+                        listQueryParams = param;
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/flowteamSettlement/listTeamSettlementData.action',
+                    onLoadSuccess: function () {  //加载成功时执行
+                        console.log("load success");
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                });
+
+
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    const groupId = $('#query-groupSelector').val();
+                    if (!groupId) {
+                        $("#tipMsg").text("请先选择需要查询的团队");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    TableHelper.doRefresh('#table');
+                });
+
+                // 查询刷新
+                $('#searchTeamDetail').on('click', function () {
+                    TableHelper.doRefresh('#teamDetaillTable');
+                });
+                // 获取某月详情
+                $("#table").on("click", '.opt-show-team-detail', function () {
+                    const month = $(this).attr('data-month');
+                    const row = $('#table').bootstrapTable('getRowByUniqueId', month);
+                    console.log('groupTeamIds', groupTeamIds)
+                    let teamId = $('#query-teamSelector').val();
+                    if (!teamId) {
+                        teamId = groupTeamIds.join(",");
+                        const groupName = $('#query-groupSelector').find("option:selected").text();
+                        console.log('groupName', groupName)
+                        $('#teamDetailModal #teamDetailModalTitle').text(`${groupName}${row.month} 月累计充值明细`);
+                    } else {
+                        $('#teamDetailModal #teamDetailModalTitle').text(`${flowTeamsMap[teamId].teamName} ${row.month} 月累计充值明细`)
+                    }
+                    console.debug('---row', row);
+                    $('#teamDetaillTable').bootstrapTable('destroy');
+                    $('#teamDetaillTable').bootstrapTable({
+                        columns: [
+                            { field: 'erbanNo', title: '用户ID', align: 'center', width: '5%' },
+                            { field: 'nick', title: '用户名称', align: 'center', width: '5%', },
+                            { field: 'createTime', title: '新增日期', align: 'center', width: '5%', formatter: formatTime },
+                            { field: 'inviteCode', title: '邀请码', align: 'center', width: '5%', },
+                            { field: 'inviteUserNick', title: '引入人', align: 'center', width: '5%', },
+                            { field: 'chargeTime', title: '充值时间', align: 'center', width: '5%', formatter: formatTime },
+                            { field: 'amount', title: '充值金额（美元）', align: 'center', width: '5%', }
+                        ],
+                        undefinedText: 0,
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 20,
+                        pagination: true,
+                        pageList: [20, 50, 100, 200, 300, 500],
+                        search: false,
+                        sidePagination: "server", //表示服务端请求
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var param = {
+                                page: params.pageNumber,
+                                pageSize: params.pageSize,
+                                teamId: teamId,
+                                month: row.month,
+                                erbanNo: $('#queryErbanNo').val(),
+                            };
+                            teamDetailQueryParams = param;
+                            return param;
+                        },
+                        url: '/admin/flowteamSettlement/listTeamSettlementDataDetail.action',
+                        onLoadSuccess: function () {  //加载成功时执行
+                            $("#teamDetailModal").modal('show');
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    });
+                });
+
+                function param(obj) {
+                    let str = '';
+                    for (let key in obj) {
+                        let value = obj[key];
+                        str = key + '=' + value + '&';
+                    }
+                    return str.substring(0, str.length - 1);
+                }
+
+                $("#exportTeamDetail").on("click", function () {
+                    window.location.href = `/admin/flowteamSettlement/exportTeamSettlementDetails?${param(teamDetailQueryParams)}`
+                });
+
+                function formatTime(val) {
+                    if (val) {
+                        var date = new Date(val);
+                        return date.format('yyyy-MM-dd hh:mm:ss');
+                    } else {
+                        return '-';
+                    }
+                }
+
+                //导出功能
+                $("#btnExport").on('click', function () {
+                    $("#searchForm").submit();
+                });
+            });
+        }
+    },
+};
+</script>
+
+<style scoped>
+#teamDetailModal .modal-dialog,
+#userDetailModal .modal-dialog {
+    width: 50%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/flowteam/FlowTeamStatisticView.vue b/src/views/flowteam/FlowTeamStatisticView.vue
new file mode 100644
index 0000000..d78837b
--- /dev/null
+++ b/src/views/flowteam/FlowTeamStatisticView.vue
@@ -0,0 +1,793 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                    <a href="javascript:void()" class="opt-show-intro">说明&gt;</a>
+                </section>
+                <div id="toolbar">
+                    <div class="col-lg-12">
+                        <div class="col-sm-8">
+                            <label for="query-groupSelector" class="col-sm-2 control-label">选择查询团队:</label>
+                            <div class="col-sm-4">
+                                <select name="query-teamSelector"
+                                    onchange="initTeamSelector(this.options[this.selectedIndex].value, this.name)"
+                                    id="query-groupSelector" class="form-control" data-btn-class="btn-warning">
+                                </select>
+                            </div>
+                            <label for="query-teamSelector" class="col-sm-2 control-label">选择查询小组:</label>
+                            <div class="col-sm-4">
+                                <select name="teamSelector" id="query-teamSelector" class="form-control"
+                                    data-btn-class="btn-warning">
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-12">
+                        <div class="col-sm-5">
+                            <label for="startTime" class="col-sm-6 control-label">选择被邀请用户的新增时间范围:</label>
+                            <div class="col-sm-5">
+                                <input type="text" class="input-sm form-control" name="startTime" id="startTime">
+                            </div>
+                        </div>
+                        <div class="col-sm-3">
+                            <label for="endTime" class="col-sm-4 control-label">--</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="input-sm form-control" name="endTime" id="endTime">
+                            </div>
+                        </div>
+                        <button class="btn btn-default js-quick-search js-quick-search-1" data-days="1">
+                            昨天
+                        </button>
+                        <button class="btn btn-default js-quick-search js-quick-search-7" data-days="7">
+                            最近7天
+                        </button>
+                        <button class="btn btn-default js-quick-search js-quick-search-30" data-days="30">
+                            最近30天
+                        </button>
+                    </div>
+                    <div class="col-lg-12">
+                        <div class="col-sm-5">
+                            <label for="chargeStartTime" class="col-sm-6 control-label">选择被邀请用户的充值时间范围:</label>
+                            <div class="col-sm-5">
+                                <input type="text" class="input-sm form-control" name="chargeStartTime"
+                                    id="chargeStartTime">
+                            </div>
+                        </div>
+                        <div class="col-sm-3">
+                            <label for="chargeEndTime" class="col-sm-4 control-label">--</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="input-sm form-control" name="chargeEndTime" id="chargeEndTime">
+                            </div>
+                        </div>
+                        <button class="btn btn-default js-quick-search_a js-quick-search-1" data-days="1">
+                            昨天
+                        </button>
+                        <button class="btn btn-default js-quick-search_a js-quick-search-7" data-days="7">
+                            最近7天
+                        </button>
+                        <button class="btn btn-default js-quick-search_a js-quick-search-30" data-days="30">
+                            最近30天
+                        </button>
+                    </div>
+                    <div class="col-sm-12">
+                        <button id="btnSearch" class="btn btn-default">
+                            <i class="glyphicon glyphicon-search"></i>查询
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- .content -->
+            <div id="group-table-div" style="display: none;">
+                <h3 id="group-tableTitle">团队统计</h3>
+                <div id="group-table"></div>
+                <button type="button" class="btn btn-primary" id="exportGroupDetail">导出团队明细</button>
+            </div>
+            <div>
+                <h3 id="tableTitle"></h3>
+                <div id="table"></div>
+            </div>
+
+        </div>
+    </section>
+    <!--说明modal-->
+    <div class="modal fade" id="introModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="introModalTitle">统计说明</h4>
+                </div>
+                <div class="modal-body">
+                    分组统计展示每个小组的整体数据，按不同的小组分别显示，查询前需要：<br/>
+                    1）输入查询的小组：非必填，不填写展示全部小组<br/>
+                    2）选择被邀请用户的新增时间范围：指的是被邀请的人新增的时间段，非必填，不填写展示截止到目前的全部数据<br/>
+                    3）选择被邀请用户的充值时间范围：指的是被邀请的人的充值行为发生的时间段，非必填，不填写展示截止到目前的全部数据<br/>
+                    表格按照选取的被邀请用户新增时间展示累计新增用户数<br/>
+                    表头说明：<br/>
+                    --新增用户数：该小组在所设置的被邀请用户新增时间范围内所引入的新用户数量<br/>
+                    --新增充值人数：该小组满足新增时间筛选的新增用户，在所设置的充值时间范围内发生首次充值的人数<br/>
+                    --付费转化：付费转化=表格显示的新增充值人数/表格显示的新增用户数<br/>
+                    --充值次数：该小组满足新增时间筛选的新增用户，在所设置的充值时间范围内发生的累计充值次数<br/>
+                    --充值金额：该小组满足新增时间筛选的新增用户，在所设置的充值时间范围内发生的累计充值金额<br/>
+                    --送礼金额：该小组满足新增时间筛选的新增用户，截止到目前时刻的送礼金额
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="teamDetailModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="teamDetailModalTitle">分组明细</h4>
+                </div>
+                <div class="modal-body">
+                    <div id="teamDetaillTable"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" id="exportTeamDetail">导出</button>
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="userDetailModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="userDetailModalTitle">分组明细</h4>
+                </div>
+                <div class="modal-body">
+                    <div id="userDetaillTable"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" id="exportUserDetail">导出</button>
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+import { formatTime } from '@/utils/maintainer';
+
+const TEAM_ROLE = {
+    "1": '组员',
+    "2": '组长',
+    "3": '团长',
+};
+let flowTeams;
+let flowTeamsMap = {};
+
+let flowGroups = [];
+let flowGroupsMap = {};
+const groupTeamIds = [];
+export default {
+    name: "FlowTeamStatisticView",
+    setup() {
+        // 初始化小组选择器
+        function initTeamSelector(groupId, childrenSelectId) {
+            const options = ['<option value="">全部</option>'];
+            $.ajax({
+                type: "get",
+                url: "/admin/flowTeam/listTeamByGroupId.action",
+                data: {
+                    groupId: groupId
+                },
+                dataType: "json",
+                success: function (json) {
+                    if (json.success) {
+                        // 清空数组
+                        groupTeamIds.length = 0;
+                        for (let i = 0; i < json.data.length; i++) {
+                            const flowTeam = json.data[i];
+                            //拼接成多个<option><option/>
+                            options.push('<option value="' + flowTeam.teamId + '">' + flowTeam.teamName + '</option>')
+                            groupTeamIds.push(flowTeam.teamId);
+                        }
+                        $('#' + `${childrenSelectId}`).html(options.join(' '));
+                    }
+                }
+            });
+        }
+        window.initTeamSelector = initTeamSelector;
+        return {
+            initTeamSelector
+        };
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                // 加载流量团队配置
+                $.ajax({
+                    type: "get",
+                    url: "/admin/flowTeam/listTeam.action",
+                    dataType: "json",
+                    success: function (json) {
+                        if (json.success) {
+                            if (json.data) {
+                                flowTeams = json.data;
+                                for (let i = 0; i < flowTeams.length; i++) {
+                                    const flowTeam = flowTeams[i];
+                                    flowTeamsMap[flowTeam.teamId] = flowTeam;
+                                }
+                            } else {
+                                flowTeams = [];
+                                flowTeamsMap = {};
+                            }
+                        }
+                    }
+                });
+
+                // 加载流量团队配置
+                $.ajax({
+                    type: "get",
+                    url: "/admin/flowteam/group/listGroupByPage",
+                    data: {
+                        page: 1,
+                        pageSize: 2147483647,
+                        groupName: ''
+                    },
+                    dataType: "json",
+                    success: function (json) {
+                        console.log("init group success", json);
+                        flowGroups = json.rows;
+                        if (flowGroups.length > 0) {
+                            for (let i = 0; i < flowGroups.length; i++) {
+                                const flowGroup = flowGroups[i];
+                                flowGroupsMap[flowGroup.groupId] = flowGroup;
+                            }
+                        }
+                    }
+                });
+                let listQueryParams = {};
+                let teamDetailQueryParams = {};
+                let userDetailQueryParams = {};
+                let groupDetailQueryParams = {};
+                let detailTeamId;
+                $('.js-quick-search').on('click', function () {
+                    $('.js-quick-search').removeClass('active')
+                    $(this).addClass('active');
+                    setSearchTimeUseQuickWay($(this));
+                });
+
+                $('.js-quick-search_a').on('click', function () {
+                    $('.js-quick-search_a').removeClass('active')
+                    $(this).addClass('active');
+                    setChargeSearchTimeUseQuickWay($(this));
+                });
+
+                // 展示说明
+                $('.opt-show-intro').on('click', function () {
+                    $('#introModal').modal('show');
+                });
+
+                // 初始化团队选择器
+                function initGroupSelector() {
+                    const options = [];
+                    options.push('<option value="">选择团队</option>')
+                    for (var i = 0; i < flowGroups.length; i++) {
+                        var item = flowGroups[i];
+                        //拼接成多个<option><option/>
+                        options.push('<option value="' + item.groupId + '">' + item.groupName + '</option>')
+                    }
+                    $("#query-groupSelector").html(options.join(' '));
+                }
+
+                initGroupSelector();
+
+                function setSearchTimeUseQuickWay(quickDom) {
+                    const days = quickDom.attr("data-days");
+                    const today = new Date(new Date().setHours(0, 0, 0, 0));
+                    const todayStr = formatTime(today);
+                    const startTime = formatTime(new Date(today.getTime() - days * 24 * 60 * 60 * 1000));
+
+                    $('#startTime').val(startTime);
+                    $('#endTime').val(todayStr);
+                }
+
+                function setChargeSearchTimeUseQuickWay(quickDom) {
+                    const days = quickDom.attr("data-days");
+                    const today = new Date(new Date().setHours(0, 0, 0, 0));
+                    const todayStr = formatTime(today);
+                    const startTime = formatTime(new Date(today.getTime() - days * 24 * 60 * 60 * 1000));
+
+                    $('#chargeStartTime').val(startTime);
+                    $('#chargeEndTime').val(todayStr);
+                }
+
+                const quickDom = $('.js-quick-search-7');
+                quickDom.addClass('active');
+                setSearchTimeUseQuickWay(quickDom);
+
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    const groupId = $('#query-groupSelector').val();
+                    if (!groupId) {
+                        $("#tipMsg").text("请先选择需要查询的团队");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    $('#table').bootstrapTable('destroy');
+                    $('#table').bootstrapTable({
+                        columns: [
+                            {
+                                field: 'teamId', title: '组名', align: 'center', width: '5%',
+                                formatter: function (val, row, index) {
+                                    const team = flowTeamsMap[val];
+                                    if (team) {
+                                        return team.teamName;
+                                    } else {
+                                        return '-'
+                                    }
+                                }
+                            },
+                            { field: 'memberCount', title: '当前成员数', align: 'center', width: '10%' },
+                            { field: 'teamLeaders', title: '组长', align: 'center', width: '10%', valign: 'center' },
+                            { field: 'newUserCount', title: '新增用户数', align: 'center', width: '5%', },
+                            { field: 'newChargeUserCount', title: '新增充值人数', align: 'center', width: '5%', },
+                            { field: 'chargeRate', title: '付费转化', align: 'center', width: '5%', },
+                            { field: 'chargeCount', title: '充值次数', align: 'center', width: '5%', },
+                            { field: 'chargeMoney', title: '充值金额(美元)', align: 'center', width: '5%', },
+                            { field: 'sendGiftMony', title: '送礼钻石数', align: 'center', width: '5%', },
+                            { field: 'arpu', title: 'Arpu', align: 'center', width: '5%', },
+                            {
+                                field: 'teamId',
+                                title: '操作',
+                                align: 'center',
+                                width: '10%',
+                                formatter: function (val, row, index) {
+                                    return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-show-team-detail" data-teamId=' + val + '>' +
+                                        '查看明细</button>' +
+                                        '&nbsp;&nbsp;<button class="btn btn-sm btn-primary opt-exprot-user-detail-of-team" data-teamId=' + val +
+                                        '>导出明细</button>';
+                                }
+                            }
+                        ],
+                        undefinedText: 0,
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 20,
+                        pagination: true,
+                        pageList: [20, 50, 100, 200, 300, 500],
+                        search: false,
+                        sidePagination: "client", //表示服务端请求
+                        queryParamsType: "undefined",
+                        method: 'post',
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            const groupId = $('#query-groupSelector').val();
+                            const teamId = $('#query-teamSelector').val();
+                            const app = $('#appSelector').val();
+                            var param = {
+                                startDate: $('#startTime').val(),
+                                endDate: $('#endTime').val(),
+                                chargeStartTime: $('#chargeStartTime').val(),
+                                chargeEndTime: $('#chargeEndTime').val()
+                            };
+                            listQueryParams = param;
+                            groupDetailQueryParams = param;
+                            if (groupId) {
+                                groupDetailQueryParams.groupId = groupId;
+                            }
+                            if (teamId) {
+                                param.teamId = teamId;
+                            }
+                            if (app) {
+                                param.app = app;
+                            }
+                            if (groupId && !teamId) {
+                                param.teamIds = groupTeamIds;
+                            } else {
+                                $('#group-table-div').attr("style", "display: none;");
+                            }
+                            return param;
+                        },
+                        // toolbar: '#toolbar',
+                        url: '/admin/flowTeam/listStatisticSummary.action',
+                        onLoadSuccess: function (json) {  //加载成功时执行
+                            console.log("table load success");
+                            if ($('#query-groupSelector').val() && !$('#query-teamSelector').val()) {
+                                setTableTitle($('#query-groupSelector').val(), $('#query-teamSelector').val());
+                                // 组合数据
+                                calTeamTotal(json)
+                                showGroupTable();
+                            }
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("table load fail");
+                        }
+                    });
+                });
+
+                function setTableTitle(groupId, teamId) {
+                    let group = flowGroupsMap[groupId];
+                    let teamDesc = '小组明细';
+                    if (teamId) {
+                        let team = flowTeamsMap[teamId];
+                        teamDesc = team.teamName + teamDesc;
+                    }
+                    $('#tableTitle').html(group.groupName + '团队' + teamDesc);
+                }
+
+                let groupDataList = [];
+                function calTeamTotal(data) {
+                    groupDataList.length = 0;
+                    console.log('json', data)
+                    const groupData = {};
+                    let tmemberCount = 0;
+                    let tnewUserCount = 0;
+                    let tnewChargeUserCount = 0;
+                    let tchargeCount = 0;
+                    let tchargeMoney = 0;
+                    let tsendGiftMony = 0;
+                    for (let i = 0; i < data.length; i++) {
+                        const team = data[i]
+                        tmemberCount += team.memberCount;
+                        tnewUserCount += team.newUserCount;
+                        tnewChargeUserCount += team.newChargeUserCount;
+                        tchargeCount += team.chargeCount;
+                        tchargeMoney += team.chargeMoney;
+                        tsendGiftMony += team.sendGiftMony;
+                    }
+                    groupData.groupId = $('#query-groupSelector').val();
+                    groupData.tmemberCount = tmemberCount;
+                    groupData.tnewUserCount = tnewUserCount;
+                    groupData.tnewChargeUserCount = tnewChargeUserCount;
+                    groupData.tchargeRate = ((tnewChargeUserCount / tnewUserCount) * 100).toFixed(2) + '%';
+                    groupData.tchargeCount = tchargeCount;
+                    groupData.tchargeMoney = tchargeMoney;
+                    groupData.tsendGiftMony = tsendGiftMony;
+                    groupData.tarpu = (tchargeMoney / tnewUserCount).toFixed(2);
+                    groupDataList.push(groupData);
+                }
+
+
+                // 查询并展示团队统计数据表格
+                function showGroupTable() {
+                    console.log('groupDataList', groupDataList)
+                    $('#group-table-div').attr("style", "display:block;");
+                    $('#group-table').bootstrapTable('destroy');
+                    $('#group-table').bootstrapTable({
+                        columns: [
+                            {
+                                field: 'groupId', title: '团队名称', align: 'center', width: '5%',
+                                formatter: function (val, row, index) {
+                                    const group = flowGroupsMap[val];
+                                    if (group) {
+                                        return group.groupName;
+                                    } else {
+                                        return '-'
+                                    }
+                                }
+                            },
+                            { field: 'tmemberCount', title: '团队成员数', align: 'center', width: '10%' },
+                            { field: 'tnewUserCount', title: '新增用户数', align: 'center', width: '5%', },
+                            { field: 'tnewChargeUserCount', title: '新增充值人数', align: 'center', width: '5%', },
+                            { field: 'tchargeRate', title: '付费转化', align: 'center', width: '5%', },
+                            { field: 'tchargeCount', title: '充值次数', align: 'center', width: '5%', },
+                            { field: 'tchargeMoney', title: '充值金额(美元)', align: 'center', width: '5%', },
+                            { field: 'tsendGiftMony', title: '送礼钻石数', align: 'center', width: '5%', },
+                            { field: 'tarpu', title: 'Arpu', align: 'center', width: '5%', },
+                        ],
+                        height: 100,
+                        data: groupDataList,
+                        undefinedText: 0,
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pagination: false,
+                        search: false,
+                    });
+                }
+
+                var startTime = $('#startTime').datepicker({
+                    format: 'yyyy-mm-dd 00:00:00',
+                    autoclose: true
+                });
+
+                var endTime = $('#endTime').datepicker({
+                    format: 'yyyy-mm-dd 00:00:00',
+                    autoclose: true
+                });
+
+                var chargeStart = $('#chargeStartTime').datepicker({
+                    format: 'yyyy-mm-dd 00:00:00',
+                    autoclose: true
+                });
+
+                var chargeEnd = $('#chargeEndTime').datepicker({
+                    format: 'yyyy-mm-dd 00:00:00',
+                    autoclose: true
+                });
+
+                $('#addUploadBtn').on('click', function () {
+                    if ($('#addUploadFile').val() == '') {
+                        $('#tipMsg').text('上传图片为空');
+                        $('#tipModal').modal('show');
+                        return;
+                    }
+                    var options = {
+                        type: 'post',
+                        url: '/admin/upload/img',
+                        dataType: 'json',
+                        success: function (res) {
+                            if (res.path) {
+                                $('#addActPic').val(res.path);
+                                $('#addImgUrl').attr('src', res.path);
+                                console.log(res.path);
+                            } else {
+                                $('#tipMsg').text(res.msg);
+                                $('#tipModal').modal('show');
+                            }
+                        }
+                    }
+                    $('#addForm').ajaxSubmit(options);
+                })
+
+                //新建标签
+                $("#btnAdd").click(function () {
+                    $("#id").val("");
+                    $("#modal_name").val("");
+                    $("#modal_seq").val("");
+                    $("#modal_status").val("");
+                    $("#modal_type").val("");
+                    $("#modal_istop").val("");
+                    $("#modal_description").val("");
+                    $('#addActPic').val('');
+                    $('#addUploadFile').val('');
+                    $('#addImgUrl').attr('src', '');
+                    $("#roomTagModal").modal('show');
+                });
+
+                $("#add").click(function () {
+                    var id = $("#id").val();
+                    var name = $("#modal_name").val();
+                    var seq = $("#modal_seq").val();
+                    var status = $("#modal_status").val();
+                    var type = $("#modal_type").val();
+                    var istop = $("#modal_istop").val();
+                    var pict = $("#addActPic").val();
+                    var description = $("#modal_description").val();
+
+                    if (type != 3 && (pict == null || pict == '')) {
+                        $("#tipMsg").text("保存失败，请先上传图片！");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+
+                    if ($("#addForm").validationEngine('validate')) {
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/roomtag/saveRoomTag.action",
+                            data: {
+                                id: id,
+                                name: name,
+                                seq: seq,
+                                status: status,
+                                type: type,
+                                istop: istop,
+                                pict: pict,
+                                description: description
+                            },
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.success == 'true') {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#roomTagModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败." + json.msg);
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#roomTagModal").modal('hide');
+                                }
+                            }
+                        });
+                    }
+
+                });
+
+                $("#table").on("click", '.opt-show-team-detail', function () {
+                    var teamId = $(this).attr("data-teamId");
+                    $('#teamDetailModal #teamDetailModalTitle').text(`${flowTeamsMap[teamId].teamName} ${listQueryParams.startDate} ${listQueryParams.endDate} 明细`)
+                    $('#teamDetaillTable').bootstrapTable('destroy');
+                    $('#teamDetaillTable').bootstrapTable({
+                        columns: [
+                            {
+                                field: 'memberName', title: '成员名', align: 'center', width: '5%'
+                            },
+                            {
+                                field: 'teamRole', title: '职务', align: 'center', width: '5%',
+                                formatter: function (val, row, index) {
+                                    const teamRole = TEAM_ROLE[val];
+                                    if (teamRole) {
+                                        return teamRole;
+                                    } else {
+                                        return '-'
+                                    }
+                                }
+                            },
+                            {
+                                field: 'memberStatus', title: '成员状态', align: 'center', width: '5%',
+                                formatter: function (val, row, index) {
+                                    if (val == 1) {
+                                        return `<span class="text-success">生效</span>`;
+                                    } else {
+                                        return `<span style="color: grey">无效</span>`;
+                                    }
+                                }
+                            },
+                            { field: 'newUserCount', title: '新增用户', align: 'center', width: '5%', },
+                            { field: 'newChargeUserCount', title: '新增充值', align: 'center', width: '5%', },
+                            { field: 'chargeRate', title: '付费转化', align: 'center', width: '5%', },
+                            { field: 'chargeCount', title: '充值次数', align: 'center', width: '5%', },
+                            { field: 'chargeMoney', title: '充值金额(美元)', align: 'center', width: '5%', },
+                            { field: 'sendGiftMony', title: '送礼钻石数', align: 'center', width: '5%', },
+                            { field: 'arpu', title: 'Arpu', align: 'center', width: '5%', },
+                            {
+                                field: 'memberId',
+                                title: '操作',
+                                align: 'center',
+                                width: '10%',
+                                formatter: function (val, row, index) {
+                                    return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-primary opt-show-user-detail" data-teamId=' + teamId + ' data-memberId=' + val + '  data-memberName=' + row.memberName + '>' +
+                                        '查看个人明细</button>';
+                                }
+                            }
+                        ],
+                        undefinedText: 0,
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 20,
+                        pagination: true,
+                        pageList: [20, 50, 100, 200, 300, 500],
+                        search: false,
+                        sidePagination: "client", //表示服务端请求
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var param = {
+                                ...listQueryParams,
+                                teamId,
+                            };
+                            param.teamIds = '';
+                            teamDetailQueryParams = param;
+                            detailTeamId = teamId;
+                            return param;
+                        },
+                        url: '/admin/flowTeam/listFlowTeamStatisticDetails.action',
+                        onLoadSuccess: function () {  //加载成功时执行
+                            $("#teamDetailModal").modal('show');
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    });
+                });
+
+                $("#teamDetaillTable").on("click", '.opt-show-user-detail', function () {
+                    var teamId = $(this).attr("data-teamId");
+                    var memberId = $(this).attr("data-memberId");
+                    var memberName = $(this).attr("data-memberName");
+                    $('#userDetailModal #userDetailModalTitle').text(`${flowTeamsMap[teamId].teamName} ${memberName} ${listQueryParams.startDate} ${listQueryParams.endDate} 明细`)
+                    $('#userDetaillTable').bootstrapTable('destroy');
+                    $('#userDetaillTable').bootstrapTable({
+                        columns: [
+                            { field: 'inviteCode', title: '邀请码', align: 'center', width: '5%' },
+                            { field: 'userErbanNo', title: '被邀请用户id', align: 'center', width: '5%' },
+                            { field: 'userNickName', title: '被邀请用户昵称', align: 'center', width: '5%' },
+                            { field: 'registerIp', title: '被邀请用户注册ip', align: 'center', width: '5%' },
+                            { field: 'phone', title: '被邀请用户手机号', align: 'center', width: '5%' },
+                            { field: 'teamMemberName', title: '引入人', align: 'center', width: '5%' },
+                            { field: 'signUpTime', title: '新增日期', align: 'center', width: '5%' },
+                            { field: 'chargeCount', title: '充值次数', align: 'center', width: '5%' },
+                            { field: 'chargeMoney', title: '充值金额（美元）', align: 'center', width: '5%' },
+                            { field: 'totalSendGiftMoney', title: '送礼钻石数', align: 'center', width: '5%' },
+                            { field: 'totalBackbagSendGiftMoney', title: '送礼背包钻石数', align: 'center', width: '5%' },
+                            { field: 'totalNoBackbagSendGiftMoney', title: '送礼非背包钻石数', align: 'center', width: '5%' },
+                        ],
+                        undefinedText: 0,
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 20,
+                        pagination: true,
+                        pageList: [20, 50, 100, 200, 300, 500],
+                        search: false,
+                        sidePagination: "client", //表示服务端请求
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var param = {
+                                ...listQueryParams,
+                                memberId,
+                                teamId: detailTeamId,
+                            };
+                            param.teamIds = '';
+                            userDetailQueryParams = param;
+                            return param;
+                        },
+                        url: '/admin/flowTeam/listUserStatisticDetails.action',
+                        onLoadSuccess: function () {  //加载成功时执行
+                            $("#userDetailModal").modal('show');
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    });
+                });
+
+                function param(obj) {
+                    let str = '';
+                    for (let key in obj) {
+                        let value = obj[key];
+                        str = key + '=' + value + '&';
+                    }
+                    return str.substring(0, str.length - 1);
+                }
+
+                $("#table").on("click", '.opt-exprot-user-detail-of-team', function () {
+                    var teamId = $(this).attr("data-teamId");
+                    var queryParams = {
+                        ...listQueryParams,
+                        teamId,
+                    }
+                    window.location.href = '/admin/flowTeam/exportuserStatisticDetailOfTeam?' + param(queryParams);
+                })
+
+                $("#exportTeamDetail").on("click", function () {
+                    window.location.href = '/admin/flowTeam/exportTeamStatisticDetails?' + param(teamDetailQueryParams);
+                });
+
+                $("#exportUserDetail").on("click", function () {
+                    window.location.href = '/admin/flowTeam/exportUserStatisticDetails?' + param(userDetailQueryParams);
+                });
+
+                // 团队明细导出
+                $("#exportGroupDetail").on("click", function () {
+                    window.location.href = '/admin/flowTeam/exportUserStatisticDetails?' + param(groupDetailQueryParams);
+                });
+
+            });
+        }
+    },
+};
+</script>
+
+<style scoped>
+#teamDetailModal .modal-dialog,
+#userDetailModal .modal-dialog {
+    width: 50%;
+}
+
+#introModal .modal-dialog {
+    width: 60%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/flowteam/RefillInviteCodeView.vue b/src/views/flowteam/RefillInviteCodeView.vue
new file mode 100644
index 0000000..9bea319
--- /dev/null
+++ b/src/views/flowteam/RefillInviteCodeView.vue
@@ -0,0 +1,272 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <section class="content-header">
+                    <h1 id="itemTitle"></h1>
+                </section>
+                <section class="content">
+                    <div id="table"></div>
+                    <div id="toolbar">
+                        <textarea name="erbanNoList" id="erbanNoList" placeholder="多个搜索号请用逗号隔开"></textarea>
+                        <div style="margin-bottom: 6px">
+                            <button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
+                            <!--                        搜索根源：-->
+                            <!--                        <select name="checkType" id="checkType">-->
+                            <!--                            <option value="1">平台号</option>-->
+                            <!--                            <option value="2">手机号</option>-->
+                            <!--                            <option value="4">uid</option>-->
+                            <!--                        </select>-->
+                        </div>
+
+                    </div>
+                </section>
+
+            </div>
+        </div>
+    </section>
+
+    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                            aria-hidden="true">x</span></button>
+                    <h4 class="modal-title" id="addModalLabel">补填邀请码</h4>
+                </div>
+                <div class="modal-body">
+                    <form id="refillInviteCodeForm" class="form-horizontal">
+                        <input type="hidden" name="uid" id="editUid">
+                        <div class="form-group">
+                            <label for="editInviteCode" class="col-sm-3 control-label">邀请码:</label>
+                            <div class="col-sm-7">
+                                <input type="text" class="form-control validate[required]" name="nick" id="editInviteCode">
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn btn-primary" id="editSave">确认</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+
+const TEAM_ROLE = {
+    "1": '组员',
+    "2": '组长',
+    "3": '团长',
+};
+let flowTeams;
+let flowTeamsMap = {};
+
+let flowGroups = [];
+let flowGroupsMap = {};
+
+export default {
+    name: "RefillInviteCodeView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+
+            $(function () {
+                // 加载流量团队配置
+                $.ajax({
+                    type: "get",
+                    url: "/admin/flowTeam/listTeam.action",
+                    dataType: "json",
+                    success: function (json) {
+                        if (json.success) {
+                            if (json.data) {
+                                flowTeams = json.data;
+                                for (let i = 0; i < flowTeams.length; i++) {
+                                    const flowTeam = flowTeams[i];
+                                    flowTeamsMap[flowTeam.teamId] = flowTeam;
+                                }
+                            } else {
+                                flowTeams = [];
+                                flowTeamsMap = {};
+                            }
+                        }
+                    }
+                });
+
+                // 加载流量团队配置
+                $.ajax({
+                    type: "get",
+                    url: "/admin/flowteam/group/listGroupByPage",
+                    data: {
+                        page: 1,
+                        pageSize: 2147483647,
+                        groupName: ''
+                    },
+                    dataType: "json",
+                    success: function (json) {
+                        console.log("init group success", json);
+                        flowGroups = json.rows;
+                        if (flowGroups.length > 0) {
+                            for (let i = 0; i < flowGroups.length; i++) {
+                                const flowGroup = flowGroups[i];
+                                flowGroupsMap[flowGroup.groupId] = flowGroup;
+                            }
+                        }
+                    }
+                });
+                let tableData = [];
+                let canRefillInterval = 2 * 60 * 60 * 1000;
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 10,
+                    pagination: true,
+                    pageList: [10, 20, 30, 50],
+                    sidePagination: "client", //表示服务端请求
+                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                    //设置为limit可以获取limit, offset, search, sort, order
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            erbanNoList: $('#erbanNoList').val(),
+                        };
+                        //                console.log(param);
+                        return param;
+                    },
+                    uniqueId: 'code',
+                    toolbar: '#toolbar',
+                    url: '/admin/flowTeam/listUsers.action',
+                    onLoadSuccess: function (data) {  //加载成功时执行
+                        tableData = data;
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    },
+                    columns: [
+                        { field: 'erbanNo', title: '平台号', align: 'center', valign: 'middle' },
+                        { field: 'nick', title: '用户昵称', align: 'center', valign: 'middle' },
+                        {
+                            field: 'createTime',
+                            title: '新增时间',
+                            align: 'center',
+                            valign: 'middle',
+                            formatter: function (val, row, index) {
+                                if (val) {
+                                    var date = new Date(val);
+                                    return date.format("yyyy-MM-dd hh:mm:ss");
+                                } else {
+                                    return '-';
+                                }
+                            }
+                        },
+                        { field: 'inviteCode', title: '所填邀请码', align: 'center', valign: 'middle' },
+                        {
+                            field: 'teamId', title: '引入组', align: 'center', width: '5%',
+                            formatter: function (val, row, index) {
+                                const team = flowTeamsMap[val];
+                                if (team) {
+                                    return team.teamName;
+                                } else {
+                                    return '-'
+                                }
+                            }
+                        },
+                        { field: 'groupName', title: '引入团队', align: 'center', width: '5%' },
+                        { field: 'teamMemberName', title: '引入人', align: 'center', valign: 'middle' },
+                        {
+                            field: 'uid',
+                            title: '操作',
+                            align: 'center',
+                            width: '20%',
+                            valign: 'middle',
+                            formatter: function (val, row, index) {
+                                let isDisabled = true;
+                                if (!row.inviteCode) {
+                                    isDisabled = false;
+                                }
+                                var key = val;
+                                let result = `<button class='btn btn-sm btn-primary opt-edit' ${isDisabled ? 'disabled' : ''} data-idx=${index} data-id=${key} >补填邀请码</button>`
+                                return result;
+                            }
+                        }
+                    ]
+                })
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                })
+
+                $('#table').on('click', '.opt-edit', function () {
+                    const idx = $(this).data('idx');
+                    const row = tableData[idx];
+                    if (!row.isInCanRefillInviteCodeTime) {
+                        $("#tipMsg").text("超出不填时间，无法补填邀请码");
+                        $("#tipModal").modal('show');
+                        return;
+                    }
+                    const uid = $(this).data('id');
+                    $('#editUid').val(uid);
+                    $('#editInviteCode').val('');
+                    $('#editModal').modal('show');
+                })
+
+                $('#editSave').on('click', function () {
+                    if ($('#refillInviteCodeForm').validationEngine('validate')) {
+                        const requestParam = {
+                            uid: $('#editUid').val(),
+                            inviteCode: $('#editInviteCode').val(),
+                        }
+
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/flowTeam/refillUserInviteCode.action",
+                            data: JSON.stringify(requestParam),
+                            dataType: "json",
+                            contentType: 'application/json',
+                            success: function (json) {
+                                if (json.success) {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#editModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                }
+                            }
+                        });
+                    }
+                });
+
+            })
+        }
+    },
+};
+</script>
+
+<style scoped>
+#toolbar textarea {
+    overflow: hidden;
+    resize: none;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 4px;
+    height: 100px;
+    line-height: 20px;
+}
+
+#btnSearch {
+    margin-right: 12px;
+}
+</style>
\ No newline at end of file