jifuning
/
yangchangwan


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<!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" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" href="../../css/projeck.css">
    <style>
        body{
          background: #FAFAFA;
        }
        /*物资*/
        /*物资搜索输入框*/
        .api_seach_material{
          display: flex;
          padding: 0 15px;
          box-sizing: border-box;
          background: #f1f5f7;
          width: 90%;
          margin: auto;
          margin-top: 10px;
          justify-content: space-between;
          /*border-bottom: 1px solid #ebebeb;*/
        }
        .api_seach_material_box{
          height: auto;
          width: 100%;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 1000;
          background: #fff;
        }
        .api_seach_material input{
          box-sizing: border-box;
          height: 44px;
          padding-left: 15px;
          border: none;
          outline: none;
          padding-right: 40px;
          -webkit-tap-highlight-color:rgba(0,0,0,0);
          -webkit-tap-highlight-color: transparent;
        }
        .right_api_seach {
          display: flex;
          align-items: center;
          width: 100px;
          color: #262626;
        }
        .api_seach_btn {
          padding-left: 15px;
        }
        .icon-close {
          width: 20px;
          height: 20px;
          line-height: 20px;
          border-radius: 20px;
          display: none;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.1);
        }

        /*.right_api_seach {
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 120px;
          color: #262626;
        }

        .api_seach_btn {
          padding-left: 15px;
        }*/
        /*  物资列表主体页面*/
        .get_materials_list {
          margin-top: 70px;
          font-size: 14px;
          color: #000;
        }
        .template_material_box {
          padding: 10px;
          margin: 10px;
          display: flex;
          flex-flow: column;
          border: solid 1px #ebeef3;
        }
        /*物资描述 (容器头部)*/
        .material_depiction_header {
        }
        /*仓库名称（容器中间）*/
        .material_center {
          display: flex;
        }
        .material_s_num,.material_s_price {
          padding-left: 10px;
        }
        .material_s_num {
          color: #fa8c16
        }
        .material_storage {
          color: #009fe8
        }
        /**/
        /*单价 数量 分类等 */
        .material_depiction_footer {
          display: flex;
          font-size: 12px;
          color: #909399
        }
        .material_footer_item {
          padding-left: 10px;
        }
    </style>

</head>
<body>
  <!-- 顶部搜索框 -->
  <div style="padding-bottom:10px;"class="api_seach_material_box relative after-borders">
    <div class="api_seach_material" id="api_seach_material">
      <input type="text" name="" value="" placeholder="请输入物资的名称或编号" autofocus="autofocus" class="info" id="info_input">
      <div class="right_api_seach" onclick="getDepiction()">
        <div class="icon-close" onclick="closeSearch()">
          <i class="aui-iconfont aui-icon-close"></i>
        </div>
        <div class="api_seach_meterial_line">
          |
        </div>
        <div class="api_seach_btn">
          搜索
        </div>
     </div>
    </div>
  </div>
   <div class="get_materials_list" id='materials_list'>

   </div>
   <div class="noText hide">
     <img src="../../image/noText.png" alt="">
   </div>
</body>
</html>
<!-- 物资列表页面 -->
<script type="text/template" id="templateMaterial">
  {{~it:value}}
     <div class="template_material_box">
       <div class="material_depiction_header material_item">
         {{=value.depiction}}
       </div>
       <div class="material_center material_item">
         <div class="material_storage">{{=value.storage}}</div>
         <!-- <div class="material_s_price">¥{{=value.s_price}}</div> -->
         <div class="material_s_num">{{=value.s_num}}{{=value.unit}}</div>
       </div>
       <div class="material_depiction_footer material_item">
         <div class="material_c_name">{{=value.c_name}}</div>
         <div class="material_encode material_footer_item">{{=value.encode}}</div>
       </div>
     </div>
  {{~}}
</script>

<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/doT.min.js" charset="utf-8"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script src="../../script/zepto.js" charset="utf-8">

</script>
<script type="text/javascript">


</script>

<script>
  let toast = new auiToast();
  let storage,classify
  apiready = function () {
    storage = api.pageParam.storage || '';
    classify = api.pageParam.classify || '';
    depiction = api.pageParam.material_name || '';
    getMaterialList(depiction,storage,classify);
    $api.val($api.byId('info_input'), depiction);
    // $('#info_input').keyup(function() {
    //   $api.css($api.dom('.icon-close'), 'display: block');
    // })
  }
  function getMaterialList(depiction,storage,classify) {
    $http.fnReuestDataNologing(UrlRouter.getMaterial, '', 'get', {depiction: depiction,storage: storage,classify: classify}, function(ret,err) {
        if (ret.code === 0) {
            // console.log(JSON.stringify(ret.data.data));
            $apis.html(materials_list,'#templateMaterial',ret.data.data);
            if(ret.data.data.length) {
              $api.addCls($api.dom('.noText'), 'hide');
            } else {
              $api.removeCls($api.dom('.noText'), 'hide');
            }
        }
    });
  }

  function getDepiction() {
    let searchDepiction = $api.val($api.byId('info_input'));
    if(searchDepiction) {
      getMaterialList(searchDepiction,storage,'')
    } else {
      getMaterialList(searchDepiction,storage,classify)
    }
  }

  // function closeSearch() {
  //   $api.css($api.dom('.icon-close'), 'display: none');
  //   $api.val($api.byId('info_input'), '');
  // }

</script>