账单统计结束

pages/billing_Statistics/index.js

@@ -1,26 +1,43 @@
-const date = new Date()
-const years = []
-const months = []
-const days = []
- 
-for (let i = 1990; i <= date.getFullYear(); i++) {
-  years.push(i)
-}
- 
-for (let i = 1; i <= 12; i++) {
-  months.push(i)
-}
- 
-for (let i = 1; i <= 31; i++) {
-  days.push(i)
-}
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
- 
+    date: '',
+    show: false,
+    isDisplay:true,
+  },
+  //点击图标 日历显示
+  onDisplay() {
+    this.setData({
+      show: true,
+      isDisplay:!this.data.isDisplay
+    });
+  },
+  //打开日期再次显示
+  dateShow(){
+    this.setData({
+      show:true,
+      isDisplay:false
+    })
+  },
+  onClose() {
+    this.setData({
+      show: false,
+      isDisplay:!this.data.isDisplay
+    });
+  },
+  formatDate(date) {
+    date = new Date(date);
+    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+  },
+  onConfirm(event) {
+    const [start, end] = event.detail;
+    this.setData({
+      show: false,
+      date: `${this.formatDate(start)} 至 ${this.formatDate(end)}`,
+    });
   },
   onLoad(options) {
 

pages/billing_Statistics/index.json

@@ -5,6 +5,7 @@
     "van-col": "@vant/weapp/col",
     "van-datetime-picker": "@vant/weapp/datetime-picker",
     "van-popup": "@vant/weapp/popup",
-    "van-calendar":"@vant/weapp/calendar"
+    "van-calendar":"@vant/weapp/calendar",
+    "van-cell":"@vant/weapp/cell" 
   }
 }

pages/billing_Statistics/index.wxml

@@ -32,7 +32,8 @@
     <view class="bill_bottom">
       <view class="bill_bottom_header">
         <text>累计账单</text>
-        <van-icon bindtap="onClose" name="calendar-o" />
+        <van-icon wx:if="{{isDisplay}}" bind:click="onDisplay" name="calendar-o" />
+        <text style="color:orange;" bindtap="dateShow" wx:if="{{!isDisplay}}">{{date}}</text>
       </view>
       <view class="bill_bottom_content">
         <view class="bill_bottom_contentList">
@@ -65,6 +66,7 @@
       </view>
     </view>
   </view>
-</view>
 
+</view>
 
+<van-calendar  show="{{ show }}" type="range" bind:close="onClose" bind:confirm="onConfirm" />