45

www/vue/src/components/balanceLog.vue

@@ -1,72 +1,73 @@
-<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">{{year}}</span>年
-        </div>
-        <div class="month">
-          <span class="month-span">{{month}}</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 style="position:absolute;top:165px;left:0;right:0;">
-      <!-- 消费 -->
-      <div class="recharge-details"  v-for="(item, index) in tmp" @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>
-    
-<!--     <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>
+	<div class="balance-log">
+		<div class="new-time">
+			<div>
+				余额:<span class="user-balance">{{userBalance}}</span>元
+			</div>
+			<div>
+				<div class="year">
+					<span class="year-span">{{year}}</span>年
+				</div>
+				<div class="month">
+					<span class="month-span">{{month}}</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 style="color: #0b0b0b" v-for="(item, index) in tmp">
+			<group>
+				<cell
+					:title="item.time"
+					is-link
+					value-align="left"
+					:border-intent="false"
+					:arrow-direction="isActive === index ? 'up' : 'down'" @click.native="show(index)"></cell>
+				<p class="slide" :class="{ animate: isActive == index }">
+					<span style="display: block;text-align: left;">金额:{{item.amount}}</span>
+					<span style="display: block;text-align: left;">支付用途:{{item.memo}}</span>
+					<span style="display: block;text-align: left;">交易类型:{{item.type_str}}</span>
+				</p>
+			</group>
+		</div>
+		<!--<div style="margin-top: 165px;">-->
+		<!--<h5>45</h5>-->
+		<!--<div v-for="item in tmp">{{item.memo}}</div>-->
+		<!--</div>-->
+	</div>
 </template>
 
-<script>
-  import {Tab, TabItem, ButtonTab, ButtonTabItem, Sticky} from 'vux'
+<script type="es6">
+  import {Tab, TabItem, ButtonTab, ButtonTabItem, Sticky, Cell, Group} from 'vux'
   import axios from 'axios'
   import qs from 'qs'
   import config from '../config/config'
+  import selectTime from '../config/selectTime'
   export default {
     data () {
       return {
         userBalance: this.$store.state.user.userInfo.balance,
-        year: '2016',
-        month: '05',
+        year: selectTime.currentYear,
+        month: selectTime.currentMonth,
         endTime: '2016-11-30',
         startTime: '2016-11-01',
         isActive: -1, // show 显示隐藏
         index: -1, // show 显示隐藏
         balanceInfo: 1,
-        rechargeList: [],
-        consumptionList: [],
         tmp: []
       }
     },
     components: {
-      Tab, TabItem, ButtonTab, ButtonTabItem, Sticky
+      Tab, TabItem, ButtonTab, ButtonTabItem, Sticky, Cell, Group
     },
-    created () {
-      this.consoleIndex(1)
+    beforeCreate () {
+    },
+    ready () {
+      let balanceInfo = {id: config.userId, start_time: '2016-11-01', end_time: '2016-11-30'}
+      this.tmp = balanceList(1, balanceInfo)
     },
     methods: {
       show (e) {
@@ -79,190 +80,206 @@
         }
       },
       consoleIndex (index) {
-        this.balanceInfo = index
-        console.log(this.balanceInfo)
-        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]
-            }
+        let balanceInfo = {id: config.userId, start_time: '2016-11-01', end_time: '2016-11-30'}
+        this.tmp = balanceList(index, balanceInfo)
+        console.log(this.tmp)
+      },
+    }
+  }
+  // let balanceInfo = {id: config.userId, start_time: '2016-11-01', end_time: '2016-11-30'}
+  function balanceList (index, balanceInfo) {
+    let t = []
+	  let j = 0
+    axios.post('o2o/user/getUserBalanceLog', qs.stringify(balanceInfo)).then(res => {
+      if (index === 1) {
+        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 !== '下订单') {
+            t[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]
-            }
+        }
+      } else if (index === 2) {
+        // 消费
+	      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) {
+            t[j++] = res.data.message[i]
           }
-        })
-        if (index === 2) {
-          this.tmp = this.rechargeList
-        } else {
-          this.tmp = this.consumptionList
         }
       }
-    }
+    })
+    return t
   }
 </script>
 
 <style lang="less" scoped>
-  @height: 110px;
-  .new-time{
-    top: 0;
-    width: 100%;
-    color: white;
-    height: @height;
-    position: fixed;
-    padding: 25px 0;
-    z-index: 99;
-    padding-bottom: 0;
-    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: 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;
-    background-color: green;
-    border: 1px solid white;
-    .showHeight{
-      height:@height;
-      background-color: yellow;
-    }
-  }
+	@height: 110px;
+	.new-time {
+		top: 0;
+		width: 100%;
+		color: white;
+		height: @height;
+		position: fixed;
+		padding: 25px 0;
+		z-index: 99;
+		padding-bottom: 0;
+		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: 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;
+			background-color: green;
+			border: 1px solid white;
+			.showHeight {
+				height: @height;
+				background-color: yellow;
+			}
+		}*/
+	/*动画效果*/
+	.slide {
+		padding: 0 20px;
+		overflow: hidden;
+		max-height: 0;
+		transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
+	}
+	
+	.animate {
+		max-height: 9999px;
+		transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
+		transition-delay: 0s;
+	}
 </style>

