From 57a54d14c8c8e5b8b27b82f4f9d5cfa51bdac9f7 Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Thu, 29 May 2025 12:06:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(im=5Fchat=5Finfo):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=B6=88=E6=81=AF=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 AQUplodeImage 组件用于上传图片
- 在聊天界面添加发送图片的功能
- 实现图片消息的展示和预览
-优化聊天界面布局和样式
---
 components/AQ/AQUplodeImage.vue |  56 +++++++++
 pages/common/im_chat_info.vue   | 208 ++++++++++++++++++++++++++------
 2 files changed, 228 insertions(+), 36 deletions(-)
 create mode 100644 components/AQ/AQUplodeImage.vue

diff --git a/components/AQ/AQUplodeImage.vue b/components/AQ/AQUplodeImage.vue
new file mode 100644
index 0000000..7d67ef8
--- /dev/null
+++ b/components/AQ/AQUplodeImage.vue
@@ -0,0 +1,56 @@
+<template>
+  <view @click="chooseImage">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    multiple: { type: Boolean, default: false },
+    limit: { type: Number, default: 1 },
+    uploadUrl: { type: String, default: '' },
+    extraData: { type: Object, default: () => ({}) }
+  },
+  methods: {
+    chooseImage() {
+      uni.chooseImage({
+        count: this.multiple ? this.limit : 1,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          const tempFilePath = res.tempFilePaths[0];
+          this.uploadFile(tempFilePath);
+        }
+      });
+    },
+    uploadFile(filePath) {
+      let token = uni.getStorageSync('token');
+      uni.uploadFile({
+        url: this.uploadUrl,
+        filePath: filePath,
+        name: 'file',
+        header: {
+          'token': token
+        },
+        formData: this.extraData.formData || {},
+        success: (e) => {
+          try {
+            let res = JSON.parse(e.data.replace(/\ufeff/g, "") || "{}");
+            if (res.code === 1) {
+              this.$emit('uplodeImageRes', res.data, this.extraData);
+            } else {
+              uni.showToast({ title: res.msg, icon: 'none' });
+            }
+          } catch (error) {
+            uni.showToast({ title: '解析失败', icon: 'none' });
+          }
+        },
+        fail: () => {
+          uni.showToast({ title: '上传失败', icon: 'none' });
+        }
+      });
+    }
+  }
+}
+</script>
diff --git a/pages/common/im_chat_info.vue b/pages/common/im_chat_info.vue
index ae88c48..33c8918 100644
--- a/pages/common/im_chat_info.vue
+++ b/pages/common/im_chat_info.vue
@@ -15,16 +15,25 @@
             <view class="time_section" v-if="v.created_at">{{v.created_at}}</view>
 
             <view class="li" v-if="v.direction == `left`">
-              <view class="item left_item">
-                <view class="text_box">{{v.content}}</view>
+              <view class="item left_item" :style="v.message_type == 'text' ? { backgroundColor: '#f4f6f9' } : {}">
+                <!--文本内容-->
+                <view class="text_box" v-if="v.message_type == 'text'">{{v.content}}</view>
+                <!-- 图片内容 -->
+                <view class="img_box" v-if="v.message_type == 'img'" @click="previewImage(v.content)">
+                  <image class="chat_img" :src="v.content" mode="aspectFill"></image>
+                </view>
               </view>
               <view class="item"></view>
             </view>
 
             <view class="li" v-if="v.direction == `right`">
               <view class="item"></view>
-              <view class="item right_item">
-                <view class="text_box">{{v.content}}</view>
+              <view class="item right_item" :style="v.message_type == 'text' ? { backgroundColor: '#1684fc' } : {}">
+                <view class="text_box" v-if="v.message_type == 'text'">{{v.content}}</view>
+                <!-- 图片内容 -->
+                <view class="img_box" v-if="v.message_type == 'img'" @click="previewImage(v.content)">
+                  <image class="chat_img" :src="v.content" mode="aspectFill"></image>
+                </view>
               </view>
             </view>
           </view>
