jifuning
/
yangchangwan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
							<!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">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" href="../../css/apiToast.css">
    <link rel="stylesheet" href="../../css/projeck.css">
    <style>
        html,body{
            background: #fff;
        }
        .api_layout{
            width: 100%;
            position: relative;
        }
        .record_list li{
            padding: 12px 15px;
            position: relative;
        }
        .record_list li:after{
            content: '';
            width: 100%;
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 1px;
            background: #e6e7e8;
        }
        .record_header{
            width: 52px;
            height: 52px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            margin-right: 7px;
            border: 1px solid #ECF0F1;
        }
        .personal_info{
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
            display: -webkit-flex;
            -webkit-justify-content: flex-start;
            -webkit-flex-wrap: nowrap;
            align-items: center;
            position: relative;
        }
        .personal_info span{
            display: block;
            font-size: 15px;
            color: #000;
        }
        .personal_info span:first-child{
          font-weight: bold;
        }
        .personal_info span:last-child{
            color: #69707f;
        }
        .more_recode{
            width: 32px;
            height: 23px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: block;
            background: url("../../image/moreRecord.png") no-repeat;
            background-size: cover;
            position: absolute;
            top: 0;
            right: 8px;
        }
        .text_content{
            margin-top: 15px;
            color: #000;
            font-size: 15px;
        }
        .rows{
            display: flex;
            /*justify-content: space-around;*/
            flex-wrap: wrap;
            align-items: flex-start;
            margin-top: 10px;
        }
        .column{
            /*width: 100%;*/
            margin-bottom: 10px;
        }
        .column img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            margin: auto;
            border: 1px solid #f2f2f2;
        }
        .date_record{
            color: #999;
            font-size: 15px;
        }
        .Unread{
            width: 40px;
            height: 32px;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            background: url("../../image/unread.png") no-repeat;
            background-size: cover;
        }
        .nread{
            width: 40px;
            height: 32px;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            background: url("../../image/nread.png") no-repeat;
            background-size: cover;
        }
        .footers{
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            white-space: nowrap;
            align-items: center;
            -webkit-align-items: center;
            padding: 10px 0;
        }
        .thumbs{
            width: 15px;
            height: 15px;
            background: url("../../icon/momentHeart.png") no-repeat;
            -webkit-background-size: contain;
            background-size: contain;
            background-position: center;
        }
        .comment{
            width: 15px;
            height: 15px;
            background: url("../../icon/momentComment.png") no-repeat;
            -webkit-background-size: contain;
            background-size: contain;
            background-position: center;
        }
        .thumbsAndcomment{
            display: flex;
            display: -webkit-flex;
            justify-content:flex-start;
            -webkit-justify-content: flex-start;
            white-space: nowrap;
            align-items: center;
            -webkit-align-items: center;
        }
        .thumbsAndcomment span{
            position: relative;
            top: 0;
            margin-left: 5px;
            color: #3a4553;
            font-size: 12px;
        }
        /*.thumbs_num img{*/
           /*width: 30px;*/
           /*height: 30px;*/
            /*-webkit-border-radius: 50%;*/
            /*-moz-border-radius: 50%;*/
            /*border-radius: 50%;*/
            /*border: 1px solid #ccc;*/
        /*}*/
        .thumbs_num{
            background: #f3f3f3;
            padding: 5px 0;
            display: none;
            padding-right: 5px;
            position: relative;
        }
        .thumbs_num:after{
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 1px;
            width: 100%;
            background: rgba(226,226,228,.4);
        }
        .thumbs_num p{
            color: #6d6f96;
            font-size: 13px;
        }
        .thumbs-s{
            margin-right: 50px;
        }
        .taox{
            width: 15px;
            height: 15px;
            background: url("../../icon/taox.png") no-repeat;
            -webkit-background-size: contain;
            background-size: contain;
            background-position: center;
            margin: 0 5px;
        }
        .comment_content p{
            background: #f3f3f3;
        }
        .comment_c{
            font-size: 13px;
            padding: 5px;
        }
        .title{
            color: #6d6f96;
        }
    </style>
