layui模板引擎的使用

1，自定義數據

//發送請求
   $.ajax({
            type: "GET",    
            dataType:'json',
            url: "http://merchant.shys-suda.com/merchant/order/order_detail?order_id="+order_id,    
            success: function (res) {   
            	var data =JSON.parse(res);
				console.log(data);//1獲取數據
				var getTpl = demo.innerHTML //調用模板，用數據填充模板
				,view = document.getElementById('view');
				laytpl(getTpl).render(data, function(html){
					view.innerHTML = html;
				});
            }
    });

<script id="demo" type="text/html">//3、創建模板
    {{# if(d.status){ }}
    order ID 不存在
    {{ } }}
    <div >
        <div class="row">
          <div class="welcome-left-container col-lg-9">
              <!--服務器信息-->
              <div class="server-panel panel panel-default">
                <div class="panel-header">基本信息</div>
                <div class="panel-body clearfix">
                  <div class="col-md-2">
                    <p class="title">訂單號</p>
                    <span class="info">{{d.response.order_id}}</span>
                  </div>
                  <div class="col-md-2">
                    <p class="title">商戶號</p>
                    <span class="info">{{d.response.merchant_id}}</span>
                  </div>
                  <div class="col-md-2">
                    <p class="title">終端號</p>
                    <span class="info">{{d.response.terminal_id}}</span>
                  </div>
                  <div class="col-md-2">
                    <p class="title"> 訂單金額</p>
                    <span class="info">{{d.response.total_amount}}</span>
                  </div>
                  <div class="col-md-2">
                    <p class="title">收款金額</p>
                    <span class="info">{{d.response.real_amount}}</span>
                  </div>
                  <div class="col-md-2">
                    <p class="title">費率</p>
                    <span class="info">{{d.response.service}}</span>
                  </div>
                  <!----->
                  <div class="col-md-2">
                      <p class="title">支付狀態</p>
                      <span class="info">
                        {{# if(d.response.pay_status ==1 ){ }}
                          <span style="color:#3366">支付中</span>
                        {{# }else if(d.response.pay_status ==2){ }}
                          <span style="color:green">支付成功</span>
                        {{# }else if(d.response.pay_status ==3){ }}
                          <span style="color:red">支付失敗</span>
                        {{# } }}
                      </span>
                  </div>
                  <div class="col-md-2">
                      <p class="title">支付通道</p>
                      <span class="info">
                        {{# if(d.response.channels ==1 ){ }}
                          官方
                        {{# } }}
                      </span>
                  </div>  
                  <div class="col-md-2">
                      <p class="title">支付方式</p>
                      <span class="info">
                        {{# if(d.response.pay_type ==1 ){ }}
                          條碼
                        {{# }else if(d.response.pay_type ==2){ }}
                          掃碼
                        {{# } }}
                      </span>
                  </div>
                  <div class="col-md-2">
                      <p class="title">支付渠道</p>
                      <span class="info">
                        {{# if(d.response.pay_ment ==1 ){ }}
                          支付寶
                        {{# }else if(d.response.pay_ment ==2){ }}
                          微信
                        {{# } }}
                      </span>
                  </div>
                  <div class="col-md-2">
                      <p class="title">商戶名稱</p>
                      <span class="info">
                        {{# if(d.response.merchant_name =='' ){ }}
                          無
                        {{# }else{ }}
                          {{d.response.merchant_name}}
                        {{# } }}
                      </span>
                  </div>
                  <div class="col-md-2">
                      <p class="title">終端名稱</p>
                      <span class="info">
                          {{# if(d.response.terminal_name =='' ){ }}
                            無
                          {{# }else{ }}
                            {{d.response.terminal_name}}
                          {{# } }}
                      </span>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
  </script>

 

<div id="view"></div>