training-wx/src/views/signIn.vue

<template>
  <div class="Clockln-box">
    <div class="box1">
      <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">{{endTimeStr}}</div>
    </div>
    <div :class="{ 'myDIV': true }" @click="goSign">
      <div>{{signText}}</div>
      <span>{{currentTimeStr}}</span>
    </div>

    <img src="~@/assets/basemap.png" alt width="100%" />
  </div>
</template>

<script>
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 {
      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() {
    const { phone } = this.person || {}

    if (!phone) {
      this.$dialog
        .alert({
          message: '请先维护您的个人信息'
        })
        .then(() => {
          this.$router.push({ name: 'SetUser' })
        })
    }
  },
  beforeDestroy() {
    if (this.ticker) {
      clearInterval(this.ticker)
    }
  },

  methods: {
    parseTime,
    //首先判断他有没有资格
    //  this.$toast.success('修改成功！')
    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() {
      if (!this.canSign) {
        this.$toast(this.noSignErr)
        return
      }

      postSignIn(this.$route.query.signId).then((e) => {
        console.log(e)
        this.canSign = false
        this.signInfo.isSigned = true
        this.noSignErr = '您已签到'
        this.shortErr = '已签到'
        this.$toast('签到成功')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.Clockln-box {
  background-color: #fff;
  height: 100%;
  width: 100vw;
  padding-top: 60px;

  .box-item {
    & + .box-item {
      margin-top: 3em;
    }
  }
  .box1 {
    width: 100%;

    &-avatar {
      display: flex;
      justify-content: center;
    }

    &-title {
      width: 90%;
      margin: 0 auto;
      text-align: center;
      color: #000;
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 30px;
    }
    &-time {
      width: 90%;
      margin: 0 auto;
      text-align: center;
      color: rgb(133, 133, 133);
      font-size: 13px;
      line-height: 26px;
      letter-spacing: 2px;
    }
  }
  .myDIV {
    margin: 6vh auto auto auto;
    width: 140px;
    height: 140px;
    // margin: 0 auto;
    border-radius: 100%;
    background-color: #42a9aa;
    display: flex;
    animation: qiandao 3s infinite;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    > div {
      width: 100%;
      margin: 0 auto;
      color: white;
      font-size: 19px;
      margin-bottom: 10px;
      font-weight: 600;
      letter-spacing: 2px;
    }

    > span {
      color: white;
      display: block;
      font-size: 15px;
    }
  }
  .disabled {
    pointer-events: none;
    background-color: #d1d1d1ec;
  }
  > img {
    position: fixed;
    bottom: 7vh;
  }
}

@keyframes qiandao {
  0% {
    box-shadow: 0 0 10px #0d888a;
  }

  50% {
    box-shadow: 0 0 20px #7bdadb;
  }

  100% {
    box-shadow: 0 0 10px #0d888a;
  }
}
</style>