update pay center. codereview by XWG

@@ -1247,18 +1247,19 @@
             }
         }
 
-###支付中心
+### 支付中心
 
     {
         'payAppInfo' : {
             'appIcon' : 'http://static.yohobuy.com/images/icon.png',
+            'payLink' : '/weixin/pay/'
             'app' : '微信支付',
             'hint' : '需下载微信客户端',
             'subHint' : '推荐使用'
         }
     }
 
-###物流详情
+### 物流详情
 
     {
         'logisticImg' : 'http://static.yohobuy.com/images/icon.png',

@@ -3,12 +3,11 @@
  * @author: 赵彪<bill.zhao@yoho.cn>
  * @date: 2015/12/03
  */
-
+var loading = require('../plugin/loading');
 
 function isWXOpen() {
     var ua = navigator.userAgent.toLowerCase();
 
-
     if (ua.match(/MicroMessenger/i) === 'micromessenger') {
         return true;
     } else {
@@ -19,7 +18,6 @@ function isWXOpen() {
 function hideWeChatPay() {
     var payApps = document.getElementsByClassName('app');
 
-
     [].forEach.call(payApps, function(app, index) {
         if (app.innerHTML.indexOf('微信') !== -1) {
             app.parentNode.style.display = 'none';
@@ -34,4 +32,58 @@ function handleForWX() {
     }
 }
 
-window.onload = handleForWX;
+function setIcon(div, appName) {
+
+    if (appName.indexOf('百度') !== -1) {
+        div.style.backgroundPositionY = '-2.7rem';
+        return false;
+    }
+
+    if (appName.indexOf('微信') !== -1) {
+        div.style.backgroundPositionY = '-1.2rem';
+        return false;
+    }
+
+    if (appName.indexOf('银联') !== -1) {
+        div.style.backgroundPositionY = '-4rem';
+        return false;
+    }
+
+    if (appName.indexOf('QQ') !== -1) {
+        div.style.backgroundPositionY = '-5.4rem';
+        return false;
+    }
+}
+
+function loadIcon() {
+    var boxs = document.getElementsByClassName('box');
+    var div = null;
+    var appName = null;
+
+    [].forEach.call(boxs, function(box, index) {
+        div = box.getElementsByClassName('icon')[0].getElementsByTagName('div')[0];
+        if (div) {
+            appName = box.getElementsByClassName('app')[0].innerHTML;
+            setIcon(div, appName);
+        }
+    });
+}
+
+
+
+function showPage() {
+    var pageList = document.getElementsByClassName('payapp-list')[0];
+
+    pageList.style.visibility = 'visible';
+}
+
+function main() {
+    handleForWX();
+    loading.hideLoadingMask();
+    showPage();
+    loadIcon();
+}
+
+loading.showLoadingMask();
+
+window.onload = main;

 .pay-page {
   padding: (40rem / $pxConvertRem) (20rem / $pxConvertRem) 0;
 
+  .payapp-list {
+    visibility: hidden;
+  }
+
   .box {
     border: 1px solid #eee;
     border-radius: 10rem / $pxConvertRem;
@@ -16,31 +20,45 @@
     }
 
     .icon {
-      flex-grow: 0.3;
+      //flex-grow: 0.3
+      width: 15%;
 
       img {
         width: 60rem / $pxConvertRem;
         margin: 0;
       }
+
+      > div {
+        width: 60rem / $pxConvertRem;
+        height: 60rem / $pxConvertRem;
+        background-image: url(http://localhost:8000/img/layout/pay-icon.png);
+        background-size: 90%;
+        background-position-y: 8rem / $pxConvertRem;
+        background-position-x: center;
+        background-repeat: no-repeat;
+      }
     }
 
     .app {
-      flex-grow: 3;
+      //flex-grow: 4
+      width: 40%;
       font-size: 32rem / $pxConvertRem;
       color: #414141;
 
       //padding-left: 20rem/$pxConvertRem
-   
+
     }
 
     .hint {
-      flex-grow: 4;
+      //flex-grow: 4
+      width: 40%;
       font-size: 24rem / $pxConvertRem;
       color: #4b4b4b;
     }
 
     .iconfont {
-      flex-grow: 1;
+      //flex-grow: 1
+      width: 5%;
       justify-content: flex-end;
       color: #e0e0e0;
       font-size: 28rem / $pxConvertRem;

 {{> layout/header}}
 <div class="pay-page yoho-page">
-    {{# payAppInfo}}
-    <div class="box">
-       <div class="icon">
-            <img src="{{appIcon}}" alt="app图标">
-       </div>
-       <div class="app">{{app}}</div>
-       <div class="hint">
-            {{hint}}
-            {{#if subHint}}
-            <br>
-            {{subHint}}
-            {{/if}}
-
-       </div>
-       <div class="iconfont">&#xe604</div>
+    <div class="payapp-list">
+         {{# payAppInfo}}
+        <a href="{{payLink}}">
+            <div class="box">
+               <div class="icon">
+                    {{#if appIcon}}
+                    <img src="{{appIcon}}" alt="app图标">
+                    {{else}}
+                    <div></div>
+                    {{/if}}
+               </div>
+               <div class="app">{{app}}</div>
+               <div class="hint">
+                    {{hint}}
+                    {{#if subHint}}
+                    <br>
+                    {{subHint}}
+                    {{/if}}
+               </div>
+               <div class="iconfont">&#xe604</div>
+            </div>
+        </a>
+        {{/ payAppInfo}}
     </div>
-    {{/ payAppInfo}}
-
 </div>
 {{> layout/footer}}