php/www/vue/src/components/balanceLog.vue

<template>
	<div class="balance-log">
		<div class="new-time">
			<div>
				余额:<span class="user-balance">{{userBalance}}</span>元
			</div>
			<div>
				<div class="year" @click="time">
					<span class="year-span">{{year}}</span>年
				</div>
				<div class="month" @click="time">
					<span class="month-span">{{month}}</span>月
				</div>
			</div>
			<div class="btn-recharge" @click="recharge">充值</div>
			<button-tab>
				<button-tab-item selected @on-item-click="consoleIndex(1)">充值</button-tab-item>
				<button-tab-item :selected="!isSelected" @on-item-click="consoleIndex(2)">消费</button-tab-item>
			</button-tab>
		</div>
		<div style="margin-top: 165px;">
			<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 v-if="frontColor" style="display: block;text-align: left;color: green;">充值金额:{{item.amount}}</span>
						<span v-else style="display: block;text-align: left;color: red;" >消费金额:{{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>
		<!--<div style="margin-top: 165px;">-->
		<!--<h5>45</h5>-->
		<!--<div v-for="item in tmp">{{item.memo}}</div>-->
		<!--</div>-->
		<div class="o2o-modal modal-start" :class="{ modalEnd: moduleShow }">
			<div class="modal-box modal-start" :class="{ modalEnd: moduleShow }">
				<div class="select-the-month">选择月份</div>
				<div class="width-percent-50">
					<div class="btn-year-add" @click="modalTime(1)">+</div>
					<div class="modal-box-year">{{year}}</div>
					<div class="btn-year-sub" @click="modalTime(2)">-</div>
				</div>
				<div class="width-percent-50">
					<div class="btn-month-add" @click="modalTime(3)">+</div>
					<div class="modal-box-month">{{month}}</div>
					<div class="btn-month-sub" @click="modalTime(4)">-</div>
				</div>
				<div class="select">
					<div class="btn cancel" @click="cancel">取消</div>
					<div class="btn determine" @click="determine">确定</div>
				</div>
			</div>
		</div>
	</div>
</template>

<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: selectTime.currentYear,
        month: selectTime.currentMonth,
        isActive: -1, // show 显示隐藏
        index: -1, // show 显示隐藏
        tmp: [],
        tmpL: -1,
        timeStatus: {},
        moduleShow: false,
	      frontColor: 1,
        isSelected: true
      }
    },
    components: {
      Tab, TabItem, ButtonTab, ButtonTabItem, Sticky, Cell, Group
    },
    created () {
      this.consoleIndex(1)
    },
    methods: {
      time () {
        this.timeStatus = {
          year: this.year,
          month: this.month
        }
        this.moduleShow = true
      },
      cancel () {
        this.year = this.timeStatus.year
        this.month = this.timeStatus.month
        this.moduleShow = false
      },
      determine () {
        this.moduleShow = false
        this.consoleIndex(1)
        this.isSelected = true
        console.log(this.isSelected)
      },
      modalTime (index) {
        switch (index) {
          case 1:
            this.year++
            break
          case 2:
            this.year--
            break
          case 3:
            if (this.month > 0 && this.month < 12) {
              this.month++
            }
            break
          case 4:
            if (this.month > 1 && this.month < 12) {
              this.month--
            }
            break
        }
      },
      show (e) {
        if (this.index !== e) {
          this.isActive = e
          this.index = e
        } else {
          this.isActive = -1
          this.index = -1
        }
      },
      consoleIndex (index) {
        if (index === 1) {
          this.frontColor = 1
        } else {
          this.frontColor = 0
        }
				let balanceInfo = {
				 id: config.userId,
				 start_time: this.year + '-' + this.month + '-01',
				 end_time: this.year + '-' + this.month + '-30',
				 }
        //  let balanceInfo = {id: config.userId, start_time: '2016-11-01', end_time: '2016-11-30'}
        this.balanceList(index, balanceInfo)
      },
      recharge () {
        this.$router.push({path: '/recharge'})
      },
      balanceList (index, balanceInfo) {
        let t = []
        let j = 0
        axios.post('o2o/user/getUserBalanceLog', qs.stringify(balanceInfo)).then(res => {
          console.log(index)
          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]
              }
            }
          } 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]
              }
            }
          }
          this.tmp = t
        })
      }
    }
  }
  // let balanceInfo = {id: config.userId, start_time: '2016-11-01', end_time: '2016-11-30'}
</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;
		& > 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;
	}

	/*模态框*/
	.o2o-modal {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		display: block;
		z-index: 99999;
		position: fixed;
		background: rgba(51, 51, 51, 0.5);
		.modal-box {
			top: 30%;
			left: 7.5%;
			width: 85%;
			position: fixed;
			background-color: #fcfafa;
			.select-the-month {
				color: #212121;
				line-height: 1.8rem;
				padding-left: 0.9rem;
				border-bottom: 2px solid #000000;
				margin-bottom: 0.3rem;
			}
			.width-percent-50 {
				width: 50%;
				float: left;
				& > div:nth-child(1), & > div:nth-child(3) {
					width: 40px;
					height: 30px;
					margin: 0 auto;
					cursor: pointer;
					line-height: 30px;
					text-align: center;
					border-radius: 3px;
					background-color: white;
					border: 1px solid rgba(0, 0, 0, 0.1);
				}
				& > div:nth-child(2) {
					margin: 3px;
					font-size: 15px;
					text-align: center;
				}
			}
			.select {
				clear: both;
				width: 100%;
				margin-top: 5.3rem;
				display: flex;
				& > div {
					width: 50%;
					float: left;
					line-height: 30px;
					text-align: center;
					border: 1px solid rgba(0, 0, 0, 0.14);
					background: transparent;
					position: relative;
					display: inline-block;
					padding: 6px 8px 7px;
					margin-bottom: 0;
					font-size: 12px;
					font-weight: 400;
					color: #333;
					white-space: nowrap;
					vertical-align: top;
					cursor: pointer;
					border-radius: 3px;
				}
			}
		}
	}

	/*模态框动画*/
	.modal-start {
		overflow: hidden;
		max-height: 0;
		transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
	}

	.modalEnd {
		max-height: 9999px;
		transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
		transition-delay: .1s;
	}
</style>