www/vue/src/components/mine.vue

@@ -1,20 +1,22 @@
 <template>
-  <div class="mine">
-    <scroller>
-      <div class="user">
-        <!--<img class="head-background" :src="HeadBackground" alt="">-->
-        <img :src="userInfo.avatar" alt="">
-        <div>{{userInfo.user_name}}</div>
-      </div>
-      <!--选择-->
-      <group>
-        <cell :title="(item.name)" is-link v-for="item in userList" value-align="left" :link="{path: item.link}">
-          <img slot="icon" width="20" style="display:block;margin-right:5px;" :src="item.icon">
-        </cell>
-      </group>
-    </scroller>
-    <navigation></navigation>
-  </div>
+	<div class="mine">
+		<scroller>
+			<div class="user">
+				<!--<img class="head-background" :src="HeadBackground" alt="">-->
+				<img :src="userInfo.avatar" alt="">
+				<div>{{userInfo.user_name}}</div>
+			</div>
+			<!--选择-->
+			<group>
+				<div v-for="item in userList">
+					<cell :title="(item.name)" is-link value-align="left" :link="{path: item.link}">
+						<img slot="icon" width="20" style="display:block;margin-right:5px;" :src="item.icon">
+					</cell>
+				</div>
+			</group>
+		</scroller>
+		<navigation></navigation>
+	</div>
 </template>
 <script type="text/javascript">
   import {mapActions} from 'vuex'
@@ -73,74 +75,74 @@
   })
 </script>
 <style type="text/css" lang="less" scoped>
-  button {
-    font-size: 2rem;
-    border: 1px solid darkseagreen;
-  }
-
-  .user {
-    width: 100%;
-    position: relative;
-    background: url("http://odulvej8l.bkt.clouddn.com/mine-%E5%BA%95%E7%BA%B9.jpg") no-repeat center;
-    background-size: 100%;
-    padding: 5% 0;
-    margin-bottom: 1em;
-    img:nth-child(1) {
-      width: 25%;
-      display: block;
-      margin: 0 auto;
-      border-radius: 50%;
-    }
-    & > div {
-      color: white;
-      margin-top: 1em;
-    }
-  }
-
-  .mine-type {
-    width: 100%;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    & > div {
-      float: left;
-      width: 33.18%;
-      box-sizing: border-box;
-      text-align: center;
-      background: #ffffff;
-      &:nth-child(1) {
-        div {
-          border-left: 0;
-        }
-      }
-      &:nth-child(3) {
-        div {
-          border-right: 0;
-        }
-      }
-      & > div {
-        width: 100%;
-        border: 1px solid black;
-        padding: 0;
-        font-size: 18px;
-        line-height: 20px;
-      }
-      img {
-        display: block;
-        width: 50%;
-        margin: 15px auto;
-      }
-    }
-  }
-
-  @media (max-width: 320px) {
-    .user {
-      img:nth-child(2) {
-        /*margin-top: 1em;*/
-      }
-      & > div {
-        font-size: 15px;
-      }
-    }
-  }
+	button {
+		font-size: 2rem;
+		border: 1px solid darkseagreen;
+	}
+	
+	.user {
+		width: 100%;
+		position: relative;
+		background: url("http://odulvej8l.bkt.clouddn.com/mine-%E5%BA%95%E7%BA%B9.jpg") no-repeat center;
+		background-size: 100%;
+		padding: 5% 0;
+		margin-bottom: 1em;
+		img:nth-child(1) {
+			width: 25%;
+			display: block;
+			margin: 0 auto;
+			border-radius: 50%;
+		}
+		& > div {
+			color: white;
+			margin-top: 1em;
+		}
+	}
+	
+	.mine-type {
+		width: 100%;
+		display: flex;
+		-ms-flex-wrap: wrap;
+		flex-wrap: wrap;
+		& > div {
+			float: left;
+			width: 33.18%;
+			box-sizing: border-box;
+			text-align: center;
+			background: #ffffff;
+			&:nth-child(1) {
+				div {
+					border-left: 0;
+				}
+			}
+			&:nth-child(3) {
+				div {
+					border-right: 0;
+				}
+			}
+			& > div {
+				width: 100%;
+				border: 1px solid black;
+				padding: 0;
+				font-size: 18px;
+				line-height: 20px;
+			}
+			img {
+				display: block;
+				width: 50%;
+				margin: 15px auto;
+			}
+		}
+	}
+	
+	@media (max-width: 320px) {
+		.user {
+			img:nth-child(2) {
+				/*margin-top: 1em;*/
+			}
+			& > div {
+				font-size: 15px;
+			}
+		}
+	}
 </style>

www/vue/src/components/order.vue

@@ -62,7 +62,6 @@
 				<span  class="vux-confirm" @click="flush()">完成</span>
 			</x-dialog>
 		</div>
-
 		<navigation></navigation>
 	</div>
 

www/vue/src/config/selectTime.js

@@ -24,5 +24,7 @@ export default {
   startDate: startDate,
   endDate: endDate,
   value: value,
-  serviceHours: serviceHours
+  serviceHours: serviceHours,
+  currentYear: currentYear,
+  currentMonth: currentMonth
 }