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

<template>
  <div class="w-full">
    <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"
          >
            <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="messagesNumber > 0" v-bind="messageNumber(messagesNumber)" 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/user.svg" alt="" />
        </div>

        <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-end">
          <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">系统消息</h1>
          <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
            你吃饭了么wwwwwdasdasdasdwwwwwwwwwwwwwwwwwwwwwwwssssssssssssssssssssssssssssss
          </p>
        </div>

        <div class="w-35 h-48 shrink-0">
          <p class="text-black/[0.6] text-sm text-end">02:06</p>
        </div>
        <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
      </div>

      <div
        @click="onChatPage('/', {})"
        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
            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
          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-end">
          <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">新增粉丝</h1>
          <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
            你吃饭了么wwwwwdasdasdasdwwwwwwwwwwwwwwwwwwwwwwwssssssssssssssssssssssssssssss
          </p>
        </div>

        <div class="w-35 h-48 shrink-0">
          <p class="text-black/[0.6] text-sm text-end">02:06</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
            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
          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-end">
          <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">互动消息</h1>
          <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">收藏了你的游记</p>
        </div>

        <div class="w-35 h-48 shrink-0">
          <p class="text-black/[0.6] text-sm text-end">02:06</p>
        </div>
        <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
      </div>

      <!-- 置顶绘画列表 -->

      <div v-if="activeNames" class="w-full">
        <template v-for="(item, index) in pinnedList" :key="index">
          <ProfileNewsGroupChat
            :item-data="{ title: item }"
            @on-chat-page="
              onChatPage('/chat/group', { userId: userInfo.userId, groupId: '1877542109622431746' })
            "
            @on-no-bother="noBother(item)"
            @on-conv-delete="convDelete()"
          />
        </template>
      </div>

      <div
        v-if="pinnedList.length >= 7"
        @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" />
          <!-- <img class="w-full h-full object-cover" src="" alt="" /> -->
        </div>
      </div>

      <ProfileNewsGroupChat
        @on-chat-page="onChatPage('/chat/group', { userId: userInfo.userId, groupId: 111 })"
        @on-no-bother="noBother()"
        @on-conv-delete="convDelete()"
      />
      <ProfileNewsSingleChat
        @on-chat-page="onChatPage('/chat/single', { userId: userInfo.userId, singleId: '2' })"
        @on-no-bother="noBother()"
        @on-conv-delete="convDelete()"
      />
    </van-pull-refresh>
  </div>
</template>

<script setup>
import comments from '~/assets/img/chat/comments-white.svg'
import plaza from '~/assets/img/chat/guangchang.svg'
import userAdd from '~/assets/img/chat/user-add.svg'

const actionsList = [
  { text: '创建群聊', icon: comments },
  { text: '群聊广场', icon: plaza },
  { text: '加入群聊', icon: plaza },
  { text: '添加用户', icon: userAdd }
]

const chatStore = useChatStore()

const userInfoStore = useUserInfoStore()
const { userInfo } = storeToRefs(userInfoStore)

onMounted(() => {
  userInfoStore.getUserInfo()
})

useSeoMeta({
  title: '我的消息'
})

// 获取连接状态
const isConnected = computed(() => chatStore.isConnected)

// 连接 WebSocket
const connectSocket = () => {
  chatStore.connect(`?userId=${userInfo.value.userId}`)
}

// 发送测试消息
const sendTestMessage = () => {
  chatStore.sendMessage({ message: 'Hello WebSocket!' })
}

// 断开 WebSocket
const disconnectSocket = () => {
  chatStore.disconnect()
}

// 消息历史
const messages = computed(() => chatStore.wsService.value?.messages || [])

const finished = ref(false)

const error = ref(false)

const loading = ref(false)

const showPopover = ref(false)

const messagesNumber = ref(10)

// 置顶列表
const pinnedList = ref([1, 2, 3, 4, 5, 6, 7])

// 个置顶聊天
const collapse_text = '折叠置顶聊天'

const activeNames = ref(true)
// collapse
const collapseTitle = ref(collapse_text)

// 刷新
const refreshing = ref(false)
// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  //   getVisaOrderList()
}

// 打扰和免打扰得
const noBother = (parmas) => {
  if (parmas?.bother == false) {
    parmas.bother = true
  } else {
    parmas.bother = false
  }
}

// 会话的删除
const convDelete = (parmas) => {}

// 消息数量通知的展示  需要动态的展示
const messageNumber = (content) => {
  let messageNumberObj = {}
  if (content <= 1) {
    messageNumberObj = {
      offset: [-5, 4],
      dot: true,
      content
    }
  }
  if (content > 1) {
    messageNumberObj = {
      offset: [-10, 7],
      content
    }
  }
  return messageNumberObj
}

// 跳转聊天页面
const onChatPage = (path, query) => {
  navigateTo({
    path,
    query
  })
}

// 选中的是那个页面
const onSelect = (action) => {
  if (action.text == '创建群聊') onChatPage('/chat/create-group', {})
  if (action.text == '群聊广场') onChatPage('/chat/group-square', {})
  if (action.text == '加入群聊') onChatPage('/chat/sweep', {})
  if (action.text == '添加用户') onChatPage('/chat/user-add', {})
}

async function getList() {
  try {
    let {
      data: { dataList }
    } = await request('/website/tourism/fans/getTourMemberList')
  } catch (error) {}
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped></style>