签到

src/project/qianxinan/AppSignIn/AppSignIn.vue

@@ -3,66 +3,18 @@
     <div class="title">签到记录</div>
 
     <div class="sign_list">
-      <div class="sign_card">
+      <div class="sign_card" v-for="item in signlist" :key="item.id">
-        <div class="sign_left">08:26</div>
+        <div class="sign_left">{{ item.createTime.substring(0,5) }}</div>
         <div class="sign_right">
-          <div class="time">2023-01-03</div>
+          <div class="time">{{ item.createDate }}</div>
-          <div class="tips">签到成功</div>
-        </div>
-      </div>
-
-      <div class="sign_card">
-        <div class="sign_left">08:26</div>
-        <div class="sign_right">
-          <div class="time">2023-01-03</div>
-          <div class="tips">签到成功</div>
-        </div>
-      </div>
-
-      <div class="sign_card">
-        <div class="sign_left">08:26</div>
-        <div class="sign_right">
-          <div class="time">2023-01-03</div>
-          <div class="tips">签到成功</div>
-        </div>
-      </div>
-
-      <div class="sign_card">
-        <div class="sign_left">08:26</div>
-        <div class="sign_right">
-          <div class="time">2023-01-03</div>
-          <div class="tips">签到成功</div>
-        </div>
-      </div>
-
-      <div class="sign_card">
-        <div class="sign_left">08:26</div>
-        <div class="sign_right">
-          <div class="time">2023-01-03</div>
-          <div class="tips">签到成功</div>
-        </div>
-      </div>
-
-      <div class="sign_card">
-        <div class="sign_left">08:26</div>
-        <div class="sign_right">
-          <div class="time">2023-01-03</div>
-          <div class="tips">签到成功</div>
-        </div>
-      </div>
-
-      <div class="sign_card">
-        <div class="sign_left">08:26</div>
-        <div class="sign_right">
-          <div class="time">2023-01-03</div>
           <div class="tips">签到成功</div>
         </div>
       </div>
     </div>
 
     <div class="sign_btn">
-      <div class="btn">
+      <div class="btn" @click="signIn" :class="status==0? '': 'active'">
-        <div>签到</div>
+        <div><span v-if="status==1">已</span>签到</div>
         <div>{{ time }}</div>
       </div>
     </div>
@@ -71,17 +23,59 @@
 
 <script>
 import dayjs from "dayjs"
+import { mapState } from "vuex"
+import { set } from 'vue'
 export default {
   appName: "签到",
   data() {
     return {
       time: '',
+      status: 0, // 签到状态：0、未签到；1、已签到
+      signlist: [],
+      current: 1,
     }
   },
+  computed: {
+    ...mapState(['user'])
+  },
   methods: {
+    getList() {
+      this.$http.post(`/api/appwechatsigninfo/listByWxUserId?current=${this.current}`).then(res=> {
+        if(res?.data?.records) {
+          this.signlist = res.data.records
+        }
+      })
+    },
+    // 今天的签到状态
+    getToday() {
+      this.$http.post(`/api/appwechatsigninfo/queryNowDetail`).then(res=> {
+        if(res?.data) {
+          this.status = res.data.status
+        }
+      })
+    },
+    // 签到
+    signIn() {
+      if(this.status == 1) return
+
+      this.$http.post(`/api/appwechatsigninfo/sign`).then(res=> {
+        if(res.code == 0) {
+          this.$confirm('签到成功！').then(() => {
+            this.getToday()
+            this.getList()
+          })
+        }
+      }).finally(err=> console.log(err))
+    }
+  },
+  onReachBottom() {
+    this.current++
+    this.getList()
   },
   onShow() {
     document.title = '签到'
+    this.getToday()
+    this.getList()
     setInterval(() => {
       this.time = dayjs(new Date()).format('HH:mm:ss')
     }, 1000)
@@ -160,9 +154,7 @@ export default {
       width: 240px;
       height: 240px;
       text-align: center;
-      // background-image: linear-gradient(180deg, #75BDFF 0%, #4783FF 100%);
+      background-image: linear-gradient(180deg, #75BDFF 0%, #4783FF 100%);
-      background-image: linear-gradient(180deg, #bcff75 0%, hsl(132, 87%, 30%) 100%);
-
       border: 8px solid #FFFFFF;
       box-shadow: 0 8px 12px -4px rgba(133,196,255,0.65);
       border-radius: 50%;
@@ -180,6 +172,10 @@ export default {
         font-size: 28px;
       }
     }
-  }
+
+    .active {
+      background-image: linear-gradient(180deg, #bcff75 0%, hsl(132, 87%, 30%) 100%);
+    }
+}
 }
 </style>