balance

www/vue/index.html

@@ -7,11 +7,18 @@
   <script type="text/javascript" src='http://webapi.amap.com/maps?v=1.3&key=ea4228b685c663ac62af7da3a0702c97'></script>
   <title>vue</title>
   <style>
-    html, body {
+    html{
+
+      font-size: 120%;
+    }
+    body {
       height: 100%;
       width: 100%;
       overflow-x: hidden;
-      font-size: 120%;
+      font-size: 17px;
+      line-height: 21px;
+      color: #000;
+      background-color: #fff;
     }
 
     * {

www/vue/src/components/balanceLog.vue

@@ -0,0 +1,173 @@
+<template lang="html">
+  <div class="balance-log">
+    <div class="new-time">
+      <div>
+        余额:<span class="user-balance">{{userBalance}}</span>元
+      </div>
+      <div>
+        <div class="year">
+          <span class="year-span">{{startTime}}</span>年
+        </div>
+        <div class="month">
+          <span class="month-span">{{endTime}}</span>月
+        </div>
+      </div>
+      <div class="btn-recharge">充值</div>
+      <button-tab>
+        <button-tab-item selected @on-item-click="consoleIndex(1)">充值</button-tab-item>
+        <button-tab-item  @on-item-click="consoleIndex(2)">取消</button-tab-item>
+      </button-tab>
+    </div>
+<!--     <div class="show" @click="show(1)">
+      <div v-bind:class="{ showHeight: isActive == 1 }"></div>  
+    </div> 
+    <div class="show" @click="show(2)">
+      <div v-bind:class="{ showHeight: isActive == 2 }"></div>  
+    </div> -->
+  </div>
+</template>
+
+<script>
+  import {Tab, TabItem, ButtonTab, ButtonTabItem, Sticky} from 'vux'
+  import axios from 'axios'
+  import qs from 'qs'
+  import config from '../config/config'
+  export default {
+    data () {
+      return {
+        userBalance: this.$store.state.user.userInfo.balance,
+        endTime: '2016-11-30',
+        startTime: '2016-11-01',
+        isActive: -1,
+        index: -1,
+        balanceList: []
+      }
+    },
+    components: {
+      Tab, TabItem, ButtonTab, ButtonTabItem, Sticky
+    },
+    created () {},
+    methods: {
+      show (e) {
+        if (this.index !== e) {
+          this.isActive = e
+          this.index = e
+        } else {
+          this.isActive = -1
+          this.index = -1
+        }
+      },
+      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)
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  @height: 110px;
+  .new-time{
+    top: 0;
+    width: 100%;
+    height: @height;
+    color: white;
+    position: fixed;
+    padding: 25px 0;
+    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){
+      line-height: 40px;
+      text-align: left;
+      padding-left: 15px;
+      .user-balance{
+        color: white;
+        margin: 0 15px;
+        font-size: 25px;
+      }  
+    }
+    &>div:nth-child(2){
+      &>div{
+        width: 25%;
+        float: left;
+      }
+      .year{
+        position: relative;
+        transition: 500ms all;
+        text-align: left;
+        padding-left: 15px;
+        line-height: 40px;
+        span{
+          display: inline-block;
+        }
+        .year-span{
+          text-align: left;
+        }
+      }
+      .month{
+        .month-span{
+          line-height: 40px;
+        }
+      }
+      .year,.month{
+        position: relative;
+      }
+      .year:after,.month:after{
+        width: 0;
+        height: 0;
+        right: 0;
+        top: 15px;
+        content: "";
+        position: absolute;
+        border-top: 5px solid white;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+      }
+      .month:after{
+        right: 15px;
+      }
+    }
+    .btn-recharge{
+      top: 35%;
+      right: 15px;
+      padding: 5px;
+      font-size: 13px;
+      line-height: 26px;
+      border-radius: 50%;
+      position: absolute;
+      background-color: #927603;
+      border: 1px solid rgb(197,159,0);
+    }
+  }
+  .balance-content{
+    background-color: green;
+    padding: 5%;
+    color: white;
+    font-size: 25px;
+    // border-radius: 15px;
+  }
+  .vux-button-group{
+    margin-top: @height;
+  }
+  .vux-button-group > a.vux-button-group-current{
+    background-color: #927603!important;
+  }
+  .show{
+    background-color: black;
+    height: 500px;
+    background-color: green;
+    border: 1px solid white;
+    .showHeight{
+      height:@height;
+      background-color: yellow;
+    }
+  }
+</style>