jifuning
/
ximeichang


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
							<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="format-detection"content="telephone=no">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/projeck.css">
    <style media="screen">
        body,html{
            margin: 0;
            background: #fff;
        }
        .api_layout{
            height: 100%;
        }
        .aui-searchbar{
            width: 100%;
            height: 50px;
            background-color: #efeff4;
            position: relative;
        }
        .aui-searchbar:after{
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background: #e7e8eb;
        }
        .aui-searchbar .aui-searchbar-btn{
            color: #fff;
        }
        .aui-searchbar-input{
            background: #fff;
        }
        .aui-searchbar-input input{
            color: #000;
        }
        #search-input::placeholder{
            color: #ccc;
            font-size: 14px;
        }
        .search_ico{
            width: 16px;
            height: 16px;
            display: block;
            position: absolute;
            background: url("../../image/search.png") no-repeat;
            background-size: cover;
            top: 8px;
            left: 17px;
        }
        .backBtn{
            margin-left: 5px;
        }
        #search-input{
            font-size: 14px;
            height: 28px;
        }
        .aui-searchbar-input{
            margin-right: 80px;
        }
        .search_btn{
            position: absolute;
            bottom: 9px;
            right: 10px;
            width: 54px;
            height: 31px;
            line-height: 31px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            color: #000;
            background: #fff;
            font-size: 13px;
            text-align: center;
        }
        .footer_ul{
            text-align: center;
            padding: 15px 0;
            font-size: 16px;
            font-weight: bold;
        }
        .footer{
            width: 100%;
        }
        .footer:after{
            top: 0;
        }
        .footer_ul li:after{
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 1px;
            background: #ebeef3;
        }
        .footer_ul li:last-child:after{
            width:0;
        }
        .news_num{
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #e74e42;
            color: #fff;
            position: absolute;
            top: -8px;
            left: 7px;
            text-align: center;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            font-size: 11px;
            font-style: normal;
            z-index: 10;
        }
    </style>
</head>
<body>
<div class="api_layout flex-wrap flex-vertical">
  <header class="header-login">
     <img class="backBtn" src="../../image/btn_back.png" alt="" tapmode onclick="backIndex()">
     <p class="api_text">消息</p>
  </header>
  <div class="aui-searchbar" id="search">
      <div class="aui-searchbar-input aui-border-radius">
          <i class="search_ico"></i>
          <form>
              <input type="search" placeholder="" id="search-input">
          </form>
      </div>
      <span class="search_btn" onclick="searchNews(inputValue)">搜索</span>
  </div>
  <div class="main flex-con">

  </div>
  <footer class="after-border relative footer">
      <ul class="flex-wrap footer_ul">
          <li class="flex-con relative" onclick="clickNews('')">
              所有消息
          </li>
          <li class="flex-con relative" onclick="clickNews('unread')">
              <i class="news_num" style="display:none"></i>
              未读消息
          </li>
          <li class="flex-con relative" onclick="clickNews('read')">
              全部标已读
          </li>
      </ul>
  </footer>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script src="../../script/fastclick.min.js" charset="utf-8"></script> -->
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript">
var inputValue = '',headers;
    apiready = function () {
        $api.fixStatusBar($api.dom('header') );
        var info = $api.getStorage('data'),
            token = JSON.parse(info).data.access_token;
            headers = {
                "Authorization": "Bearer " + token
            };
        newsNum();
        fnInitUIInput();
        openFrameNewsList();
        keybackFun()
    };
    function openFrameNewsList(){
        api.openFrame({
            name: 'news_frm',
            url: 'news_frm.html',
            rect: {
                x: 0,
                y: $api.dom('header').offsetHeight+$api.dom('.aui-searchbar').offsetHeight,
                w: api.winWidth,
                h: $api.dom('.main').offsetHeight
            },
            pageParam: {
                name: 'test'
            },
            bounces: true,
            bgColor: '#f1f1f1',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
    }
    function backIndex() {
        api.closeWin();
        api.sendEvent({
            name: 'myNews',
            extra: {
                key1: 'value1',
                key2: 'value2'
            }
        });
    }
    // 监听物理返回键
    function keybackFun() {
      api.addEventListener({
      		name: 'keyback'
      	}, function(ret, err){
          api.sendEvent({
              name: 'myNews',
              extra: {
                  key1: 'value1',
                  key2: 'value2'
              }
          });
          api.closeWin();
      });
    }
    // input
    function fnInitUIInput() {
      var searchText = $api.byId('search-input');
      var rect = $api.offset(searchText);
      var UIInput = api.require('UIInput');
      UIInput.open({
          rect: {
              x: rect.l,
              y: rect.t+1,
              w: rect.w,
              h: rect.h+1
          },
          styles: {
              bgColor: '#fff',
              size: 14,
              color: '#000',
              placeholder: {
                  color: '#ccc'
              }
          },
          autoFocus: false,
          maxRows: 1,
          placeholder: '搜索',
          keyboardType: 'default',
          fixedOn: api.frameName
      }, function(ret, err) {
          if (ret) {
              var uiInputId = ret.id;
              if (ret.eventType == "change") {
                  UIInput.value({
                      id: uiInputId
                  }, function(ret, err) {
                      if (ret) {
                          if (ret.status) {
                            inputValue = ret.msg;
                            searchNews(ret.msg);
                          }
                      }
                  });
              }
          }
      });
    }
    // 所有消息
    // 未读消息
   // 全部标记已读
   function clickNews(type) {
     api.execScript({
         name: 'newsList',
         frameName: 'news_frm',
         script: 'getNewsListFun("'+type+'","'+true+'");'
     });
     newsNum();
   }
    // 搜索
   function searchNews(name) {
    //  $api.setStorage('flatSeacrh', true);
     api.execScript({
         name: 'newsList',
         frameName: 'news_frm',
         script: 'getSearchData("'+name+'");'
     });
  }
  // 消息总数
  function newsNum() {
    $http.fnReuestDataNologing(UrlRouter.getNewsNum,headers,'get','',function (ret,err) {
        if (ret.code === 0) {
          if (ret.data.unread_num === 0) {
             $api.css($api.dom('.news_num'), 'display:none');
             $api.html($api.dom('.news_num'), '');
          }else if(ret.data.unread_num > 99 || ret.data.unread_num == 99){
            $api.css($api.dom('.news_num'), 'display:block');
            $api.html($api.dom('.news_num'), 99);
          }else {
            $api.css($api.dom('.news_num'), 'display:block');
            $api.html($api.dom('.news_num'), ret.data.unread_num);
          }
        }
    })
  }
</script>