</head>
<body>
<div class="api_layout">
    <div class="recode_warp">
        <ul class="record_list" id="record_lists">
         <!-- <li>
             <div>
                 <div class="personal_info">
                     <img src="" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="record_header">
                     <p>
                         <span>张三</span>
                         <span>信息监测中心</span>
                     </p>
                 </div>
                 <p class="text_content">今天天气很好，我很开心。。。</p>
                 <i class=" {{=it[i].readFlag == true?'nread' : 'Unread'}}"></i>
             </div>
              <div class="footers">
                  <span class="date_record">2019-10-29</span>
                  <div class="thumbsAndcomment">
                      <div class="flex-start thumbs-s" onclick="dianzan(this)" flat="false">
                          <i class="thumbs"></i>
                          <span class="zan">赞</span>
                      </div>
                      <div class="flex-start" onclick="comment(this)">
                          <i class="comment"></i>
                          <span>评论</span>
                      </div>
                  </div>
              </div>
              <div class="thumbs_num">
                  <div class="flex-start">
                      <i class="taox"></i>
                      <p class="names"></p>
                  </div>
              </div>
              <div class="comment_content">
                  <p class="comment_c">
                    <span class="title">王五:</span>
                    送骄傲手机哦怕就送手机哦怕手机哦送骄傲手机哦怕就送手机哦怕手机哦
                  </p>
              </div>
          </li> -->
        </ul>
    </div>
</div>
<div class="Nonews" id="nocode"></div>
</body>
</html>
<script type="text/template" id="templateRecord">
  {{ for (var i = 0;i<it.length;i++) { }}
      <li>
          <div onclick="RecordDetaile('{{=it[i].recordId}}')">
            <div class="personal_info">
                <img src="{{=urlphp}}storage/avatar/avatar_{{=it[i].createId}}.png" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="record_header">
                <p>
                    <span>{{=it[i].createName}}</span>
                    <span>{{=it[i].uesrOrganizationName}}</span>
                </p>
            </div>
            <p class="text_content">{{=it[i].dataContent}}</p>
            <div class="row{{=it[i].id}} rows">
                {{if (it[i].dataImages != "") { }}
                    {{ for (var j=0;j<it[i].dataImages.length;j++) { }}
                    {{if(j<=8) { }}
                      <div class="column">
                          <img src="{{=it[i].dataImages[j]}}" alt="">
                      </div>
                      {{ } }}
                    {{ } }}
                {{ } }}
            </div>
            <i class=" {{=it[i].readFlag == true?'nread' : 'Unread'}}"></i>
          </div>
          <div class="footers">
              <span class="date_record">{{=it[i].createDate}}</span>
              <div class="thumbsAndcomment">
                  <div class="flex-start thumbs-s" id="thumbsid{{=it[i].id}}"  onclick="dianzan(this,'{{=it[i].id}}')" flat="{{=it[i].staffflag}}">
                      <i class="thumbs" style="background:url({{=it[i].staffflag==true?'../../icon/momentHeart_like.png':'../../icon/momentHeart.png'}}) no-repeat;background-size: contain;background-position: center;"></i>
                      <span class="zan">赞</span>
                  </div>
                  <div class="flex-start" onclick="comment(this,'{{=it[i].id}}')">
                      <i class="comment"></i>
                      <span>评论</span>
                  </div>
              </div>
          </div>
          <div class="thumbs_num" style="display:{{=it[i].staffLIkes.length == 0?'none':'block'}}">
            <div class="flex-start">
                <i class="taox"></i>
                <p class="names">
                  {{? it[i].staffLIkes.length > 0}}
                    {{ for(var d = 0;d<it[i].staffLIkes.length;d++) { }}
                         {{? d === 0}}
                         <span class="{{=it[i].staffLIkes[d].staffNum == uuid?'true':''}}">{{=it[i].staffLIkes[d].name}}</span>
                         {{??}}
                            <span class="{{=it[i].staffLIkes[d].staffNum == uuid?'true':''}}">,{{=it[i].staffLIkes[d].name}}</span>
                        {{?}}
                    {{ } }}
                  {{?}}
                </p>
            </div>
          </div>
          <div class="comment_content">
            {{? it[i].staffCommentVos.length > 0}}
                {{ for(var s = 0;s<it[i].staffCommentVos.length;s++) { }}
                    <p class="comment_c"  onclick=deleteComment(this,'{{=it[i].staffCommentVos[s].id}}','{{=it[i].staffCommentVos[s].staffNum}}')>
                        <span class="title">{{=it[i].staffCommentVos[s].name}}:</span>
                        {{=it[i].staffCommentVos[s].content}}
                    </p>
                {{ } }}
              {{?}}
          </div>
      </li>
  {{ } }}
