components/message/chat/chat-layout.vue

@@ -87,7 +87,7 @@
                             @click="sendMessage">
                         </image>
                         <image v-if="phone == 'oppo'" class="right-icon"
-							:src="`/static/image/phone-message/oppo/${isSend ? 'send' : 'unSend'}.png`"
+                            :src="`/static/image/phone-message/oppo/${isSend ? 'send' : 'unsend'}.png`"
                             @click="sendMessage">
                         </image>
                         <image v-if="phone == 'huawei'" class="right-icon"
@@ -108,17 +108,9 @@
     </view>
 </template>
 <script setup>
-	import {
+import { reactive, onMounted, computed, toRefs } from 'vue'
-		reactive,
+import { dateUtil, util } from '@/utils/common.js';
-		onMounted,
+const props = defineProps({
-		computed,
-		toRefs
-	} from 'vue'
-	import {
-		dateUtil,
-		util
-	} from '@/utils/common.js';
-	const props = defineProps({
     // 手机品牌
     phone: {
         type: String,
@@ -144,9 +136,9 @@
         type: Number,
         default: 0
     }
-	})
+})
 
-	const data = reactive({
+const data = reactive({
     statusBarHeight: 0,
     topBoxHeight: 0,
     bottomBoxHeight: 0,
@@ -156,17 +148,12 @@
     scrollTop: 0,
     keyboardHeight: 0,
     lastClickTime: 0
-	})
+})
 
-	let {
+let { isSend, content, simIndex, scrollTop } = toRefs(data)
-		isSend,
-		content,
-		simIndex,
-		scrollTop
-	} = toRefs(data)
 
-	const emit = defineEmits(['send', 'dblclick-left', 'dblclick-right', 'title-click'])
+const emit = defineEmits(['send', 'dblclick-left', 'dblclick-right', 'title-click'])
-	const onInput = (e) => {
+const onInput = (e) => {
     content.value = e.detail.html
     const htmlStr = (content.value || '').trim()
     if (htmlStr === '' || htmlStr === '<p><br></p>' || htmlStr === '<br>') {
@@ -181,21 +168,21 @@
             }
         }).exec();
     }, 50);
-	}
+}
 
 
 
-	/**
+/**
  * 切换sim卡
  */
-	const changeSim = () => {
+const changeSim = () => {
     simIndex.value = simIndex.value == 1 ? 2 : 1
-	}
+}
 
-	/**
+/**
  * 发送消息
  */
-	const sendMessage = () => {
+const sendMessage = () => {
     if (!isSend.value) return
     const date = dateUtil.now("YYYY-MM-DD HH:mm")
     const params = {
@@ -227,12 +214,12 @@
         data.isSend = false
     }, 100);
     data.isSend = false
-	}
+}
 
-	/**
+/**
  * 处理 center-box 点击事件，检测双击并区分左右
  */
-	const handleBoxClick = (e) => {
+const handleBoxClick = (e) => {
     const now = Date.now();
     const clickInterval = now - data.lastClickTime;
 
@@ -258,16 +245,16 @@
     } else {
         data.lastClickTime = now;
     }
-	}
+}
 
 
-	const handleTitleClick = () => {
+const handleTitleClick = () => {
     emit('title-click');
-	}
+}
 
 
-	// 处理标题显示
+// 处理标题显示
-	const displayTitle = computed(() => {
+const displayTitle = computed(() => {
     let title = props.chatInfo.title || '';
     if (props.phone === 'oppo') {
         const noSpace = title.replace(/\s+/g, '');
@@ -276,10 +263,10 @@
         }
     }
     return title;
-	})
+})
 
-	// 展示文字信息
+// 展示文字信息
-	const showInfo = computed(() => {
+const showInfo = computed(() => {
     let placeholder
     switch (props.phone) {
         case "iphone":
@@ -300,15 +287,13 @@
         default:
             break;
     }
-		return {
+    return { placeholder }
-			placeholder
+})
-		}
-	})
 
-	/**
+/**
  * 选择图片并发送
  */