@@ -36,27 +45,66 @@
         <input class="input" v-model="formData.content" type="text" placeholder="请输入">
       </view>
       <view class="right_box">
-        <image @click="submitForm()" class="send_img" src="@/static/images/common/fa_song.png"></image>
+        <!--发送-->
+        <view class="img_box">
+          <image @click="submitTextForm()" class="send_img" src="@/static/images/common/fa_song.png"></image>
+        </view>
+
+        <!--更多选择-->
+        <view class="img_box">
+          <image @click="openMore()" class="send_img" src="@/static/images/common/jia_hao.png"></image>
+        </view>
       </view>
     </view>
+
+    <!--更多选择-->
+    <fui-bottom-popup :show="moreShow" @close="closeMore">
+      <view class="more_section">
+        <view class="fui-scroll__wrap">
+          <scroll-view scroll-y class="fui-scroll__view">
+            <view class="ul">
+              <view class="li" @click="">
+                  <AQUplodeImage
+                      :uploadUrl=uploadUrl
+                      :extraData="{ input_name: 'img_uplode', formData:{} }"
+                      @uplodeImageRes="uplodeImageRes"
+                  >
+                    <view class="icon_box">
+                      <fui-icon name="picture-fill" :size="80"></fui-icon>
+                    </view>
+                    <view class="title">相册</view>
+                  </AQUplodeImage>
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+      </view>
+    </fui-bottom-popup>
+
   </view>
 </template>
 
 <script>
 import apiRoute from '@/api/apiRoute.js';
