modal

www/vue/src/components/balanceLog.vue

@@ -5,10 +5,10 @@
 				余额:<span class="user-balance">{{userBalance}}</span>元
 			</div>
 			<div>
-				<div class="year">
+				<div class="year" @click="time">
 					<span class="year-span">{{year}}</span>年
 				</div>
-				<div class="month">
+				<div class="month" @click="time">
 					<span class="month-span">{{month}}</span>月
 				</div>
 			</div>
@@ -37,6 +37,25 @@
 		<!--<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>
 
@@ -52,12 +71,12 @@
         userBalance: this.$store.state.user.userInfo.balance,
         year: selectTime.currentYear,
         month: selectTime.currentMonth,
-        endTime: '2016-11-30',
-        startTime: '2016-11-01',
         isActive: -1, // show 显示隐藏
         index: -1, // show 显示隐藏
-        balanceInfo: 1,
-        tmp: []
+        tmp: [],
+        tmpL: -1,
+        timeStatus: {},
+        moduleShow: false
       }
     },
     components: {
@@ -65,11 +84,42 @@
     },
     beforeCreate () {
     },
-    ready () {
-      let balanceInfo = {id: config.userId, start_time: '2016-11-01', end_time: '2016-11-30'}
-      this.tmp = balanceList(1, balanceInfo)
-    },
     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
+      },
+      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
@@ -80,16 +130,23 @@
         }
       },
       consoleIndex (index) {
-        let balanceInfo = {id: config.userId, start_time: '2016-11-01', end_time: '2016-11-30'}
-        this.tmp = balanceList(index, balanceInfo)
+        if (this.tmpL === -1) {
+          let balanceInfo = {
+            id: config.userId,
+            start_time: this.year + '-' + this.month + '-01',
+            end_time: this.year + '-' + this.month + '-30',
+          }
+          this.tmp = balanceList(index, balanceInfo)
+          this.tmpL = 1
+        }
         console.log(this.tmp)
       },
     }
   }
   // let balanceInfo = {id: config.userId, start_time: '2016-11-01', end_time: '2016-11-30'}
-  function balanceList (index, balanceInfo) {
+  function balanceList(index, balanceInfo) {
     let t = []
-	  let j = 0
+    let j = 0
     axios.post('o2o/user/getUserBalanceLog', qs.stringify(balanceInfo)).then(res => {
       if (index === 1) {
         j = 0
@@ -100,7 +157,7 @@
         }
       } else if (index === 2) {
         // 消费
-	      j = 0
+        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]
@@ -108,6 +165,7 @@
         }
       }
     })
+    console.log(t)
     return t
   }
 </script>
@@ -199,10 +257,9 @@
 	
 	.vux-button-group {
 		margin-top: 66px;
-	}
-	
-	.vux-button-group > a.vux-button-group-current {
-		background-color: #927603 !important;
+		& > a.vux-button-group-current {
+			background-color: #927603 !important;
+		}
 	}
 	
 	.recharge-details {
@@ -282,4 +339,89 @@
 		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>