Me

src/App.vue

@@ -5,16 +5,10 @@
 </template>
 
 <script>
-import { UserLogin } from './util/api'
 import { mapState } from 'vuex'
 
-import Tabber from './views/Tabber.vue'
-
 export default {
   name: 'App',
-  components: {
-    Tabber
-  },
   computed: {
     ...mapState(['LOADING'])
   },

src/components/Avatar/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <img class="avatar" :src="src" alt="">
+</template>
+
+<script>
+
+const defaultImg = require('@/assets/userImag/userImag.jpg')
+
+export default {
+  name: 'Avatar',
+  props: {
+    src: {
+      type: String,
+      default: defaultImg
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.avatar {
+  display: inline-block;
+  width: 78px;
+  height: 78px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.16);
+}
+</style>

src/util/api.js

@@ -87,7 +87,7 @@ export const getCourseInfof = (id) => request(`/api/wx/course/${id}`, { method:
  * @returns 
  * 
  */
-export const getSignInInfof = (id) => request(`/api/wx/sign-in/c54e0d34b35e2b93e1dd45e87724d9bd`, { method: 'get' })
+export const getSignInInfo = (id) => request(`/api/wx/sign-in/${id}`, { method: 'get' })
 
 
 
@@ -97,7 +97,7 @@ export const getSignInInfof = (id) => request(`/api/wx/sign-in/c54e0d34b35e2b93e
  * @returns 
  * 
  */
-export const getSignIn = (id) => request(`/api/wx/sign-in/c54e0d34b35e2b93e1dd45e87724d9bd`, { method: 'post' })
+export const postSignIn = (id) => request(`/api/wx/sign-in/${id}`, { method: 'post' })
 
 
 

src/util/formattingData.js

@@ -51,24 +51,3 @@ export function parseTime (time, pattern) {
 }
 
 
-export function SignInTime (time, pattern) {
-  var date = new Date()
-  // var year = date.getFullYear()
-  // var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
-  // var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
-  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
-  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
-  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
-  let week = date.getDay() // 星期
-  let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-  // 拼接 时间格式处理
-  return hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
-
-  //  * 在日期格式中，月份是从0开始的
-  //  * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
-
-}
-
-
-
-

src/util/query.js

@@ -1,10 +0,0 @@
-// 获取url参数
-export default function getUrlKey (name) {
-  return (
-    decodeURIComponent(
-      (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(
-        location.href
-      ) || [, ''])[1].replace(/\+/g, '%20')
-    ) || null
-  )
-}

src/views/ClassInfo.vue

@@ -31,7 +31,7 @@
 
 <script>
 import { getCourseInfof, addCollection, deleteCollection } from '@/util/api'
-import { parseTime, SignInTime } from '@/util/formattingData'
+import { parseTime } from '@/util/formattingData'
 
 export default {
   components: {

src/views/Course.vue

@@ -1,25 +1,7 @@
 <template>
   <div class="Course-box">
-    <div class="banner-box-top mglr-10">
-      <van-swipe
-        class="banner-swipe"
-        :autoplay="3000"
-        @change="i => currentItem = i"
-        :show-indicators="false"
-      >
-        <van-swipe-item v-for="(image, index) in HomeBannerImages" :key="index">
-          <ration-div :ratio="0.6">
-            <van-image width="100%" height="100%" :src="image.thumb" />
-          </ration-div>
-        </van-swipe-item>
-      </van-swipe>
-      <div class="custom-indicator">
-        <span
-          v-for="(_, index) in HomeBannerImages"
-          :key="index"
-          :class="{'active': currentItem === index }"
-        ></span>
-      </div>
+    <div class="banner-box-top">
+      <banner-swipe :list="HomeBannerImages" />
     </div>
 
     <!-- list -->
@@ -46,13 +28,12 @@ import { getBanner, getCourse } from '@/util/api'
 
 export default {
   components: {
-    RationDiv: () => import('@/components/RatioDiv/index.vue'),
+    BannerSwipe: () => import('./components/BannerSwipe.vue'),
     CourseCard: () => import('./components/CourseCard.vue')
   },
 
   data() {
     return {
-      currentItem: -1,
       icon: require('@/assets/icon/courseIcon.svg'),
       loading: false,
       finished: true,
@@ -84,38 +65,12 @@ export default {
     },
     onBanner() {
       getBanner('Training').then((e) => {
-        this.HomeBannerImages = e.records
+        this.HomeBannerImages = (e.records || []).map((x) => x.thumb)
 
         console.log(e)
       })
     },
-    onLoad() {
-      // 异步更新数据
-      let params = {
-        // type: this.selectedType,
-        index: this.currentPage, //页数
-        size: this.pageSize //每页个数
-      }
-      // xxxxxxx(params).then((res) => {
-      //   console.log(res)
-      //   this.dataTotal = res.total
-      //   //进行判断
-      //   if (this.dataTotal <= this.pageSize) {
-      //     this.Array = res.data.list
-      //     console.log(this.Array)
-      //   } else {
-      //     this.currentPage++
-      //     let arr = res.data.data.list
-      //     this.Array = this.Array.concat(arr)
-      //   }
-      //   // 加载状态结束
-      //   this.loading = false
-      //   // 数据全部加载完成
-      //   if (this.Array.length >= this.dataTotal) {
-      //     this.finished = true //结束，显示我也是有底线的
-      //   }
-      // })
-    }
+    onLoad() {}
   }
 }
 </script>
@@ -130,16 +85,6 @@ export default {
   width: 100vw;
   padding-top: 10px;
 
-  .banner-box-top {
-    position: relative;
-    width: calc(100% - 20px);
-
-    .banner-swipe {
-      border-radius: 6px;
-      box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.12);
-    }
-  }
-
   .course-list {
     margin-top: 10vw;
   }

src/views/StrongPhoto.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="Photo-box">
-    <van-swipe :autoplay="3000">
-      <van-swipe-item v-for="(image, index) in photoBannerImages" :key="index">
-        <van-image width="100%" height="57vw" :src="image.thumb" />
-      </van-swipe-item>
-    </van-swipe>
+    <banner-swipe :list="photoBannerImages" />
     <div style="display: flex; aline-itme:center;margin-top: 30px;position:relative ">
       <!-- <div :class="`${classStyle?'Zhedie-box Donghua':'Zhedie-box'}`"> -->
       <div :class="{'Zhedie-box': true, 'expand': classStyle}">
@@ -46,12 +42,15 @@
 </template>
 
 <script>
-import { getPhotoSotr, getPhotos } from '../util/api'
-import { parseTime, SignInTime } from '../util/formattingData'
+import { getPhotoSotr, getPhotos } from '@/util/api'
+import { parseTime } from '@/util/formattingData'
 
-import { getBanner } from '../util/api'
+import { getBanner } from '@/util/api'
 
 export default {
+  components: {
+    BannerSwipe: () => import('./components/BannerSwipe.vue'),
+  },
   data() {
     return {
       classStyle: false,
@@ -145,7 +144,7 @@ export default {
     },
     onBanner() {
       getBanner('Wonderful').then((e) => {
-        this.photoBannerImages = e.records
+        this.photoBannerImages = (e.records || []).map(x => x.thumb)
         // console.log(e)
       })
     }
@@ -158,12 +157,8 @@ export default {
   width: 100vw;
   height: 100%;
   background-color: #fff;
-  .van-swipe {
-    width: 95%;
-    border-radius: 10px;
-    margin: 10px auto;
-    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.2);
-  }
+  padding-top: 10px;
+
   .Zhedie-box {
     padding: 0 4vw;
     overflow: hidden;

src/views/Tabber.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="tabbar">
-    <van-tabbar class="van-tabbar" v-model="active" @change="onChange">
-      <van-tabbar-item icon="column">培训通知</van-tabbar-item>
-      <van-tabbar-item icon="photo">精彩集锦</van-tabbar-item>
-      <van-tabbar-item icon="manager">个人中心</van-tabbar-item>
-    </van-tabbar>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Tabber',
-  props: {
-    // active: Number
-  },
-  data() {
-    return {
-      // tabbarTempValue: this.active,
-      active: 0
-    }
-  },
-  created() {
-    //由于 vant 标签栏路由模式，无法自动加载页面，所以这里需要初始化
-    // console.log(this.$route) //打印当前路由属性
-    this.active = 0
-
-    switch (this.$route.name) {
-      case 'Course':
-        this.active = 0
-        break
-      case 'StrongPhoto':
-        this.active = 1
-        break
-      case 'UserCenter':
-        this.active = 2
-        break
-      default:
-        break
-    }
-  },
-  methods: {
-    onChange(index) {
-      // console.log(index)
-      switch (index) {
-        case 0:
-          this.$router.push('/')
-
-          break
-        case 1:
-          this.$router.push('/StrongPhoto')
-
-          break
-        case 2:
-          this.$router.push('/UserCenter')
-
-          break
-        default:
-          break
-      }
-      // const routerArray = ['/Course', '/StrongPhoto', '/UserCenter']
-      // this.$router.push(routerArray[index])
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.tabbar {
-  .van-tabbar {
-    // padding-bottom: 2em;
-  }
-}
-</style>

src/views/UserCenter.vue

@@ -2,7 +2,7 @@
   <div class="User-box flex flex-column">
     <div class="user-card flex-0">
       <div class="profile flex" v-if="divShow">
-        <img class="flex-0" src="@/assets/userImag/userImag.jpg" />
+        <avatar />
         <div class="info-name flex-1">
           <div class="title">
             {{person.name}}
@@ -40,6 +40,9 @@
 import { mapState } from 'vuex'
 // import {SetUser} from '../util/api'
 export default {
+  components: {
+    avatar: () => import('@/components/Avatar/index.vue')
+  },
   data() {
     return {
       menus: [
@@ -92,14 +95,6 @@ export default {
 
     .profile {
       width: 100%;
-      
-      > img {
-        width: 70px;
-        height: 70px;
-        border-radius: 50%;
-        position: relative;
-        box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.2);
-      }
       .info-name {
         margin-left: 1em;
         position: relative;

src/views/components/BannerSwipe.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="banner-swipe-box" >
+    <van-swipe class="banner-swipe" :autoplay="3000" @change="i => current = i" :show-indicators="false">
+      <van-swipe-item v-for="image in list" :key="image">
+        <ration-div :ratio="0.6">
+          <van-image width="100%" height="100%" :src="image" />
+        </ration-div>
+      </van-swipe-item>
+    </van-swipe>
+    <div class="custom-indicator">
+      <span v-for="(image, index) in list" :key="image" :class="{'active': current === index }"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BannerSwipe',
+  components: {
+    RationDiv: () => import('@/components/RatioDiv/index.vue'),
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      current: 0,
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.banner-swipe-box {
+  position: relative;
+  margin-left: 10px;
+  margin-right: 10px;
+  width: calc(100% - 20px);
+
+  .banner-swipe {
+    border-radius: 6px;
+    box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.12);
+  }
+
+  .custom-indicator {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    left: 0;
+    right: 0;
+    z-index: 10;
+
+    & > span {
+      display: inline-block;
+      width: 1em;
+      height: 2px;
+      background: rgba(0, 0, 0, 0.2);
+
+      & + span {
+        margin-left: .2em;
+      }
+    }
+    .active {
+      background: rgba(0, 0, 0, .65);
+    }
+  }
+}
+</style>

src/views/signIn.vue

@@ -1,92 +1,144 @@
 <template>
   <div class="Clockln-box">
     <div class="box1">
-      <img src="../assets/userImag/userImag.jpg" alt />
-      <div class="box1-title">{{title}}</div>
+      <div class="box-item box1-avatar">
+        <avatar />
+      </div>
+      <div class="box-item box1-title">{{signInfo.name}}</div>
       <div class="box1-time">签到结束时间</div>
-      <div class="box1-time">{{parseTime(endTime, '{y}年{m}月{d}日 {h}:{i}')}}</div>
+      <div class="box1-time">{{endTimeStr}}</div>
     </div>
-    <div :class="{'myDIV':true, 'disabled':ok}" @click="goSign">
-      <div>上课打卡</div>
-      <span>{{SignInTime(nowTime)}}</span>
+    <div :class="{ 'myDIV': true }" @click="goSign">
+      <div>{{signText}}</div>
+      <span>{{currentTimeStr}}</span>
     </div>
 
-    <img src="../assets/basemap.png" alt width="100%" />
+    <img src="~@/assets/basemap.png" alt width="100%" />
   </div>
 </template>
 
 <script>
-import { getSignInInfof, getSignIn } from '../util/api'
-import query from '../util/query'
-import { parseTime, SignInTime } from '../util/formattingData'
+import { getSignInInfo, postSignIn } from '@/util/api'
+import { parseTime } from '@/util/formattingData'
+import { mapState } from 'vuex'
+
 export default {
+  components: {
+    avatar: () => import('@/components/Avatar/index.vue')
+  },
   data() {
     return {
-      signId: '',
-      phone: '',
-      ok: false,
-      endTime: '',
-      title: '',
-      nowTime: new Date()
+      signInfo: {},
+      canSign: false,
+      noSignErr: '',
+      shortErr: '',
+      ticker: null,
+      now: new Date()
+    }
+  },
+  computed: {
+    ...mapState({
+      person: s => s.user
+    }),
+    endTimeStr() {
+      if (!this.signInfo.endTime) return '未知';
+
+      return parseTime(this.signInfo.endTime, '{y}年{m}月{d}日 {h}:{i}')
+    },
+    currentTimeStr() {
+      return parseTime(this.now, '{h}:{i}:{s}')
+    },
+    signText() {
+      return this.canSign ? '签 到' : this.shortErr
+    }
+  },
+  watch: {
+    '$route.query.signId': {
+      handler(v) {
+        if (v) {
+          this.onLoadSinInfo(v)
+        }
+      },
+      immediate: true
     }
   },
+  created() {
+    this.ticker = setInterval(() => {
+      this.now = new Date()
+    }, 1000)
+  },
   mounted() {
-    this.signId = query('signId')
-    this.phone = this.$store.state.user.phone
-
-    this.onLoadSinInO()
-    let that = this
-    this.timer = setInterval(function () {
-      that.nowTime = new Date().toLocaleString()
-    })
+    const {phone} = this.person || {}
+
+    if (!phone) {
+      this.$dialog.alert({
+        message: '请先维护您的个人信息',
+      }).then(() => {
+        this.$router.push({ name: 'SetUser' })
+      })
+    }
   },
-  //离开当前页面后执行
-  destroyed: function () {
-    // 销毁时清除计时器
-    this.beforeDestroy()
+  beforeDestroy() {
+    if (this.ticker) {
+      clearInterval(this.ticker)
+    }
   },
+
   methods: {
-    SignInTime,
     parseTime,
-    // 销毁时清除计时器
-    beforeDestroy: function () {
-      console.log('销毁时清除计时器')
-      if (this.timer) {
-        clearInterval(this.timer)
-      }
-    },
     //首先判断他有没有资格
     //  this.$toast.success('修改成功！')
-    onLoadSinInO() {
-      getSignInInfof().then((e) => {
-        const { canSign, endTime, startTime, isSigned, name } = e
-        this.endTime = endTime
-        this.title = name
-
-        let starDtat = new Date(startTime) - new Date()
-        let endDtat = new Date(endTime) - new Date()
-
-        if (this.phone) {
-          if (canSign) {
-            if (starDtat < 0) {
-              if (endDtat < 0) {
-                if (!isSigned) {
-                  this.ok = true
-                } else {
-                  this.$toast.fail('您已签到过')
-                }
-              }
-            } else {
-              this.$toast.fail('未到签到时间')
-            }
-          }
-        } else {
-          this.$toast.fail('请维护手机号')
+    onLoadSinInfo(id) {
+      getSignInInfo(id).then((e) => {
+        this.signInfo = e
+        
+        // 必须属于签到池人员
+        if (!this.signInfo.canSign) {
+          this.canSign = false;
+          this.noSignErr = '当前活动您未参与';
+          this.shortErr = '未参与';
+          return;
         }
+
+        if (this.signInfo.isSigned) {
+          this.canSign = false;
+          this.noSignErr = '您已签到';
+          this.shortErr = '已签到';
+          return;
+        }
+
+        // 必须是签到时间
+        const isGtStart = (this.now - new Date(this.signInfo.startTime)) > 0
+        const isLtEnd = (this.now - new Date(this.signInfo.endTime)) < 0
+        if (!isGtStart) {
+          this.canSign = false;
+          this.noSignErr = '签到未开始';
+          this.shortErr = '未开始';
+          return;
+        }
+
+        if (!isLtEnd) {
+          this.canSign = false;
+          this.noSignErr = '签到已结束';
+          this.shortErr = '已结束';
+          return;
+        }
+
+        this.canSign = true;
+        this.noSignErr = '';
+        this.shortErr = '';
+
+      }).catch(e => {
+        this.$toast(e.message)
       })
     },
     goSign() {
-      getSignIn().then((e) => {
+      if (!this.canSign) {
+        this.$toast(this.noSignErr);
+        return;
+      }
+
+      postSignIn(this.$route.query.signId).then((e) => {
         console.log(e)
         this.$toast('签到成功')
       })
@@ -100,21 +152,27 @@ export default {
   background-color: #fff;
   height: 100%;
   width: 100vw;
+  padding-top: 60px;
+
+  .box-item {
+    & + .box-item {
+      margin-top: 3em;
+    }
+  }
   .box1 {
     width: 100%;
-    > img {
-      width: 80px;
-      border-radius: 50%;
-      margin: 0 auto;
-      display: block;
-      padding: 35px 0 20px 0;
+
+    &-avatar {
+      display: flex;
+      justify-content: center;
     }
+
     &-title {
       width: 90%;
       margin: 0 auto;
       text-align: center;
       color: #000;
-      font-size: 17px;
+      font-size: 18px;
       font-weight: 700;
       margin-bottom: 30px;
     }
@@ -147,6 +205,7 @@ export default {
       font-size: 19px;
       margin-bottom: 10px;
       font-weight: 600;
+      letter-spacing: 2px;
     }
 
     > span {