-import memberApi from '@/api/member.js';
-import commonApi from '@/api/common.js';
-import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
+
+import {
+  Api_url
+} from "@/common/config.js";
+import AQUplodeImage from '@/components/AQ/AQUplodeImage';//单图上传组件
 import AQTabber from "@/components/AQ/AQTabber"
 
 
 export default {
   components: {
     AQTabber,
-    AQUplodeImgMulti,
+    AQUplodeImage,
   },
   data() {
     return {
+      uploadUrl:  `${Api_url}/uploadImage`,
+
+
+      scrollTop:'',//滚动条位置,用于加载第一页后滚动到底部
       loading:false,//加载状态
       lowerThreshold: 100,//距离底部多远触发
       isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
@@ -91,8 +139,8 @@ export default {
         content: '',//文本内容（JSON 格式扩展字段）,文本类型=纯文字,图片类型=绝对路径
       },
 
-      isFirstLoad: true, // 标记是否为首次加载
-      scrollTop:'',
+      //更多选项相关
+      moreShow:false,
     }
   },
   onLoad(options) {
@@ -261,6 +309,12 @@ export default {
       // console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr)
     },
 
+
+    //发送文本信息
+    submitTextForm(){
+      this.formData.message_type = 'text'
+      this.submitForm()
+    },
     //发送站内信
     async submitForm() {
       let data = {...this.formData}
@@ -281,18 +335,18 @@ export default {
       } else {
         let content = this.formData.content
         this.formData.content = ''//清空输入框
+
+
+
         let msgData = {
-          "id": '',
-          "hair_staff_id": this.filteredData.hair_staff_id,
-          "closed_staff_id": '',
-          "content": content,
-          "status": 1,
-          "type": 2,
-          "create_time": "",
-          "redirect": null,
-          "title": null,
-          "direction": "right",
-          "show_time": ""
+          id:'',
+          from_type:data.from_type,//发送者类型|personnel=员工,customer=学生(客户)
+          from_id:data.from_id,//发送者ID
+          to_id:data.to_id,//接收者ID
+          friend_id:data.friend_id,//关联chat_friends表id
+          message_type: data.message_type,//消息类型|text=文本,img=图片
+          content: data.content,//文本内容（JSON 格式扩展字段）,文本类型=纯文字,图片类型=绝对路径
+          direction:'right'
         }
         //将发送的消息放在最下方
         this.tableList = this.tableList.concat(msgData);
@@ -301,11 +355,40 @@ export default {
 
     //页面滚动到底部
     scrollToBottom() {
-      alert(1)
       this.$nextTick(() => {
         this.scrollTop = 999999 // 足够大的值确保滚动到底部
       })
     },
+
+    //打开更多选择弹窗
+    openMore(){
+      this.moreShow = true
+    },
+    //关闭更多选择弹窗
+    closeMore(){
+      this.moreShow = false
+    },
+
+    //但文件上传回调
+    uplodeImageRes(resData,extraData){
+      console.log('上传成功回调',resData,extraData)
+      //判断是不是上传相册图片
+      if(extraData.input_name == 'img_uplode'){
+        this.closeMore()//关闭更多选择弹窗
+        this.formData.content = resData.url
+        this.formData.message_type = 'img'
+        this.submitForm()
+      }
+    },
+
+    //图片预览
+    previewImage(url){
+      uni.previewImage({
+        current: url, // 当前图片地址
+        urls: [url]   // 所有图片列表（可以是多个）
+      });
+    },
+
   }
 }
 </script>
@@ -369,13 +452,20 @@ export default {
             word-wrap: break-word; /* 允许长单词或 URL 换行 */
             word-break: break-all; /* 强制所有字符换行 */
             .text_box{}
+            .img_box {
+              .chat_img {
+                width: 200rpx;
+                height: 200rpx;
+                border-radius: 16rpx;
+              }
+            }
           }
           .left_item{
-            background-color: #f4f6f9;
+            //background-color: #f4f6f9;
             color: #343434;
           }
           .right_item{
-            background-color: #1684fc;
+            //background-color: #1684fc;
             color: #fff;
           }
         }
@@ -390,12 +480,12 @@ export default {
     position: fixed;
     bottom: 0;
 
-    padding: 50rpx 50rpx;
+    padding: 50rpx 30rpx;
     display: flex;
     justify-content:space-between;
     align-items: center;
+    gap: 20rpx;
     .left_box{
-      width: 70%;
       .input{
         background-color: #f4f6f9;
         height: 88rpx;
@@ -403,22 +493,28 @@ export default {
         font-size: 28rpx;
         border-radius: 32rpx;
 
-        width: 532rpx;
+        width: 480rpx;
         color: #292929;
         font-size: 28rpx;
       }
     }
     .right_box{
-      border-radius: 50%;
-      background-color: #a2cefe;
-      width: 88rpx;
-      height: 88rpx;
+      width: 100%;
       display: flex;
-      justify-content: center;
+      justify-content: space-between;
       align-items: center;
-      .send_img{
-        width: 36rpx;
-        height: 36rpx;
+      .img_box{
+        width: 88rpx;
+        height: 88rpx;
+        border-radius: 50%;
+        background-color: #a2cefe;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .send_img{
+          width: 36rpx;
+          height: 36rpx;
+        }
       }
     }
 
@@ -428,4 +524,44 @@ export default {
 		color: #999999;
 		padding-left: 30rpx;
 	}
+
+
+  /* 更多选项相关 自定义内容区样式需自行控制 */
+  .more_section{
+    .fui-scroll__wrap {
+      padding-top: 30rpx;
+      position: relative;
+    }
+    .fui-title {
+      font-size: 30rpx;
+      font-weight: bold;
+      text-align: center;
+      padding-bottom: 24rpx;
+    }
+    .fui-icon__close {
+      position: absolute;
+      top: 24rpx;
+      left: 24rpx;
+    }
+    .fui-scroll__view {
+      width: 100%;
+      height: 350rpx;
+    }
+
+    .ul{
+      padding: 10rpx 40rpx;
+      display: flex;
+      .li{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .icon_box{
+        }
+        .title{
+          font-size: 28rpx;
+          text-align: center;
+        }
+      }
+    }
+  }
 </style>
\ No newline at end of file