fix:1.群广场的接口对接，系统消息的接口对接，互动消息的页面优化。

src/components/NavigationBar/index.client.vue

@@ -1,26 +1,18 @@
 <template>
-  <div
-    class="h-50 bg-white justify-between w-full fixed z-[999] border-b box-border"
-  >
+  <div class="h-50 bg-white justify-between w-full fixed z-[999] border-b box-border">
     <NuxtLink to="/" class="absolute top-1/2 -translate-y-1/2 left-15">
       <img src="~/assets/img/logo.png" class="h-30 object-contain" />
     </NuxtLink>
 
-    <div
-      class="absolute right-15 top-1/2 -translate-y-1/2 flex items-center space-x-20"
-    >
+    <div class="absolute right-15 top-1/2 -translate-y-1/2 flex items-center space-x-20">
       <div v-if="token" class="flex items-center space-x-10">
         <NuxtLink to="/profile" class="flex items-center">
-          <van-image
-            :src="userInfo.headImageUrl || defaultAvatar"
-            round
-            height="26"
-            width="26"
-          />
+          <van-image :src="userInfo.headImageUrl || defaultAvatar" round height="26" width="26" />
         </NuxtLink>
-        <NuxtLink to="/profile" class="max-w-70 truncate text-black-6">
-          我的订单
+        <NuxtLink to="/profile/my-news" class="max-w-70 truncate text-black-6">
+          <van-badge :dot="true" :offset="[-4, 5]">消息</van-badge>
         </NuxtLink>
+        <NuxtLink to="/profile" class="max-w-70 truncate text-black-6">订单</NuxtLink>
       </div>
 
       <NuxtLink
@@ -35,18 +27,10 @@
         </div>
         <span class="text-base">请登录</span>
       </NuxtLink>
-      <img
-        @click="handleClickMenu"
-        src="~/assets/img/navbar/nav_menu.png"
-        class="w-24 h-24"
-      />
+      <img @click="handleClickMenu" src="~/assets/img/navbar/nav_menu.png" class="w-24 h-24" />
     </div>
 
-    <van-popup
-      v-model:show="isMenuShow"
-      position="left"
-      :style="{ height: '100%', width: '70%' }"
-    >
+    <van-popup v-model:show="isMenuShow" position="left" :style="{ height: '100%', width: '70%' }">
       <NavigationBarLeftMenu
         v-if="isMenuShow"
         v-model:visible="isMenuShow"
@@ -57,31 +41,46 @@
 </template>
 
 <script setup>
-import defaultAvatar from "~/assets/img/default_avatar.png";
+const chatStore = useChatStore()
+const { chatList } = storeToRefs(chatStore)
+
+import defaultAvatar from '~/assets/img/default_avatar.png'
 
-const isMenuShow = ref(false);
+const isMenuShow = ref(false)
 
 function handleClickMenu() {
-  isMenuShow.value = true;
+  isMenuShow.value = true
 }
 
-const route = useRoute();
+const route = useRoute()
 
-const authStore = useAuthStore();
-const { token } = storeToRefs(authStore);
+const authStore = useAuthStore()
+const { token } = storeToRefs(authStore)
 
-const userInfoStore = useUserInfoStore();
-const { userInfo } = storeToRefs(userInfoStore);
+const userInfoStore = useUserInfoStore()
+const { userInfo } = storeToRefs(userInfoStore)
 
 watch(
   token,
   () => {
     if (token.value) {
-      userInfoStore.getUserInfo();
+      userInfoStore.getUserInfo()
+      chatStore.reqChatList()
     }
   },
   { immediate: true }
-);
+)
+
+const showDot = computed(() => {
+  let newTatol = chatList.value.reduce((sum, item) => sum + item?.unreadMessageCount, 0)
+  console.log(newTatol, 'newTatol')
+
+  if (newTatol) {
+    return false
+  } else {
+    return true
+  }
+})
 </script>
 
 <style lang="scss" scoped></style>

src/components/Profile/InteractionMessage/All.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>全部消息</div>
-</template>
-<script setup></script>
-<style lang="scss" scoped></style>

src/components/Profile/InteractionMessage/Eit.vue

@@ -1,5 +1,77 @@
 <template>
-  <div>艾特功能</div>
+  <div class="flex justify-between itmes-start px-16 py-8 mb-12">
+    <div class="w-265 shrink-0 box-border flex justify-start itmes-start">
+      <div class="w-32 h-32 shrink-0 rounded-full mr-8 overflow-hidden">
+        <img
+          v-if="itemData?.headImageUrl"
+          class="w-full h-full object-cover"
+          :src="itemData?.headImageUrl"
+          alt=""
+        />
+        <img
+          v-else
+          class="w-full h-full object-cover"
+          src="https://www.xiaoyaotravel.com/_nuxt/default_avatar.gSq5JxK1.png"
+          alt=""
+        />
+      </div>
+
+      <div class="w-223">
+        <div class="-mt-5">
+          <span class="text-sm text-black-6 pr-4">{{ itemData.name }} 暖阳</span>
+          <div :class="`inline-block box-border px-6 text-sm text-[#3369E7] bg-[#3369E7]/[0.08]`">
+            互关
+          </div>
+        </div>
+        <h1 class="w-full font-semibold line-clamp-2 text-black-3 text-base">
+          {{
+            itemData.messageConten
+              ? `提到了你：${itemData.messageConten}`
+              : '提到了你： 赞了你的游记'
+          }}
+        </h1>
+        <p class="text-black-9 text-sm">2024-12-24 15:47</p>
+      </div>
+    </div>
+
+    <div class="w-71 h-47 shrink-0 rounded-[4px] overflow-hidden">
+      <img
+        v-if="itemData?.travelNoteUrl"
+        class="w-full h-full object-cover"
+        :src="itemData?.travelNoteUrl"
+        alt=""
+      />
+      <img
+        v-else
+        class="w-full h-full object-cover"
+        src="~/assets/img/comment/H5_default.png"
+        alt=""
+      />
+    </div>
+  </div>
 </template>
