收支明细界面0.4

pages/cashFlow/cashFlow.vue

@@ -3,22 +3,37 @@
     :style="{
       background: `linear-gradient(to bottom, #ff803a 0, #ff803a ${getNavBarHeight() * 2}px, transparent ${getNavBarHeight() * 2}px, transparent 100%)`,
     }"
-    class="agents-page"
+    class="page"
   >
     <!-- 头部区域 -->
     <custom-nav-bar3 title="收支明细"></custom-nav-bar3>
     <view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
     <view :style="{ height: getNavBarHeight() + 'px' }" class="header">
       <view class="all-type">
-        <image class="all-type-img"></image>
+        <image :src="commonEnum.ALL_TYPE" class="all-type-img"></image>
       </view>
       <view class="cash-flow">
-        <view class="date"></view>
+        <view class="date">
+          <view class="uni-list-cell">
+            <view class="uni-list-cell-db">
+              <picker
+                :end="endDate"
+                :start="startDate"
+                :value="date"
+                mode="date"
+                @change="bindDateChange"
+              >
+                <view class="uni-input">{{ date }}</view>
+              </picker>
+            </view>
+          </view>
+        </view>
+        <view class="cash-flow-detail"></view>
       </view>
     </view>
 
     <!-- 主要内容区域 -->
-    <view class="main-content">666</view>
+    <view class="body">666</view>
   </view>
 </template>
 
@@ -32,8 +47,12 @@ export default {
   name: 'AgentsPage',
 
   data() {
+    const currentDate = this.getDate({
+      format: true,
+    })
     return {
       getNavBarHeight,
+      date: currentDate,
     }
   },
   computed: {
@@ -46,32 +65,72 @@ export default {
   },
   methods: {
     // 保存分享海报
+    bindDateChange: function (e) {
+      this.date = e.detail.value
+    },
+    getDate(type) {
+      const date = new Date()
+      let year = date.getFullYear()
+      let month = date.getMonth() + 1
+      let day = date.getDate()
+
+      if (type === 'start') {
+        year = year - 10
+      } else if (type === 'end') {
+        year = year + 10
+      }
+      month = month > 9 ? month : '0' + month
+      day = day > 9 ? day : '0' + day
+      return `${year}-${month}-${day}`
+    },
   },
 }
 </script>
 <style lang="scss" scoped>
-.agents-page {
+.page {
   position: relative;
   height: 100vh;
 }
 
 .header {
+  //background: #13c622;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-left: 40rpx;
+
+  .all-type {
+    &-img {
+      width: 138px;
+      height: 40px;
+    }
+  }
+
+  .cash-flow {
+    display: flex;
+
+    .date {
+    }
+
+    .cash-flow-detail {
+    }
+  }
 }
 
 // 主要内容区域
-.main-content {
+.body {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background: #ffffff;
+  //background: #ca3232;
   border-radius: 40rpx;
   margin: 0 30rpx;
   padding: 40rpx;
 }
 
 view {
-  border: #16ff00 1px solid;
+  // border: #16ff00 1px solid;
 }
 </style>