feat:1.聊天群聊的添加成员的修改设置的修改

.env.development

@@ -4,12 +4,12 @@ VITE_APP_ENV=development
 # VITE_APP_BASE_URL=http://101.126.146.250:8082/
 # 测试服
 # 黄文
-# VITE_APP_BASE_URL=http://192.168.1.44:8082/
+VITE_APP_BASE_URL=http://192.168.1.44:8082/
 # 畅哥
 # VITE_APP_BASE_URL=http://192.168.1.38:8082/
 
 # 张维
-VITE_APP_BASE_URL=http://192.168.1.73:8082/
+# VITE_APP_BASE_URL=http://192.168.1.73:8082/
 
 # VITE_APP_BASE_URL=http://192.168.1.204:8082
 VITE_APP_EMOJI_API=https://v.xiaoyaotravel.com/emoji/

src/pages/chat/group-add.vue

@@ -19,23 +19,23 @@
         <div style="height: calc(100vh - 170px)">
           <van-checkbox-group v-model="checked">
             <!-- <van-index-bar highlight-color="#FD9A00" index-list :sticky="false"> -->
-            <template v-for="(item, index) in addDataList" :key="item?.attentionIdDictMap?.userId">
+            <template v-for="(item, index) in addDataList" :key="item?.userId">
               <!-- <van-index-anchor index="A" /> -->
-              <van-cell center clickable @click="toggle(item?.attentionIdDictMap?.userId)" disabled>
+              <van-cell center clickable @click.stop="toggle(item?.userId)">
                 <template #icon>
                   <div class="flex justify-start">
                     <van-checkbox
                       checked-color="#FD9A00"
-                      :name="item?.attentionIdDictMap?.userId"
-                      :ref="(el) => (checkboxRefs[item?.attentionIdDictMap?.userId] = el)"
-                      @click.stop
+                      :name="item?.userId"
+                      :ref="(el) => (checkboxRefs[item?.userId] = el)"
+                      @click.stop="toggle(item?.userId)"
                     />
 
                     <div class="w-40 h-40 ml-13 mr-12 rounded-full overflow-hidden">
                       <img
-                        v-if="item?.attentionIdDictMap?.headImageUrl"
+                        v-if="item?.headImageUrl"
                         class="w-full h-full shrink-0 object-cover"
-                        :src="item?.attentionIdDictMap?.headImageUrl"
+                        :src="item?.headImageUrl"
                         alt=""
                       />
 
@@ -50,7 +50,7 @@
                 <template #title>
                   <div class="flex items-center">
                     <h1 class="text-xl text-black-3">
-                      {{ item?.attentionIdDictMap?.showName }}
+                      {{ item?.showName }}
                     </h1>
                     <van-tag
                       v-if="item.fansStatus == 2"
@@ -69,6 +69,50 @@
         </div>
       </van-list>
     </van-pull-refresh>
+
+    <div
+      class="w-full box-border p-16 pb-40 bg-white fixed bottom-0 left-0 flex justify-between items-center shadow-[0px_-4px_4px_0px_rgba(0,0,0,0.1)]"
+    >
+      <div class="shrink-0 flex justify-start items-center">
+        <div class="w-118 shrink-0 flex justify-start items-center overflow-hidden">
+          <div
+            v-for="(item, index) in checkedList.slice(0, 5)"
+            :key="index + 'avatar'"
+            :class="`w-36 h-36  ${index == 0 ? '' : '-ml-16'} shrink-0 rounded-full overflow-hidden`"
+          >
+            <img
+              v-if="item?.headImageUrl"
+              class="w-full h-full object-cover"
+              :src="item?.headImageUrl"
+              alt=""
+            />
+            <img
+              v-else
+              class="w-full h-full shrink-0 object-cover"
+              src="~/assets/img/default_avatar.png"
+              alt=""
+            />
+          </div>
+        </div>
+
+        <div v-if="checkedList.length > 5" class="shrink-0 w-24 h-24 ml-8">
+          <img class="w-full h-full object-cover" src="~/assets/img/chat/ellipsis.svg" alt="" />
+        </div>
+      </div>
+      <van-button
+        :disabled="checkedList.length > 0 ? false : true"
+        @click="handleCreateGroup"
+        style="width: 160px"
+        class="shrink-0"
+        block
+        size="large"
+        color="#FD9A00"
+        round
+      >
+        完成
+        <span v-if="checkedList.length">({{ checkedList.length }})</span>
+      </van-button>
+    </div>
   </div>
 </template>
 <script setup>
