<template>
|
<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-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="(evt) => distance = evt"
|
/>
|
</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">
|
<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'
|
export default {
|
components: {
|
BaiduMap
|
},
|
data() {
|
return {
|
userPositionStatus: 'loading', // loading、fail、success
|
mapStatus: 'loading', //loading、fail、success
|
distance: 0,
|
positionError: false,
|
failMsg: '超出签到范围，不可签到',
|
positionName: '万科云城',
|
positionAddress: '南山区打石二路南118号',
|
currentTimeText: '',
|
centerPoint: {
|
lat:22.580372,
|
lng: 113.946530
|
}
|
}
|
},
|
computed: {
|
getSigninButtonStyle() {
|
if (this.positionStatus == 'success') {
|
return {
|
'background': '#66d06c',
|
'border-color': '#e7f7eb'
|
}
|
} else {
|
return {
|
'background': '#e1e1e1',
|
'border-color': '#f8f8f8'
|
}
|
}
|
}
|
},
|
async mounted() {
|
this.currentTimeText = this.$dayjs().format('HH:mm')
|
},
|
methods: {
|
getUserPositionStatus(evt) {
|
this.userPositionStatus = evt
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.signin {
|
height: 100%;
|
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>
|
