考点核验

wwf

16 小时以前 4e6f18dfa08e2f2f4f02aaa1b8e8e51852b7a9a1

 src/views/h5/signup/index.vue

@@ -2,8 +2,8 @@
  <div class="p-4 signin">
    <div>
      <el-row class="px-7" justify="space-between">
        <el-text class="text-lg">姓名：<span class="font-bold">张三</span></el-text>
        <el-text class="text-lg">身份证尾号：<span class="font-bold">8888</span></el-text>
        <el-text class="text-lg">姓名：<span class="font-bold">{{ userInfo.name }}</span></el-text>
        <el-text class="text-lg">身份证尾号：<span class="font-bold">{{ userInfo.idCard?.slice(-4) }}</span></el-text>
      </el-row>
      <el-row justify="center" class="m-4">
        <div style="position: relative;">
@@ -13,7 +13,7 @@
              :center="centerPoint"
              @getUserPositionStatus="(evt) => userPositionStatus = evt"
              @getMapStatus="(evt) => mapStatus = evt"
              @getDistance="(evt) => distance = evt"
              @getDistance="getDistance"
            />
          </div>
          <div class="center-sign">
@@ -37,15 +37,15 @@
          </div>
        </div>
      </el-row>
      <el-row justify="center">
      <!-- <el-row justify="center">
        <el-text class="text-lg font-bold">{{ positionName }}</el-text>
      </el-row>
      </el-row> -->
      <el-row justify="center" class="mt-1">
        <el-text class="text-lg text-info">{{ positionAddress }}</el-text>
      </el-row>
    </div>
    <el-row justify="center" class="mt-7">
      <div class="signin-button" :style="getSigninButtonStyle">
      <div class="signin-button" :style="getSigninButtonStyle" @click="signinConfirm()">
        <span class="ripple" v-if="!positionError"></span>
        <el-row justify="center">
          <el-text class="text-lg  text-white">签到</el-text>
@@ -60,18 +60,23 @@

<script>
import BaiduMap from '@/views/h5/signup/BaiduMap.vue'
import { useSessionStore } from '@/stores/session.js'
import { storeToRefs } from 'pinia';
export default {
  components: {
    BaiduMap
  },
  setup() {
    const { userInfo } = storeToRefs(useSessionStore()) 
    return { userInfo } 
  },
  data() {
    return {
      userPositionStatus: 'loading', // loading、fail、success
      mapStatus: 'loading', //loading、fail、success
      distance: 0,
      distance: null,
      positionError: false,
      failMsg: '超出签到范围，不可签到',
      positionName: '万科云城',
      positionName: '',
      positionAddress: '南山区打石二路南118号',
      currentTimeText: '',
      centerPoint: {
@@ -81,8 +86,11 @@
    }
  },
  computed: {
    canSignup() {
      return this.mapStatus == 'success' && this.userPositionStatus == 'success' && !this.positionError
    },
    getSigninButtonStyle() {
      if (this.positionStatus == 'success') {
      if (this.canSignup) {
        return {
          'background': '#66d06c',
          'border-color': '#e7f7eb'
@@ -93,21 +101,67 @@
          'border-color': '#f8f8f8'
        }
      }
    },
    appId() {
      return this.$route.query.appId
    }
  },
  created() {
    this.getSignupAddress()
  },
  async mounted() {
    this.currentTimeText = this.$dayjs().format('HH:mm')
  },
  methods: {
    getSignupAddress() {
      const params = { applicationId: this.appId }
      this.$axios.get('/exam/verify-record/get-by-application-id', { params }).then(res => {
        if (res.data.code == 0) {
          const resData = res.data.data || {}
          // this.centerPoint = {
          //   lat: resData.examSite?.locationLat,
          //   lng: resData.examSite?.locationLng
          // }
          this.positionAddress = resData.examSite?.address
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    getUserPositionStatus(evt) {
      this.userPositionStatus = evt
    },
    getDistance(evt) {
      this.distance = evt
      if (this.distance && this.distance <= 500) {
        this.positionError = false
      } else {
        this.positionError = true
      }
    },
    signinConfirm() {
      if (!this.canSignup) {
        return
      }
      this.$message.success('签到成功')
      localStorage.setItem('isSignup', true)
      setTimeout(() => {
        if (this.getIsFace()) {
          this.$router.replace({ path: '/h5/face', query: { appId: this.appId }})
        } else {
          this.$router.replace({ path: '/h5/verForm', query: { appId: this.appId }})
        }
      }, 500)
    },
    getIsFace() {
      return Boolean(localStorage.getItem('isFace'))
    }
  }
}
</script>
<style lang="scss" scoped>
.signin {
  height: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;