Browse Source

fix:1.聊天的会话输入框 修改 和单聊的设置页面的接口对接。

suwenjiang 2 months ago
parent
commit
55cdb08cc5
4 changed files with 181 additions and 111 deletions
  1. 2 1
      src/pages/chat/group.vue
  2. 144 81
      src/pages/chat/set-single.vue
  3. 32 27
      src/pages/chat/set-sub/index.vue
  4. 3 2
      src/pages/chat/set.vue

+ 2 - 1
src/pages/chat/group.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
     <!--  left-text="" title="群聊" -->
-    <van-nav-bar fixed @click-left="onClickLeft" @click-right="onClickRight">
+    <van-nav-bar fixed title="群聊" @click-left="onClickLeft" @click-right="onClickRight">
       <template #left>
         <div>
           <van-icon name="arrow-left" color="black" size="18" />
         </div>
       </template>
+
       <template #right>
         <van-icon name="ellipsis" color="black" size="18" />
       </template>

+ 144 - 81
src/pages/chat/set-single.vue

@@ -39,9 +39,8 @@
       </van-row>
     </van-cell-group>
 
-    {{ itemData }}
     <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
-      <van-cell
+      <!-- <van-cell
         v-for="(item, index) in list"
         :key="index"
         size="large"
@@ -58,9 +57,49 @@
         <template v-if="item.vModel != null" #right-icon>
           <van-switch v-model="item.vModel" active-color="#FF9300" inactive-color="#dcdee0" />
         </template>
+      </van-cell> -->
+
+      <van-cell size="large" title="设置备注名" is-link @click="modifyNoteName"></van-cell>
+    </van-cell-group>
+
+    <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
+      <van-cell size="large" title="查找聊天记录" is-link @click="findChatHistory"></van-cell>
+    </van-cell-group>
+    <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
+      <van-cell :clickable="false" size="large" title="消息面打扰" is-link>
+        <template #right-icon>
+          <van-switch
+            :active-value="1"
+            :inactive-value="0"
+            v-model="isNotDisturb"
+            @click="notDisturb"
+            active-color="#FF9300"
+            inactive-color="#dcdee0"
+          />
+        </template>
+      </van-cell>
+      <van-cell :clickable="false" draggable size="large" title="置顶聊天" is-link>
+        <template #right-icon>
+          <van-switch
+            :active-value="1"
+            :inactive-value="0"
+            v-model="isTop"
+            @click="topChat"
+            active-color="#FF9300"
+            inactive-color="#dcdee0"
+          />
+        </template>
       </van-cell>
     </van-cell-group>
 
+    <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
+      <van-cell size="large" title="设置当前聊天背景" is-link @click=""></van-cell>
+    </van-cell-group>
+    <van-cell-group style="margin-bottom: 12px" class="box-border" inset>
+      <van-cell size="large" title="举报该用户" is-link @click="reportUser"></van-cell>
+
+      <van-cell size="large" title="清空聊天记录" is-link @click="clearChatHistory"></van-cell>
+    </van-cell-group>
     <ChatDialog
       v-model:show="dialogParmas.show"
       v-model:title="dialogParmas.title"
@@ -78,7 +117,7 @@
           clearable
           :placeholder="dialogParmas.placeholder"
           v-model="dialogParmas.remark"
-          maxlength="12"
+          maxlength="30"
         />
       </div>
     </ChatDialog>
@@ -94,17 +133,15 @@ definePageMeta({
   layout: false
 })
 
-// const itemData = ref(null)
+const isNotDisturb = ref(0)
+const isTop = ref(0)
 