-<script setup></script>
+<script setup>
+const listColor = [
+  {
+    text: '粉丝',
+    color: '#FF9300'
+  },
+  {
+    text: '互关',
+    color: '#3369E7'
+  }
+]
+
+defineProps({
+  itemData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const state = (parmas) => {
+  return listColor[parmas]
+}
+</script>
+
 <style lang="scss" scoped></style>

src/components/Profile/InteractionMessage/LikesandFavorites.vue

@@ -1,5 +1,71 @@
 <template>
-  <div>赞与收藏</div>
+  <div class="flex justify-between itmes-start px-16 py-8 mb-12">
+    <div class="w-265 shrink-0 box-border flex justify-start itmes-start">
+      <div class="w-32 h-32 shrink-0 rounded-full mr-8 overflow-hidden">
+        <img
+          v-if="itemData?.headImageUrl"
+          class="w-full h-full object-cover"
+          :src="itemData?.headImageUrl"
+          alt=""
+        />
+        <img
+          v-else
+          class="w-full h-full object-cover"
+          src="https://www.xiaoyaotravel.com/_nuxt/default_avatar.gSq5JxK1.png"
+          alt=""
+        />
+      </div>
+
+      <div>
+        <div class="-mt-5">
+          <span class="text-sm text-black-6 pr-4">{{ itemData.name }} 暖阳</span>
+          <div :class="`inline-block box-border px-6 text-sm text-[#FF9300] bg-[#FF9300]/[0.08]`">
+            {{ state(itemData?.fansState)?.text ? '' : '粉丝' }}
+          </div>
+        </div>
+        <h1 class="font-semibold text-black-3 text-base">赞了你的游记</h1>
+        <p class="text-black-9 text-sm">2024-12-24 15:47</p>
+      </div>
+    </div>
+
+    <div class="w-71 h-47 shrink-0 rounded-[4px] overflow-hidden">
+      <img
+        v-if="itemData?.travelNoteUrl"
+        class="w-full h-full object-cover"
+        :src="itemData?.travelNoteUrl"
+        alt=""
+      />
+      <img
+        v-else
+        class="w-full h-full object-cover"
+        src="~/assets/img/comment/H5_default.png"
+        alt=""
+      />
+    </div>
+  </div>
 </template>
-<script setup></script>
+<script setup>
+const listColor = [
+  {
+    text: '粉丝',
+    color: '#FF9300'
+  },
+  {
+    text: '互关',
+    color: '#3369E7'
+  }
+]
+
+defineProps({
+  itemData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const state = (parmas) => {
+  return listColor[parmas]
+}
+</script>
+
 <style lang="scss" scoped></style>

src/components/Profile/News/AllMessage.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="flex justify-between itmes-start px-16 py-8 mb-12">
-    <!-- <template #icon> -->
-    <div class="w-265 shrink-0 box-border flex justify-start itmes-start">
-      <div class="w-32 h-32 shrink-0 rounded-full mr-8 overflow-hidden">
-        <img
-          v-if="itemData?.headImageUrl"
-          class="w-full h-full object-cover"
-          :src="itemData?.headImageUrl"
-          alt=""
-        />
-        <img
-          v-else
-          class="w-full h-full object-cover"
-          src="https://www.xiaoyaotravel.com/_nuxt/default_avatar.gSq5JxK1.png"
-          alt=""
-        />
-      </div>
-      <!-- </template> -->
-      <!-- <template #title> -->
-      <div>
-        <div class="-mt-5">
-          <span class="text-sm text-black-6 pr-4">{{ itemData.name }} 暖阳</span>
-          <div :class="`inline-block box-border px-6 text-sm text-[#FF9300] bg-[#FF9300]/[0.08]`">
-            {{ state(itemData?.fansState)?.text ? '' : '粉丝' }}
-          </div>
-        </div>
-        <h1 class="font-semibold text-black-3 text-base">赞了你的游记</h1>
-        <p class="text-black-9 text-sm">2024-12-24 15:47</p>
-      </div>
-    </div>
-
-    <!-- </template> -->
-
-    <!-- <template #value> -->
-    <div class="w-71 h-47 shrink-0 rounded-[4px] overflow-hidden">
-      <img
-        v-if="itemData?.travelNoteUrl"
-        class="w-full h-full object-cover"
-        :src="itemData?.travelNoteUrl"
-        alt=""
-      />
-      <img
-        v-else
-        class="w-full h-full object-cover"
-        src="~/assets/img/comment/H5_default.png"
-        alt=""
-      />
-    </div>
-    <!-- </template> -->
-  </div>
-</template>
-<script setup>
-const listColor = [
-  {
-    text: '粉丝',
-    color: '#FF9300'
-  },
-  {
-    text: '互关',
-    color: '#3369E7'
-  }
-]
-
-defineProps({
-  itemData: {
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const state = (parmas) => {
-  return listColor[parmas]
-}
-</script>
-
-<style lang="scss" scoped></style>

src/components/Profile/News/ChatInput.vue

@@ -114,7 +114,7 @@ const textareaRef = ref(null)
 // 显示输入框
 // const showInput = ref(true)
 // 是否展示表情
-const showEmoji = ref(true)
+const showEmoji = ref(false)
 // 是否展示其他功能
 const showOther = ref(false)
 
@@ -189,7 +189,7 @@ const uploadPictures = () => {
 
 onChange(async (files) => {
   if (!files.length) return
-console.log(files[0])
+  console.log(files[0])
   const formData = new FormData()
   formData.append('uploadFile', files[0])
   formData.append('asImage', true)

src/pages/chat/group-square.vue

@@ -28,7 +28,7 @@
           >
             <div class="w-full h-full pl-16 box-border">
               <Empty v-if="!groupSquareList?.length && !loading" title="暂无群聊" top="100" />
-
+              <!-- v-model:loading="loading" -->
               <!-- <van-list
                 v-else
                 v-model:loading="loading"
@@ -47,8 +47,9 @@
                   class="border-b-[1px] py-16 pl-0"
                 >
                   <template #icon>
-                    <div style="" class="h-48 w-48 border rounded-full mr-12 overflow-hidden">
-                      <img class="w-full h-full object-cover" :src="item.groupAvatar" alt="" />
+                    <div style="" class="h-48 w-48 mr-12 overflow-hidden">
+                      <!-- <MultiHeader v-if="item?.userList" :size="48" :img-urls="[item?.userList]" />
+                      <MultiHeader v-else :size="48" :img-urls="[defaultAvatar]" /> -->
                     </div>
                   </template>
                   <template #title>
@@ -76,7 +77,6 @@
                     </p>
                   </template>
                   <template #value>
-                    <!-- codeShowStatus  v-if="item.state == 0" -->
                     <van-button
                       size="small"
                       :color="chageState(item.codeShowStatus).color"
@@ -88,42 +88,6 @@
                     >
                       {{ chageState(item.codeShowStatus).text }}
                     </van-button>
-                    <!-- <van-button
-                        v-if="item.codeShowStatus == 0"
-                        size="small"
-                        color="#fa8446"
-                        round
-                        class="w-60 text-base font-semibold"
-                        plain
-                        style="--van-button-default-padding: 0"
-                        @click="handleJoinGroup(item)"
-                      >
-                        加入
-                      </van-button>
-                      <van-button
-                        v-if="item.codeShowStatus == 1"
-                        size="small"
-                        color="#fa8446"
-                        round
-                        class="w-60 text-base font-semibold"
-                        plain
-                        style="--van-button-default-padding: 0"
-                        @click="handleJoinGroup(item)"
-                      >
-                        去聊天
-                      </van-button>
-                      <van-button
-                        v-if="item.codeShowStatus == 4"
-                        size="small"
-                        color="#999999"
-                        round
-                        class="w-60 text-base font-semibold"
-                        plain
-                        style="--van-button-default-padding: 0"
-                        @click="handleJoinGroup(item)"
-                      >
-                        已申请
-                      </van-button> -->
                   </template>
                 </van-cell>
               </template>
@@ -132,8 +96,6 @@
           </van-tab>
         </van-tabs>
       </div>
-
-      <!-- </div> -->
     </van-pull-refresh>
 
     <div class="fixed w-full p-16 pb-40 bottom-0 left-0 bg-white">
@@ -154,6 +116,9 @@
 </template>
 
 <script setup>
+const userInfoStore = useUserInfoStore()
+const { userInfo } = storeToRefs(userInfoStore)
+import defaultAvatar from '~/assets/img/default_avatar.png'
 definePageMeta({
   layout: false
 })
@@ -177,22 +142,15 @@ const queryParams = reactive({
 
 // 获取切换的数据
 const onClickTab = ({ title }) => {
-  // showToast(title)
-  // groupSquareList.value = []
   queryParams.groupTypeId = squareTabList.value.find((item) => item.typeName == title).id
-  // active.value = squareTabList.value.findIndex((item) => item.typeName == title)
-
-  // getList()
 }
 
 // 加入群聊
 const handleJoinGroup = (item) => {
   if (item.codeShowStatus == 0) {
-    // navigateTo({
-    //   path: '/chat/group',
-    //   query: { groupId: item.id },
-    //   replace: true
-    // })
+    console.log(item.id, '222')
+
+    getGroupAdd(item.id)
   }
   if (item.codeShowStatus == 1) {
     navigateTo({
@@ -213,7 +171,7 @@ const handleJoinGroup = (item) => {
 function getLoadList() {
   squareTabList.value = []
   queryParams.pageNum++
-  finished.value = true
+  // finished.value = true
   getList()
 }
 
@@ -280,9 +238,24 @@ const getList = async () => {
       }
     })
 
+    dataList.map((el) => {
+      if (Array.isArray(el?.userList) && userList?.length > 0) {
+        return {
+          ...el,
+          userList: changeHeadImage(el?.userList)
+        }
+      } else {
+        return {
+          ...el,
+          userList: [defaultAvatar]
+        }
+      }
+    })
+
+    console.log(dataList, 'arr')
+
     if (Array.isArray(dataList) && dataList?.length) {
       groupSquareList.value = groupSquareList.value.concat(dataList)
-      // groupSquareList.value = dataList
     } else {
       groupSquareList.value = []
     }
@@ -301,19 +274,25 @@ const getList = async () => {
   }
 }
 
-// watchEffect(
-//   [() => queryParams.groupTypeId],
-//   () => {
-//     finished.value = false
-//     groupSquareList.value = []
-//     getList()
-//   },
-//   {
-//     immediate: true
-//   }
-// )
+const changeHeadImage = (headerList) => {
+  return headerList.slice(0, 9).map((el) => (el?.headImageUrl ? el?.headImageUrl : defaultAvatar))
+}
 
+// 加群聊
+const getGroupAdd = async (groupId) => {
+  let { data } = await request('/website/tourMember/invite', {
+    method: 'post',
+    body: {
+      groupId,
+      ids: [userInfo.value.userId]
+    }
+  })
+  if (data) {
+    getList()
+  }
+}
 onMounted(() => {
+  userInfoStore.getUserInfo()
   getTabList()
 })
 

src/pages/chat/report.vue

@@ -1,35 +1,9 @@
 <template>
   <div class="w-full h-[100vh]">
-    <!--  @open="openReportDropdownMenuRef" -->
-    <van-dropdown-menu
-      id="reportDropdownMenuRef"
-      fixed
-      ref="reportDropdownMenuRef"
-      active-color="#FF9300"
-    >
-      <van-dropdown-item
-        ref="reportItemRef"
-        v-model="reportIndex"
-        @change="onreportFilterClose"
-        :options="
-          reportList.map((item) => ({
-            text: item?.typeName,
-            value: item?.id
-          }))
-        "
-      >
-        <template #title class="relative" active-color="#FF9300">
-          <div class="font-semibold text-2xl">
-            <div @click.stop="goBack" class="absolute top-0 -left-135">
-              <van-icon name="arrow-left" size="24" color="#000000" />
-            </div>
-            {{ title }}
-          </div>
-        </template>
-      </van-dropdown-item>
-    </van-dropdown-menu>
+    <ChatHeaderBar title="举报类型" />
+    <div class="h-46"></div>
 
-    <van-form @submit="onSubmit">
+    <van-form>
       <van-cell-group>
         <van-field
           :rules="[{ required: true, message: '请输入内容' }]"
@@ -47,7 +21,17 @@
           label-align="top"
         >
           <template #label>
-            <div>举报描述：{{ title }}</div>
+            <div>
+              举报描述
+              <span class="text-[#ee0a24] p-0">*</span>
+              ：
+              <span class="text-[#3369E7]">{{ title }}</span>
+              <span
+                @click.stop="showPopup = true"
+                class="ml-5 iconfont icon-caret-down text-black-0/[0.9]"
+                style="width: 16px"
+              ></span>
+            </div>
           </template>
         </van-field>
         <van-field
@@ -106,14 +90,6 @@
                 </div>
               </div>
             </div>
-            <!-- <div
-              class="border w-80 h-80 rounded-xl bg-[#F3F3F3] flex justify-center flex-wrap items-center"
-            >
-              <div @click="handleChangeAvatar">
-                <span class="iconfont icon-plus text-black/[0.4]" style="font-size: 18px"></span>
-                <p class="leading-3xl py-0 w-full text-sm text-center text-black/[0.4]">0/3</p>
-              </div>
-            </div> -->
           </template>
         </van-field>
       </van-cell-group>
@@ -132,12 +108,26 @@
         </van-button>
       </div>
     </van-form>
+
+    <van-popup v-model:show="showPopup" destroy-on-close round position="bottom">
+      <van-picker
+        :columns="reportList"
+        :columns-field-names="customFieldName"
+        :model-value="reportIndex"
+        @cancel="showPopup = false"
+        @confirm="onreportFilterClose"
+      />
+    </van-popup>
   </div>
 </template>
 <script setup>
 const route = useRoute()
 const router = useRouter()
-const goBack = () => router.back()
+
+const customFieldName = {
+  text: 'typeName',
+  value: 'id'
+}
 
 definePageMeta({
   layout: false
@@ -150,8 +140,8 @@ const reportIndex = ref('')
 const loading = ref(false)
 
 const title = ref(TEXT)
-const reportDropdownMenuRef = ref(null)
-const reportItemRef = ref(null)
+
+const showPopup = ref(false)
 
 const form = reactive({
   typeId: null,
@@ -222,36 +212,16 @@ const deleteImage = (index) => {
 
 const reportList = ref([])
 
-// 下拉菜单的方法
-function onreportFilterClose(value) {
-  form.elseTypeReason = '55555'
-  console.log(value, '12')
-
-  reportIndex.value = value
-
-  let el = reportList.find((item) => item?.id == value)
-  console.log(el, 'el')
-
-  title.value = el.typeName
-  form.elseTypeReason = el.description
-}
-
-function openReportDropdownMenuRef() {
-  nextTick(() => {
-    reportItemRef.value?.toggle(true)
-  })
-}
-
 // 获取举报类型
 const getreportType = async () => {
   try {
     let { data } = await request('/website/tourComplaintType/getTypeList')
 
     if (Array.isArray(data) && data?.length) {
-      reportIndex.value = data[0]?.id
+      reportIndex.value = [data[0]?.id]
       form.typeId = data[0]?.id
       title.value = data[0]?.typeName
-      form.elseTypeReason = '5555'
+      form.elseTypeReason = data[0]?.description
       reportList.value = data
     } else {
       reportList.value = []
@@ -259,6 +229,19 @@ const getreportType = async () => {
   } catch (err) {}
 }
 
+// 下拉菜单的方法
+function onreportFilterClose({ selectedValues, selectedOptions }) {
+  showPopup.value = false
+  reportIndex.value = selectedValues
+  let el = selectedOptions[0]
+  title.value = el.typeName
+  if (el.typeName == '其他') {
+    form.elseTypeReason = ''
+  } else {
+    form.elseTypeReason = el.description
+  }
+}
+
 const isBtnDisabled = computed(() => {
   return !form.elseTypeReason || !form.description || !form.image.length != 0
 })
@@ -270,8 +253,7 @@ const handleReport = async () => {
     isSubmiting.value = true
 
     if (form.objectType == 2) {
-      // form.groupId = route.query.groupId
-      form.groupId = '1876571259412688897'
+      form.groupId = route.query.groupId
     } else {
       form.userId = route.query.userId
     }
@@ -280,6 +262,7 @@ const handleReport = async () => {
       body: form
     })
     if (data) {
+      router.back()
       showSuccessToast('操作成功')
     }
     isSubmiting.value = false

src/pages/chat/set-single.vue

@@ -133,13 +133,17 @@ definePageMeta({
   layout: false
 })
 
+onMounted(() => {
+  chatStore.reqChatList()
+})
+
 const isNotDisturb = ref(0)
 const isTop = ref(0)
 
 const itemData = computed(() => {
   let item = chatList.value.filter((el) => el.toUserId == route.query.toUserId)[0]
-  isNotDisturb.value = item.isNotDisturb
-  isTop.value = item.isNotDisturb
+  isNotDisturb.value = item?.isNotDisturb
+  isTop.value = item?.isTop
   return item
 })
 
@@ -260,7 +264,7 @@ const clearChatHistory = () => {
     confirmButtonColor: '#FF9300'
   })
     .then(async () => {
-      const { data } = await request('/tourMessage/clearGroupMessage', {
+      const { data } = await request('/website/tourMessage/clearGroupMessage', {
         query: {
           groupId: itemData.value?.groupId
         }

src/pages/chat/single-add.vue

@@ -153,9 +153,7 @@ const queryParams = reactive({
 const addDataList = ref([])
 const filterDataList = ref([])
 
-useSeoMeta({
-  title: '我的消息'
-})
+const searchText = computed(() => (showName.value ? '暂无互关好友' : '暂无搜索结果'))
 
 // 选中要邀请的人
 const toggle = (item) => {
@@ -250,5 +248,9 @@ async function handleCreateGroup() {
     closeToast()
   }
 }
+
+useSeoMeta({
+  title: '我的消息'
+})
 </script>
 <style lang="scss" scoped></style>

src/pages/profile/interaction-message/index.vue

@@ -29,8 +29,6 @@
       </van-dropdown-item>
     </van-dropdown-menu>
 
-    <ProfileNewsAllMessage></ProfileNewsAllMessage>
-
     <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
       <Empty v-if="!interactionList.length && !loading" title="暂无评论" />
       <van-list
@@ -42,6 +40,25 @@
         @load="handleCurrentChange"
       >
         <template v-for="item in interactionList" :key="item?.id">
+          <!-- 点赞与收藏 -->
+          <ProfileInteractionMessageLikesandFavorites
+            v-if="item.noticeType == 5 || item.noticeType == -1"
+            :item-data="{
+              ...item,
+              messageContent: messageContentParse(item?.messageContent)
+            }"
+          ></ProfileInteractionMessageLikesandFavorites>
+
+          <!-- 艾特  -->
+          <ProfileInteractionMessageEit
+            v-if="item.noticeType == 6 || item.noticeType == -1"
+            :item-data="{
+              ...item,
+              messageContent: messageContentParse(item?.messageContent)
+            }"
+          ></ProfileInteractionMessageEit>
+
+          <!-- 我的评论的 -->
           <div
             v-if="interactionIndex == 0 || interactionIndex == 2"
             style="scrollbar-width: none"
@@ -190,6 +207,7 @@
 </template>
 
 <script setup>
+import { messageContentParse } from '~/utils/detalTime'
 import defaultImg from '~/assets/img/comment/H5_default.png'
 import commentsBlack from '~/assets/img/chat/comments-black.svg'
 import commentsOrange from '~/assets/img/chat/comments-orange.svg'
@@ -209,6 +227,7 @@ const { token } = storeToRefs(authStore)
 
 onMounted(() => {
   getUserInfo()
+  getlist()
 })
 
 definePageMeta({
@@ -219,15 +238,15 @@ definePageMeta({
 const interactionDropdownMenuList = [
   {
     text: '全部消息',
-    value: 5,
+    value: '-1',
     icon: commentsBlack,
     iconM: commentsBlack,
     iconO: commentsOrange
   },
-  { text: '赞与收藏', value: 4, icon: like, iconM: like, iconO: likeOrange },
+  { text: '赞与收藏', value: 5, icon: like, iconM: like, iconO: likeOrange },
   {
     text: '提及',
-    value: 3,
+    value: 10,
     icon: eit,
     iconM: eit,
     iconO: eitOrange
@@ -250,7 +269,7 @@ const loading = ref(false)
 const refreshing = ref(false)
 
 // 互动消息的索引
-const interactionIndex = ref(5)
+const interactionIndex = ref(-1)
 const interactionTitle = ref('全部消息')
 
 const interactionDropdownMenuRef = ref(null)
@@ -296,10 +315,11 @@ function coveredContent(val) {
   })
 }
 
-// 获取互动消息的数据列表
+// 获取互动消息的评论的数据列表
 const getInteractionList = async () => {
   try {
     loading.value = true
+
     const {
       data: { dataList, totalCount }
     } = await request(`/website/comment/tourTravelNotesComment/my-comments`, {
@@ -325,6 +345,36 @@ const getInteractionList = async () => {
   }
 }
 
+// 获取互动的全部消息
+const getlist = async () => {
+  try {
+    loading.value = true
+
+    const {
+      data: { dataList, totalCount }
+    } = await request(`/website/tourMessage/getInteractionList`, {
+      query: {
+        pageNum: pageNum.value,
+        pageSize: 20,
+        noticeType: interactionIndex.value
+      }
+    })
+
+    if (!Array.isArray(dataList) || !dataList.length) return (interactionList.value = [])
+    interactionList.value = interactionList.value.concat(dataList)
+    refreshing.value = false
+
+    if (interactionList.value.length >= totalCount) {
+      finished.value = true
+    } else {
+      finished.value = false
+    }
+  } finally {
+    refreshing.value = false
+    loading.value = false
+  }
+}
+
 // 点赞的的方法
 
 // 下拉刷新

src/pages/profile/my-news/index.vue

@@ -7,130 +7,166 @@
       style="opacity: 0; z-index: -1"
     ></audio>
 
-    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
-    <van-sticky :offset-top="50">
-      <div class="w-full text-xl font-semibold px-16 h-48 flex justify-start items-center bg-white">
-        <span
-          @click="showPopover = true"
-          v-if="showPopover"
-          class="iconfont icon-plus text-[#FF9300]"
-          style="font-size: 24px"
-        ></span>
-        <span v-else class="iconfont icon-plus text-black" style="font-size: 24px"></span>
-
-        <van-popover
-          v-model:show="showPopover"
-          placement="bottom"
-          theme="dark"
-          offset="[5,20]"
-          :actions="actionsList"
-          @select="onSelect"
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-sticky :offset-top="50">
+        <div
+          class="w-full text-xl font-semibold px-16 h-48 flex justify-start items-center bg-white"
         >
-          <template #reference>
-            <span :class="`${showPopover ? 'text-[#FF9300]' : 'text-black-3'}`">添加</span>
-          </template>
-        </van-popover>
-      </div>
-    </van-sticky>
-
-    <div
-      @click="onChatPage('/profile/system-message', {})"
-      class="w-full relative h-82 flex justify-start items-center px-16"
-    >
-      <van-badge
-        v-if="chatList[0]?.unreadMessageCount"
-        v-bind="messageNumber(chatList[0]?.unreadMessageCount)"
-        max="99"
+          <span
+            @click="showPopover = true"
+            v-if="showPopover"
+            class="iconfont icon-plus text-[#FF9300]"
+            style="font-size: 24px"
+          ></span>
+          <span v-else class="iconfont icon-plus text-black" style="font-size: 24px"></span>
+
+          <van-popover
+            v-model:show="showPopover"
+            placement="bottom"
+            theme="dark"
+            offset="[5,20]"
+            :actions="actionsList"
+            @select="onSelect"
+          >
+            <template #reference>
+              <span :class="`${showPopover ? 'text-[#FF9300]' : 'text-black-3'}`">添加</span>
+            </template>
+          </van-popover>
+        </div>
+      </van-sticky>
+
+      <div
+        @click="
+          onChatPage('/profile/system-message', {
+            groupId: chatList[0]?.groupId
+          })
+        "
+        class="w-full relative h-82 flex justify-start items-center px-16"
       >
+        <van-badge
+          v-if="chatList[0]?.unreadMessageCount"
+          v-bind="messageNumber(chatList[0]?.unreadMessageCount)"
+          max="99"
+        >
+          <div
+            class="w-48 h-48 bg-[#0052D9] rounded-full overflow-hidden flex justify-center items-center"
+          >
+            <img
+              class="w-24 h-24 shrink-0 object-cover"
+              src="~/assets/img/chat/remind.svg"
+              alt=""
+            />
+          </div>
+        </van-badge>
+
         <div
+          v-else
           class="w-48 h-48 bg-[#0052D9] rounded-full overflow-hidden flex justify-center items-center"
         >
           <img class="w-24 h-24 shrink-0 object-cover" src="~/assets/img/chat/remind.svg" alt="" />
         </div>
-      </van-badge>
-
-      <div
-        v-else
-        class="w-48 h-48 bg-[#0052D9] rounded-full overflow-hidden flex justify-center items-center"
-      >
-        <img class="w-24 h-24 shrink-0 object-cover" src="~/assets/img/chat/remind.svg" alt="" />
-      </div>
 
-      <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
-        <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
-          {{ chatList[0]?.groupName }}
-        </h1>
-        <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
-          {{
-            chatList[0]?.lastMessage
-              ? messageContentParse(chatList[0]?.lastMessage?.messageContent)
-              : ''
-          }}
-        </p>
-      </div>
+        <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
+          <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
+            {{ chatList[0]?.groupName }}
+          </h1>
+          <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
+            {{
+              chatList[0]?.lastMessage
+                ? messageContentParse(chatList[0]?.lastMessage?.messageContent)
+                : ''
+            }}
+          </p>
+        </div>
 
-      <div class="w-35 h-48 shrink-0">
-        <p class="text-black/[0.6] text-sm text-end">
-          {{
-            chatList[0]?.lastMessage ? createTimeSplit(chatList[0]?.lastMessage?.createTime) : ''
-          }}
-        </p>
+        <div class="w-35 h-48 shrink-0">
+          <p class="text-black/[0.6] text-sm text-end">
+            {{
+              chatList[0]?.lastMessage ? createTimeSplit(chatList[0]?.lastMessage?.createTime) : ''
+            }}
+          </p>
+        </div>
+        <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
       </div>
-      <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
-    </div>
-
-    <div
-      @click="navigateTo('/follow?listType=fans')"
-      class="w-full relative h-82 flex justify-start items-center px-16"
-    >
-      <van-badge
-        v-if="chatList[1]?.unreadMessageCount"
-        v-bind="messageNumber(chatList[1]?.unreadMessageCount)"
-        max="99"
+      <!-- navigateTo('/follow?listType=fans') -->
+      <div
+        @click="
+          onChatPage('/follow', {
+            listType: 'fans',
+            groupId: chatList[1]?.groupId
+          })
+        "
+        class="w-full relative h-82 flex justify-start items-center px-16"
       >
+        <van-badge
+          v-if="chatList[1]?.unreadMessageCount"
+          v-bind="messageNumber(chatList[1]?.unreadMessageCount)"
+          max="99"
+        >
+          <div
+            class="w-48 h-48 bg-[#FF9300] rounded-full overflow-hidden flex justify-center items-center"
+          >
+            <img class="w-24 h-24 shrink-0 object-cover" src="~/assets/img/chat/user.svg" alt="" />
+          </div>
+        </van-badge>
+
         <div
+          v-else
+          @click="navigateTo('/follow?listType=fans')"
           class="w-48 h-48 bg-[#FF9300] rounded-full overflow-hidden flex justify-center items-center"
         >
           <img class="w-24 h-24 shrink-0 object-cover" src="~/assets/img/chat/user.svg" alt="" />
         </div>
-      </van-badge>
 
-      <div
-        v-else
-        @click="navigateTo('/follow?listType=fans')"
-        class="w-48 h-48 bg-[#0052D9] rounded-full overflow-hidden flex justify-center items-center"
-      >
-        <img class="w-24 h-24 shrink-0 object-cover" src="~/assets/img/chat/user.svg" alt="" />
-      </div>
+        <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
+          <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
+            {{ chatList[1]?.groupName }}
+          </h1>
+          <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
+            {{
+              chatList[1]?.lastMessage
+                ? messageShowName(chatList[1]?.lastMessage?.messageContent)
+                : ''
+            }}
+          </p>
+        </div>
 
-      <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
-        <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
-          {{ chatList[1]?.groupName }}
-        </h1>
-        <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
-          {{
-            chatList[1]?.lastMessage
-              ? messageContentParse(chatList[1]?.lastMessage?.messageContent)
-              : ''
-          }}
-        </p>
+        <div class="w-35 h-48 shrink-0">
+          <p class="text-black/[0.6] text-sm text-end">
+            {{
+              chatList[1]?.lastMessage ? createTimeSplit(chatList[1]?.lastMessage?.createTime) : ''
+            }}
+          </p>
+        </div>
+        <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
       </div>
 
-      <div class="w-35 h-48 shrink-0">
-        <p class="text-black/[0.6] text-sm text-end">
-          {{
-            chatList[1]?.lastMessage ? createTimeSplit(chatList[1]?.lastMessage?.createTime) : ''
-          }}
-        </p>
-      </div>
-      <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
-    </div>
-    <div
-      @click="onChatPage('/profile/interaction-message', {})"
-      class="w-full relative h-82 flex justify-start items-center px-16"
-    >
-      <van-badge v-if="messagesNumber > 0" v-bind="messageNumber(messagesNumber)" max="99">
+      <div
+        @click="
+          onChatPage('/profile/interaction-message', {
+            groupId: chatList[2]?.groupId
+          })
+        "
+        class="w-full relative h-82 flex justify-start items-center px-16"
+      >
+        <van-badge
+          v-if="chatList[2]?.unreadMessageCount > 0"
+          v-bind="messageNumber(chatList[2]?.unreadMessageCount)"
+          max="99"
+        >
+          <div
+            class="w-48 h-48 bg-[#FF476A] rounded-full overflow-hidden flex justify-center items-center"
+          >
+            <img
+              class="w-24 h-24 shrink-0 object-cover"
+              src="~/assets/img/chat/weixin-shake.svg"
+              alt=""
+            />
+          </div>
+        </van-badge>
+
         <div
+          v-else
           class="w-48 h-48 bg-[#FF476A] rounded-full overflow-hidden flex justify-center items-center"
         >
           <img
@@ -139,137 +175,125 @@
             alt=""
           />
         </div>
-      </van-badge>
 
-      <div
-        v-else
-        class="w-48 h-48 bg-[#FF476A] rounded-full overflow-hidden flex justify-center items-center"
-      >
-        <img
-          class="w-24 h-24 shrink-0 object-cover"
-          src="~/assets/img/chat/weixin-shake.svg"
-          alt=""
-        />
+        <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
+          <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
+            {{ chatList[2]?.groupName }}
+          </h1>
+          <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
+            {{
+              chatList[2]?.lastMessage
+                ? messageContentParse(chatList[2]?.lastMessage?.messageContent)
+                : ''
+            }}
+          </p>
+        </div>
+
+        <div class="w-35 h-48 shrink-0">
+          <p class="text-black/[0.6] text-sm text-end">
+            {{
+              chatList[2]?.lastMessage ? createTimeSplit(chatList[2]?.lastMessage?.createTime) : ''
+            }}
+          </p>
+        </div>
+        <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
       </div>
 
-      <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
-        <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
-          {{ chatList[2]?.groupName }}
-        </h1>
-        <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
-          {{
-            chatList[2]?.lastMessage
-              ? messageContentParse(chatList[2]?.lastMessage?.messageContent)
-              : ''
-          }}
-        </p>
+      <!-- 置顶绘画列表  "-->
+      <div v-if="isTopList?.length && activeNames" class="w-full">
+        <template v-for="(item, index) in isTopList" :key="item?.id">
+          <template v-if="index > 2">
+            <!-- 单聊会话 -->
+            <ProfileNewsGroupChat
+              v-if="item?.noticeType == 2"
+              :item-data="{
+                ...item,
+                updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
+              }"
+              @on-chat-page="
+                onChatPage('/chat/group', { userId: user.userId, groupId: item?.groupId })
+              "
+              @on-no-bother="noBother(item)"
+              @on-is-top="onIsTop(item)"
+              @on-conv-delete="onIsShow(item)"
+            />
+
+            <!-- 群聊会话 -->
+            <ProfileNewsSingleChat
+              v-if="item?.noticeType == 1"
+              :item-data="{
+                ...item,
+                updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
+              }"
+              @on-chat-page="
+                onChatPage('/chat/single', {
+                  sendUserId: userInfo.userId,
+                  groupId: item?.groupId,
+                  getUserId: item?.toUserId,
+                  groupRemark: item?.groupRemark
+                })
+              "
+              @on-no-bother="noBother(item)"
+              @on-is-top="onIsTop(item)"
+              @on-conv-delete="onIsShow(item)"
+            />
+          </template>
+          <template v-else></template>
+        </template>
       </div>
 
-      <div class="w-35 h-48 shrink-0">
-        <p class="text-black/[0.6] text-sm text-end">
-          {{
-            chatList[2]?.lastMessage ? createTimeSplit(chatList[2]?.lastMessage?.createTime) : ''
-          }}
-        </p>
+      <div
+        v-if="isTopList.length >= 6"
+        @click="activeNames = !activeNames"
+        class="flex justify-between items-center h-20 -mt-20 w-full p-16 box-border"
+      >
+        <div class="shrink-0 flex items-center">
+          <van-icon name="bars" size="16" class="mr-5" />
+          <span class="text-sm">{{ collapseTitle }}</span>
+        </div>
+        <div class="w-16 h-16 shrink-0">
+          <van-icon name="arrow" size="16" />
+        </div>
       </div>
-      <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
-    </div>
-
-    <!-- 置顶绘画列表  "-->
-    <div v-if="isTopList?.length && activeNames" class="w-full">
-      <template v-for="(item, index) in isTopList" :key="item?.id">
-        <template v-if="index > 2">
-          <!-- 单聊会话 -->
-          <ProfileNewsGroupChat
-            v-if="item?.noticeType == 2"
-            :item-data="{
-              ...item,
-              updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
-            }"
-            @on-chat-page="
-              onChatPage('/chat/group', { userId: user.userId, groupId: item?.groupId })
-            "
-            @on-no-bother="noBother(item)"
-            @on-is-top="onIsTop(item)"
-            @on-conv-delete="onIsShow(item)"
-          />
 
-          <!-- 群聊会话 -->
-          <ProfileNewsSingleChat
-            v-if="item?.noticeType == 1"
-            :item-data="{
-              ...item,
-              updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
-            }"
-            @on-chat-page="
-              onChatPage('/chat/single', {
-                sendUserId: userInfo.userId,
-                groupId: item?.groupId,
-                getUserId: item?.toUserId,
-                groupRemark: item?.groupRemark
-              })
-            "
-            @on-no-bother="noBother(item)"
-            @on-is-top="onIsTop(item)"
-            @on-conv-delete="onIsShow(item)"
-          />
-        </template>
-        <template v-else></template>
+      <!-- 不置顶的会话列表 -->
+      <template v-for="(item, index) in pinnedList" :key="item?.id">
+        <ProfileNewsGroupChat
+          v-if="item?.noticeType == 2"
+          :item-data="{
+            ...item,
+            updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
+          }"
+          @on-chat-page="
+            onChatPage('/chat/group', {
+              userId: userInfo.userId,
+              groupId: item?.groupId
+            })
+          "
+          @on-no-bother="noBother(item)"
+          @on-is-top="onIsTop(item)"
+          @on-conv-delete="onIsShow(item)"
+        />
+        <ProfileNewsSingleChat
+          v-if="item?.noticeType == 1"
+          :item-data="{
+            ...item,
+            updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
+          }"
+          @on-chat-page="
+            onChatPage('/chat/single', {
+              sendUserId: userInfo.userId,
+              groupId: item?.groupId,
+              getUserId: item?.toUserId,
+              groupRemark: item?.groupRemark
+            })
+          "
+          @on-no-bother="noBother(item)"
+          @on-is-top="onIsTop(item)"
+          @on-conv-delete="onIsShow(item)"
+        />
       </template>
-    </div>
-
-    <div
-      v-if="isTopList.length >= 6"
-      @click="activeNames = !activeNames"
-      class="flex justify-between border items-center h-20 w-full p-16 box-border"
-    >
-      <div class="shrink-0 flex items-center">
-        <van-icon name="bars" size="16" class="mr-5" />
-        <span class="text-sm">{{ collapseTitle }}</span>
-      </div>
-      <div class="w-16 h-16 shrink-0">
-        <van-icon name="arrow" size="16" />
-      </div>
-    </div>
-
-    <!-- 不置顶的会话列表 -->
-    <template v-for="(item, index) in pinnedList" :key="item?.id">
-      <ProfileNewsGroupChat
-        v-if="item?.noticeType == 2"
-        :item-data="{
-          ...item,
-          updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
-        }"
-        @on-chat-page="
-          onChatPage('/chat/group', {
-            userId: userInfo.userId,
-            groupId: item?.groupId
-          })
-        "
-        @on-no-bother="noBother(item)"
-        @on-is-top="onIsTop(item)"
-        @on-conv-delete="onIsShow(item)"
-      />
-      <ProfileNewsSingleChat
-        v-if="item?.noticeType == 1"
-        :item-data="{
-          ...item,
-          updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
-        }"
-        @on-chat-page="
-          onChatPage('/chat/single', {
-            sendUserId: userInfo.userId,
-            groupId: item?.groupId,
-            getUserId: item?.toUserId,
-            groupRemark: item?.groupRemark
-          })
-        "
-        @on-no-bother="noBother(item)"
-        @on-is-top="onIsTop(item)"
-        @on-conv-delete="onIsShow(item)"
-      />
-    </template>
-    <!-- </van-pull-refresh> -->
+    </van-pull-refresh>
   </div>
 </template>
 
@@ -288,7 +312,6 @@ const actionsList = [
 ]
 const userInfoStore = useUserInfoStore()
 const { userInfo } = storeToRefs(userInfoStore)
-// const uploadUrl = `${import.meta.env.VITE_APP_BASE_URL}/website/tourMessage/upload`
 const chatStore = useChatStore()
 const { messages, connectSta, chatList, curConversiton, onNewMessage } = storeToRefs(chatStore)
 
@@ -310,8 +333,8 @@ const showPopover = ref(false)
 const messagesNumber = ref(10)
 
 // 置顶列表
-const isTopList = computed(() => chatList.value.filter((el) => el.isTop != 1))
-const pinnedList = computed(() => chatList.value.filter((el) => el?.isTop == 1) ?? [])
+const pinnedList = computed(() => chatList.value.filter((el) => el.isTop != 1))
+const isTopList = computed(() => chatList.value.filter((el) => el?.isTop == 1) ?? [])
 const pinnedSystemList = ref([]) //三个固定的消息
 
 // 个置顶聊天
@@ -324,21 +347,6 @@ const collapseTitle = ref(collapse_text)
 // 刷新
 const refreshing = ref(false)
 
-// 建立链接
-// async function getUserInfo() {
-//   const { data } = await request('/website/tourism/user/view')
-//   chatStore.user = data
-//   user.value = data
-//   console.log(data, 'createConnection')
-
-//   await chatStore.createConnection(data.pass)
-//   chatStore.reqChatList()
-
-//   console.log('用户信息：', chatStore.user)
-
-//   // console.log('会话列表：', chatStore.chatList.value)
-// }
-
 useSeoMeta({
   title: '我的消息'
 })
@@ -423,6 +431,7 @@ const onChatPage = async (path, query) => {
   })
 
   if (res && res?.success) {
+    chatStore.reqChatList()
     navigateTo({
       path,
       query
@@ -451,33 +460,20 @@ onMounted(() => {
   // chatStore.reqChatList()
 })
 
-// watch(
-//   wsConnect,
-//   async (newValue, oldValue) => {
-//     console.log(newValue, 'wsConnect')
-//     console.log(chatLists.value, 'chatLists')
-
-//     if (newValue == 2) {
-//       pinnedList.value = chatList.value.filter((el) => el.isTop != 1)
-//       isTopList.value = chatList.value.filter((el) => el.isTop == 1)
-//     }
-//   },
-//   { immediate: true }
-// )
-// watch(
-//   chatList.value,
-//   (newList, oldList) => {
-//     // pinnedSystemList.value = newList.filter((el) => el.noticeType == 3)
-//     pinnedList.value = newList.filter((el) => el.isTop != 1)
-//     isTopList.value = newList.filter((el) => el.isTop == 1)
-
-//     console.log(pinnedList.value, 'pinnedList')
-//     console.log(isTopList.value, 'isTopList')
-//     // console.log(newList, 'newList')
-//     console.log(oldList, 'oldList')
-//   },
-//   { immediate: true }
-// )
+// 消息的内容转换
+function messageShowName(messageContent) {
+  try {
+    let content = {}
+    if (messageContent) {
+      content = JSON.parse(messageContent)
+      return content.showName
+    } else {
+      return ''
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
 </script>
 
 <style lang="scss" scoped></style>

src/pages/profile/system-message/details.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="box-border p-16 mb-8">
+  <div class="box-border p-16 mb-8 w-full h-full">
     <ChatHeaderBar title="系统消息详情" />
+
     <h1 class="font-medium pt-50 mb-8 text-2xl text-black-3 leading-7xl">
-      在克鲁舍瓦茨停留半天，于是就去了这家新开的柴犬餐馆，非常好吃推荐给大家
+      {{ itemData?.title }}
     </h1>
 
-    <div class="mb-16 text-sm text-black-9">2024/12/27 02:06</div>
+    <div class="mb-16 text-sm text-black-9">{{ itemData?.createTime }}</div>
 
     <div class="text-black-3 text-[13px]" v-html="itemData?.content"></div>
   </div>
@@ -28,14 +29,12 @@ onMounted(() => {
 
 const itemData = ref(null)
 
-const loading = ref(false)
-
-// const { data } = await useMyFetch(`website/basic/directoryList?isHotspot=1`)
-
-const getData = () => {
-  itemData.value = {
-    content:
-      '这家餐馆位于老城区一条安静的小巷里，门口挂着一块简单的木制招牌，写着“柴犬餐馆”。听到这个名字，我顿时被吸引住了——这会是一家以柴犬为主题的餐厅吗？推门进去，果然映入眼帘的是几张柴犬的照片和玩偶装饰，整体环境散发出一种温馨的氛围，仿佛是来到了一家好友的家中。 我点了一份推荐的招牌菜，是一道用当地香料腌制的烤肉，搭配着新鲜的蔬菜和自制的酱料。食物端上来时，满室飘散着烤肉的香气，外焦里嫩的口感配合着独特的酱料，让人一口咬下去便沉浸在美味之中。桌旁的小柴犬时不时抬头看看我，好像在询问我是否喜欢这里的食物。 虽然只是短短的半天停留，但在这里，我感受到了克鲁舍瓦茨的另一面——不仅是历史的厚重感，更有着现代与温馨的碰撞。这家柴犬餐馆成为了这段旅途中温暖的回忆，不仅仅因为食物的美味，还因为这里的氛围带给人一种轻松和快乐。口咬下去便沉浸在美味之中。桌旁的小柴犬时不时抬头看看我，好像在询问我是否喜欢这里的食物。 虽然只是短短的半天停留，但在这里，我感受到了克鲁舍瓦茨的另一面——不仅是历史的厚重感，更有着现代与温馨的碰撞。这家柴犬餐馆成为了这段旅途中温暖的回忆，不仅仅因为食物的美味，还因为这里的氛围带给人一种轻松和快乐。口咬下去便沉浸在美味之中。桌旁的小柴犬时不时抬头看看我，好像在询问我是否喜欢这里的食物。 虽然只是短短的半天停留，但在这里，我感受到了克鲁舍瓦茨的另一面——不仅是历史的厚重感，更有着现代与温馨的碰撞。'
+const getData = async () => {
+  const { data } = await request(
+    `/website/systemMessageController/getSysMessageDetail?messageId=${id?.value}`
+  )
+  if (data) {
+    itemData.value = data
   }
 }
 </script>

src/pages/profile/system-message/index.vue

@@ -1,20 +1,38 @@
 <template>
-  <div style="height: calc(100vh - 40px)" class="w-full bg-[#F7F8FA]">
+  <div style="height: 100vh" class="w-full bg-[#F7F8FA]">
     <ChatHeaderBar title="系统消息列表" />
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <div style="height: 100vh" class="pt-40">
+        <Empty v-if="!listData?.length && !loading" title="暂无系统消息" top="100" />
 
-    <div v-for="item in listData" @click="onChatPage(item?.id)" :key="item.id" class="w-full pt-40">
-      <p class="w-full pt-16 mb-12 text-center text-black-9 text-sm">
-        {{ formatTimestamp(item?.createTime) }}
-      </p>
-      <div class="w-[91.2%] box-border h-103 mx-16 bg-white p-16">
-        <h1 class="text-black w-full line-clamp-1 text-2xl font-semibold mb-8">
-          {{ item?.title ? item?.title : '标题标题' }}
-        </h1>
-        <p class="line-clamp-2 w-full leading-3xl text-black-9 text-sm">
-          {{ item?.messageContent }}
-        </p>
+        <van-list
+          v-else-if="listData.length"
+          v-model:loading="loading"
+          error-text="获取失败"
+          finished-text="-- 没有更多了 --"
+          :finished="finished"
+          :immediate-check="false"
+          @load="getLoadList"
+        >
+          <div v-for="item in listData" @click="onChatPage(item?.id)" :key="item.id" class="w-full">
+            <p class="w-full pt-16 mb-12 text-center text-black-9 text-sm">
+              {{ formatTimestamp(item?.createTime) }}
+            </p>
+            <div
+              style="box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05)"
+              class="w-[91.2%] box-border h-103 mx-16 bg-white p-16 rounded-2xl"
+            >
+              <h1 class="text-black w-full line-clamp-1 text-2xl font-semibold mb-8">
+                {{ messageShowName(item?.messageContent).title }}
+              </h1>
+              <p class="line-clamp-2 w-full leading-3xl text-black-9 text-sm">
+                {{ messageShowName(item?.messageContent)?.messageContent }}
+              </p>
+            </div>
+          </div>
+        </van-list>
       </div>
-    </div>
+    </van-pull-refresh>
   </div>
 </template>
 
@@ -22,10 +40,24 @@
 useSeoMeta({
   title: '系统消息'
 })
+
+const refreshing = ref(false)
+const loading = ref(false)
+const finished = ref(false)
+
+const queryParams = reactive({
+  pageSize: 10,
+  pageNum: 1,
+  noticeType: 3
+})
+
 // 跳转聊天页面
 const onChatPage = (query) => {
   navigateTo({
-    path: `/profile/system-message/details?id=${query}`
+    path: `/profile/system-message/details`,
+    query: {
+      id: query
+    }
   })
 }
 
@@ -35,21 +67,66 @@ definePageMeta({
 
 const listData = ref([])
 
-onMounted(() => {
+// 触底加载
+const getLoadList = () => {
+  queryParams.pageNum++
+  finished.value = true
   getList()
-})
+}
+
+const onRefresh = () => {
+  refreshing.value = true
+  queryParams.pageNum = 1
+  listData.value = []
+  getList()
+}
 
 const getList = async () => {
-  const { data } = await request('/website/tourMessage/getsListSystemMessages', {
-    query: {
-      TypeId: 3
+  try {
+    loading.value = true
+    const {
+      data: { dataList, totalCount }
+    } = await request('/website/tourMessage/getsListSystemAndFocusMessages', {
+      query: {
+        ...queryParams
+      }
+    })
+    loading.value = false
+    refreshing.value = false
+    if (Array.isArray(dataList) && dataList.length) {
+      listData.value = listData.value.concat(dataList)
     }
-  })
 
-  if (Array.isArray(data) && data.length) {
-    listData.value = data
+    if (listData.value.length >= totalCount) {
+      finished.value = true
+    } else {
+      finished.value = false
+    }
+  } catch (error) {
+  } finally {
+    refreshing.value = false
+    loading.value = false
   }
 }
+
+// 消息的内容转换
+function messageShowName(messageContent) {
+  try {
+    let content = {}
+    if (messageContent) {
+      content = JSON.parse(messageContent)
+      return content
+    } else {
+      return ''
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+onMounted(() => {
+  getList()
+})
 </script>
 
 <style lang="scss" scoped></style>

src/stores/chat.js

@@ -1,6 +1,8 @@
 export const useChatStore = defineStore('chat', () => {
   const config = useRuntimeConfig()
   const baseIM = config.public.baseIM
+  // 当前登录用户信息
+  const user = ref({})
 
   const isConnect = ref(false)
   // 连接状态 0: 未连接 1: 连接中 2: 已连接 3: 已断开
@@ -91,13 +93,65 @@ export const useChatStore = defineStore('chat', () => {
 
   const messages = ref('first message')
 
-  // 当前登录用户信息
-  const user = ref({})
+  /**
+   *  获取系统消息和关注消息
+   *  @param {number} noticeType 1.单聊消息 2 群聊消息 3系统消息 4关注信息 5点赞 6评论 7评论区艾特 8文章内艾特 9访问
+   *  @param {number} pageSize 每页条数
+   *  @param {number} pageNum 页码
+   * */
+  async function getListSystemAndFocusMessages(obj = {}) {
+    return new Promise(async (resolve, reject) => {
+      const query = { ...obj }
+      const res = await request('/website/tourMessage/getsListSystemAndFocusMessages', { query })
+      console.log('各种消息：', res)
+      resolve(res)
+    })
+  }
+
+  /**
+   * 创建会话
+   * @param {Object} data
+   * data.getUserId 接收者id(对方)
+   * data.sendUserId 发送者id(自己)
+   * data.groupId 如果是单聊，就在本地创建一个groupId，如果是群聊，必须传一个真实存在的groupId
+   * */
+  async function createConversation(data = {}) {
+    const { getUserId, sendUserId, groupId, noticeType } = data
+
+    if (noticeType != 1 && noticeType != 2) return
+
+    if (noticeType == 1 && !getUserId) return ElMessage.error('缺少必要参数')
+
+    if (!sendUserId || !groupId) return ElMessage.error('缺少必要参数')
+
+    await request('/website/tourGroup/createMember', { method: 'post', body: data })
+
+    await reqChatList()
+
+    if (noticeType == 1) {
+      for (let i = 0; i < chatList.value.length; i++) {
+        if (chatList.value[i].toUserId == getUserId) {
+          curConversiton.value = chatList.value[i]
+          break
+        }
+      }
+    }
+
+    if (noticeType == 2) {
+      for (let i = 0; i < chatList.value.length; i++) {
+        if (chatList.value[i].groupId == groupId) {
+          curConversiton.value = chatList.value[i]
+        }
+      }
+    }
+  }
 
   return {
     messages,
     reqChatList,
     createConnection,
+    getListSystemAndFocusMessages,
+    createConversation,
     ws,
     conversations,
     curConversiton,
@@ -107,6 +161,7 @@ export const useChatStore = defineStore('chat', () => {
     chatList,
     isConnect,
     connectSta,
+
     onNewMessage
   }
 })