Browse Source

fix: 修复通知导航问题及webView地址转义问题

liangan 2 weeks ago
parent
commit
a104feb1d8
2 changed files with 32 additions and 38 deletions
  1. 28 35
      src/pages/notifications/notifications.vue
  2. 4 3
      src/pages/webLink/webLink.vue

+ 28 - 35
src/pages/notifications/notifications.vue

@@ -22,6 +22,11 @@ import { toast } from '@/utils/toast'
 defineOptions({
   name: 'Notifications', // 通知
 })
+
+// 获取屏幕边界到安全区域距离
+const systemInfo = uni.getSystemInfoSync()
+const safeAreaInsets = systemInfo.safeAreaInsets
+
 // z-paging
 const paging = ref(null)
 // 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
@@ -283,63 +288,50 @@ async function clearAllNotifications() {
 <template>
   <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
     <template #top>
-      <wd-navbar
-        :bordered="false"
-        placeholder
-        :title="t('notifications.title')"
-      >
-        <template #left>
-          <wd-icon name="thin-arrow-left" size="32rpx" @click="() => goBack()" />
-        </template>
-        <template #right>
-          <image src="/static/icons/cl.png" class="h-40rpx w-40rpx" @click="clearAllNotifications" />
-        </template>
-      </wd-navbar>
-      <wd-tabs v-model="tab" :auto-line-width="true" custom-class="bg-transparent!" slidable="always" @click="() => queryList(1, 20)">
-        <wd-tab v-for="tabItem in tabs" :key="tabItem.value" :name="tabItem.value" :title="tabItem.title" />
-      </wd-tabs>
+      <view class="bg-white" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
+        <wd-navbar :bordered="false" placeholder :title="t('notifications.title')">
+          <template #left>
+            <wd-icon name="thin-arrow-left" size="32rpx" @click="() => goBack()" />
+          </template>
+          <template #right>
+            <image src="/static/icons/cl.png" class="h-40rpx w-40rpx" @click="clearAllNotifications" />
+          </template>
+        </wd-navbar>
+        <wd-tabs
+          v-model="tab" :auto-line-width="true" custom-class="bg-transparent!" slidable="always"
+          @click="() => queryList(1, 20)"
+        >
+          <wd-tab v-for="tabItem in tabs" :key="tabItem.value" :name="tabItem.value" :title="tabItem.title" />
+        </wd-tabs>
+      </view>
     </template>
     <view class="py-14rpx">
       <wd-swipe-action v-for="item in dataList" :key="item.id" class="mb-20rpx">
         <view
-          class="bg-white px-22rpx py-18rpx"
-          :class="{ 'notification-read': item.readFlag }"
+          class="bg-white px-22rpx py-18rpx" :class="{ 'notification-read': item.readFlag }"
           @click="handleNoticeClick(item)"
         >
           <view class="mb-8rpx flex items-center justify-between">
             <view class="flex items-center">
               <image
-                :src="getNoticeIcon(item.noticeType)"
-                class="h-36rpx w-36rpx"
+                :src="getNoticeIcon(item.noticeType)" class="h-36rpx w-36rpx"
                 :class="{ 'opacity-60': item.readFlag }"
               />
-              <text
-                class="ml-8rpx text-24rpx font-bold"
-                :class="item.readFlag ? 'text-#999999' : 'text-#333333'"
-              >
+              <text class="ml-8rpx text-24rpx font-bold" :class="item.readFlag ? 'text-#999999' : 'text-#333333'">
                 {{ getNoticeTitle(item) }}
               </text>
             </view>
             <view class="flex items-center">
-              <text
-                class="text-22rpx"
-                :class="item.readFlag ? 'text-#CCCCCC' : 'text-#3A444C'"
-              >
+              <text class="text-22rpx" :class="item.readFlag ? 'text-#CCCCCC' : 'text-#3A444C'">
                 {{ formatNoticeTime(item.createTime) }}
               </text>
             </view>
           </view>
           <view class="flex items-center justify-between text-22rpx">
-            <view
-              class="line-clamp-2 flex-1 break-all"
-              :class="item.readFlag ? 'text-#BBBBBB' : 'text-#3A444C'"
-            >
+            <view class="line-clamp-2 flex-1 break-all" :class="item.readFlag ? 'text-#BBBBBB' : 'text-#3A444C'">
               {{ getNoticeContent(item) }}
             </view>
-            <view
-              v-if="!item.readFlag"
-              class="ml-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full bg-#FF0000"
-            />
+            <view v-if="!item.readFlag" class="ml-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full bg-#FF0000" />
           </view>
         </view>
         <template #right>
@@ -357,6 +349,7 @@ async function clearAllNotifications() {
 <style lang="scss" scoped>
 .action {
   height: 100%;
+
   .button {
     display: flex;
     align-items: center;

+ 4 - 3
src/pages/webLink/webLink.vue

@@ -3,8 +3,8 @@
   layout: 'default',
   style: {
     navigationBarTitleText: '',
-    navigationBarBackgroundColor: '#fff',
-  },
+    navigationBarBackgroundColor: '#fff'
+  }
 }
 </route>
 
@@ -15,8 +15,9 @@ const params = ref({})
 
 onLoad((options) => {
   params.value = options
+  params.value.link = decodeURIComponent(params.value.link)
   uni.setNavigationBarTitle({
-    title: params.value.title || t('webLink.title'),
+    title: decodeURIComponent(params.value.title) || t('webLink.title'),
   })
 })
 </script>