-const itemData = computed(
-  () => chatList.value.filter((el) => el.toUserId == route.query.toUserId)[0]
-)
-
-// const isNotDisturb = ref(false)
-// const isTop = ref(false)
-
-const isNotDisturb = computed(() => (itemData?.isNotDisturb ? true : false))
-const isTop = computed(() => (itemData?.isTop ? true : false))
+const itemData = computed(() => {
+  let item = chatList.value.filter((el) => el.toUserId == route.query.toUserId)[0]
+  isNotDisturb.value = item.isNotDisturb
+  isTop.value = item.isNotDisturb
+  return item
+})
 
 const dialogParmas = reactive({
   show: false,
@@ -116,9 +153,7 @@ const dialogParmas = reactive({
 
 // 弹窗确认的事件
 const confirm = async () => {
-  changeGroupName({ groupName: dialogParmas.remark })
-  dialogParmas.show = false
-  // itemData.value.remark = dialogParmas.remark
+  changeGroupName({ remark: dialogParmas.remark })
 }
 
 const cancel = () => {
@@ -131,10 +166,11 @@ const modifyNoteName = () => {
   dialogParmas.subTitle = '备注不得超过30个字'
   dialogParmas.placeholder = '请输入备注'
 
-  if (itemData.value?.remark != '') {
+  if (itemData.value?.groupRemark != '') {
     dialogParmas.title = '修改备注'
     dialogParmas.confirmText = '确认'
     dialogParmas.cancelText = '取消'
+    dialogParmas.remark = itemData.value?.groupRemark
   } else {
     dialogParmas.title = '添加备注'
     dialogParmas.confirmText = '添加'
@@ -142,48 +178,75 @@ const modifyNoteName = () => {
   }
 }
 
-// 修我在群里的昵称 修名称
+// 修改名称
 const changeGroupName = async (body) => {
   try {
-    const { data } = await request('/website/tourGroup/updateGroup', {
+    const res = await request('/website/tourMember/updateTourMember', {
       method: 'post',
       body: {
-        groupId: itemData.value.id,
+        groupId: itemData.value.groupId,
         ...body
       }
     })
 
-    if (data) {
-      // userGroupData.value[Object.keys(body)[0]] = groupName.value
-      // showSuccessToast('修改成功')
-    } else {
-      // showFailToast('修改失败')
+    if (res && res?.success) {
+      chatStore.reqChatList()
+      dialogParmas.remark = ''
+      dialogParmas.show = false
     }
   } catch (error) {}
 }
 
 // 查找聊天记录
 const findChatHistory = () => {
-  navigateTo('/chat/set-sub', {
+  console.log(itemData.value?.groupId, '555')
+
+  navigateTo({
+    path: '/chat/set-sub',
     query: {
       objectType: 1,
-      userId: itemData.value?.userId
+      groupId: itemData.value?.groupId
     }
   })
 }
 
 // 消息免打扰
-const notDisturb = () => {}
+const notDisturb = () => {
+  handleBoolean({ isNotDisturb: isNotDisturb.value })
+}
 
 // 置顶聊天
-const topChat = () => {}
+const topChat = () => {
+  handleBoolean({ isTop: isTop.value })
+}
+
+// 是否免打扰和 是否置顶 公共
+const handleBoolean = async (params) => {
+  try {
+    let { data } = await request('/website/tourMember/updateSingleTourMember', {
+      method: 'post',
+      body: {
+        groupId: itemData.value.groupId,
+        ...params
+      }
+    })
+    if (data) {
+      if (Object.keys(params)[0] == 'isTop') {
+        isTop.value ? showToast('已置顶') : showToast('置顶取消')
+      }
+      if (Object.keys(params)[0] == 'isNotDisturb') {
+        isNotDisturb.value ? showToast('已开启面打扰') : showToast('已关闭面打扰')
+      }
+    }
+  } catch (error) {}
+}
 
 // 举报该用户
 const reportUser = () => {
   navigateTo('/chat/report', {
     query: {
       objectType: 1,
-      userId: itemData.value?.userId
+      userId: itemData.value?.toUserId
     }
   })
 }
@@ -207,58 +270,58 @@ const clearChatHistory = () => {
     .catch(() => {})
 }
 
-const list = reactive([
-  {
-    title: '设置备注名',
-    // icon: setting,
-    // icon: 'icon-setting-one',
-    isLink: true,
-    vModel: null,
-    fn: modifyNoteName,
-    value: ''
-  },
-  {
-    title: '查找聊天记录',
-    value: '',
-    // icon: 'icon-log',
-    isLink: true,
-    vModel: null,
-    fn: findChatHistory
-  },
-  {
-    title: '消息面打扰',
-    value: '',
+// const list = reactive([
+//   {
+//     title: '设置备注名',
+//     // icon: setting,
+//     // icon: 'icon-setting-one',
+//     isLink: true,
+//     vModel: null,
+//     fn: modifyNoteName,
+//     value: ''
+//   },
+//   {
+//     title: '查找聊天记录',
+//     value: '',
+//     // icon: 'icon-log',
+//     isLink: true,
+//     vModel: null,
+//     fn: findChatHistory
+//   },
+//   {
+//     title: '消息面打扰',
+//     value: '',
 
-    // icon: 'icon-close-remind',
-    isLink: false,
-    vModel: isNotDisturb.value,
-    fn: notDisturb
-  },
-  {
-    title: '置顶聊天',
-    value: '',
-    // icon: 'icon-set-top',
-    isLink: false,
-    vModel: isTop.value,
-    fn: topChat
-  },
-  {
-    title: '举报该用户',
-    value: '',
-    // icon: 'icon-jubaoguanli',
-    isLink: true,
-    vModel: null,
-    fn: reportUser
-  },
-  {
-    title: '清空聊天记录',
-    value: '',
-    // icon: 'icon-delete-one',
-    isLink: true,
-    vModel: null,
-    fn: clearChatHistory
-  }
-])
+//     // icon: 'icon-close-remind',
+//     isLink: false,
+//     vModel: isNotDisturb.value,
+//     fn: notDisturb
+//   },
+//   {
+//     title: '置顶聊天',
+//     value: '',
+//     // icon: 'icon-set-top',
+//     isLink: false,
+//     vModel: isTop.value,
+//     fn: topChat
+//   },
+//   {
+//     title: '举报该用户',
+//     value: '',
+//     // icon: 'icon-jubaoguanli',
+//     isLink: true,
+//     vModel: null,
+//     fn: reportUser
+//   },
+//   {
+//     title: '清空聊天记录',
+//     value: '',
+//     // icon: 'icon-delete-one',
+//     isLink: true,
+//     vModel: null,
+//     fn: clearChatHistory
+//   }
+// ])
 
 useSeoMeta({
   title: '我的消息'

+ 32 - 27
src/pages/chat/set-sub/index.vue

@@ -8,7 +8,7 @@
     />
 
     <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-      <div v-if="tab == 'records'" class="w-full min-h-400 pt-20">
+      <div class="w-full min-h-400 pt-20">
         <!--  :title="`没有找到&quot;${searchString}&quot;相关的结果`"   v-if="!list?.length && !loading"-->
         <ChatEmpty
           v-if="!list?.length && !loading"
@@ -17,27 +17,37 @@
         />
 
         <template v-if="searchString && list?.length > 0">
-          <van-cell
-            clickable
-            v-for="(item, index) in list"
-            :key="item?.id"
-            :value="beforeTime(item?.createTime)"
-          >
+          <van-cell v-for="(item, index) in list" :key="item?.id">
             <template #icon>
               <div class="w-40 h-40 rounded-full mr-12 overflow-hidden">
-                <img class="w-full h-full object-cover" :src="item?.avatar" alt="" />
+                <img
+                  v-if="item?.headImageUrl"
+                  class="w-full h-full object-cover"
+                  :src="item?.headImageUrl"
+                  alt=""
+                />
+                <img
+                  v-else
+                  class="w-full h-full object-cover"
+                  src="~/assets/img/default_avatar.png"
+                  alt=""
+                />
               </div>
             </template>
-            <template :title>
-              <p class="text-sm text-black-9">
-                {{ item?.nickname }}
-              </p>
+            <template #title>
+              <div class="w-full flex justify-between text-sm text-black-9">
+                <span class="w-150 border line-clamp-1">{{ item?.showName }}</span>
+
+                <span class="text-sm text-black-9">
+                  {{ item?.createTime }}
+                </span>
+              </div>
             </template>
-            <template :label>
+            <template #label>
               <van-highlight
                 :keywords="searchString"
-                :source-string="item?.nickname"
-                class="text-xl text-black-3"
+                :source-string="messageContentParse(item?.messageContent)"
+                class="w-full text-xl text-black-3 line-clamp-2"
                 highlight-class="custom-class"
               />
             </template>
@@ -77,16 +87,15 @@
   </div>
 </template>
 <script setup>
-import { beforeTime } from '~/utils/detalTime'
+import { beforeTime, messageContentParse } from '~/utils/detalTime'
 
 const route = useRoute()
 
-const tab = useRouteQuery('tab')
+const objectType = computed(() => route.query.objectType)
 
 const queryParams = reactive({
-  groupId: computed(() => route.query.groupId ?? ''),
   pageNum: 1,
-  pageSize: 20,
+  pageSize: 10,
   searchMessage: ''
 })
 
@@ -113,7 +122,7 @@ const search = () => {
 
 // 下拉刷新
 const onRefresh = () => {
-  list.value ? queryParams.pageNum++ : (queryParams.pageNum = 1)
+  list.value.length ? queryParams.pageNum++ : (queryParams.pageNum = 1)
 
   getList()
 }
@@ -122,9 +131,10 @@ const onRefresh = () => {
 const getList = async () => {
   try {
     loading.value = true
-    if (tab == 'records') data.records = searchString.value
+
     let { data } = await request('/website/tourMessage/getMessageByGroupId', {
       query: {
+        groupId: route.query.groupId,
         ...queryParams
       }
     })
@@ -143,17 +153,12 @@ const getList = async () => {
   }
 }
 
-// 是否是普通成员
-// const isRankAndFiler = (role) => {
-//   return role == 1 || role == 2 ? true : false
-// }
-
 definePageMeta({
   layout: false
 })
 
 useSeoMeta({
-  title
+  title: objectType.value == 1 ? '我的消息' : title
 })
 </script>
 <style lang="scss" scoped>

+ 3 - 2
src/pages/chat/set.vue

@@ -266,8 +266,9 @@
             navigateTo({
               path: '/chat/set-sub',
               query: {
-                tab: 'records',
-                groupId: setData?.id
+                // tab: 'records',
+                groupId: setData?.id,
+                objectType: 2
               }
             })
           "