乡村相册 考勤配置

src/saas/AppCountryAlbum/Attendance.vue

@@ -3,16 +3,18 @@
     <div class="Attendance-top">
       <div>
         <div class="left">
-          <h2>09</h2>
+          <h2>{{ DD }}</h2>
           <div class="left-wrapper__right">
-            <h3>2022年2月</h3>
+            <h3>{{ yyyyMM }}</h3>
             <p>日·数据统计</p>
           </div>
         </div>
-        <div class="right">
-          <image src="./images/qiehuan.png" />
-          <span>切换日期</span>
-        </div>
+        <picker mode="date" :value="date" @change="onDateChange">
+          <div class="right">
+            <image src="./images/qiehuan.png" />
+            <span>切换日期</span>
+          </div>
+        </picker>
       </div>
     </div>
     <div class="info">
@@ -22,7 +24,7 @@
           <span @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">已出勤 10</span>
           <span @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">未出勤 10</span>
         </div>
-        <div class="right" @click="linkTo('/saas/AppCountryAlbum/AttendanceSetting')">考勤设置</div>
+        <div class="right" @click="linkTo('./AttendanceSetting')">考勤设置</div>
       </div>
       <div class="info-table">
         <div class="table-header">
@@ -53,12 +55,34 @@
 
     data () {
       return {
-        currIndex: 0
+        photoTotal: {},
+        date: '',
+        currIndex: 0,
+        list: []
       }
     },
 
-    onLoad () {
+    computed: {
+      yyyyMM () {
+        if (this.date) {
+          return this.date.substr(0, 8)
+        }
 
+        return ''
+      },
+
+      DD () {
+        if (this.date) {
+          return this.date.substr(8)
+        }
+
+        return ''
+      }
+    },
+
+    created () {
+      this.date = this.$dayjs(new Date).format('YYYY年MM月DD')
+      this.getList()
     },
 
     methods: {
@@ -66,6 +90,23 @@
         uni.navigateTo({
           url
         })
+      },
+
+      onDateChange (e) {
+        const values = e.detail.value.split('-')
+        this.date = `${values[0]}年${values[1]}月${values[2]}`
+
+        this.$nextTick(() => {
+          this.getList()
+        })
+      },
+
+      getList () {
+        this.$http.post(`/api/appattendancerecord/userphotosort?queryTime=${this.date}`).then(res => {
+          if (res.code === 0) {
+            this.list = res.data
+          }
+        })
       }
     }
   }
@@ -247,4 +288,4 @@
       }
     }
   }
-</style>
+</style>