</script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
 <script src="../../script/zepto.js" charset="utf-8"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript">
    // kkk();
    var isLoadding = false,uuid="";
    var apiToast = new apiToast();
    var skip = 1;
    var depIDs = '';
    var headers = "",name = "";
    apiready = function () {
        $api.fixStatusBar($api.dom('header'));
        depIDs = api.pageParam.depIDs;
        var info = $api.getStorage('data'),
        token = JSON.parse(info).data.access_token,
        user = JSON.parse(info).data.user;
        uuid = JSON.parse(info).data.user.staff_num;
        name = JSON.parse(info).data.user.name;
        recordItmes(uuid,depIDs,false);
        // 上拉加载
        api.addEventListener({
  				name : 'scrolltobottom',
  				extra : {
  					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
  				}
  			}, function(ret, err) {
  				if (!isLoadding ) {
  					isLoadding = true;
  					recordItmes(uuid,depIDs,true);
  				}
  			});
        // header
        headers = {
            "Authorization": "Bearer " + token
        }
    };
    // 数据
    function recordItmes(useruuid,depID,isLoadMore){
      var filter = {
        "departmentId" : depID,
        'userId':useruuid,
        "pageNumber" : skip,
        "pageSize" :10
      };
      $http.fnReuestDataNoW(UrlRouter.getRecordDynamicApi,'','get',filter,function (ret,err) {
        isLoadding = false;
        apiToast.hide();
        if (ret.data.length == 0 && skip == 1) {
            document.getElementById("nocode").style.display = 'block';
            return false;
        }else {
            document.getElementById("nocode").style.display = 'none';
        }
        if (ret) {
            if (ret.data.length > 0) {
              skip += 1;
              $apis.append(record_lists,'#templateRecord',ret.data);
                for (var i = 0; i < ret.data.length; i++) {
                  flexImage(ret.data[i].id)
                }
            } else {
               isLoadding =true;
                api.toast({
                    msg: '没有更多数据',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        } else {
            apiToast.hide();
            api.toast({
                msg: '加载超时，请检查网络',
                duration: 2000,
                location: 'bottom'
            });
        }
      });
    };
    // function photoTailoringFun(value,i) {
    //   var imageBrowser = api.require('imageBrowser');
    //     imageBrowser.openImages({
    //         imageUrls: value.split(','),
    //         activeIndex:i,
    //         showList:false
    //     });
    // }
    // 记录详情
    function RecordDetaile(recordId) {
      $event.openTabLayout('recodeDetails','../browseQrcode/recodeDetails','记录详情',{recordParentId:recordId});
      // $event.openWin('recordDetaile','recordDetaile',{recordParentId:''},'');
    }
    function flexImage(j) {
        var length = document.querySelectorAll('.row'+j+' .column').length,
            column = document.querySelectorAll('.row'+j+' .column');
            imgs = document.querySelectorAll('.row'+j+' .column img');
        if (length == 1) {
            column[0].style.width = api.winWidth-30 + 'px';
            column[0].style.height = (api.winWidth-30) +'px'
        }else if (length == 2) {
            for (var i = 0; i < column.length; i++) {
                column[i].style.width = (api.winWidth-30) / 2 +'px'
                column[i].style.height = (api.winWidth-30-20) / 2 +'px'
                column[i].getElementsByTagName('img')[0].style.width= (api.winWidth-50) / 2 +'px'
            }
        }else {
            for (var i = 0; i < column.length; i++) {
                column[i].style.width = (api.winWidth-30) / 3 +'px'
                column[i].style.height = (api.winWidth-30-20) / 3 +'px'
                column[i].getElementsByTagName('img')[0].style.width=(api.winWidth-50) / 3 +'px'
            }
        }
    };
    // 点赞
    function dianzan(el,id,type) {
        var gray ='../../icon/momentHeart.png',red = '../../icon/momentHeart_like.png';
        var thumbs_num = $(el).parent().parent().parent().find('.thumbs_num');
        var str = "";
        if ($(el).attr('flat') === "false"){
            $(el).attr('flat','true');
            $(el).find('.thumbs').css("backgroundImage",'url('+red+')');
            if (thumbs_num.find('p').html().replace(/\s+/g,"") === ""){
                thumbsPost(id,type)
                  console.log('1111');
                str =`<span class="true">${name}</span>`;
                $(thumbs_num).css('display','block');
                $(thumbs_num.find('p')).append(str)
            }else {
                console.log('3333');
                thumbsPost(id,type)
                $(thumbs_num).css('display','block');
                str =`<span class="true">，${name}</span>`;
                $(thumbs_num.find('p')).append(str);
            }

        } else {
          console.log('112212');
            thumbsPost(id,type)
            var thumbs_numTrue =  $(el).parent().parent().parent().find('.thumbs_num').find('p').find('.true');
            var index = $(el).parent().parent().parent().find('.thumbs_num p>span').length;
            index === 1?$(thumbs_num).css('display','none'):"";
            $(el).attr('flat','false');
            $(el).find('.thumbs').css("backgroundImage",'url('+gray+')');
            $(thumbs_numTrue).remove();
        }
    }
    // 评论
    function comment(el,id,type) {
      var inputField = api.require('inputField');
      inputField.open({
        bgColor: '#f5f5f5',
        lineColor: '#ccc',
        fileBgColor: '#fff',
        borderColor: '#ccc',
        autoFocus:true,
        placeholder:'评论',
        sendBtn:{
           bg: '#86c3f7',          //字符串类型；发送按钮常态背景色
           inputBg:'#009fe8',      //(可选项)字符串类型；当输入文字发时送按钮的背景色；默认：bg的色值
           bgHighlight: '#009fe8', //字符串类型；发送按钮点击时的高亮背景色
           title: '发送',        //字符串类型；发送按钮的标题
           titleSize: 14,       //数字类型；发送按钮的标题字体大小
           titleColor: '#fff',  //字符串类型；发送按钮标题文字颜色
           corner: 5,           //数字类型；发送按钮圆角大小
           sendW:60,            //数字类型；发送按钮的宽
           sendH:30,            //数字类型；发送按钮的高
           marginRight:10,
        },
        placeholderStyles:{
           color: '#ccc',     //字符串类型；占位文字颜色，支持rgb、rgba、#；默认：#696969
           size: 14,          //数字类型；占位文字大小；默认：13
           marginL: 10
        },
        fixedOn: api.frameName
      }, function(ret, err) {
        if (ret) {
            commentFun(el,id,type,ret.msg)
            inputField.close();
        }
      });
      addEventWindow();// 监听关闭input
    }
    // 监听点击空白处关闭input
    function addEventWindow() {
      var inputField = api.require('inputField');
      inputField.setInputFieldListener(function(ret, err) {
          if (ret) {
              if (ret.chatViewH === 0) {
                var inputField = api.require('inputField');
                inputField.close();
              }
          }
      });
    }
    // 删除评论
    function deleteComment(el,ids,jobNum) {
      if (jobNum != uuid) return false;
      api.actionSheet({
          cancelTitle: '取消',
          destructiveTitle: '删除',
      }, function(ret, err) {
          if (ret.buttonIndex === 1) {
              $http.fnReuestDataNologing(UrlRouter.delComment,headers,'post',{id:ids},function (ret,err) {
                  if (ret.code === 0) {
                    $(el).remove();
                  }
              })
          }
      });
    }
    // 点赞接口
    function thumbsPost(ids,types) {
      var data ={
        id:ids,
        type:'record'
      }
      $http.fnReuestDataNologing(UrlRouter.thumbs,headers,'post',data,function (ret,err) {
        // console.log(JSON.stringify(ret));
      });
    }
    // 评论接口
    function commentFun(el,ids,type,msg) {
      var data = {
        id:ids,
        type:'record',
        content:msg
      }
      $http.fnReuestDataNologing(UrlRouter.comment,headers,'post',data,function (ret,err) {
        if (ret.code === 0) {
          var comment = $(el).parent().parent().parent().find('.comment_content')
          var html = `<p class="comment_c" onclick=deleteComment(this,${ret.data.id},${ret.data.staff_num})>
                        <span class="title">${name}:</span>
                        ${ret.data.content}
                      </p>`;
          $(comment).append(html);
        }
      });
    }
</script>