balanceLog

www/webapp/o2o/css/balanceLog.css

@@ -188,17 +188,84 @@
 }
 
 /*充值明细*/
- .recharge-details{
+.recharge-details{
   width: 100%;
   margin-bottom: 10px;
+  position: relative;
   background-color: white;
   border-top: 1px solid rgba(0, 0, 0, 0.3);
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 }
 .recharge-details>div{
-  line-height: 1.8rem;
   padding-left: 15px;
+  line-height: 1.8rem;
 }
 .recharge-details>div:nth-child(1){
   border-bottom:1px solid rgba(0, 0, 0, 0.3);``
 }
+
+.recharge-details .extended{
+  height: 0px;
+  display: none;
+
+ -webkit-transition: all .25s;
+    -moz-transition: all .25s;
+     -ms-transition: all .25s;
+      -o-transition: all .25s;
+         transition: all .25s;
+}
+
+/*箭头旋转*/
+.recharge-details .arrow{
+  position: relative;
+}
+.recharge-details .arrow:after{
+  position: absolute;
+  right: 15px;
+  top: 18px;
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px 6px 0 6px;
+  border-style: solid;
+  border-color: #fff transparent;
+
+  -webkit-transition: all .25s;
+      -moz-transition: all .25s;
+       -ms-transition: all .25s;
+        -o-transition: all .25s;
+           transition: all .25s;
+}
+
+.recharge-details .arrow:before {
+    position: absolute;
+    right: 13px;
+    top: 18px;
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 8px 8px 0 8px;
+    border-style: solid;
+    border-color: #333 transparent;
+    -webkit-transition: transform .25s;
+       -moz-transition: transform .25s;
+        -ms-transition: transform .25s;
+         -o-transition: transform .25s;
+            transition: transform .25s;
+}
+
+.recharge-details .arrow.active:after{
+    top: 20px;
+    -webkit-transform: rotate(180deg);
+       -moz-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+         -o-transform: rotate(180deg);
+            transform: rotate(180deg);
+}
+.recharge-details .arrow.active:before{
+    -webkit-transform: rotate(180deg);
+       -moz-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+         -o-transform: rotate(180deg);
+            transform: rotate(180deg);
+}

www/webapp/o2o/js/page/balanceLog.js

@@ -150,6 +150,20 @@ function time(view,pageData){
         time($view,pageData);
       },$view);
 
+      // 扩展显示
+      $.newTouch('.recharge-details',function (event) {
+        event.preventDefault();
+        $(this).children('div.arrow').toggleClass('active');
+        if($(this).children('div.extended').css('display')=='none'){
+          $(this).children('div.extended').css('height','4rem').css('display','block');
+          $(this).siblings().children('div.extended').css('height','0').css('display','none');
+          $(this).siblings().children('div.arrow').removeClass('active');
+
+        }else {
+          $(this).children('div.extended').css('height','0').css('display','none');
+          $(this).children('div.arrow-block').addClass('arrow')
+        }
+      },$view);
       // 去评价
       $.newTouch('.order-btn-review', function (event) {
           var obj = $(this);

www/webapp/o2o/tpl/balanceLog/index.html

@@ -39,9 +39,13 @@
                       {{if Log.amount>0 && Log.memo!=="微信下订单" && Log.memo!=="下订单"}}
                       <div class="recharge-details">
                         <div class="time-str">您在{{Log.time}}</div>
-                        <div class="">
+                        <div class="arrow">
                           <span class="green">充值{{Log.amount}}</span>元
                         </div>
+                        <div class="extended">
+                          <div class="memo"><span class="left">支付用途:</span>{{Log.memo}}</div>
+                          <div class="type-str"><span class="left">交易类型:</span>{{Log.type_str}}</div>
+                        </div>
                       </div>
                       {{/if}}
                     {{/each}}
@@ -59,9 +63,13 @@
                       {{if Log.memo=="微信下订单" || Log.memo=="下订单" || Log.amount<0}}
                       <div class="recharge-details">
                         <div class="time-str">您在{{Log.time}}</div>
-                        <div class="">
+                        <div class="arrow">
                           <span class="red">消费{{Log.amount}}</span>元
                         </div>
+                        <div class="extended">
+                          <div class="memo"><span class="left">交易说明:</span>{{Log.memo}}</div>
+                          <div class="type-str"><span class="left">交易类型:</span>{{Log.type_str}}</div>
+                        </div>
                       </div>
                       {{/if}}
                     {{/each}}