@zengqiao@消息列表样式

2019/bj-zqzt/biz/css/base.css

@@ -1714,58 +1714,12 @@ li.card-actions-wrapper {
  left: .45rem;
  top: .2rem;
}
.page-message-center .time-content-area {
  float:right;
  height: 100%;
  width: 2rem;
  padding-left: 0;
  padding-right: 0;
  justify-content: flex-start;
}
.message-title-filter {
  height: 0.3rem;
  border-bottom: 1px solid #E6E9ED;
  margin-top: 0.1rem;
  padding-left: 0.2rem;
}
.page-message-center .sort-by-time-slide.active {
  left: 0;
}
.page-message-center .sort-by-time-slide {
  -webkit-transition: left 300ms ease-out;
  transition: left 300ms ease-out;
  left: 100%;
  bottom: 0;
  top: 0;
}
.message-close {
  background: url("../img/input-delete.png") center center no-repeat;
  background-size:contain;
  float: right;
  width: 0.2rem;
  height: 0.2rem;
  margin-right: 0.05rem;
}
.message-close-title {
  display: inline-block;
  color: #2B2F33;
  font-weight: 500;
}
.page-message-center .message-filter {
  background: url("../img/message-filter.png") center center no-repeat;
  background-size:contain;
  top: .125rem;
  /*background: url(../img/message-filter.png) center center no-repeat;*/
}
.message-read .message-tips{
  display: none;
}
.message-head{
  margin: .2rem .15rem .1rem 0;
}
.message-task {
  display: none;
}
.message-title{
  line-height: .15rem;
  color: rgba(43, 47, 51, 1);
@@ -1782,12 +1736,6 @@ li.card-actions-wrapper {
.message-all-already .sort-type {
  font-size: 0.12rem;
}
.message-flag {
  margin-bottom: 0rem !important;
  padding-bottom: 0.1rem;
  background-color: #fff !important;
  border-bottom: 0.025rem solid;
}
.message-read .message-title{
  color: rgba(92, 96, 102, 1);
}
@@ -1807,6 +1755,38 @@ li.card-actions-wrapper {
  font-size: .12rem;
  font-family: SourceHanSansCN-Regular;
}
.ipu-tab-1.ipu-tab-message .ipu-tab-title-link > li {
  border-bottom: none;
}
.ipu-tab.ipu-tab-message .li-name {
  margin-top: .14rem;
  margin-bottom: .02rem;
}
.ipu-tab-1.ipu-tab-message .message-count {
  min-width: .2rem;
  height: .16rem;
  background:rgba(252,23,23,1);
  border-radius: .08rem;
  color: rgba(255, 255, 255, 1);
  font-size: .12rem;
  text-align: center;
  line-height: .16rem;
  position: absolute;
  top: .026rem;
  left: 50%;
  padding: 0 .06rem;
  word-break: keep-all;
  transform: translate(.18rem,0);
}
.ipu-tab-1.ipu-tab-message  .current-flag{
  width:.22rem;
  background-color: #fff;
  margin-bottom: 0;
  margin-top: .1rem;
}
.ipu-tab-1.ipu-tab-message .ipu-tab-title-link > li.ipu-current .current-flag{
  background-color: #2B2F33;
}
.card-action-delete {
  background-color: #FB442B;
}

2019/bj-zqzt/biz/js/message-center.js

@@ -0,0 +1,558 @@
require(['jquery', 'ipuUI'], function ($, ipuUI, Mobile) {
  $.sizeReady(function () {
    var tab = ipuUI.tab(".ipu-tab-message");
    // tab点击事件
    $(".ipu-tab-title-link").on("click", "li", function () {
      if ($(this).find(".li-name").text().trim() == "通知") {
        msgTypeId = "100";
      } else {
        // 待办
        msgTypeId = "200";
        if (firstLoadFlag.mission == 1) {
          getMessageList("mission", loadComponentId.mission);
          firstLoadFlag.mission = 0;
        }
      }
    });
    // artTemplate函数注册
    artTemplate.defaults.imports.jsonToStr = function (json) {
      return JSON.stringify(json);
    };
    // artTemplate消息类型样式icon
    artTemplate.defaults.imports.iconClass = function (status) {
      var icon = "";
      switch (status) {
        case '501':
          icon = 'message-expire';
          break;
        case '502':
          icon = 'message-lower';
          break;
        case '503':
          icon = 'message-sale';
          break;
        case '504':
          icon = 'message-change';
          break;
        case '505':
          icon = 'message-change';
          break;
        default:
          icon = 'message-approval';
      }
      return icon;
    };
    // artTemplate消息列表title
    artTemplate.defaults.imports.getTitle = function (MSG_LABEL_ID, SUB_TYPE_ID, content) {
      content = JSON.parse(content);
      var title = "";
      if (MSG_LABEL_ID == '502' || MSG_LABEL_ID == '505') {//售前  待办
        if (SUB_TYPE_ID == '1000023') {
          title = content.BUILD_NAME;
        } else if (SUB_TYPE_ID == '1000027' || SUB_TYPE_ID == '1000028'
            || SUB_TYPE_ID == '1000029' || SUB_TYPE_ID == '2000026') {//电子协议单审批通知
          title = content.applyCodeNum;//电子协议单号
        } else {
          title = content.CUSTOMER_NAME;
        }
      } else if (MSG_LABEL_ID == '504') {//任务
        title = content.PROPERTY_NAME;
      } else if (MSG_LABEL_ID == '501') {//工程进度
        if (SUB_TYPE_ID == '1000030') {
          title = content.business_code_num;//业务工单号
        } else if (SUB_TYPE_ID == '2000032' || SUB_TYPE_ID == '2000033') {
          title = content.busi_chance_id //勘查单号
        } else if (SUB_TYPE_ID == '2000031') { // 开通派单
          title = content.customer_order_id // 订单号
        } else {
          title = content.businessType;
        }
      } else if (MSG_LABEL_ID == '503') {//审批
        if (SUB_TYPE_ID == '1000019') {
          //立户审批
          title = content.CUST_NAME;
        } else if (SUB_TYPE_ID == '1000020') {
          //立户审批
          title = content.PROPERTY_NAME;
        } else if (SUB_TYPE_ID == '1000034' || SUB_TYPE_ID == '1000035') {//楼宇关系新增通知/楼宇关系删除通知
          //楼宇名称
          title = content.BUILD_NAME;
        }
      }
      return title;
    };
    // 第一次加载页面标识 1：第一次加载 0：非第一次加载
    var firstLoadFlag = {
      notice: 1, // 通知
      mission: 1 // 待办
    }
    // 各种状态订单的下拉刷新组件的选择器id
    var loadComponentId = {
      notice: "refresh-notice",
      mission: "refresh-mission"
    }
    var pageNum = 10;//默认一页加载数据条数
    var currentPages = {
      notice: 0,
      mission: 0
    }
    var addCounts = {
      notice: 0,
      mission: 0
    }
    var myRefresh_notice = null;
    var myRefresh_mission = null;
    // -------------列表-------------
    var msgTypeId = "100";//消息类型  100 通知  200 待办
    init();
    // 初始化函数
    function init() {
      // 监听物理返回键
      if (WadeMobile.isAndroid()) {
        WadeMobile.setKeyListener("back", function () {
          backHandler();
        }, true);
      } else if (WadeMobile.isIOS()) {
        WadeMobile.setKeyListener("slipToRight", function () {
          backHandler();
        }, true);
      }
      // 获取未读消息总数
      getMessageCount();
      // 初始化消息列表
      if (firstLoadFlag.notice == 1) {
        getMessageList("notice", loadComponentId.notice);
        firstLoadFlag.notice = 0;
      }
    }
    // 获取未读消息数量
    function getMessageCount() {
      let requestParams = Wade.DataMap();
      Common.callSvc("MessageBean.getUneradCountNotice", requestParams, function (result) {
        result = typeof (result) == "string" ? Wade.DataMap(result) : result;
        console.log(result);
        if (result.get("code") == 1) {
          let msg_count = result.get("msg_count");
          let msg_type_info_list = result.get("msg_type_info_list");
          $(".message-count").text(0).hide();
          if (msg_count != '0') {
            for (let i = 0; i < msg_type_info_list.length; i++) {
              if (msg_type_info_list.get(i).get("MSG_TYPE_ID") == 100) {
                $(".message-count:eq(0)").text(msg_type_info_list.get(i).get("MSG_COUNT")).show();
              } else if (msg_type_info_list.get(i).get("MSG_TYPE_ID") == 200){
                $("#message_need_count:eq(1)").text(msg_type_info_list.get(i).get("MSG_COUNT")).show();
              }
            }
          }
        }
      });
    }
    // 初始化消息列表
    function getMessageList(type, loadComponent) {
      // 初始化下拉刷新
      var myRefresh = ipuUI.refresh("#" + loadComponent, {
        bottomLoadFun: function () { // 加载更多
          console.log("上拉加载下一页");
          addData(type, loadComponent);
        },
        topLoadFun: function () { // 刷新
          console.log("下拉刷新");
          currentPages[type] = 0;
          addData(type, loadComponent);
          getMessageCount();
        }
      });
      if ("notice" == type) {
        myRefresh_notice = myRefresh;
      } else if ("mission" == type) {
        myRefresh_mission = myRefresh;
      }
    }
    // 加载第currentPage页数据
    function addData(type, loadComponentId) {
      var myRefresh;
      var listObj = $("#" + loadComponentId + " ul.message-list");
      currentPages[type]++;
      var currentPage = currentPages[type];
      $('#' + loadComponentId + ' .no-result-msg').hide();
      var localCount = ++addCounts[type];  // 执行查询前，保留当前计数器，当查询返回时进行检查是否最新查询，不是则抛弃查询结果
      if (localCount == addCounts[type]) { // 检查是否最新查询返回数据，不是则抛弃查询结果
        var requestParams = Wade.DataMap();
        requestParams.put("pageNum", currentPage);
        requestParams.put("pageSize", pageNum);
        requestParams.put("msgTypeId", msgTypeId);
        Common.callSvc("MessageBean.getMsgInfoNotice", requestParams, function (result) {
          result = typeof (result) == "string" ? Wade.DataMap(result) : result;
          console.log(result);
          if ("notice" == type) {
            myRefresh = myRefresh_notice;
          } else if ("mission" == type) {
            myRefresh = myRefresh_mission;
          }
          if (result.get("code") == 1) {
            var resultJson = JSON.parse(result.get("MSG_INFO_LIST").toString());
            if (resultJson && resultJson.length) {
              var jsonList = {"list": resultJson};
              myRefresh.enableBottom(resultJson.length == pageNum);
              if (currentPages[type] == 1) {
                if (resultJson.length == 0) {
                  // 顶部刷新，刷新也可能已经没有数据了，待处理
                  myRefresh.enableTop(false);
                  myRefresh.enableBottom(false);
                  myRefresh.endTopLoading(); //最后调用
                  myRefresh.endBottomLoading();
                  listObj.empty();
                  $("#" + loadComponentId + " .no-result-msg").show();
                } else {
                  // 有数据
                  listObj.empty(); // 清空已有内容
                  listObj.append(artTemplate("message-item", jsonList));
                  myRefresh.endTopLoading(); //最后调用
                  myRefresh.endBottomLoading();
                }
              } else {  // 底部加载更多,或查询
                if (resultJson.length < pageNum) {
                  myRefresh.enableBottom(false);
                }
                var jsonList = {"list": resultJson};
                listObj.append(artTemplate("message-item", jsonList));
                myRefresh.endBottomLoading();  //最后调用
              }
              var leftSwipe = new LeftSwipe('.ipu-carousel');  // 滑块组件依赖页面写的部分样式
            } else {
              if (currentPages[type] == 1) {
                //没有数据且刷新操作
                myRefresh.enableTop(false);
                myRefresh.enableBottom(false);
                listObj.empty();
                $("#" + loadComponentId + " .no-result-msg").show();
              } else {
                //新加载数据不够一页
                myRefresh.enableBottom(false);
                myRefresh.endBottomLoading();
              }
            }
          } else {
            // ipuUI.('请求数据失败！');
            myRefresh.enableTop(false);
            myRefresh.enableBottom(false);
            listObj.empty();
            $("#" + loadComponentId + " .no-result-msg").show();
          }
        });
      }
    };
    // 通知跳转详情页面
    $(".ipu-tab-body-wrapper").on("click", ".notice-item", function () {
      //已读
      var _this = $(this);
      var $node = $(this).parents(".message-item-each").find(".record");
      if (_this.find(".message-tips").length > 0) {
        _this.find(".message-tips").remove();
        if (msgTypeId == 100) {
          $("#message_count").html($("#message_count").html() - 1);
        } else {
          $("#message_need_count").html($("#message_need_count").html() - 1);
        }
        //点击详情关闭左滑
        var leftSwipe = $node.parents(".ipu-carousel").data("leftSwipe"); // 通过jquery获取组件实例
        leftSwipe.close(function (obj) {
          $node.hide().width();
          leftSwipe.refresh();
        });
        var msgId = _this.parents(".message-item-each").attr("name");
        var requestParams = Wade.DataMap();
        requestParams.put("msgId", msgId);
        requestParams.put("state", "1");
        Common.callSvc("MessageBean.updateNotice", requestParams, function (result) {
          result = typeof (result) == "string" ? Wade.DataMap(result) : result;
          console.log(result);
          if (result.get("code") == 1) {
            _this.find(".message-item").removeClass("message-unread").addClass("message-read");
            var json = _this.data("json");
            var params = Wade.DataMap(json);
            var MSG_CONTENT = Wade.DataMap(params.get("MSG_CONTENT"));
            params.put("jsonStr", JSON.stringify(json));
            params.addAll(MSG_CONTENT.map);
            console.log(params);
            if (json.SUB_TYPE_ID == "2000026") {
              Common.limitFunLong(Mobile.openWindow("AgreementSheetApproval", params.toString(), function (data) {}));
            } else if (json.SUB_TYPE_ID == "2000032") {
              params.put("lastPage", "MessageCenter");
              Common.limitFunLong(Mobile.openTemplate("ResourceExplorationSheetConfirm", params.toString()));
            } else if (json.SUB_TYPE_ID == "2000033") {
              Common.limitFunLong(getResourceDetails(params));
            } else if (json.SUB_TYPE_ID == "2000031") {// 开通派单
              Common.limitFunLong(Mobile.openTemplate("OpenDispatchSheet", params.toString()));
            } else {
              Common.limitFunLong(Mobile.openTemplate("MessageDetails", params.toString()));
            }
          } else {
            // ipuUI.('请求数据失败！');
            ipuUI.toast("更新消息状态失败");
          }
        });
      } else {
        var json = _this.data("json");
        var params = Wade.DataMap(json);
        var MSG_CONTENT = Wade.DataMap(params.get("MSG_CONTENT"));
        params.put("jsonStr", JSON.stringify(json));
        params.addAll(MSG_CONTENT.map);
        console.log(params);
        if (json.SUB_TYPE_ID == "2000026") {
          Common.limitFunLong(Mobile.openWindow("AgreementSheetApproval", params.toString(), function (data) {}));
        } else if (json.SUB_TYPE_ID == "2000032") {
          params.put("lastPage", "MessageCenter");
          Common.limitFunLong(Mobile.openTemplate("ResourceExplorationSheetConfirm", params.toString()));
        } else if (json.SUB_TYPE_ID == "2000033") {
          Common.limitFunLong(getResourceDetails(params));
        } else if (json.SUB_TYPE_ID == "2000031") {// 开通派单
          params.put("lastPage", "MessageCenter");
          Common.limitFunLong(Mobile.openTemplate("OpenDispatchSheet", params.toString()));
        } else {
          Common.limitFunLong(Mobile.openTemplate("MessageDetails", params.toString()));
        }
      }
    });
    // 通知操作选项点击事件
    $(".ipu-tab-body-wrapper").on("click", ".card-action-item", function () {
      var option = $(this).text().trim();
      var _this = $(this);
      var msgId = _this.parents(".message-item-each").attr("name");
      if (option == "删除") {
        if (_this.parents(".message-item-each").find(".message-tips").length > 0) {
          var requestParams = Wade.DataMap();
          requestParams.put("msgId", msgId);
          requestParams.put("state", "2");
          Common.callSvc("MessageBean.updateNotice", requestParams, function (result) {
            result = typeof (result) == "string" ? Wade.DataMap(result) : result;
            console.log(result);
            if (result.get("code") == 1) {
              _this.parents(".message-item-each").remove();
              if (msgTypeId == 100) {
                $("#message_count").html($("#message_count").html() - 1);
              } else {
                $("#message_need_count").html($("#message_need_count").html() - 1);
              }
            } else {
              // ipuUI.('请求数据失败！');
              ipuUI.toast("删除消息失败");
            }
          });
        } else {
          var requestParams = Wade.DataMap();
          requestParams.put("msgId", msgId);
          requestParams.put("state", "2");
          Common.callSvc("MessageBean.updateNotice", requestParams, function (result) {
            result = typeof (result) == "string" ? Wade.DataMap(result) : result;
            console.log(result);
            if (result.get("code") == 1) {
              _this.parents(".message-item-each").remove();
            } else {
              // ipuUI.('请求数据失败！');
              ipuUI.toast("删除消息失败");
            }
          });
        }
      } else if (option == "标为已读") {
        var requestParams = Wade.DataMap();
        requestParams.put("msgId", msgId);
        requestParams.put("state", "1");
        Common.callSvc("MessageBean.updateNotice", requestParams, function (result) {
          result = typeof (result) == "string" ? Wade.DataMap(result) : result;
          console.log(result);
          if (result.get("code") == 1) {
            _this.parents(".message-item-each").find(".message-item").removeClass("message-unread").addClass("message-read");
            if (msgTypeId == 100) {
              $("#message_count").html($("#message_count").html() - 1);
            } else {
              $("#message_need_count").html($("#message_need_count").html() - 1);
            }
            var leftSwipe = _this.parents(".ipu-carousel").data("leftSwipe"); // 通过jquery获取组件实例
            leftSwipe.close(function (obj) {
              _this.hide().width();
              leftSwipe.refresh();
            });
          } else {
            // ipuUI.('请求数据失败！');
            ipuUI.toast("更新消息状态失败");
          }
        });
      }
    });
    // 返回
    $("#back-ext").click(function () {
      backHandler();
    });
    function backHandler() {
      var params = Wade.DataMap();
      params.put("lastPageAction", "MessageCenter");
      Mobile.backWithCallback(params.toString(), "Index");
    }
    //查询勘查单详情
    function getResourceDetails(params) {
      var content = Wade.DataMap(params.get("MSG_CONTENT"));
      //消息id
      var MSG_ID = params.get("MSG_ID");
      //勘查单号
      var busi_chance_id = content.get("busi_chance_id");
      //流程编码
      var workflow_id = content.get("workflow_id");
      //任务编码
      var task_id = content.get("task_id");
      var cust_name = content.get("cust_name");
      var cust_service_id = content.get("cust_service_id");
      if (busi_chance_id) {
        var requestParams = Wade.DataMap();
        requestParams.put("BUSI_CHANCE_ID", busi_chance_id);
        // 加载页面等待样式
        ipuUI.showIndicator();
        Common.callSvc("ResourceExplorationBean.getResourceExplorationDetails", requestParams, function (result) {
          // 关闭加载动画特殊函数
          ipuUI.hideIndicator();
          result = typeof (result) == "string" ? Wade.DataMap(result) : result;
          console.log(result);
          if (result.get("code") == 1 && result.get("resDetails")) {
            var resDetails = result.get("resDetails");
            //如果该资源勘查单状态为'8-申请传输资源'，可以继续处理，不是则提示用户是否删除“该工单已经处理，是否删除
            if (resDetails.get("BUSI_CHANCE_STATE") == "8") {
              var infoParams = resDetails;
              infoParams.put("BUSI_CHANCE_ID", busi_chance_id)
              infoParams.put("CUST_NAME", content.get("cust_name"))
              infoParams.put("CUST_SERVICE_ID", content.get("cust_service_id"))
              infoParams.add("Bandwidth", resDetails.get("bandwidth"))
              //消息待办信息
              infoParams.put("MSG_ID", MSG_ID)
              infoParams.put("WORKFLOW_ID", workflow_id)
              infoParams.put("TASK_ID", task_id)
              var params = Wade.DataMap();
              params.put("infoParams", infoParams.toString());
              params.put("lastPage", "MessageCenter");
              Mobile.openTemplate("TransferResourceCus", params.toString());
            } else {
              $(".normal-tips-popup-slide").addClass("active");
              $(".normal-tips-btn-input").val(MSG_ID);
            }
          } else {
            ipuUI.toast("暂无数据");
            $(".customer-info-content").addClass("ipu-fn-hide");
            $(".select-buttons").addClass("ipu-fn-hide");
          }
        });
      }
    }
    $(".normal-tips-btn-cancel").click(function () {
      $(".normal-tips-popup-slide").removeClass("active");
    });
    // 确认
    $(".normal-tips-btn-confirm").click(function () {
      $(".normal-tips-popup-slide").removeClass("active");
      var msgId = $(".normal-tips-btn-input").val();
      //删除该消息
      var requestParams = Wade.DataMap();
      requestParams.put("msgId", msgId);
      requestParams.put("state", "2");
      Common.callSvc("MessageBean.updateNotice", requestParams, function (result) {
        result = typeof (result) == "string" ? Wade.DataMap(result) : result;
        console.log(result);
        if (result.get("code") == 1) {
          refresh();
        } else {
          // ipuUI.('请求数据失败！');
          ipuUI.toast("删除消息失败");
        }
      });
    });
    // 刷新页面数据
    function refresh() {
      let text = $(".ipu-tab-title-link li.ipu-current").find(".li-name").text();
      let type;
      if (text == "通知") {
        type = "notice";
      } else if (text == "待办") {
        type = "mission";
      }
      // 刷新列表
      refreshList(type);
      // 刷新未读数
      getMessageCount();
    }
    // 刷新列表；type：notice通知；mission待办
    function refreshList(type) {
      let myRefresh;
      if (type == "notice") {
        myRefresh = myRefresh_notice;
      } else {
        myRefresh = myRefresh_mission;
      }
      myRefresh.enableBottom(false);
      if (myRefresh.bottomLoading) {
        myRefresh.endBottomLoading();
      }
      if (myRefresh.topLoading) {
        myRefresh.endTopLoading();
      }
      currentPages[type] = 0;
      if (type == "notice") {
        myRefresh = myRefresh_notice;
      } else {
        myRefresh = myRefresh_mission;
      }
      $("#" + loadComponentId[type] + " ul.message-list").empty();
      myRefresh.enableBottom(true);
      myRefresh.refresh();
    }
    // 页面的回调监听
    WadeMobile.setBackCallListener(function (e) {
      console.log("回调信息:" + e);
      let data = e.data;
      console.log("回调data:" + data);
      data = typeof (data) == "string" ? Wade.DataMap(data) : data;
      let lastPageAction = data.get("lastPageAction");
      refresh();
    });
  });
});

2019/bj-zqzt/message-center.html

@@ -0,0 +1,214 @@
<!DOCTYPE html>
<html lang="en">
<head>
  <title>消息中心</title>
  <meta charset="utf-8">
  <!-- 宽度自动适配 -->
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>
  <!-- 不识别页面上的数字为可拨打号码 -->
  <meta content="telephone=no" name="format-detection"/>
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
  <script src="ipu/lib/requirejs/require.min.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/message-center.js"></script>
</head>
<body class="page-message-center">
<div class="ipu-pages">
  <div class="ipu-page">
    <div class="ipu-flex-row ipu-flex-vertical">
      <div class="back-single ipu-flex ipu-flex-justify-center ipu-flex-align-center" href="javascript:;" id="back-ext">
        <div class="left-back"></div>
      </div>
      <div class="ipu-flex-col ipu-flex-col-auto">
        <div class="ipu-tab ipu-tab-message ipu-tab-fixed ipu-tab-1">
          <!-- 如果class中添加 ipu-tab-fixed，则可固定头部，此时需要父元素的高度是确定的 -->
          <ul class="ipu-tab-title ipu-tab-title-link" style="padding-left:.45rem;padding-right:.45rem;">
            <!-- 页头有 ipu-tab-title-link 和 ipu-tab-title-button两种样式 -->
            <li class="ipu-current">
              <div class="ipu-flex ipu-flex-vertical ipu-flex-align-center">
                <div class="li-name">通知</div>
                <div class="message-count">66</div>
                <div class="current-flag"></div>
              </div>
            </li>
            <li class="">
              <div class="ipu-flex ipu-flex-vertical ipu-flex-align-center">
                <div class="li-name">待办</div>
                <div class="message-count">99+</div>
                <div class="current-flag"></div>
              </div>
            </li>
            <li class="">
              <div class="ipu-flex ipu-flex-vertical ipu-flex-align-center">
                <div class="li-name">进度</div>
                <div class="message-count">9</div>
                <div class="current-flag"></div>
              </div>
            </li>
          </ul>
          <div class="tool-bar-search message-filter"></div>
          <div class="ipu-tab-body common-border-top">
            <ul class="ipu-tab-body-wrapper">
              <!--通知列表-->
              <li class="main-body-bg-grey">
                <div class="business-list-head ipu-flex ipu-flex-justify-end ipu-flex-align-center customer-list-head ipu-fn-hide">
                  <div class="business-total ipu-flex-col-auto">
                    全部<span id="countId"></span>个通知
                  </div>
                  <div class="message-all-already sort-by-others ipu-flex ipu-flex-justify-center ipu-flex-align-center">
                    <div class="sort-type hidden">全部已读</div>
                  </div>
                </div>
                <div class="page-content">
                  <div class="ipu-list ipu-list-media ipu-flex-content" id="refresh-notice" style="margin-top: .0rem">
                    <!-- 组件html结构，最外层div应有一个固定的高度，会在此元素上初始化iScroll -->
                    <div class="ipu-refresh-wrapper">
                      <!-- 此处组件初始化后，会添加上拉html -->
                      <div class="refresh-content">
                        <div>
                          <ul class="message-list message-list-details">
                            <!--此处插入id="message-item"的模板-->
                          </ul>
                        </div>
                        <div class="no-result-msg ipu-fn-p ipu-txt-center ipu-fn-hide">
                          暂无记录
                        </div>
                      </div>
                      <!-- 此处组件初始化后，会添加下拉html -->
                    </div>
                  </div>
                </div>
              </li>
              <!--待办列表-->
              <li class="main-body-bg-grey">
                <div class="page-content">
                  <div class="ipu-list ipu-list-media ipu-flex-content" id="refresh-mission">
                    <!-- 组件html结构，最外层div应有一个固定的高度，会在此元素上初始化iScroll -->
                    <div class="ipu-refresh-wrapper">
                      <!-- 此处组件初始化后，会添加上拉html -->
                      <div class="refresh-content">
                        <div>
                          <ul class="message-list">
                            <!--此处插入id="message-item"的模板-->
                          </ul>
                        </div>
                        <div class="no-result-msg ipu-fn-p ipu-txt-center ipu-fn-hide">
                          暂无记录
                        </div>
                      </div>
                      <!-- 此处组件初始化后，会添加下拉html -->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--普通提示窗-->
    <div class="normal-tips-popup-slide">
      <div class="normal-tips-popup-wrap">
        <div class="normal-tips-content">该工单已经处理，是否删除？</div>
        <div class="normal-tips-btn ipu-flex ipu-flex-align-center">
          <input value="" type="hidden" class="normal-tips-btn-input">
          <div class="normal-tips-btn-cancel">取消</div>
          <div class="normal-tips-btn-confirm">删除</div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--消息列表模板-->
<script id="message-item" type="text/template">
  {{if list.length>0}}
  {{each list item index}}
  <li class="message-item-each" name="{{item.MSG_ID}}">
    <div class="ipu-carousel">
      <ul class="ipu-carousel-wrapper">
        <li class="notice-item" data-json="{{item|jsonToStr}}">
          <div>
            <div class="ipu-flex message-item {{if item.MSG_STATE==0}}message-unread{{else}}message-read{{/if}}">
              <div class="ipu-flex-col">
                <div class="message-icon {{item.MSG_LABEL_ID|iconClass}}"></div>
                {{if item.MSG_STATE=='0'}}
                <div class="message-tips"></div>
                {{/if}}
              </div>
              <div class="ipu-flex-col message-line">
                <div class="ipu-flex ipu-flex-justify-space ipu-flex-align-end message-head">
                  <div class="message-title">{{item.SUB_TYPE_NAME}}</div>
                  <div class="message-time">{{item.MSG_CREATE_DATE}}</div>
                </div>
                <div class="message-info">{{item.MSG_LABEL_ID,item.SUB_TYPE_ID,item.MSG_CONTENT|getTitle}}</div>
              </div>
            </div>
          </div>
        </li>
        <li class="card-actions-wrapper">
          <div class="card-actions ipu-flex">
            <div class="card-action-item card-action-delete">删除</div>
            {{if item.MSG_STATE=='0'}}
            <div class="card-action-item record ipu-flex ipu-flex-vertical ipu-flex-justify-center ipu-flex-align-center">
              <span>标为</span><span>已读</span>
            </div>
            {{/if}}
          </div>
        </li>
      </ul>
    </div>
  </li>
  {{/each}}
  {{/if}}
</script>
<!--待办列表模板-->
<!--<script id="message_need-item" type="text/template">
  {{if list.length>0}}
  {{each list item index}}
  <li class="upcoming-item-each">
    <div class="ipu-carousel">
      <ul class="ipu-carousel-wrapper">
        <li class="upcoming-item" data-json="{{item|jsonToStr}}">
          <div>
            <div class="ipu-flex message-item {{if item.MSG_STATE==0}}message-unread{{else}}message-read{{/if}}">
              <div class="ipu-flex-col">
                <div class="message-icon {{item.MSG_LABEL_ID|iconClass}}"></div>
                {{if item.MSG_STATE=='0'}}
                <div class="message-tips"></div>
                {{/if}}
              </div>
              <div class="ipu-flex-col message-line">
                <div class="ipu-flex ipu-flex-justify-space ipu-flex-align-end message-head">
                  <div class="message-title">{{item.SUB_TYPE_NAME}}</div>
                  <div class="message-time">{{item.MSG_CREATE_DATE}}</div>
                </div>
                <div class="message-info">{{item.MSG_LABEL_ID,item.SUB_TYPE_ID,item.MSG_CONTENT|getTitle}}</div>
              </div>
            </div>
          </div>
        </li>
        <li class="card-actions-wrapper">
          <div class="card-actions ipu-flex">
            <div class="card-action-item card-action-delete">删除</div>
            {{if item.MSG_STATE=='0'}}
            <div class="card-action-item record ipu-flex ipu-flex-vertical ipu-flex-justify-center ipu-flex-align-center">
              <span>标为</span><span>已读</span>
            </div>
            {{/if}}
          </div>
        </li>
      </ul>
    </div>
  </li>
  {{/each}}
  {{/if}}
</script>-->
</body>
</html>