2

www/webapp/o2o/css/balanceLog.css

@@ -3,9 +3,9 @@
 }
 .spa-page-balanceLog .balance-log{
   margin: 15px auto;
+  background-color: white;
   border-top:1px solid rgba(0,0,0,0.3);
   border-bottom:1px solid rgba(0,0,0,0.3);
-  background-color: white;
 }
 .spa-page-balanceLog div.balance-log:nth-child(1){
   margin-top: 0;
@@ -78,18 +78,18 @@
   transition: 500ms all;
 }
 .spa-page-balanceLog .width-percent-33 .month:after{
-  content: "";
-  position: absolute;
-  left: 55px;
-  top:  15px;
   width: 0;
   height: 0;
+  left: 55px;
+  top:  15px;
+  content: "";
+  position: absolute;
+  border-top: 5px solid white;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 5px solid white;
 }
 .spa-page-balanceLog .width-percent-33 .month:active{
-  color: red;
+
 }
 
 /*部分样式修改*/
@@ -102,9 +102,61 @@
 
 /*tab切换*/
 .spa-page-balanceLog .product-main-container{
+  top: 44px;
+  bottom: 0;
+  left: 0;
+  right: 0;
   position: absolute;
-    top: 44px;
-    bottom: 0;
-    left: 0;
-    right: 0;
+}
+
+/*模态框*/
+.spa-page-balanceLog .modal-box{
+  top: 35%;
+  left: 7.5%;
+  width: 85%;
+  position: fixed;
+  padding-top: 10px;
+  display: none;
+  background-color: white;
+  border-top: 1px solid rgba(0, 0, 0, 0.43);
+  border-left: 1px solid rgba(0, 0, 0, 0.43);
+  border-right: 1px solid rgba(0, 0, 0, 0.43);
+}
+
+
+.spa-page-balanceLog .modal-box .width-percent-50{
+  float: left;
+}
+
+.spa-page-balanceLog .modal-box .width-percent-50>div:nth-child(1),.width-percent-50>div:nth-child(3){
+  width: 20px;
+  height: 20px;
+  margin: 0 auto;
+  line-height: 17px;
+  text-align: center;
+  border-radius: 3px;
+  cursor: pointer;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.14);
+}
+
+.spa-page-balanceLog .modal-box .width-percent-50>div:nth-child(2){
+  text-align: center;
+  margin: 3px;
+  font-size: 15px;
+}
+
+/*选择*/
+.spa-page-balanceLog .modal-box .select{
+  clear: both;
+  width: 100%;
+  margin-top: 80px;
+}
+
+.spa-page-balanceLog .modal-box .select>div{
+  width: 50%;
+  float: left;
+  text-align: center;
+  line-height: 30px;
+  border: 1px solid rgba(0, 0, 0, 0.14);
 }

www/webapp/o2o/js/page/balanceLog.js

@@ -15,6 +15,17 @@ define(['$', 'template', 'IScroll', 'user', 'product', 'native', 'config', 'addr
     });
   }
 
