聊天问题修复优化

pageChat/group-info/index.vue

@@ -2,7 +2,7 @@
   <view class="min-page bg-f7 u-font-28">
     <view class="user-list bg-fff">
       <view class="u-flex u-row-between u-col-center">
-        <text class="color-000">群成员（{{allUser.length}}人）</text>
+        <text class="color-000">群成员（{{ allUser.length }}人）</text>
         <text class="color-red" @click="showRemove = !showRemove">移除</text>
       </view>
       <view class="list u-m-t-26">
@@ -17,7 +17,9 @@
             :src="item.avatar"
             round="8rpx"
           ></up-avatar>
-          <view class="u-m-t-8 color-000 u-line-1" style="max-width: 104rpx;">{{ item.nick_name }}</view>
+          <view class="u-m-t-8 color-000 u-line-1" style="max-width: 104rpx">{{
+            item.nick_name
+          }}</view>
           <view
             class="remove u-absolute"
             v-if="showRemove && item.role != 1"
@@ -40,7 +42,10 @@
     </view>
 
     <view class="bottom">
-      <view class="u-flex u-row-between default-padding bg-fff border-bottom">
+      <view
+        class="u-flex u-row-between default-padding bg-fff border-bottom"
+        @click="toEditTitle"
+      >
         <text>群聊名称</text>
         <view class="u-flex color-666">
           <text>{{ groupInfo.name }}</text>
@@ -77,6 +82,17 @@
         </view>
       </view>
     </view>
+
+    <Modal v-model="modalData.show" title="修改群名称" @confirm="modalConfirm">
+      <view class="u-p-40">
+        <view class="font-bold u-m-b-16">群名称</view>
+        <up-input
+          v-model="modalData.form.title"
+          placeholder="请输入群名称"
+          maxlength="20"
+        ></up-input>
+      </view>
+    </Modal>
   </view>
 </template>
 <script setup>
@@ -84,10 +100,50 @@ import go from "@/commons/utils/go.js";
 import * as chatApi from "@/http/php/chat";
 import { onShow, onLoad } from "@dcloudio/uni-app";
 import { reactive, toRefs, computed, watch, onMounted, ref } from "vue";
+import Modal from "@/pageChat/components/modal.vue";
 const options = reactive({});
 const groupInfo = ref({});
-onLoad((opt) => {
-  Object.assign(options, opt);
+const modalData = reactive({
+  show: false,
+  form: {
+    title: "",
+  },
+  key: "editTitle",
+});
+
+function toEditTitle() {
+  modalData.show = true;
+  modalData.form.title = groupInfo.value.name || "";
+}
+
+function modalConfirm(e) {
+  if (modalData.key == "editTitle") {
+    if (!modalData.form.title.trim().length) {
+      uni.showToast({
+        title: "请输入群名称",
+        icon: "none",
+      });
+      return;
+    }
+    chatApi
+      .groupEditTitle({
+        group_id: options.group_id,
+        title: modalData.form.title,
+      })
+      .then((res) => {
+        if (res) {
+          groupInfo.value.name = modalData.form.title;
+          modalData.show = false;
+          uni.showToast({
+            title: "修改成功",
+            icon: "none",
+          });
+        }
+      });
+  }
+}
+
+function getGroupInfo() {
   chatApi
     .groupInfo({
       group_id: options.group_id,
@@ -95,6 +151,10 @@ onLoad((opt) => {
     .then((res) => {
       groupInfo.value = res || {};
     });
+}
+onLoad((opt) => {
+  Object.assign(options, opt);
+  getGroupInfo();
 });
 function groupMuteChange(e) {
   if (e) {
@@ -137,8 +197,8 @@ function getMembers() {
   });
 }
 
-function loadMore() { 
-  userLists.value=allUser.value
+function loadMore() {
+  userLists.value = allUser.value;
 }
 onShow(() => {
   getMembers();