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

<template>
  <!-- hud -->
  <div class="w-full">
    <van-dropdown-menu fixed ref="interactionDropdownMenuRef" active-color="#FF9300">
      <van-dropdown-item
        v-model="interactionIndex"
        @change="onInteractionFilterClose"
        :options="
          interactionDropdownMenuList.map((item, index) => {
            if (item.value == interactionIndex) {
              item.icon = item.iconO
              return item
            } else {
              item.icon = item.iconM
              return item
            }
          })
        "
        ref="interactionItemRef"
      >
        <template #title class="relative" active-color="#FF9300">
          <div class="font-semibold text-base">
            <NuxtLink :to="'/profile/my-news'" class="absolute top-0 -left-135">
              <van-icon name="arrow-left" size="24" color="#000000" />
            </NuxtLink>
            {{ interactionTitle }}
          </div>
        </template>
      </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
        v-if="interactionList.length"
        v-model:loading="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text=""
        @load="handleCurrentChange"
      >
        <template v-for="item in interactionList" :key="item?.id">
          <div
            v-if="interactionIndex == 0 || interactionIndex == 2"
            style="scrollbar-width: none"
            class="mx-12 pt-8 mb-12 box-border border-b-[1px] border-dashed flex justify-between items-start"
          >
            <div class="flex shrink-0 w-[74%] justify-start items-start">
              <div class="w-32 h-32 rounded-full shrink-0">
                <img
                  v-if="item?.headImageUrlDictMap?.name"
                  class="w-full h-full object-cover rounded-full"
                  :src="item?.headImageUrlDictMap?.name"
                  alt=""
                />
                <img
                  v-else
                  class="w-full h-full object-cover rounded-full"
                  src="https://www.xiaoyaotravel.com/_nuxt/default_avatar.gSq5JxK1.png"
                  alt=""
                />
              </div>

              <div class="ml-8 w-[85%] w-full text-sm">
                <NuxtLink :to="`/yj/${item?.travelNoteId}`">
                  <p class="w-full line-clamp-1 text-black-6 font-normal leading-xl">
                    {{ item?.commentUserIdDictMap?.name }}
                  </p>
                  <p
                    :class="`w-full ${interactionIndex == 0 ? 'line-clamp-1' : 'line-clamp-2'} my-6 text-black-3 text-base leading-4xl`"
                  >
                    <span v-if="item?.replyUserId">
                      回复{{
                        item?.replyUserIdDictMap?.name != userInfo.showName
                          ? `@${item?.replyUserIdDictMap?.name}`
                          : ''
                      }}：
                    </span>
                    <span v-else>评论：</span>

                    <span v-html="coveredContent(item?.commentContent)"></span>
                  </p>
                  <p class="w-full mb-6 text-black-9 leading-xl">{{ item?.createTime }}</p>
                </NuxtLink>
                <div
                  @click.stop="addReply(item, item?.id)"
                  class="box-border mb-12 line-clamp-1 rounded-full w-95 h-26 flex justify-center items-center text-base px-8 text-black-3 leading-4xl bg-[#F5F5F5] active:bg-black/[0.1]"
                >
                  <div class="w-16 h-16 rounded-full shrink-0 mr-4">
                    <img
                      v-if="userInfo?.headImageUrl"
                      class="w-full h-full object-cover rounded-full"
                      :src="userInfo?.headImageUrl"
                      alt=""
                    />
                    <img
                      v-else
                      class="w-full h-full object-cover rounded-full"
                      src="https://www.xiaoyaotravel.com/_nuxt/default_avatar.gSq5JxK1.png"
                      alt=""
                    />
                  </div>
                  回复评论
                </div>
              </div>
            </div>

            <NuxtLink
              :to="`/yj/${item.travelNoteId}`"
              class="block w-71 ml-17 h-47 shrink-0 rounded-[4px] overflow-hidden"
            >
              <img
                v-if="item?.travelNoteUrl"
                class="w-full h-full object-cover"
                :src="item?.travelNoteUrl"
                alt=""
              />
              <img v-else class="w-full h-full object-cover" :src="defaultImg" alt="" />
            </NuxtLink>
          </div>

          <div
            v-if="interactionIndex == 1"
            style="scrollbar-width: none"
            class="block mx-12 pt-8 mb-12 box-border border-b-[1px] border-dashed flex justify-between items-start"
          >
            <div class="flex shrink-0 w-[74%] justify-start items-start">
              <div class="w-32 h-32 rounded-full shrink-0">
                <img
                  v-if="userInfo?.headImageUrl"
                  class="w-full h-full object-cover rounded-full"
                  :src="userInfo?.headImageUrl"
                  alt=""
                />
                <img
                  v-else
                  class="w-full h-full object-cover rounded-full"
                  src="https://www.xiaoyaotravel.com/_nuxt/default_avatar.gSq5JxK1.png"
                  alt=""
                />
              </div>

              <div class="ml-8 w-[85%] mb-12 w-full text-sm">
                <NuxtLink :to="`/yj/${item?.travelNoteId}`">
                  <p
                    v-if="userInfo?.showName"
                    class="w-full line-clamp-1 text-black-6 font-normal leading-xl"
                  >
                    {{ userInfo?.showName }}
                  </p>
                  <p class="w-full line-clamp-2 my-6 text-black-3 text-base leading-4xl">
                    <span v-if="item.replyUserId">
                      回复{{
                        item?.replyUserIdDictMap?.name != userInfo.showName
                          ? `@${item?.replyUserIdDictMap?.name}`
                          : ''
                      }}：
                    </span>
                    <span v-else>
                      评论{{
                        item?.replyUserIdDictMap?.name ? `@${item?.replyUserIdDictMap?.name}` : ''
                      }}
                    </span>
                    <span v-html="coveredContent(item?.commentContent)"></span>
                  </p>
                  <p class="w-full mb-6 text-black-9 leading-xl">{{ item?.createTime }}</p>
                </NuxtLink>
              </div>
            </div>

            <NuxtLink
              :to="`/yj/${item.travelNoteId}`"
              class="block w-71 ml-17 h-47 shrink-0 rounded-[4px] overflow-hidden"
            >
              <img
                v-if="item?.travelNoteUrl"
                class="w-full h-full object-cover"
                :src="item?.travelNoteUrl"
                alt=""
              />
              <img v-else class="w-full h-full object-cover" :src="defaultImg" alt="" />
            </NuxtLink>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
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'
import like from '~/assets/img/chat/like.svg'
import likeOrange from '~/assets/img/chat/like-orange.svg'
import eit from '~/assets/img/chat/tiji.svg'
import eitOrange from '~/assets/img/chat/tiji-orange.svg'
import comment from '~/assets/img/chat/comment.svg'
import commentOrange from '~/assets/img/chat/comment-orange.svg'
import medicalFiles from '~/assets/img/chat/medical-files.svg'
import medicalFilesOrange from '~/assets/img/chat/medical-files-orange.svg'
import send from '~/assets/img/chat/send.svg'
import sendOrange from '~/assets/img/chat/send-orange.svg'
import emojiJson from '../../yj/emoji.json'
const authStore = useAuthStore()
const { token } = storeToRefs(authStore)

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

