Просмотр исходного кода

feat:优化消息列表,解决右上角的 search 在 mp 遮挡的问题

YunaiV 4 месяцев назад
Родитель
Сommit
04501298ac
2 измененных файлов с 51 добавлено и 30 удалено
  1. 42 7
      src/pages/message/components/search-form.vue
  2. 9 23
      src/pages/message/index.vue

+ 42 - 7
src/pages/message/components/search-form.vue

@@ -1,4 +1,20 @@
 <template>
 <template>
+  <!-- 搜索框入口 -->
+  <view class="flex items-center bg-white pr-30rpx">
+    <view class="flex-1">
+      <wd-search
+        :placeholder="searchPlaceholder"
+        :hide-cancel="true"
+        disabled
+        @click="visible = true"
+      />
+    </view>
+    <view class="text-28rpx text-[#1890ff]" @click="handleReadAll">
+      全部已读
+    </view>
+  </view>
+
+  <!-- 搜索弹窗 -->
   <wd-popup
   <wd-popup
     v-model="visible"
     v-model="visible"
     position="top"
     position="top"
@@ -101,21 +117,40 @@ export interface SearchFormData {
 }
 }
 
 
 const props = defineProps<{
 const props = defineProps<{
-  modelValue: boolean
-  searchParams?: Partial<SearchFormData>
+  searchParams?: Partial<SearchFormData> // 初始搜索参数
 }>()
 }>()
 
 
 const emit = defineEmits<{
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
   'search': [data: SearchFormData]
   'search': [data: SearchFormData]
   'reset': []
   'reset': []
+  'readAll': []
 }>()
 }>()
 
 
-const visible = computed({
-  get: () => props.modelValue,
-  set: (val: boolean) => emit('update:modelValue', val),
+const visible = ref(false)
+
+/** 搜索条件 placeholder 拼接 */
+const searchPlaceholder = computed(() => {
+  const conditions: string[] = []
+  if (props.searchParams?.readStatus === 1) {
+    conditions.push('已读')
+  } else if (props.searchParams?.readStatus === 0) {
+    conditions.push('未读')
+  }
+  if (props.searchParams?.createTime?.[0] || props.searchParams?.createTime?.[1]) {
+    const start = props.searchParams.createTime[0] ? formatDate(props.searchParams.createTime[0]) : ''
+    const end = props.searchParams.createTime[1] ? formatDate(props.searchParams.createTime[1]) : ''
+    if (start || end) {
+      conditions.push(`${start}~${end}`)
+    }
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索消息'
 })
 })
 
 
+/** 全部已读 */
+function handleReadAll() {
+  emit('readAll')
+}
+
 const formData = reactive<SearchFormData>({
 const formData = reactive<SearchFormData>({
   readStatus: -1,
   readStatus: -1,
   createTime: [undefined, undefined],
   createTime: [undefined, undefined],
@@ -149,7 +184,7 @@ function handleEndCancel() {
 }
 }
 
 
 /** 监听弹窗打开,同步外部参数 */
 /** 监听弹窗打开,同步外部参数 */
-watch(() => props.modelValue, (val) => {
+watch(visible, (val) => {
   if (val && props.searchParams) {
   if (val && props.searchParams) {
     formData.readStatus = props.searchParams.readStatus ?? -1
     formData.readStatus = props.searchParams.readStatus ?? -1
     formData.createTime = props.searchParams.createTime ?? [undefined, undefined]
     formData.createTime = props.searchParams.createTime ?? [undefined, undefined]

+ 9 - 23
src/pages/message/index.vue

@@ -1,22 +1,18 @@
 <template>
 <template>
   <view class="page-container">
   <view class="page-container">
     <!-- 顶部导航栏 -->
     <!-- 顶部导航栏 -->
-    <!-- TODO @AI:待修复 -->
     <wd-navbar
     <wd-navbar
       title="我的消息"
       title="我的消息"
       placeholder safe-area-inset-top fixed
       placeholder safe-area-inset-top fixed
-    >
-      <template #right>
-        <view class="flex items-center gap-24rpx">
-          <view @click="handleReadAll">
-            <wd-icon name="check-circle" size="20px" />
-          </view>
-          <view @click="searchVisible = !searchVisible">
-            <wd-icon name="search" size="20px" />
-          </view>
-        </view>
-      </template>
-    </wd-navbar>
+    />
+
+    <!-- 搜索组件 -->
+    <SearchForm
+      :search-params="queryParams"
+      @search="handleQuery"
+      @reset="handleReset"
+      @read-all="handleReadAll"
+    />
 
 
     <!-- 消息列表 -->
     <!-- 消息列表 -->
     <view class="p-24rpx">
     <view class="p-24rpx">
@@ -79,14 +75,6 @@
       />
       />
     </view>
     </view>
 
 
-    <!-- 搜索弹窗 -->
-    <SearchForm
-      v-model="searchVisible"
-      :search-params="queryParams"
-      @search="handleQuery"
-      @reset="handleReset"
-    />
-
     <!-- 详情弹窗 -->
     <!-- 详情弹窗 -->
     <DetailPopup ref="detailPopupRef" />
     <DetailPopup ref="detailPopupRef" />
   </view>
   </view>
@@ -105,7 +93,6 @@ import {
   updateNotifyMessageRead,
   updateNotifyMessageRead,
 } from '@/api/system/notify'
 } from '@/api/system/notify'
 import { getDictLabel } from '@/hooks/useDict'
 import { getDictLabel } from '@/hooks/useDict'
-import { navigateBackPlus } from '@/utils'
 import { DICT_TYPE } from '@/utils/constants'
 import { DICT_TYPE } from '@/utils/constants'
 import { formatDateRange, formatDateTime } from '@/utils/date'
 import { formatDateRange, formatDateTime } from '@/utils/date'
 import DetailPopup from './components/detail-popup.vue'
 import DetailPopup from './components/detail-popup.vue'
@@ -122,7 +109,6 @@ const toast = useToast()
 const total = ref(0) // 列表的总页数
 const total = ref(0) // 列表的总页数
 const list = ref<NotifyMessage[]>([]) // 列表的数据
 const list = ref<NotifyMessage[]>([]) // 列表的数据
 const loadMoreState = ref<LoadMoreState>('loading') // 加载更多状态
 const loadMoreState = ref<LoadMoreState>('loading') // 加载更多状态
-const searchVisible = ref(false) // 搜索弹窗
 const queryParams = reactive({
 const queryParams = reactive({
   pageNo: 1,
   pageNo: 1,
   pageSize: 10,
   pageSize: 10,