@@ -91,14 +135,11 @@ const finished = ref(false)
 const checked = ref([])
 const showName = ref('')
 const checkboxRefs = ref([])
+const checkedList = ref([])
 
 // 字母的数组
 const letterList = ref([])
 
-const toggle = (index) => {
-  checkboxRefs.value[index].toggle()
-}
-
 const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
@@ -112,6 +153,17 @@ useSeoMeta({
   title: '添加成员'
 })
 
+// 选中要邀请的人
+const toggle = (item) => {
+  if (checkedList.value.length == 0) {
+    checkedList.value.push(item)
+  } else {
+    let index = checkedList.value.findIndex((el) => el?.userId == item?.userId)
+    checkedList.value.splice(index, 1)
+  }
+
+  checkboxRefs.value[item?.userId].toggle()
+}
 const search = () => {
   finished.value = true
   if (showName.value) {
@@ -123,49 +175,6 @@ const search = () => {
   }
 }
 
-// 获取全局搜索的用户
-// const getAllList = async () => {
-//   try {
-//     loading.value = true
-
-//     const {
-//       data: { dataList, totalCount }
-//     } = await request('/website/tourism/fans/getUserListByNickname', {
-//       query: {
-//         ...queryParams,
-//         showName: showName.value
-//       }
-//     })
-
-//     if (Array.isArray(dataList) && dataList?.length) {
-//       addDataList.value = dataList
-//       // arr = addDataList.value
-//       // arr = arr.map((item, index) => {
-//       //   let letter = pinyin(item?.visaTitle, { pattern: 'first', toneType: 'none' })
-//       //   console.log(letter, '123')
-
-//       //   item.letter = letter
-//       //   return item
-//       // })
-//       // console.log(arr, 'addDataList.value .value')
-//     } else {
-//       addDataList.value = []
-//     }
-
-//     loading.value = false
-//     refreshing.value = false
-//     if (addDataList.value.length >= totalCount) {
-//       finished.value = true
-//     } else {
-//       finished.value = false
-//     }
-//   } catch (err) {
-//   } finally {
-//     refreshing.value = false
-//     loading.value = false
-//   }
-// }
-
 // 刷新
 const onRefresh = () => {
   queryParams.pageNum = 1
@@ -174,38 +183,29 @@ const onRefresh = () => {
   getList()
 }
 
-// 触底加载
-// const getLoadList = () => {
-//   queryParams.pageNum++
-//   finished.value = true
-//   showName.value ? search() : getList()
-// }
-
 // 获取数据
 const getList = async () => {
   try {
-    let url = `/website/tourism/fans/getFriends`
+    let url = `/website/tourMember/memberLit`
 
     loading.value = true
-    let {
-      data: { dataList, totalCount }
-    } = await request(url, {
+    let { data } = await request(url, {
       query: {
-        ...queryParams
+        groupId: route.query.groupId
       }
     })
     let arr = []
-    if (Array.isArray(dataList) && dataList?.length) {
-      addDataList.value = dataList
-      arr = addDataList.value
-      arr = arr.map((item, index) => {
-        let letter = pinyin(item?.visaTitle, { pattern: 'first', toneType: 'none' })
-        console.log(letter, '123')
-
-        item.letter = letter
-        return item
-      })
-      console.log(arr, 'addDataList.value .value')
+    if (Array.isArray(data) && data?.length) {
+      addDataList.value = data
+      // arr = addDataList.value
+      // arr = arr.map((item, index) => {
+      //   let letter = pinyin(item?.visaTitle, { pattern: 'first', toneType: 'none' })
+      //   console.log(letter, '123')
+
+      //   item.letter = letter
+      //   return item
+      // })
+      // console.log(arr, 'addDataList.value .value')
     } else {
       addDataList.value = []
     }
@@ -224,27 +224,31 @@ const getList = async () => {
   }
 }
 
-// // 数据转化
-// const changeInitials = (list) => {
-//   console.log(list)
-
-//   let letter = []
-//   let listArr = []
-// listArr = list.map((item, index) => {
-//   item.letter = pinyin(item?.visaTitle, { pattern: 'first', toneType: 'none' })
-//     .map((pinyin) => pinyin[0].toUpperCase()) // 获取拼音的首字母并转换为大写
-//     .join('')
-
-//     letter.push(item.letter)
-//     return item
-//   })
-//   console.log(list, '21')
-//   console.log(listArr, '444')
-
-//   return {
-//     letter,
-//     listArr
-//   }
-// }
+// 创建多人聊天
+async function handleCreateGroup() {
+  try {
+    showLoadingToast({
+      message: '准备开始群聊...',
+      duration: 100000
+    })
+    let { data } = request('/website/tourMember/invite', {
+      method: 'post',
+      body: {
+        groupId: route.query.groupId,
+        ids: checked.value
+      }
+    })
+    if (data) {
+      navigateTo({
+        path: '/chat/group',
+        query: data,
+        replace: true
+      })
+    }
+  } catch (error) {
+  } finally {
+    closeToast()
+  }
+}
 </script>
 <style lang="scss" scoped></style>

src/pages/chat/interrelation-friend.vue

@@ -1,194 +0,0 @@
-<template>
-  <div class="w-full h-[100vh]">
-    <ChatHeaderBar title="选择互关好友" />
-
-    <ChatSearch v-model:searchString="searchString" @search="search" placeholder="请输入关键词" />
-
-    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-      <ChatEmpty v-if="!friendList?.length && !loading" title="请输入关键词,没有找到相关结果" />
-      <van-list
-        v-else-if="friendList.length"
-        v-model:loading="loading"
-        error-text="获取失败"
-        finished-text="-- 没有更多了 --"
-        :finished="finished"
-        :immediate-check="false"
-        @load="getLoadList"
-      >
-        <van-checkbox-group v-model="checked">
-          <!-- <van-index-bar highlight-color="#FD9A00" index-list :sticky="false"> -->
-          <template v-for="(item, index) in friendList" :key="item?.id">
-            <!-- <van-index-anchor index="A" /> -->
-            <van-cell
-              v-for="(item, index) in friendList"
-              :key="item?.id"
-              center
-              size="large"
-              clickable
-              @click="toggle(index)"
-              disabled
-            >
-              <template #icon>
-                <div class="flex justify-start">
-                  <van-checkbox
-                    checked-color="#FD9A00"
-                    :name="item.id"
-                    :ref="(el) => (checkboxRefs[index] = el)"
-                    @click.stop
-                  />
-
-                  <div class="w-40 h-40 ml-13 mr-12 rounded-full overflow-hidden">
-                    <img class="w-full h-full shrink-0 object-cover" :src="item?.img" alt="" />
-                  </div>
-                </div>
-              </template>
-              <template #title>
-                <div class="flex items-center">
-                  <h1 class="text-xl text-black-3 line-clamp-1">{{ item?.visaTitle }}</h1>
-                </div>
-              </template>
-            </van-cell>
-          </template>
-          <!-- </van-index-bar> -->
-        </van-checkbox-group>
-      </van-list>
-      <!-- <div class="relative">
-        <van-cell center size="large" clickable title="123546" disabled></van-cell>
-        <div class="w-full h-46 bg-white/[0.3] absolute top-0 left-0"></div>
-      </div> -->
-    </van-pull-refresh>
-
-    <div
-      class="w-full box-border p-16 pb-40 bg-white fixed bottom-0 left-0 flex justify-between items-center shadow-[0px_-4px_4px_0px_rgba(0,0,0,0.1)]"
-    >
-      <div class="shrink-0 flex justify-start items-center">
-        <div
-          v-for="(item, index) in 5"
-          :key="index + 'avatar'"
-          :class="`w-36 h-36  ${index == 0 ? '' : '-ml-16'} shrink-0 rounded-full overflow-hidden`"
-        >
-          <img class="w-full h-full object-cover" src="../../assets/img/chat/search.svg" alt="" />
-        </div>
-
-        <div v-if="checked.length > 5" class="shrink-0 w-24 h-24 ml-8">
-          <img class="w-full h-full object-cover" src="~/assets/img/chat/ellipsis.svg" alt="" />
-        </div>
-      </div>
-      <van-button
-        @click="handleCreateGroup"
-        style="width: 160px"
-        class="shrink-0"
-        block
-        size="large"
-        color="#FD9A00"
-        round
-      >
-        新建
-        <span v-if="checked.length">(16{{ checked.length }})</span>
-      </van-button>
-    </div>
-  </div>
-</template>
-<script setup>
-const userInfoStore = useUserInfoStore()
-const { userInfo } = storeToRefs(userInfoStore)
-
-definePageMeta({
-  layout: false
-})
-
-useSeoMeta({
-  title: '我的消息'
-})
-
-const refreshing = ref(false)
-const loading = ref(false)
-const finished = ref(false)
-
-const checked = ref([])
-const searchString = ref('')
-const checkboxRefs = ref([])
-
-const friendList = ref([])
-
-const queryParams = reactive({
-  pageNum: 1,
-  pageSize: 10,
-  searchString: ''
-})
-
-const toggle = (index) => {
-  checkboxRefs.value[index].toggle()
-}
-
-const search = () => {
-  friendList.value = []
-  queryParams.pageNum = 1
-  queryParams.searchString = searchString.value
-  getList()
-}
-
-const onRefresh = () => {
-  queryParams.pageNum = 1
-  friendList.value = []
-  getList()
-}
-
-// 触底加载
-const getLoadList = () => {
-  queryParams.pageNum++
-  finished.value = true
-  getList()
-}
-
-// 获取互关好友列表
-const getList = () => {
-  try {
-    let {
-      data: { dataList }
-    } = request('/tourMember/memberLit', {
-      query: {
-        userId: userInfo?.value?.userInfo
-      }
-    })
-
-    if (Array.isArray(dataList) && dataList?.length) {
-      friendList.value = friendList.value.concat(dataList)
-    } else {
-      friendList.value = []
-    }
-  } catch (error) {}
-}
-
-// 创建多人聊天
-async function handleCreateGroup() {
-  try {
-    showLoadingToast({
-      message: '准备开始群聊...',
-      duration: 100000
-    })
-    let { data } = request('/tourGroup/createGroup', {
-      method: 'post',
-      body: {
-        createType: 2,
-        creatUserId: userInfo.value.userId
-      }
-    })
-    if (data) {
-      navigateTo('/chat/group', {
-        query: data?.groupId,
-        replace: true
-      })
-    }
-  } catch (error) {
-  } finally {
-    closeToast()
-  }
-}
-
-onMounted(() => {
-  getList()
-})
-</script>
-
-<style lang="scss" scoped></style>

src/pages/chat/set-single.vue

@@ -18,7 +18,7 @@
         </van-col>
         <van-col style="width: 54px" span="4" class="mb-12 mr-10">
           <div
-            @click="navigateTo('/chat/interrelation-friend')"
+            @click="navigateTo('/chat/single-add')"
             class="w-40 h-40 flex justify-center items-center bg-[#F3F3F3] rounded-full mx-auto overflow-hidden mb-4"
           >
             <span class="iconfont icon-plus text-black-6" style="font-size: 24px"></span>

src/pages/chat/set.vue

@@ -34,7 +34,18 @@
               {{ item.groupNickname ? item.groupNickname : userInfo.showName }}
             </p>
           </van-col>
-          <van-col span="4" class="mb-12 mr-10" @click="navigateTo('/chat/group-add')">
+          <van-col
+            span="4"
+            class="mb-12 mr-10"
+            @click="
+              navigateTo({
+                path: '/chat/group-add',
+                query: {
+                  groupId: setData?.id
+                }
+              })
+            "
+          >
             <div
               class="w-40 h-40 rounded-full flex justify-center items-center bg-[#F3F3F3] border mx-auto overflow-hidden mb-4"
             >

src/pages/chat/single-add.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="w-full h-[100vh]">
+    <ChatHeaderBar title="选择互关好友" />
+
+    <ChatSearch v-model:searchString="showName" @search="search" placeholder="请输入关键词" />
+
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <Empty v-if="!addDataList?.length && !loading" title="暂无数据" top="100" />
+
+      <van-list
+        v-else-if="addDataList.length"
+        v-model:loading="loading"
+        error-text="获取失败"
+        finished-text="-- 没有更多了 --"
+        :finished="finished"
+        :immediate-check="false"
+      >
+        <!--    @load="getLoadList"  -->
+        <div style="height: calc(100vh - 170px)">
+          <van-checkbox-group v-model="checked">
+            <!-- <van-index-bar highlight-color="#FD9A00" index-list :sticky="false"> -->
+            <template v-for="(item, index) in addDataList" :key="item?.attentionIdDictMap?.userId">
+              <!-- <van-index-anchor index="A" /> -->
+              <van-cell center clickable @click="toggle(item)">
+                <template #icon>
+                  <div class="flex justify-start">
+                    <van-checkbox
+                      checked-color="#FD9A00"
+                      :name="item?.attentionIdDictMap?.userId"
+                      :ref="(el) => (checkboxRefs[item?.attentionIdDictMap?.userId] = el)"
+                      @click.stop="toggle(item)"
+                    />
+
+                    <div class="w-40 h-40 ml-13 mr-12 rounded-full overflow-hidden">
+                      <img
+                        v-if="item?.attentionIdDictMap?.headImageUrl"
+                        class="w-full h-full shrink-0 object-cover"
+                        :src="item?.attentionIdDictMap?.headImageUrl"
+                        alt=""
+                      />
+
+                      <img
+                        class="w-full h-full shrink-0 object-cover"
+                        src="~/assets/img/default_avatar.png"
+                        alt=""
+                      />
+                    </div>
+                  </div>
+                </template>
+                <template #title>
+                  <div class="flex items-center">
+                    <h1 class="text-xl text-black-3">
+                      {{ item?.attentionIdDictMap?.showName }}
+                    </h1>
+                    <van-tag
+                      v-if="item.fansStatus == 2"
+                      style="margin-left: 5px; padding: 3px 6px"
+                      color="#F7F8FA"
+                      text-color="#666666"
+                    >
+                      相互关注
+                    </van-tag>
+                  </div>
+                </template>
+              </van-cell>
+            </template>
+            <!-- </van-index-bar> -->
+          </van-checkbox-group>
+        </div>
+      </van-list>
+    </van-pull-refresh>
+    <div
+      class="w-full box-border p-16 pb-40 bg-white fixed bottom-0 left-0 flex justify-between items-center shadow-[0px_-4px_4px_0px_rgba(0,0,0,0.1)]"
+    >
+      <div class="shrink-0 flex justify-start items-center">
+        <div class="w-118 shrink-0 flex justify-start items-center overflow-hidden">
+          <div
+            v-for="(item, index) in checkedList.slice(0, 5)"
+            :key="index + 'avatar'"
+            :class="`w-36 h-36  ${index == 0 ? '' : '-ml-16'} shrink-0 rounded-full overflow-hidden`"
+          >
+            <img
+              v-if="item?.attentionIdDictMap?.headImageUrl"
+              class="w-full h-full object-cover"
+              :src="item?.attentionIdDictMap?.headImageUrl"
+              alt=""
+            />
+            <img
+              v-else
+              class="w-full h-full shrink-0 object-cover"
+              src="~/assets/img/default_avatar.png"
+              alt=""
+            />
+          </div>
+        </div>
+
+        <div v-if="checkedList.length > 5" class="shrink-0 w-24 h-24 ml-8">
+          <img class="w-full h-full object-cover" src="~/assets/img/chat/ellipsis.svg" alt="" />
+        </div>
+      </div>
+      <van-button
+        :disabled="checkedList.length > 0 ? false : true"
+        @click="handleCreateGroup"
+        style="width: 160px"
+        class="shrink-0"
+        block
+        size="large"
+        color="#FD9A00"
+        round
+      >
+        新建
+        <span v-if="checkedList.length">({{ checkedList.length }})</span>
+      </van-button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { pinyin } from 'pinyin-pro'
+
+const route = useRoute()
+
+definePageMeta({
+  layout: false
+})
+
+onMounted(() => {
+  getList()
+})
+
+const refreshing = ref(false)
+const loading = ref(false)
+const finished = ref(false)
+
+const checked = ref([])
+const checkedList = ref([])
+const showName = ref('')
+const checkboxRefs = ref([])
+
+// 字母的数组
+const letterList = ref([])
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  flagPage: 1
+})
+
+const addDataList = ref([])
+const filterDataList = ref([])
+
+useSeoMeta({
+  title: '我的消息'
+})
+
+// 选中要邀请的人
+const toggle = (item) => {
+  if (checkedList.value.length == 0) {
+    checkedList.value.push(item)
+  } else {
+    let index = checkedList.value.findIndex(
+      (el) => el?.attentionIdDictMap?.userId == item?.attentionIdDictMap?.userId
+    )
+    checkedList.value.splice(index, 1)
+  }
+
+  checkboxRefs.value[item?.attentionIdDictMap?.userId].toggle()
+}
+
+const search = () => {
+  finished.value = true
+  if (showName.value) {
+    addDataList.value = filterDataList.value.filter((item) =>
+      item.attentionIdDictMap.name.includes(showName.value)
+    )
+  } else {
+    addDataList.value = filterDataList.value
+  }
+}
+
+// 刷新
+const onRefresh = () => {
+  queryParams.pageNum = 1
+  addDataList.value = []
+  filterDataList.value = []
+  getList()
+}
+
+// 获取数据
+const getList = async () => {
+  try {
+    let url = `/website/tourism/fans/getFriends`
+
+    loading.value = true
+    let {
+      data: { dataList, totalCount }
+    } = await request(url, {
+      query: {
+        ...queryParams
+      }
+    })
+
+    if (Array.isArray(dataList) && dataList?.length) {
+      addDataList.value = dataList
+    } else {
+      addDataList.value = []
+    }
+
+    loading.value = false
+    refreshing.value = false
+    if (addDataList.value.length >= totalCount) {
+      finished.value = true
+    } else {
+      finished.value = false
+    }
+  } catch (err) {
+  } finally {
+    refreshing.value = false
+    loading.value = false
+  }
+}
+
+// 创建多人聊天
+async function handleCreateGroup() {
+  try {
+    showLoadingToast({
+      message: '准备开始群聊...',
+      duration: 100000
+    })
+    let { data } = request('/website/tourGroup/createGroup', {
+      method: 'post',
+      body: {
+        createType: 2,
+        ids: checked.value
+      }
+    })
+    if (data) {
+      navigateTo({
+        path: '/chat/group',
+        query: data,
+        replace: true
+      })
+    }
+  } catch (error) {
+  } finally {
+    closeToast()
+  }
+}
+</script>
+<style lang="scss" scoped></style>

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

@@ -132,7 +132,7 @@
           <ProfileNewsGroupChat
             :item-data="{ title: item }"
             @on-chat-page="
-              onChatPage('/chat/group', { userId: userInfo.userId, groupId: '1877696775305945089' })
+              onChatPage('/chat/group', { userId: userInfo.userId, groupId: '1877363770339758081' })
             "
             @on-no-bother="noBother(item)"
             @on-conv-delete="convDelete()"