fix : 1.修改web端遇见的问题

src/pages/note-create/index.client.vue

@@ -661,7 +661,7 @@ async function handlePublish() {
   if (!noteJson.endPlace) {
     showNotify({
       type: 'warning',
-      message: '请选择地区',
+      message: '  ',
       duration: 3000
     })
     return
@@ -837,58 +837,58 @@ const showExpandTextInput = ref(false)
 // }
 
 // 点击话题的事件
-function handleTopicAndEit(parmas, pType) {
-  nextTick(() => {
-    let contentText = currentMention2
-
-    if (pType == '#') {
-      if (contentText.includes('#')) {
-        contentText = contentText.replace(
-          new RegExp(eidContent.value, 'g'),
-          `<span contenteditable="false" class="mention" data-denotation-char='#' >#${parmas.name}</span> `
-        )
-        showTopicEit.value = null
-        eidContent.value = ''
-      } else {
-        contentText = contentText.replace(
-          new RegExp(eidContent.value, 'g'),
-          `<span contenteditable="false"  class="mention" data-denotation-char='#'  >#${parmas.name}</span>`
-        )
-      }
-      let findIndex = noteJson.topics.findIndex((i) => i?.name == parmas.name)
-      if (findIndex == -1) {
-        noteJson.topics.push(parmas.name)
-      }
-    }
-    if (pType == '@') {
-      if (contentText.includes('@')) {
-        contentText = contentText.replace(
-          new RegExp(eidContent.value, 'g'),
-          `<span contenteditable="false" class="mention" data-denotation-char="@" data-id="${parmas.userId}"  >@${parmas.showName}</span>`
-        )
-
-        showTopicEit.value = null
-        eidContent.value = ''
-      } else {
-        contentText = contentText.replace(
-          new RegExp(eidContent.value, 'g'),
-          `<span contenteditable="false" class="mention" data-denotation-char="@" data-id="${parmas.userId}" >@${parmas.showName}</span>`
-        )
-      }
+// function handleTopicAndEit(parmas, pType) {
+//   nextTick(() => {
+//     let contentText = currentMention2
+
+//     if (pType == '#') {
+//       if (contentText.includes('#')) {
+//         contentText = contentText.replace(
+//           new RegExp(eidContent.value, 'g'),
+//           `<span contenteditable="false" class="mention" data-denotation-char='#' >#${parmas.name}</span> `
+//         )
+//         showTopicEit.value = null
+//         eidContent.value = ''
+//       } else {
+//         contentText = contentText.replace(
+//           new RegExp(eidContent.value, 'g'),
+//           `<span contenteditable="false"  class="mention" data-denotation-char='#'  >#${parmas.name}</span>`
+//         )
+//       }
+//       let findIndex = noteJson.topics.findIndex((i) => i?.name == parmas.name)
+//       if (findIndex == -1) {
+//         noteJson.topics.push(parmas.name)
+//       }
+//     }
+//     if (pType == '@') {
+//       if (contentText.includes('@')) {
+//         contentText = contentText.replace(
+//           new RegExp(eidContent.value, 'g'),
+//           `<span contenteditable="false" class="mention" data-denotation-char="@" data-id="${parmas.userId}"  >@${parmas.showName}</span>`
+//         )
+
+//         showTopicEit.value = null
+//         eidContent.value = ''
+//       } else {
+//         contentText = contentText.replace(
+//           new RegExp(eidContent.value, 'g'),
+//           `<span contenteditable="false" class="mention" data-denotation-char="@" data-id="${parmas.userId}" >@${parmas.showName}</span>`
+//         )
+//       }
 
-      let findEidIndex = noteJson.mentions.findIndex((i) => i?.showName == parmas.showName)
-      if (findEidIndex == -1) {
-        noteJson.mentions.push({
-          userName: parmas.showName,
-          userId: parmas.userId
-        })
-      }
-    }
+//       let findEidIndex = noteJson.mentions.findIndex((i) => i?.showName == parmas.showName)
+//       if (findEidIndex == -1) {
+//         noteJson.mentions.push({
+//           userName: parmas.showName,
+//           userId: parmas.userId
+//         })
+//       }
+//     }
 
-    // console.log(contentText, ' 6666 ') // 确保 DOM 渲染完成后再获取
-    noteJson.tourTourismProjectTravelNotesWriteContentDto.content = contentText
-  })
-}
+//     // console.log(contentText, ' 6666 ') // 确保 DOM 渲染完成后再获取
+//     noteJson.tourTourismProjectTravelNotesWriteContentDto.content = contentText
+//   })
+// }
 
 // 内容是否为空
 function contentIsEmpty(content) {
@@ -1052,10 +1052,10 @@ onMounted(() => {
   outline: none;
 }
 
-::v-deep .inputSectionContent:empty:before {
-  content: '请输入内容...';
-  color: #e7e7e7;
-}
+//  .inputSectionContent:empty:before {
+//   content: '请输入内容...';
+//   color: #e7e7e7;
+// }
 .inputSectionContent:focus {
   caret-color: #ff9300 !important;
   outline: none;

src/pages/profile-others/[id].vue

@@ -42,9 +42,7 @@
           <div class="ml-8">
             <h1 class="text-black-3 font-medium text-xl mb-8">{{ othersUserInfo?.showName }}</h1>
             <p class="text-sm line-clamp-2 text-black-3">
-              {{
-                othersUserInfo?.personalSign
-              }}asdjvaghsdavgshdsdahsd2asbdjhasd卢卡斯百度哈桑广大萨达撒看见是大家说的噶话说的说的话京噶手机号大噶十九大
+              {{ othersUserInfo?.personalSign }}
             </p>
           </div>
         </div>

src/pages/yj/[id].vue

@@ -102,7 +102,7 @@
             出发时间{{ contentIsEmpty(detailData?.departureTime) }}
           </span>
           <span v-if="detailData?.travelMode" class="mr-8">
-            出行方式{{ contentIsEmpty(detailData?.travelMode) }}
+            出行方式{{ contentIsEmpty(detailData?.travelModeDictMap?.name) }}
           </span>
           <span v-if="detailData?.countTimes" class="mr-8">
             出发天数{{ contentIsEmpty(detailData?.countTimes) }}
@@ -182,7 +182,7 @@
           <NuxtLink
             :to="`/yj/${item.id}`"
             :class="`w-106 group cursor-pointer flex flex-wrap box-border  items-center ${index == 2 ? '' : 'mr-17'} py-12`"
-            v-for="(item, index) in dataList.dataList.slice(0, 3)"
+            v-for="(item, index) in dataList?.dataList?.slice(0, 3)"
             :key="item.id"
           >
             <img
@@ -223,13 +223,13 @@
                 />
               </div>
               <div class="flex-1 pl-10 flex justify-between flex-wrap">
-                <div>
+                <div class="w-[85%]">
                   <div class="text-black-6 text-sm">
                     {{ item?.commentUserIdDictMap?.name }}
                   </div>
                   <div
                     @click.stop="addReply(item)"
-                    class="w-full text-base text-black-3"
+                    class="text-base text-black-3"
                     v-html="coveredContent(item?.commentContent)"
                   ></div>
                 </div>
@@ -238,17 +238,11 @@
                   <van-icon
                     @click="deleteComment(item.id)"
                     v-if="item.self"
-                    class="mr-15"
+                    class="mr-10"
                     name="delete-o"
                     size="20px"
                     color="#666"
                   />
-                  <!-- <van-icon
-                    @click.stop="addReply(item)"
-                    name="comment-o"
-                    size="20px"
-                    color="#666"
-                  /> -->
                 </div>
                 <div class="w-full flex justify-between items-center text-black-6 text-[10px]">
                   <span>
@@ -260,14 +254,14 @@
                       :class="`iconfont ${item?.isCollect ? 'icon-star-fill text-[#FF9300] ' : 'icon-star text-black-3'}   mr-4`"
                       style="font-size: 13px"
                     ></span>
-                    <span class="mr-10">{{ item?.collectNum }}</span>
+                    <span class="mr-10">{{ transferCount(item?.collectNum) }}</span>
 
                     <span
                       @click.stop="doCommenteStar(item)"
                       :class="`iconfont ${item?.isLike ? ' icon-like-fill text-[#FF476A]' : 'icon-Thumbs-up text-black-3'}  mr-4`"
                       style="font-size: 13px"
                     ></span>
-                    <span class="mr-10">{{ item?.likeNum }}</span>
+                    <span class="mr-10">{{ transferCount(item?.likeNum) }}</span>
                   </span>
                 </div>
               </div>
@@ -306,7 +300,7 @@
                             {{ subItem?.replyUserIdDictMap?.name }}:
                           </span>
                           <span
-                            @detailData.value.click.stop="addReply(subItem, item.id)"
+                            @click.stop="addReply(subItem, item.id)"
                             class="text-base text-black-3"
                             v-html="coveredContent(subItem?.commentContent)"
                           ></span>
@@ -335,14 +329,14 @@
                           :class="`iconfont ${subItem?.isCollect ? 'icon-star-fill text-[#FF9300] ' : 'icon-star text-black-3'}   mr-4`"
                           style="font-size: 13px"
                         ></span>
-                        <span class="mr-10">{{ subItem.collectNum }}</span>
+                        <span class="mr-10">{{ transferCount(subItem.collectNum) }}</span>
 
                         <span
                           @click.stop="doCommenteStar(subItem)"
                           :class="`iconfont ${subItem.isLike ? ' icon-like-fill text-[#FF476A]' : 'icon-Thumbs-up text-black-3'}  mr-4`"
                           style="font-size: 13px"
                         ></span>
-                        <span class="mr-10">{{ subItem.likeNum }}</span>
+                        <span class="mr-10">{{ transferCount(subItem.likeNum) }}</span>
                       </span>
                     </div>
                   </div>
@@ -431,67 +425,46 @@
         <div
           v-if="showInput"
           @click.stop=""
-          class="fixed bottom-0 left-0 w-full bg-white pt-10 pb-30 border"
+          ref="chatInputCompRef"
+          class="fixed bottom-0 left-0 w-full bg-white pt-12 px-12 pb-30"
         >
-          <div v-if="replyComment.id" class="text-center relative">
-            回复
-            <span class="text-[#f40]">{{ replyComment?.commentUserIdDictMap?.name }}:</span>
-            <div class="absolute right-10 top-0">
-              <van-icon name="cross" />
-            </div>
-          </div>
-          <div class="flex items-center">
-            <div class="rounded-full overflow-hidden w-[32px] h-[32px] shrink-0 ml-5">
-              <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="relative flex-1 ml-5 mr-5 pl-5 pr-5 pt-4 pb-4 rounded-full h-[50px] border border-[#FD9A00] flex items-center justify-between"
-            >
-              <textarea
-                v-model="commentValue"
-                ref="textareaRef"
-                :placeholder="replyComment.id ? '回复：' : '发布您的评论'"
-                @focus="textareaFocus"
-                class="ml-8 flex-1 h-full"
-                style="resize: none"
-              ></textarea>
-              <img
-                @click="openEmoji"
-                src="~/assets/img/yj/emoji.png"
-                class="w-[22px] h-[22px]"
-                alt=""
-              />
-            </div>
+          <van-field
+            style="max-height: 80px; overflow-y: auto; background: #f5f5f5"
+            v-model="commentValue"
+            autosize
+            ref="textareaRef"
+            rows="1"
+            type="textarea"
+            maxlength="300"
+            show-word-limit
+            class="rounded-2xl mb-13"
+            :placeholder="
+              replyComment.id ? `回复：${replyComment?.commentUserIdDictMap?.name}` : '发布您的评论'
+            "
+            @focus="textareaFocus"
+          />
+          <div class="w-full flex justify-between items-center mb-5">
+            <img @click="openEmoji" src="~/assets/img/yj/emoji.png" class="w-28 h-28" alt="" />
+
             <div
               @click="addComment"
-              class="pt-6 pb-6 pl-20 pr-20 mr-5 bg-[#FD9A00] text-[#fff] flex items-center justify-center rounded-full shrink-0"
+              :class="`pt-6 pb-6 pl-20 pr-20 mr-5 ${commentValue ? 'bg-[#FD9A00]' : 'bg-[#999999]'} bg-[#FD9A00] text-[#fff] flex items-center justify-center rounded-full shrink-0`"
             >
               评论
             </div>
           </div>
-          <div v-if="showEmoji" class="h-[300px] bg-[#fff] overflow-auto">
+
+          <div class="emoji-box h-144 overflow-y-auto" v-show="showEmoji">
             <div @click="closeEmojiBox" class="flex justify-end pr-15 text-[#999] text-sm">
               收起表情
             </div>
-            <div class="flex items-center flex-wrap">
-              <div
-                v-for="(item, index) in emojiJson"
-                :key="index"
-                class="hover:bg-[#ddd] text-[22px] w-[10%] aspect-[1/1] flex items-center justify-center"
-              >
-                <div @click="selectEmoji(index)" v-html="coveredContent(index)"></div>
-              </div>
+            <div
+              v-for="(item, index) in emojiStr"
+              :key="index"
+              @click="selectEmoji(item, index)"
+              class="active:bg-[#ddd] text-4xl w-26 aspect-[1/1] grid place-items-center"
+            >
+              <div @click="selectEmoji(index)" v-html="item.emoji"></div>
             </div>
           </div>
         </div>
@@ -548,6 +521,7 @@
 
 <script setup>
 import emojiJson from './emoji.json'
+import emojiStr from '~/components/Profile/News/emoji'
 const userInfoStore = useUserInfoStore()
 const authStore = useAuthStore()
 const { token } = storeToRefs(authStore)
@@ -557,6 +531,8 @@ const router = useRouter()
 const textareaRef = ref(null)
 const showInput = ref(false)
 
+const chatInputCompRef = ref(null)
+
 // 游记内容
 const { data: detailData, status } = useMyFetch(
   `/website/tourism/projectTravelNotes/travelNotesDetail?id=${id.value}`,
@@ -566,6 +542,18 @@ const { data: detailData, status } = useMyFetch(
     }
   }
 )
+
+// 获取关注状态
+async function getIsFollow() {
+  if (!token.value || detailData.value?.createUser == userInfo?.userId) return
+  let { data } = await request('/website/tourGroup/isFollow', {
+    query: {
+      userId: detailData.value?.createUser
+    }
+  })
+
+  detailData.value.userState = data
+}
 //
 const imgUrlsList = computed(
   () => detailData.value.imgUrls.filter((i) => i.includes('https')) ?? []
@@ -834,10 +822,14 @@ async function deleteComment(id) {
 const cursorIndex = ref(0)
 // 打开表情
 function openEmoji() {
-  nextTick(() => {
-    textareaRef.value.selectionStart && (cursorIndex.value = textareaRef.value.selectionStart)
-    showEmoji.value = true
-  })
+  if (showEmoji.value) {
+    showEmoji.value = false
+  } else {
+    nextTick(() => {
+      textareaRef.value.selectionStart && (cursorIndex.value = textareaRef.value.selectionStart)
+      showEmoji.value = true
+    })
+  }
 }
 // 收起表情
 function closeEmojiBox() {
@@ -846,17 +838,29 @@ function closeEmojiBox() {
     textareaRef.value.focus()
   })
 }
+
+const getInputPosition = () => {
+  try {
+    if (!textareaRef.value) return 0
+    const el = textareaRef.value?.$el.querySelector('input, textarea')
+    if (!el) return textareaRef.value.length - 1
+    return el.selectionStart
+  } catch (e) {
+    // console.log(e, '??')
+  }
+}
 // 选择表情
-function selectEmoji(emojiStr = '') {
-  const length = emojiStr.length
-  commentValue.value =
-    commentValue.value.slice(0, cursorIndex.value) +
-    emojiStr +
-    commentValue.value.slice(cursorIndex.value)
-  nextTick(() => {
-    cursorIndex.value += length
-    textareaRef.value.setSelectionRange(cursorIndex.value, cursorIndex.value)
-  })
+function selectEmoji(item, index) {
+  try {
+    const position = getInputPosition()
+    const str = commentValue.value
+    commentValue.value = `${str.slice(0, position)}${emojiStr[index].emoji}`
+
+    nextTick(() => {
+      cursorIndex.value = length
+      textareaRef.value.setSelectionRange(0, cursorIndex.value)
+    })
+  } catch (e) {}
 }
 
 // 回复评论
@@ -868,9 +872,11 @@ function addReply(item, parentId) {
       title: '提示',
       message: '登录后可以发布评论',
       theme: 'round-button'
-    }).then(async () => {
-      navigateTo({ path: '/login' })
     })
+      .then(async () => {
+        navigateTo({ path: '/login', replace: true })
+      })
+      .catch(() => {})
     return
   }
   showInput.value = true
@@ -891,9 +897,11 @@ async function addComment() {
       title: '提示',
       message: '登录后可以发布评论',
       theme: 'round-button'
-    }).then(async () => {
-      navigateTo({ path: '/login' })
     })
+      .then(async () => {
+        navigateTo({ path: '/login', replace: true })
+      })
+      .catch(() => {})
     return
   }
   if (!commentValue.value.trim()) {
@@ -941,25 +949,6 @@ function share() {
   )
 }
 
-// 去往话题详情
-function gotToTopic(isEdit) {
-  return isEdit
-    ? `${navigateTo({
-        path: '/topic',
-        query: {
-          topicName: parmas.name
-        }
-      })}`
-    : ''
-}
-
-// 去往他人页面
-function gotToProfileOthers(userId) {
-  navigateTo({
-    path: `/profile-others/${detailData.value.mentions[0]?.userId}`
-  })
-}
-
 // 群聊弹窗
 const showGroupDialog = ref(false)
 
@@ -987,9 +976,32 @@ const bindFn = () => {
         span.addEventListener('click', (event) => {
           // console.log('@用户ID', span.getAttribute('data-id'))
           // console.log('@用户名字', span.innerHTML)
-          navigateTo({
-            path: `/profile-others/${span.getAttribute('data-id')}`
-          })
+
+          let uid = span.getAttribute('data-id')
+          if (userInfo?.value?.userId) {
+            if (uid == userInfo?.value?.userId) {
+              navigateTo({
+                path: '/profile'
+              })
+            } else {
+              console.log(1234)
+
+              navigateTo({
+                path: `/profile-others/${uid}`
+              })
+            }
+          } else {
+            showConfirmDialog({
+              showConfirmDialog: true,
+              title: '提示',
+              message: '登录后才可查看他人信息',
+              theme: 'round-button'
+            })
+              .then(async () => {
+                navigateTo({ path: '/login', replace: true })
+              })
+              .catch(() => {})
+          }
         })
       }
       if (span.getAttribute('data-denotation-char') === '#') {
@@ -1025,9 +1037,29 @@ useSeoMeta({
   ogDescription: detailData?.projectTitle || '精美热门游记',
   ogImage: ''
 })
+
+// 判断是否点击的非输入框
+const handleClickOutside = (event) => {
+  const chatInputCompEl = chatInputCompRef.value
+  console.log(chatInputCompEl, 'chatInputCompEl')
+
+  const isChatInputCompEl = chatInputCompEl.contains(event.target)
+  console.log(isChatInputCompEl, 'isChatInputCompEl')
+
+  if (!isChatInputCompEl) {
+    showInput.value = false
+    textareaRef.value.$el.blur()
+  }
+}
+
 onMounted(() => {
+  useEventListener('click', handleClickOutside, { target: document })
+  useEventListener('mousedown', handleClickOutside, { target: document })
+  useEventListener('touchstart', handleClickOutside, { target: document })
+
   getComments()
   getUserInfo()
+  getIsFollow()
   isCollectTravelNotes()
 })
 </script>
@@ -1039,4 +1071,23 @@ onMounted(() => {
   padding-left: 4px;
   padding-right: 4px;
 }
+
+.input-box__textarea {
+  flex: 1;
+  background: #f5f5f5;
+  border: 1px solid #dcdcdc;
+  // padding: 5px px;
+}
+
+.emoji-box {
+  display: grid;
+  gap: 5px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-auto-rows: auto;
+  box-sizing: border-box;
+  justify-content: center;
+  align-content: center;
+  justify-items: center;
+  align-items: center;
+}
 </style>