打卡页面修改 增加地图功能处理

This commit is contained in:
maojiacai
2025-09-12 11:41:36 +08:00
parent e4767754d5
commit 95caa69c33
5 changed files with 186 additions and 40 deletions

View File

@ -1,15 +1,36 @@
<template>
<div class="info-container">
<div class="title">时间轴</div>
<template v-for="(item, index) in data" :key="index">
<div v-if="item?.dkKsSj" class="item">
<div :class="['item', { 'disabled': !item?.dkKsSj }]">
<div class="point"></div>
<div class="line" v-if="index + 1 != data.length"></div>
<div class="info-right">
<div class="name">{{ `${item?.count}次打卡` }}</div>
<div class="time">打卡时间<text>{{ item?.dkKsSj }}</text></div>
<div class="name">{{ `${item?.count}次打卡 开始` }}</div>
<div v-if="item?.dkKsSj" class="time">打卡时间<text>{{ handleTime(item?.dkKsSj) }}</text></div>
<div v-if="item?.imgUrl" class="image">
<van-image width="80px" :src="item?.imgUrl" @click="onClickImg(item?.imgUrl)" style="flex: 1">
<div v-if="item?.imgUrlDkKsFj" class="image">
<van-image width="80px" :src="item?.imgUrlDkKsFj" @click="onClickImg(item?.imgUrlDkKsFj)" style="flex: 1">
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
</div>
<!-- <div class="address">-->
<!-- <van-icon name="location-o" color="#1DB1FF" />-->
<!-- <div class="name">四川省成都市</div>-->
<!-- </div>-->
</div>
</div>
<div :class="['item', { 'disabled': !item?.dkJsSj }]">
<div class="point"></div>
<div class="info-right">
<div class="name">{{ `${item?.count}次打卡 离开` }}</div>
<div v-if="item?.dkJsSj" class="time">打卡时间<text>{{ handleTime(item?.dkJsSj) }}</text></div>
<div v-if="item?.imgUrlDkJsFj" class="image">
<van-image width="80px" :src="item?.imgUrlDkJsFj" @click="onClickImg(item?.imgUrlDkJsFj)" style="flex: 1">
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
@ -40,6 +61,10 @@ const props = defineProps({
function onClickImg(url) {
ImagePreview([url]);
}
const handleTime = (time) => {
if (time) return time?.split(' ')[1]
}
</script>
<style lang="scss" scoped>
@ -47,6 +72,12 @@ function onClickImg(url) {
padding: 0 2.67vw;
margin-top: 4vw;
.title {
color: #707070;
font-size: 3.73vw;
margin-bottom: 4vw;
}
.item {
color: #666;
display: flex;
@ -55,7 +86,7 @@ function onClickImg(url) {
height: auto;
border-left: 0.53vw dashed #1DB1FF;
max-height: 46.93vw;
padding-bottom: 2.67vw;
padding-bottom: 8vw;
.point {
position: absolute;
@ -70,6 +101,7 @@ function onClickImg(url) {
.info-right {
margin-left: 5.33vw;
font-family: PingFang HK, PingFang HK;
margin-top: -1.33vw;
.name {
font-weight: 400;
font-size: 3.73vw;
@ -84,6 +116,7 @@ function onClickImg(url) {
.time {
margin-top: 2.13vw;
font-size: 3.73vw;
text {
color: #0386FB;
@ -106,5 +139,13 @@ function onClickImg(url) {
}
}
}
.disabled {
border-left: 0.53vw dashed #EDEDED !important;
.point {
background: #EDEDED !important;
}
}
}
</style>