peko-admin-web/src/views/firstpage/towPageBannerView.vue

<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">
            <div class="col-sm-12">
              <label for="skipType" class="col-sm-1 control-label"
                >跳转类型:
              </label>
              <div class="col-sm-2">
                <select
                  name="skipType"
                  id="skipType"
                  class="input-m form-control"
                >
                  <option value="0">--全部--</option>
                  <option value="2">Room ID</option>
                  <option value="1">指定地址</option>
                  <option value="3">跳转H5页面</option>
                  <option value="100">无跳转</option>
                </select>
              </div>
              <label for="status" class="col-sm-1 control-label">状态:</label>
              <div class="col-sm-2">
                <select name="status" id="status" class="input-m form-control">
                  <option value="0">--全部--</option>
                  <option value="1">激活启用中</option>
                  <option value="2">未激活</option>
                </select>
              </div>
              <label for="timeStatus" class="col-sm-1 control-label"
                >过期状态:</label
              >
              <div class="col-sm-2">
                <select
                  name="timeStatus"
                  id="timeStatus"
                  class="input-m form-control"
                >
                  <option value="0">--全部--</option>
                  <option value="1">未开始</option>
                  <option value="2">已开始</option>
                  <option value="3">已过期</option>
                </select>
              </div>
              <label for="app" class="col-sm-1 control-label">app:</label>
              <div class="col-sm-2">
                <select name="app" id="app" class="input-m form-control">
                  <option value="">--全部--</option>
                </select>
              </div>
            </div>
            <div class="col-sm-12">
              <label for="bannerType" class="col-sm-1 control-label"
                >banner位置:</label
              >
              <div class="col-sm-2">
                <select
                  name="bannerType"
                  id="searchBannerType"
                  class="input-m form-control"
                >
                  <option value="">--全部--</option>
                  <option value="1">首页</option>
                </select>
              </div>
              <!-- <label for="beginTime"
                     class="col-sm-1 control-label">开始日期:&nbsp;&nbsp;</label>
              <div class="col-sm-2">
                <input type="text"
                       name="timeBegin"
                       id="beginTime"
                       class="input-sm form-control"
                       value="">
              </div>
              <label for="endTime"
                     class="col-sm-1 control-label">结束日期:&nbsp;&nbsp;</label>
              <div class="col-sm-2">
                <input type="text"
                       name="timeEnd"
                       id="endTime"
                       class="input-sm form-control"
                       value="">
              </div> -->
              <label for="partitionId" class="col-sm-1 control-label"
                >地区:</label
              >
              <div class="col-sm-2">
                <select
                  name="partitionId"
                  id="partitionId"
                  class="form-control"
                ></select>
              </div>
            </div>
            <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 class="text">banner尺寸"690*236</div>
          </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 id="bannerPartitionDiv">
              <div class="form-group">
                <label name="partition" class="col-sm-3 control-label"
                  >选择地区*:</label
                >
                <div class="form-check" id="partitionCheck">
                  <!--                                分区展示-->
                </div>
              </div>
            </div>
            <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="2">Room ID</option>
                <option value="1">指定地址</option>
                <option value="3">跳转H5页面</option>
                <option value="100">无跳转</option>
              </select>
              <div class="col-sm-6">
                <input
                  type="text"
                  class="form-control"
                  name="skipUri"
                  id="skipUrlContent"
                  onkeydown="return event.key !== ' '"
                  oninput="this.value = this.value.replace(/\s+/g, '')"
                />
              </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="text"
                  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="text"
                  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>
                </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 id="bannerAddPartitionDiv">
              <div class="form-group">
                <label name="partition" class="col-sm-3 control-label"
                  >选择地区*:</label
                >
                <div class="form-check" id="partitionAddCheck">
                  <!--                                分区展示-->
                </div>
              </div>
            </div>
            <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"
                  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="2">Room ID</option>
                <option value="1">指定地址</option>
                <option value="3">跳转H5页面</option>
                <option value="100">无跳转</option>
              </select>
              <div class="col-sm-6">
                <input
                  type="text"
                  class="form-control"
                  name="skipUri"
                  id="addSkipUrlContent"
                  onkeydown="return event.key !== ' '"
                  oninput="this.value = this.value.replace(/\s+/g, '')"
                />
              </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="text"
                  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="text"
                  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>
                </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";
import { getPartitionInfoList } from "@/api/partition/partitionInfo";
import { buildSelectOption } from "@/utils/system-helper";

var app = {};
var validApp = {};

