init

www/vue/src/components/balanceLog.vue

@@ -6,10 +6,10 @@
       </div>
       <div>
         <div class="year">
-          <span class="year-span">{{startTime}}</span>年
+          <span class="year-span">{{year}}</span>年
         </div>
         <div class="month">
-          <span class="month-span">{{endTime}}</span>月
+          <span class="month-span">{{month}}</span>月
         </div>
       </div>
       <div class="btn-recharge">充值</div>
@@ -18,6 +18,30 @@
         <button-tab-item  @on-item-click="consoleIndex(2)">取消</button-tab-item>
       </button-tab>
     </div>
+    <div style="position:absolute;top:165px;left:0;right:0;">
+      <!-- 消费 -->
+      <div class="recharge-details" v-if="balanceInfo == 1" v-for="(item, index) in consumptionList" @click='show(index)'> 
+        <div class="time-str">{{item.time}}</div> 
+        <div class="arrow active" v-bind:class="{ showHeight: isActive == 1 }"> 
+          <span class="red">消费{{item.amount}}</span>元 
+        </div>
+        <div class="extended" style="height: 4rem; display: block;">
+          <div class="memo"><span class="left">交易说明:</span>{{item.memo}}</div> 
+          <div class="type-str"><span class="left">交易类型:</span>{{item.type_str}}</div>
+        </div>
+      </div>
+      <!-- 充值 -->
+      <div class="recharge-details" v-if="balanceInfo == 2" v-for="item in rechargeList">
+        <div class="time-str">{{ item.time }}</div>
+        <div class="arrow">
+          <span class="green">充值{{ item.amount }}</span>元
+        </div>
+        <div class="extended">
+          <div class="memo"><span class="left">支付用途:</span>{{item.memo}}</div>
+          <div class="type-str"><span class="left">交易类型:</span>{{item.type_str}}</div>
+        </div>
+      </div>
+    </div>
 <!--     <div class="show" @click="show(1)">
       <div v-bind:class="{ showHeight: isActive == 1 }"></div>  
     </div> 
@@ -36,17 +60,23 @@
     data () {
       return {
         userBalance: this.$store.state.user.userInfo.balance,
+        year: '2016',
+        month: '05',
         endTime: '2016-11-30',
         startTime: '2016-11-01',
-        isActive: -1,
-        index: -1,
-        balanceList: []
+        isActive: -1, // show 显示隐藏
+        index: -1, // show 显示隐藏
+        balanceInfo: 1,
+        rechargeList: [],
+        consumptionList: []
       }
     },
     components: {
       Tab, TabItem, ButtonTab, ButtonTabItem, Sticky
     },
-    created () {},
+    created () {
+      this.consoleIndex(1)
+    },
     methods: {
       show (e) {
         if (this.index !== e) {
@@ -58,14 +88,32 @@
         }
       },
       consoleIndex (index) {
-        this.isShow = index
-        console.log('click demo01', index)
-        let orderList = {id: config.userId, start_time: this.startTime, end_time: this.endTime}
-        orderList = qs.stringify(orderList)
-        axios.post('o2o/user/getUserBalanceLog', orderList).then(res => {
-          this.balanceList = res.data.message
-          console.log(this.balanceList)
-        })
+        this.balanceInfo = index
+        console.log(this.balanceInfo)
+        if (this.consumptionList.length === 0 || this.rechargeList.length === 0) {
+          let orderList = {id: config.userId, start_time: '2016-11-01', end_time: '2016-11-30'}
+          orderList = qs.stringify(orderList)
+          axios.post('o2o/user/getUserBalanceLog', orderList).then(res => {
+            // if (index === 1) {
+            // }
+            // if (index === 2) {
+            // }
+            // 消费
+            let j = 0
+            for (let i in res.data.message) {
+              if (res.data.message[i].memo === '微信下订单' || res.data.message[i].memo === '下订单' || res.data.message[i].amount < 0) {
+                this.consumptionList[j++] = res.data.message[i]
+              }
+            }
+            // 消费
+            j = 0
+            for (let i in res.data.message) {
+              if (res.data.message[i].amount > 0 && res.data.message[i].memo !== '微信下订单' && res.data.message[i].memo !== '下订单') {
+                this.rechargeList[j++] = res.data.message[i]
+              }
+            }
+          })
+        }
       }
     }
   }
@@ -76,12 +124,12 @@
   .new-time{
     top: 0;
     width: 100%;
-    height: @height;
     color: white;
+    height: @height;
     position: fixed;
     padding: 25px 0;
+    z-index: 99;
     padding-bottom: 0;
-    color: white;
     background:url('http://odulvej8l.bkt.clouddn.com/mine-%E5%BA%95%E7%BA%B9.jpg') no-repeat;
     background-size: 100%;
     &>div:nth-child(1){
@@ -155,11 +203,64 @@
     // border-radius: 15px;
   }
   .vux-button-group{
-    margin-top: @height;
+    margin-top: 66px;
   }
   .vux-button-group > a.vux-button-group-current{
     background-color: #927603!important;
   }
+  .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);
+    &>div{
+      padding-left: 15px;
+      line-height: 1.8rem;
+    }
+    .arrow.active{
+      border-bottom: 1px solid rgba(0,0,0,0.3);
+      &: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;
+      }
+      &: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;
+      }
+      span.red {
+        color: red;
+      }
+    }
+    .time-str{
+      border-bottom: 1px solid rgba(0,0,0,0.3);
+    }
+  }
   .show{
     background-color: black;
     height: 500px;

www/vue/src/components/navigation.vue

@@ -16,11 +16,6 @@
         <img slot="icon-active" :src='iconMineActive'>
         <span slot="label">我的</span>
       </tabbar-item>
-      <tabbar-item link="/userCoupon">
-        <img slot="icon" :src='iconMine'>
-        <img slot="icon-active" :src='iconMineActive'>
-        <span slot="label">优惠券</span>
-      </tabbar-item>
     </tabbar>
     <!--<div class="r_l">-->
       <!--<router-link to="/" :style="{color:'#b08639'}"><img :src='iconHomeActive'>首页</router-link>-->