-	const chooseImage = () => {
+const chooseImage = () => {
     uni.chooseImage({
         count: 1, // 仅选一张
         sizeType: ['original', 'compressed'], // 原图或压缩图
@@ -327,9 +312,7 @@
                             let h = image.height;
 
                             // 根据 EXIF 方向修正实际视觉宽高
-								if (image.orientation && ['left', 'right', 'left-mirrored',
+                            if (image.orientation && ['left', 'right', 'left-mirrored', 'right-mirrored'].includes(image.orientation)) {
-										'right-mirrored'
-									].includes(image.orientation)) {
                                 w = image.height;
                                 h = image.width;
                             }
@@ -340,8 +323,7 @@
 
                             const date = dateUtil.now("YYYY-MM-DD HH:mm")
                             // 封装成HTML的img标签作为消息内容
-								const content =
+                            const content = `<img src="${finalPath}" style="width: ${width}; height: ${height}; border-radius: 16rpx; display: block;" />`;
-									`<img src="${finalPath}" style="width: ${width}; height: ${height}; border-radius: 16rpx; display: block;" />`;
                             const params = {
                                 content: content,
                                 imgUrl: finalPath,
@@ -357,11 +339,9 @@
                             // 延迟拉动到底部
                             setTimeout(() => {
                                 data.scrollTop = 99999 + Math.random();
-									uni.createSelectorQuery().select('.bottom-box')
+                                uni.createSelectorQuery().select('.bottom-box').boundingClientRect(rect => {
-										.boundingClientRect(rect => {
                                     if (rect) {
-												data.bottomBoxHeight = rect
+                                        data.bottomBoxHeight = rect.height;
-													.height;
                                     }
                                 }).exec();
                             }, 100);
@@ -386,9 +366,9 @@
             }
         }
     })
-	}
+}
 
-	onMounted(() => {
+onMounted(() => {
     // 同步获取系统信息
     const systemInfo = uni.getSystemInfoSync();
     data.statusBarHeight = systemInfo.statusBarHeight || 0;
@@ -417,51 +397,54 @@
         }).exec();
     }, 300);
 
-	})
+})
+
+
+
 </script>
 <style>
-	@import '@/common/main.css';
+@import '@/common/main.css';
 </style>
 <style lang="less" scoped>
-	.page-container {
+.page-container {
     width: 100vw;
     height: 100vh;
     background-color: #fff;
-	}
+}
 
-	.m-l-34 {
+.m-l-34 {
     margin-left: 34rpx;
-	}
+}
 
-	.m-l-50 {
+.m-l-50 {
     margin-left: 50rpx;
-	}
+}
 
-	.center-box {
+.center-box {
     overflow: hidden;
     // overflow-y: scroll;
     // padding-bottom: 12px;
-	}
+}
 
-	.fixed-bottom-box {
+.fixed-bottom-box {
     position: fixed;
     width: 100%;
     background: #fff;
     bottom: 0;
     left: 0;
-	}
+}
 
 
-	.fixed-top-box {
+.fixed-top-box {
     position: fixed;
     width: 100%;
     z-index: 9;
     left: 0;
     top: 0;
-	}
+}
 
-	//苹果样式
+//苹果样式
-	.iphone-style {
+.iphone-style {
     .circle {
         border-radius: 50% !important;
     }
@@ -603,10 +586,10 @@
         }
 
     }
-	}
+}
 
-	//小米样式
+//小米样式
-	.mi-style {
+.mi-style {
     background-color: #F7F7F7 !important;
 
     .top-box {
@@ -741,10 +724,10 @@
         }
     }
 
-	}
+}
 
-	//oppo样式
+//oppo样式
-	.oppo-style {
+.oppo-style {
     background-color: #F0F1F3 !important;
 
     .top-box {
@@ -904,10 +887,10 @@
         }
     }
 
-	}
+}
 
-	//华为样式
+//华为样式
-	.huawei-style {
+.huawei-style {
     background-color: #F1F5F8 !important;
 
     .top-box {
@@ -1069,11 +1052,11 @@
         }
     }
 
-	}
+}
 
 
-	//vivo样式
+//vivo样式
-	.vivo-style {
+.vivo-style {
     background-color: #F6F6F6 !important;
 
     .top-box {
@@ -1192,10 +1175,10 @@
         }
     }
 
-	}
+}
 
-	.bottom-placeholder {
+.bottom-placeholder {
     margin-top: env(safe-area-inset-bottom);
     margin-top: constant(safe-area-inset-bottom);
-	}
+}
 </style>