export default {
  name: "towPageBannerView",
  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.initPartition();
      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: "partitionDesc",
                title: "地区",
                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页面";
                    case 100:
                      return "无跳转";
                  }
                },
              },
              {
                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,
                pageNo: params.pageNumber,
                // beginTime: beginTime,
                // endTime: endTime,
                bannerStatus: parseInt($("#status").val()),
                timeStatus: parseInt($("#timeStatus").val()),
                skipType: parseInt($("#skipType").val()),
                bannerType: $("#searchBannerType").val(),
                partitionId: $("#partitionId").val(),
                // appId: ($('#app').val()) ? $('#app').val() : null
              };
              //                console.log(param);
              return param;
            },
            uniqueId: "code",
            toolbar: "#toolbar",
            url: "/admin/secondBanner/list",
            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: "/partition/listPartitionInfo",
            dataType: "json",
            success: function (json) {
              if (json.code == 200) {
                var length = json.data.length;
                var partitionCheck = $("#partitionCheck");
                partitionCheck.empty();
                // 分区
                for (var i = 0; i < length; i++) {
                  var checkbox = $("<input>", {
                    type: "checkbox",
                    id: "checkbox" + json.data[i].id,
                    name: "partitionIds",
                    value: json.data[i].id,
                  });
                  var label = $("<label>", {
                    class: "partition-checkbox-label",
                    text: json.data[i].desc,
                  });

                  partitionCheck.append(checkbox, label);
                }
                $.ajax({
                  type: "get",
                  url: "/admin/secondBanner/get",
                  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);
                      // 分区信息
                      var partitionIds = json.data.partitionIds;
                      var length = partitionIds.length;
                      for (var i = 0; i < length; i++) {
                        $("#checkbox" + partitionIds[i]).prop("checked", true);
                      }
                      $("#bannerModal").modal("show");
                      // picker1.datetimepicker('setStartDate', startDate);
                    } else {
                      $("#tipMsg").text("获取信息出错");
                      $("#tipModal").modal("show");
                    }
                  },
                });
              } 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 (
            parseInt($("#skipUrlSort").val()) != 100 &&
            $("#skipUrlContent").val() == ""
          ) {
            alert("请填写跳转链接跳转链接");
            return;
          }
          if (
            parseInt($("#skipUrlSort").val()) == 100 &&
            $("#skipUrlContent").val() != ""
          ) {
            alert("无跳转无需填写跳转链接");
            return;
          }
          if ($("#bannerForm").validationEngine("validate")) {
            $.ajax({
              type: "post",
              url:
                "/admin/secondBanner/save?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("");

          // 分区处理
          $.ajax({
            type: "get",
            url: "/partition/listPartitionInfo",
            dataType: "json",
            success: function (json) {
              if (json.code == 200) {
                var length = json.data.length;
                var partitionCheck = $("#partitionAddCheck");
                partitionCheck.empty();
                // 创建3个checkbox元素并添加到myDiv元素上
                for (var i = 0; i < length; i++) {
                  var checkbox = $("<input>", {
                    type: "checkbox",
                    id: "checkbox" + json.data[i].id,
                    name: "partitionIds",
                    value: json.data[i].id,
                  });
                  var label = $("<label>", {
                    class: "partition-checkbox-label",
                    text: json.data[i].desc,
                  });

                  partitionCheck.append(checkbox, label);
                }
              }
            },
          });

          // 处理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 (
            parseInt($("#addSkipUrlSort").val()) != 100 &&
            $("#addSkipUrlContent").val() == ""
          ) {
            alert("请填写跳转链接跳转链接");
            return;
          }
          if (
            parseInt($("#addSkipUrlSort").val()) == 100 &&
            $("#addSkipUrlContent").val() != ""
          ) {
            alert("无跳转无需填写跳转链接");
            return;
          }
          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/secondBanner/save?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",
            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",
            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/secondBanner/delete",
              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/secondBanner/delete",
              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");
                }
              },
            });
          }
        });
      });
    },
    initPartition() {
      getPartitionInfoList().then((res) => {
        let data = res.data;
        buildSelectOption(
          "#partitionId",
          null,
          [
            {
              value: "",
              text: "全部",
            },
          ].concat(
            data.map((v) => {
              return {
                value: v.id,
                text: v.desc,
              };
            })
          )
        );
      });
    },
  },
};
</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;
}

.partition-checkbox-label {
  margin-right: 10px;
  margin-left: 5px;
}
.text {
  font-size: 20px;
  margin-top: 20px;
  color: rgb(173, 53, 53);
}
</style>