我的页面,首页来款项目

components/dateMonth/dateMonth.js

@@ -10,7 +10,31 @@ for (let i = 1; i <= 12; i++) {
   months.push(i)
 }
 
-Page({
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 是否弹出显示
+    visible: {
+      type: Boolean,
+      value: false
+    },
+    //点击外部的遮罩层是否允许关闭
+    outClickCanClose: {
+      type: Boolean,
+      value: false
+    },
+    // 模式，年或者月，默认只有年
+    mode: {
+      type: String,
+      value: 'year'
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
   data: {
     years: years,
     year: date.getFullYear(),
@@ -18,12 +42,39 @@ Page({
     month: 2,
     value: [9999, 1, 1],
   },
-  bindChange: function (e) {
-    const val = e.detail.value
-    this.setData({
-      year: this.data.years[val[0]],
-      month: this.data.months[val[1]],
-    })
-    console.log(this.data)
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    closePopup() {
+      this.triggerEvent("close", {
+        visible: this.data.visible
+      })
+    },
+    outClick(){
+      if (this.data.outClickCanClose){
+        this.triggerEvent("close", {
+          visible: this.data.visible
+        })
+      }
+    },
+    // 日期改变
+    bindChange: function (e) {
+      const val = e.detail.value
+      this.setData({
+        year: this.data.years[val[0]],
+        month: this.data.months[val[1]],
+      })
+    },
+    ok(e){
+      let value = ''
+      if(this.properties.mode === 'month'){
+        value = this.data.year + '-' + this.data.month
+      }else {
+        value = this.data.year
+      }
+      this.triggerEvent("ok", value)
+    }
   }
-})
+})

components/dateMonth/dateMonth.wxml

@@ -1,12 +1,12 @@
 <view class="i-modal-mask {{ visible ? 'i-modal-mask-show' : '' }}" catchtap='outClick'>
   <view class="box">
     <view class="title">{{year}}年{{month}}月</view>
-    <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}"
+    <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindtap="ok"
       bindchange="bindChange">
       <picker-view-column>
         <view wx:for="{{years}}" class="item">{{item}}年</view>
       </picker-view-column>
-      <picker-view-column>
+      <picker-view-column wx:if="{{mode === 'month'}}">
         <view wx:for="{{months}}" class="item">{{item}}月</view>
       </picker-view-column>
     </picker-view>

components/dateMonth/dateMonth.wxss

@@ -1,5 +1,30 @@
 .box{
-  height: 300px;
+  width: 85%;
+  height: 360px;
+  background-color: #fff;
+}
+.i-modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.i-modal-mask-show {
+  opacity: 1;
+  visibility: visible;
 }
 .title{
   width: 100%;