新增必到点采集详情页面 处理打卡

src/pages/clockInPage/components/Timeline.vue

@@ -1,32 +1,45 @@
 <template>
   <div class="info-container">
-    <div class="item" v-for="(item, index) in data" :key="index">
-      <div class="point"></div>
-      <div class="line" v-if="index + 1 != data.length"></div>
-      <div class="info-right">
-        <div class="name">{{item.name}}</div>
-        <div class="time">打卡时间：<text>{{ item.time }}</text></div>
+    <template v-for="(item, index) in data" :key="index">
+      <div v-if="item?.dkKsSj" class="item">
+        <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="image">
-          <img src="../../../assets/home/bddcj.png" alt="">
-        </div>
+          <div v-if="item?.imgUrl" class="image">
+            <van-image width="80px" :src="item?.imgUrl" @click="onClickImg(item?.imgUrl)" 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 class="address">-->
+          <!--          <van-icon name="location-o" color="#1DB1FF" />-->
+          <!--          <div class="name">四川省成都市</div>-->
+          <!--        </div>-->
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
 <script setup>
+import {ImagePreview} from "vant";
+
 const props = defineProps({
   data: {
     type: Array,
     default: []
   }
 })
+
+//预览图片
+function onClickImg(url) {
+  ImagePreview([url]);
+}
 </script>
 
 <style lang="scss" scoped>