<template>
|
<div class="p-4 signin">
|
<div>
|
<el-row class="px-7" justify="space-between">
|
<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;">
|
<div class="mask"></div>
|
<div class="mapBox">
|
<BaiduMap
|
:center="centerPoint"
|
@getUserPositionStatus="(evt) => userPositionStatus = evt"
|
@getMapStatus="(evt) => mapStatus = evt"
|
@getDistance="getDistance"
|
/>
|
</div>
|
<div class="center-sign">
|
<el-image
|
style="width: 50px;height: 50px;"
|
fit="contain"
|
:src="$getImageUrl(`/map/position-marker-${positionError?'red':'green'}.png`)"
|
></el-image>
|
</div>
|
<div class="text-sign">
|
<el-text style="color: #8c8c8c;" v-if="userPositionStatus=='loading'">定位中...</el-text>
|
<el-text style="color: #e73f3f;" v-else-if="userPositionStatus=='fail'">获取定位失败，当前设备的定位服务</el-text>
|
<template v-else-if="userPositionStatus=='success'">
|
<el-text v-if="distance>0&&distance<500" style="color: #56c16d;">
|
位置正常 距离签到地点{{ distance }}米
|
</el-text>
|
<el-text v-else style="color: #e73f3f;">
|
超出签到范围，不可签到
|
</el-text>
|
</template>
|
</div>
|
</div>
|
</el-row>
|
<!-- <el-row justify="center">
|
<el-text class="text-lg font-bold">{{ positionName }}</el-text>
|
</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" @click="signinConfirm()">
|
<span class="ripple" v-if="!positionError"></span>
|
<el-row justify="center">
|
<el-text class="text-lg text-white">签到</el-text>
|
</el-row>
|
<el-row justify="center" class="mt-1">
|
<el-text class="text-lg text-white">{{ currentTimeText }}</el-text>
|
</el-row>
|
</div>
|
</el-row>
|
</div>
|
</template>
|
|
<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: null,
|
positionError: false,
|
positionName: '',
|
positionAddress: '',
|
currentTimeText: '',
|
centerPoint: {
|
lat: 23.135618,
|
lng: 113.27077
|
}
|
}
|
},
|
computed: {
|
canSignup() {
|
return this.mapStatus == 'success' && this.userPositionStatus == 'success' && !this.positionError
|
},
|
getSigninButtonStyle() {
|
if (this.canSignup) {
|
return {
|
'background': '#66d06c',
|
'border-color': '#e7f7eb'
|
}
|
} else {
|
return {
|
'background': '#e1e1e1',
|
'border-color': '#f8f8f8'
|
}
|
}
|
},
|
appId() {
|
return this.$route.query.appId
|
},
|
url() {
|
return this.$route.query.url
|
}
|
},
|
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 || {}
|
if (resData.examSite?.locationLat && resData.examSite?.locationLng) {
|
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 || this.confirmLoading) {
|
return
|
}
|
const data = {
|
targetId: this.appId,
|
targetType: 2,
|
url: this.url,
|
type: 0
|
}
|
this.confirmLoading = true
|
this.$axios.post('/exam/staff/checkin', data).then(res => {
|
if (res.data.code == 0) {
|
this.$message.success('签到成功')
|
setTimeout(() => {
|
this.$router.replace({ path: '/h5/verForm', query: { appId: this.appId }})
|
}, 500)
|
} else {
|
this.$message.error(res.data.msg)
|
}
|
}).finally(() => {
|
this.confirmLoading = false
|
})
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.signin {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
padding-bottom: 100px;
|
}
|
.mapBox {
|
width: 300px;
|
height: 300px;
|
border-radius: 150px;
|
}
|
.mask {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 300px;
|
height: 340px;
|
background: radial-gradient(circle at center, transparent 0px, white 160px);
|
z-index: 12; /* 位于红色盒子上方 */
|
}
|
.center-sign {
|
z-index: 13;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
}
|
.text-sign {
|
z-index: 13;
|
position: absolute;
|
left: 50%;
|
top: 66%;
|
white-space: nowrap;
|
transform: translate(-50%, -50%);
|
}
|
.signin-button {
|
width: 140px;
|
height: 140px;
|
border-radius: 70px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
border: 16px solid
|
}
|
.ripple {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background-color: rgba(255, 255, 255, 0.5);
|
transform: scale(0);
|
animation: ripple 2s ease-out infinite;
|
pointer-events: none; /* 防止波纹遮挡按钮点击 */
|
z-index: 14;
|
}
|
/* 确保按钮文字显示在波纹上方 */
|
.signin-button .el-row {
|
position: relative;
|
z-index: 2;
|
}
|
@keyframes ripple {
|
to {
|
transform: scale(2);
|
opacity: 0;
|
}
|
}
|
</style>
|