+  function payCharge(a,b){
+    console.log($(a));
+    var c=parseInt($(a).text());
+    if(b){
+      c++;
+    }else {
+      c--;
+    }
+    $(a).text(c)
+  }
+
   var cachePageData = {}; //page内部的数据传递
 
   return {
@@ -41,29 +52,62 @@ define(['$', 'template', 'IScroll', 'user', 'product', 'native', 'config', 'addr
         $('.type-container', $view).hide();
         switch (type) {
           case 1:
-            $('#descContainer').show();
-            setTimeout(function () {
-              pageData.scroll = new IScroll('#productDescScroll');
-            }, 100);
-            break;
+          $('#descContainer').show();
+          setTimeout(function () {
+            pageData.scroll = new IScroll('#productDescScroll');
+          }, 100);
+          break;
           case 2:
-            $('#reviewContainer').show();
-            setTimeout(function () {
-              pageData.scroll = new IScroll('#orderContainer');
-            }, 100);
-            break;
+          $('#reviewContainer').show();
+          setTimeout(function () {
+            pageData.scroll = new IScroll('#orderContainer');
+          }, 100);
+          break;
         }
       }, $view);
 
+
+
       // 切换时间
-      $.newTouch('.month', function (event) {
+      $.newTouch('.time-year', function (event) {
         event.preventDefault();
-        // var year = $('.year').text();
-        // var month = $('.month').text();
-        console.log(year);
-        console.log(month);
+        if($('.modal-box').css('display')=='none'){
+          $('.modal-box').css('display','block')
+        }
+        $('.modal-box-year').text($('.year-span').text());
+        $('.modal-box-month').text($('.month-span').text());
       }, $view);
 
+      // 加减
+      $.newTouch('.btn-year-add',function(event){
+        event.preventDefault();
+        payCharge($('.modal-box-year'),true);
+      },$view);
+      $.newTouch('.btn-year-sub',function(event){
+        event.preventDefault();
+        payCharge($('.modal-box-year'),false);
+      },$view);
+      $.newTouch('.btn-month-add',function(event){
+        event.preventDefault();
+        payCharge($('.modal-box-month'),true);
+      },$view);
+      $.newTouch('.btn-month-sub',function(event){
+        event.preventDefault();
+        payCharge($('.modal-box-month'),false);
+      },$view);
+      // 取消
+      $.newTouch('.cancel',function(event){
+        event.preventDefault();
+        $('.modal-box').css('display','none')
+        console.log('测试');
+      },$view);
+      // 确定
+      $.newTouch('.determine',function(event){
+        event.preventDefault();
+        $('.modal-box').css('display','none')
+        console.log('测试');
+      },$view);
+
 
       dtd.resolve();
     },
@@ -81,7 +125,7 @@ define(['$', 'template', 'IScroll', 'user', 'product', 'native', 'config', 'addr
           var balanceLog = res.message;
           if (!cachePageData.massage) {
             if(month<10){
-              month='0'+(parseInt(month)+1);
+              month=(parseInt(month)+1);
             }
             var startTime = year+'-'+month+'-01';
             var endTime = year+'-'+month+'-30';

www/webapp/o2o/js/panel/actionSheet.js

@@ -1,7 +1,7 @@
 define(['$', 'template'], function ($, template) {
-	
+
 	var cachePanelData = {};
-	
+
 	return {
 		body: '',
 		init: function (pageData, dtd) {
@@ -18,7 +18,7 @@ define(['$', 'template'], function ($, template) {
 				}
 
 			}, $view);
-			
+
 			dtd.resolve();
 		},
 		beforeopen: function (pageData, dtd) {
@@ -52,12 +52,12 @@ define(['$', 'template'], function ($, template) {
 			$('.spa-page-bg', $view).transition({
 				opacity: 0
 			});
-			
+
 			/*setTimeout(function(){
 				$view.find('.action-sheet-body').css({'pointer-events' : true});
 			}, 100);*/
-			
+
 			dtd.resolve();
 		}
 	};
-})
+})

www/webapp/o2o/tpl/balanceLog/index.html

@@ -3,12 +3,12 @@
     <div class="box-container box box-vertical">
       <div id="balanceLogScroll" class="scroll-container box-flex-1">
         <div class="new-time">
-          <div class="width-percent-33">
+          <div class="width-percent-33 time-year">
             <div class="year">
-              {{year}}年
+              <span class="year-span">{{year}}</span>年
             </div>
             <div class="month">
-              {{month}}月
+              <span class="month-span">{{month}}</span>月
             </div>
           </div>
           <div class="width-percent-33 expenditure">
@@ -60,6 +60,24 @@
             </div>
           </div>
 
+          <!-- 模态框 -->
+          <div class="modal-box">
+              <div class="width-percent-50">
+                <div class="btn-year-add">+</div>
+                <div class="modal-box-year"></div>
+                <div class="btn-year-sub">-</div>
+              </div>
+              <div class="width-percent-50">
+                <div class="btn-month-add">+</div>
+                <div class="modal-box-month"></div>
+                <div class="btn-month-sub">-</div>
+              </div>
+              <div class="select">
+                <div class="btn cancel">取消</div>
+                <div class="btn determine">确定</div>
+              </div>
+          </div>
+
         </div>