definePageMeta({
  layout: false
})

// 默认的数组
const interactionDropdownMenuList = [
  {
    text: '全部消息',
    value: 5,
    icon: commentsBlack,
    iconM: commentsBlack,
    iconO: commentsOrange
  },
  { text: '赞与收藏', value: 4, icon: like, iconM: like, iconO: likeOrange },
  {
    text: '提及',
    value: 3,
    icon: eit,
    iconM: eit,
    iconO: eitOrange
  },
  { text: '我的评论', value: 0, icon: comment, iconM: comment, iconO: commentOrange },
  {
    text: '收到的评论',
    value: 2,
    icon: medicalFiles,
    iconM: medicalFiles,
    iconO: medicalFilesOrange
  },
  { text: '发出的评论', value: 1, icon: send, iconM: send, iconO: sendOrange }
]

const pageNum = ref(1)
const finished = ref(false)

const loading = ref(false)
const refreshing = ref(false)

// 互动消息的索引
const interactionIndex = ref(5)
const interactionTitle = ref('全部消息')

const interactionDropdownMenuRef = ref(null)

const interactionItemRef = ref(null)
// 评论的列表
const interactionList = ref([])

// 下拉菜单的方法
function onInteractionFilterClose(value) {
  interactionIndex.value = value
  interactionTitle.value = interactionDropdownMenuList.find((item) => item.value == value).text
  interactionList.value = []
  getInteractionList()
}

useSeoMeta({
  title: '互动消息'
})

// 获取用户信息
const userInfo = ref({})
async function getUserInfo() {
  if (!token.value) return (userInfo.value = {})
  request('/website/tourism/user/view').then(
    (res) => {
      userInfo.value = res.data || {}
    },
    () => {
      userInfo.value = {}
    }
  )
}

// 转换评论中的一些非字符emoji
function coveredContent(val) {
  if (!val) return ''
  return val.replace(/\[.*?]/g, function (str) {
    const baseApi = import.meta.env.VITE_APP_EMOJI_API
    const emojiName = emojiJson[str]
    if (!emojiName) return str
    return `<img src=${baseApi}${emojiJson[str]} style="width: 20px; height: 20px;display: inline-block; vertical-align: middle"/>`
  })
}

// 获取互动消息的数据列表
const getInteractionList = async () => {
  try {
    loading.value = true
    const {
      data: { dataList, totalCount }
    } = await request(`/website/comment/tourTravelNotesComment/my-comments`, {
      query: {
        pageNum: pageNum.value,
        pageSize: 20,
        commentType: 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
  }
}

// 点赞的的方法

// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  commentList.value = []
  getMyCommentList()
}
// 改变页数
const handleCurrentChange = () => {
  finished.value = true
  pageNum.value += 1
  getInteractionList()
}
</script>

<style lang="scss" scoped>
::v-deep .van-cell__left-icon {
  display: flex;
  align-items: center;
}
</style>