吉安感知网项目-前端
shuishen
2026-03-05 d75d83bd2a1f4e13634f84f8a4de1f7457187b2b
applications/mobile-web-view/src/appPages/work/workDetail/index.vue
@@ -2,14 +2,12 @@
   <div class="workDetailContainer">
      <div class="detailTop">
         <div class="image-container">
            <van-swipe class="detailSwipe" :autoplay="3000" indicator-color="#4C85FF">
               <van-swipe-item v-for="(img, index) in getImageList" :key="index">
                  <van-image class="detailImage" :src="img" fit="cover" width="100%" height="200px"
                     @click="openPreview(index)" preview-visible="false" />
               </van-swipe-item>
            </van-swipe>
            <van-image-preview v-model:show="previewShow" :images="getImageList" :initial-index="previewIndex" />
            <van-swipe :autoplay="3000" indicator-color="#4C85FF">
            <van-swipe-item v-for="(img, index) in getImageList" :key="index">
               <van-image class="detailImage" :src="img" fit="cover" width="100%" height="235px"
                  @click="openPreview(index)" preview-visible="false" />
            </van-swipe-item>
         </van-swipe>
         </div>
      </div>
   <!-- 工单内容 -->
@@ -57,58 +55,61 @@
</template>
<script setup>
import {getSharingDetailsApi} from '@/api/work/index'
import { showToast, showNotify, showImagePreview } from 'vant'
import { getShowImg, getSmallImg } from '@/utils/util'
import { useRoute } from 'vue-router'
import { useRoute,useRouter } from 'vue-router'
const keyword = ref('')
const route = useRoute()
const router = useRouter()
const workDetailData = ref({})
// 预览图片
const previewShow = ref(false)
const previewIndex = ref(0)
const getImageList = computed(() => {
   const imageArr = []
   const detail = workDetailData.value
   if (detail.eventImageUrl) {
      const smallUrl = getSmallImg(detail.eventImageUrl)
      const smallUrl = detail.eventImageUrl
      imageArr.push(smallUrl)
   }
   return imageArr
})
const openPreview = index => {
   const detail = workDetailData.value
   const showUrl = getShowImg(detail.eventImageUrl)
   const showUrl = detail.eventImageUrl
   showImagePreview({
      images: [showUrl],
      startPosition: 0,
   })
   previewIndex.value = index
   previewShow.value = true
}
// 跳转地图
const jumpMap = item => {
   const transmitData = { data: { type: 'jumpMapNav', eventNum: item.event_num } }
   wx.miniProgram.navigateTo({ url: `/subPackages/workDetail/mapWork/index?currentItem=${item.event_num}` })
   wx.miniProgram.postMessage(transmitData)
   uni.postMessage(transmitData)
router.push({
      path: '/webViewWrapper/mapWork',
      query: {
         currentItem: JSON.stringify(item)
      }
   })
}
onMounted(async () => {
workDetailData.value = JSON.parse(route.query.workDetailData)
console.log('route.query',workDetailData.value);
   keyword.value = JSON.parse(route.query.workDetailData)
   try {
      const res = await getSharingDetailsApi({ cacheKey: keyword.value })
      workDetailData.value = res.data.data
   } catch (error) {
      showToast('分享链接失效')
   }
})
</script>
<style lang="scss" scoped>
.workDetailContainer {
  padding-top: 44px;
   .detailTop {
      .image-container {
         position: relative;
         width: 100%;
         height: 205px;
         .detailImage {
            width: 100%;
            height: 100%;
@@ -120,7 +121,7 @@
   .worderContainer {
      padding: 0 12px;
      padding-bottom: 2px;
      // padding-bottom: 2px;
      background: #f6f6f6;
   }
@@ -128,7 +129,7 @@
      margin-top: 15px;
      background-color: #fff;
      border-radius: 6px;
      padding: 10px;
      padding: 8px 10px;
      margin-bottom: 17px;
      .workOrderTitle {