feat:webview通信处理

shuishen

2025-12-19 32febb140d320b35d580c8d4e78a80ef846e75fc

 src/pages/work/index.vue

@@ -1,214 +1,75 @@
<template>
   <view class="flex flex-col eventTickets">
      <view class="searchTop">
         <up-search placeholder="请输入关键字搜索"  :animation="true"  v-model="listParams.keyword" :show-action="false"></up-search>
         <div>111</div>
      </view>
      <view>
         <up-tabs :list="tabList" @click="handleClick"></up-tabs>
         <view class="eventBox">
            <view class="eventItem"  v-for="(item,index) in dataList" :key="index">
               <img :src="item.photo_url" alt="" @click="detailHandle(item)" />
               <div class="itemTitle">{{item.event_name}}</div>
               <div class="itemContent">
                  <div class="itemStatus">
                     <span v-if="item.status === 0" style="background-color: #ff7411;"></span>
                     <span v-else-if="item.status === 2" style="background-color: #ff472f;"></span>
                     <span v-else-if="item.status === 3" style="background-color: #ffc300;"></span>
                     <span v-else-if="item.status === 4" style="background-color: #06d957;"></span>
                     <p>{{formatDate(item.create_time) }}</p>
                  </div>
                  <div>全屏</div>
               </div>
            </view>
         </view>
      </view>
   <view class="eventTickets">
      <WebViewPlus ref="sWebViewRef" :src="`${viewUrl}`" @webMessage="onPostMessage" />
   </view>

</template>

<script setup>
import { useUserStore } from '@/store/index.js'
import {getList,getstatusCount} from '/src/api/work/index.js'
   import dayjs from 'dayjs';
   const userStore = useUserStore()
   const userInfo = userStore.userInfo

   const dataList = ref([])
   const keyword = ref('')
   const currentTab=ref('myTickets')
   const tabList = ref([{
         name: '我的工单',
         key: 'myTickets',
         badge: {
            value: 1
         }
      },
      {
         name: '全部状态',
         key: 'all',
         badge: {
            value: 2
         },
         status: null
      },
      {
         name: '待审核',
         key: 'pending',
         badge: {
            value: 3
         },
         status: '2'
      },
      {
         name: '待处理',
         key: 'processing',
         badge: {
            value: 4
         },
         status: '0'
      },
      {
         name: '处理中',
         key: 'inProgress',
         badge: {
            value: 5
         },
         status: '3'
      },
      {
         name: '已完成',
         key: 'completed',
         badge: {
            value: 6
         },
         status: '4'
      }
   ])
   const formatDate = (dateString) => {
      return dayjs(dateString).format('MM/DD HH:mm');
   };
   const listParams = ref({
      status: null,
      current: 1,
      size: 9999,
      source: 1,
      department:'',
      keyword:''

   import {
      getWebViewUrl
   } from "@/utils/index.js";
   import WebViewPlus from "@/components/WebViewPlus.vue";
   import {
      useTabAddButton
   } from "@/hooks/index.js";
   import { onShow, onHide } from "@dcloudio/uni-app";
	
   const sWebViewRef = ref(null);
   // const viewUrl = getWebViewUrl('/work', {})
   const updateKey = ref(0)
   const viewUrl = computed(() => {
      return getWebViewUrl('/work', {
         updateKey: updateKey.value
      })
   })
   const getDataList = () => {
      const params = {
         current: 1,
         size: 9999,
         source: 1,
         status:listParams.value.status,
         event_name:listParams.value.keyword,
         user_id:currentTab.value=== 'myTickets' ?userInfo.user_id : undefined
      }
      getList(params).then(res => {
		
         const response = res.data.data.records
         dataList.value = response
      })
   }
      const getstatusCountData=()=>{
         getstatusCount().then(res=>{
            const response = res.data.data
             const { statusCount, totalCount, userCount } = response
            tabList.value.forEach(tab=>{
			
               if(tab.key === 'all'){
                  tab.badge.value = totalCount || 0

               }else if(tab.key === 'myTickets'){
                  tab.badge.value = userCount || 0
               }else{
                  tab.badge.value=statusCount[String(tab.status)] || 0
               }
            })
			
         })
   function onPostMessage(data) {
      if (data.type === 'jumpMapNav') {
         uni.navigateTo({
            url: `/subPackages/workDetail/mapWork/index?currentItem=${data.eventNum}`
         });

      } else if (data.type === 'workid') {
         uni.navigateTo({
            url: `/subPackages/workDetail/index?eventNum=${data.eventNum}&totalNum=${data.totalNum}&keyword=${data.keyword}&aiType=${data.aiType}&status=${data.status}`
         });
      } else if (data.type === 'bigImage') {
         uni.navigateTo({
            url: `/subPackages/workDetail/photoMagnify/index?eventNum=${data.eventNum}`
         });

      }

   const handleClick = (item) => {
      currentTab.value = item.key
   listParams.value.status = item.status
      getDataList()
   }
   const detailHandle = (val) => {
      uni.navigateTo({
         url: `/subPackages/workDetail/index?eventNum=${val.event_num}`,
      })
   }
   const isApp = ref(false)
   onShow(() => {
      getDataList()
      getstatusCountData()
   })
      const joinParams = uni.getStorageSync('joinParams');
      if (joinParams) {
         updateKey.value = updateKey.value + 1
         uni.removeStorageSync('joinParams');
      }
		
      uni.setStorageSync('lastTab', 'work');
      uni.setTabBarItem({
         index: 2,
         text: '',
         iconPath: 'static/images/tabbar/add.png',
         selectedIconPath: 'static/images/tabbar/add.png'
      });
      // isApp.value = true
   });

   onHide(() => {
      // isApp.value = false
   });
</script>

<style scoped lang="scss">
   .eventTickets {
      padding: 0 10px;

      .searchTop {
         display: flex;
         align-items: center;
         margin-top: 10px;
      }
      width: 100%;
      height: 100%;

      :deep(.u-badge) {
         background-color: #1d6fe9 !important;
      }

      .eventBox {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         padding: 10px 0;
         background-color: #ebeff2;

         .eventItem {
            width: calc(50% - 5px);
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;

            img {
               width: 100%;
               height: 100px;
               border-radius: 5px;
               overflow: hidden;
            }

            .itemTitle {
               padding: 0 5px;
                white-space: nowrap; 
               overflow: hidden; 
               text-overflow: ellipsis; 
            }

            .itemContent {
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 5px;

               .itemStatus {
                  display: flex;
                  align-items: center;

                  span {
                     display: inline-block;
                     width: 10px;
                     height: 10px;
                     border-radius: 50%;
                     margin-right: 5px;
                  }
               }

            }
         }
      }
   }
</style>