jifuning
/
yangchangwan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599
							<!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;
        }
        .List_QRcode{
            width: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .List_QRcode li{
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            border-bottom: 1px solid #ecf0f1;
        }
        .btn{
            width: 80px;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            background: #fff;
            color: #41c1fc;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
        }
        .texts{
            font-size: 16px;
            color: #fff;
            line-height: 18px;
            width: 100%;
            line-height: 1.5;
        }
        .bg_start{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url("../../image/star.png");
            background-size: cover;
            position: relative;
            top: 4px;
        }
        .bord{
           border: 1px solid #41c1fc;
        }
        .List_QRcode li {
            padding:10px 0;
        }
        .List_QRcode li .btn{
            position: absolute;
            top: 15px;
            right: 10px;
        }
        .List_QRcode li .list_title{
            font-size: 16px;
            color: #97a3b4;
            height: 23px;
            line-height: 23px;
            margin-bottom: 10px;
        }
        .List_QRcode li .texts01{
            color: #1d1e2c;
        }
        .List_QRcode li .list_title .start1{
            width:0;
        }
      /*巡检记录列表样式*/
      .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{
          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="List_QRcodes">
        <ul class="List_QRcode" id="List_QRcode"></ul>
    </div>
</div>
<div class="noText hide">
  <img src="../../image/noText.png" alt="">
</div>
</body>
</html>
<script type="text/template" id="template">
  {{~it:value}}
  {{?value.msgType == 'CODE'}}
      <li style="padding:15px;" onclick="QRcodeDetaile('{{=value.pageId}},{{=value.id}},{{=value.departmentId}}','{{=value.pageName}}')">
          <p class="time list_title">
             <i class="bg_start"></i>
             <span>{{=value.createDate}}</span>
          </p>
          <p class="texts texts01">{{=value.dataContent}}</p>
      </li>
  {{??}}
      <li style="padding:10px 15px;">
        <div onclick="RecordDetaile('{{=value.recordId}}')">
          <div class="personal_info">
              <img src="{{=urlphp}}storage/avatar/avatar_{{=value.createId}}.png" onerror=javascript:this.src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" class="record_header">
              <p>
                  <span>{{=value.createName}}</span>
                  <span>{{=value.uesrOrganizationName}}</span>
              </p>
          </div>
          <p class="text_content">{{=value.dataContent}}</p>
          <div class="row{{=value.id}} rows">
              {{if (value.dataImages != "") { }}
                  {{ for (var j=0;j<value.dataImages.length;j++) { }}
                  {{if(j<=8) { }}
                    <div class="column">
                        <img src="{{=value.dataImages[j]}}" alt="">
                    </div>
                    {{ } }}
                  {{ } }}
              {{ } }}
          </div>
          <i class=" {{=value.readFlag == true?'nread' : 'Unread'}}"></i>
        </div>
        <div class="footers">
            <span class="date_record">{{=value.createDate}}</span>
            <div class="thumbsAndcomment">
                <div class="flex-start thumbs-s" id="thumbsid{{=value.id}}"  onclick="dianzan(this,'{{=value.id}}')" flat="{{=value.staffflag}}">
                    <i class="thumbs" style="background:url({{=value.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,'{{=value.id}}')">
                    <i class="comment"></i>
                    <span>评论</span>
                </div>
            </div>
        </div>
        <div class="thumbs_num" style="display:{{=value.staffLIkes.length == 0?'none':'block'}}">
          <div class="flex-start">
              <i class="taox"></i>
              <p class="names">
                {{? value.staffLIkes.length > 0}}
                  {{ for(var d = 0;d<value.staffLIkes.length;d++) { }}
                       {{? d === 0}}
                       <span class="{{=value.staffLIkes[d].staffNum == uuid?'true':''}}">{{=value.staffLIkes[d].name}}</span>
                       {{??}}
                          <span class="{{=value.staffLIkes[d].staffNum == uuid?'true':''}}">,{{=value.staffLIkes[d].name}}</span>
                      {{?}}
                  {{ } }}
                {{?}}
              </p>
          </div>
        </div>
        <div class="comment_content">
        {{? value.staffCommentVos.length > 0}}
            {{ for(var s = 0;s<value.staffCommentVos.length;s++) { }}
                <p class="comment_c"  onclick=deleteComment(this,'{{=value.staffCommentVos[s].id}}','{{=value.staffCommentVos[s].staffNum}}')>
                    <span class="title">{{=value.staffCommentVos[s].name}}:</span>
                    {{=value.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">
    var depIDs = '',uuid='';
    var isLoadding = false;
		var skip = 1,name = "";
    apiready = function () {
        depIDs = api.pageParam.depID;
        var info = $api.getStorage('data'),
        user = JSON.parse(info).data.user;
        uuid = JSON.parse(info).data.user.staff_num;
        name = JSON.parse(info).data.user.name;
        QRcodeListFun(uuid,depIDs,true);
        resetWidth();
        api.addEventListener({
  				name : 'scrolltobottom',
  				extra : {
  					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
  				}
  			}, function(ret, err) {
  				if (!isLoadding) {
  					isLoadding = true;
  					QRcodeListFun(uuid,depIDs,true);
  				}
  			})
    }
    function QRcodeListFun(uuid,depID,isLoadMore){
      var filter = {
				"departmentId" :depID,
        'userId':uuid,
				"pageNumber" : skip,
				"pageSize" : 10
			};
     $http.requestShowProgress(UrlRouter.getPageAndRecordDynamic,'get',filter)
     .then(ret=>{
       if (ret.data.length == 0 && skip == 1) {
         $api.removeCls($api.dom('.noText'), 'hide');
           return false;
       }else {
         $api.addCls($api.dom('.noText'), 'hide');
       }
       if (ret.data.length > 0) {
           skip += 1;
           $apis.append(List_QRcode,'#template',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'
           });
       }
     })
     .catch(err=>{
       api.toast({
           msg: '加载超时，请检查网络',
           duration: 2000,
           location: 'bottom'
       });
     })
    }
    function resetWidth() {
        var items = document.getElementsByClassName("texts");
        for (var i = 0; i < items.length; i++) {
            items[i].style.width = (api.frameWidth - 130) + "px";
        }
    }
    function QRcodeDetaile(pageid,title) {
      var pageidA = pageid.split(',');
      $event.openWin('browseQrcode_win','../browseQrcode/browseQrcode_win',{pageId:pageidA[0],id:pageidA[1],departmentId:pageidA[2],title:title},'');
      // $event.openWin('QrcodeDetaile','QrcodeDetaile',{pageId:pageidA[0],id:pageidA[1],departmentId:pageidA[2],flag:true},'');
    }
    // 巡检记录
    // 记录详情
    function RecordDetaile(recordId) {
      $event.openTabLayout('recodeDetails','../browseQrcode/recodeDetails','记录详情',{recordParentId:recordId});
    }
    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)
                str =`<span class="true">${name}</span>`;
                $(thumbs_num).css('display','block');
                $(thumbs_num.find('p')).append(str)
            }else {
                thumbsPost(id,type)
                $(thumbs_num).css('display','block');
                str =`<span class="true">，${name}</span>`;
                $(thumbs_num.find('p')).append(str);
            }

        } else {
            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.requestData(UrlRouter.delComment,'post',{id:ids})
              .then(ret=>{
                if (ret.code === 0) {
                  $(el).remove();
                }
              }).catch(err=>{})
          }
      });
    }
    // 点赞接口
    function thumbsPost(ids,types) {
      var data ={
        id:ids,
        type:'record'
      }
      $http.requestData(UrlRouter.thumbs,'post',data)
      .then(ret=>{
        if (ret.code === 401) {
            api.alert({
                title: '提示',
                msg: '登录过期，重新登录',
            });
        }
      }).catch(err=>{})
    }
    // 评论接口
    function commentFun(el,ids,type,msg) {
      var data = {
        id:ids,
        type:'record',
        content:msg
      }
      $http.requestData(UrlRouter.comment,'post',data)
      .then(ret=>{
        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);
        }
      }).catch(err=>{})
    }
</script>