From 4b8dc927396d86b3962f71e33ccc6e8db9e8ccbf Mon Sep 17 00:00:00 2001
From: tangxinyue <524779910@qq.com>
Date: Wed, 27 May 2026 17:55:11 +0800
Subject: [PATCH] =?UTF-8?q?oppo=E7=9F=AD=E4=BF=A1=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/message/chat/chat-list.vue         |  33 ++++-
 components/message/chat/image-preview.vue     | 125 ++++++++++++++++++
 pages/message/chat-page/chat-page.vue         |  14 +-
 .../image/phone-message/oppo/back-white.png   | Bin 0 -> 1008 bytes
 .../image/phone-message/oppo/save-white.png   | Bin 0 -> 1038 bytes
 5 files changed, 169 insertions(+), 3 deletions(-)
 create mode 100644 components/message/chat/image-preview.vue
 create mode 100644 static/image/phone-message/oppo/back-white.png
 create mode 100644 static/image/phone-message/oppo/save-white.png

diff --git a/components/message/chat/chat-list.vue b/components/message/chat/chat-list.vue
index 31a8ca5..6ead8b4 100644
--- a/components/message/chat/chat-list.vue
+++ b/components/message/chat/chat-list.vue
@@ -41,7 +41,8 @@
                     <text v-if="message.isMe && phone == 'mi'" class="send-text">送达</text>
                     <view class="chat-bubble" :class="{ 'image-bubble': isImageMsg(message) }">
                         <image v-if="isImageMsg(message)" :src="getImageSrc(message)" mode="aspectFill"
-                            class="chat-image" :style="getImageStyle(message)"></image>
+                            class="chat-image" :style="getImageStyle(message)" @tap.stop="handleImageClick(message)">
+                        </image>
                         <rich-text v-else :nodes="formatMessageContent(message.content, message.isMe)"></rich-text>
                     </view>
                 </view>
@@ -54,12 +55,40 @@
                 </view>
             </view>
         </view>
+
     </view>
 </template>
 
 <script setup>
 import { ref, onMounted, computed, watch, nextTick } from 'vue'
 import { util } from '@/utils/common.js';
+
+const handleImageClick = (message) => {
+    const src = getImageSrc(message);
+    if (!src) return;
+
+    const allImages = [];
+    let clickIndex = 0;
+
+    displayList.value.forEach(msg => {
+        if (isImageMsg(msg)) {
+            const imgSrc = getImageSrc(msg);
+            if (imgSrc) {
+                if (imgSrc === src) {
+                    clickIndex = allImages.length;
+                }
+                allImages.push(imgSrc);
+            }
+        }
+    });
+
+    if (props.phone === 'oppo') {
+        emit('previewImage', { images: allImages, index: clickIndex });
+    } else {
+        uni.previewImage({ urls: allImages, current: clickIndex });
+    }
+}
+
 const props = defineProps({
     // 手机品牌
     phone: {
@@ -78,7 +107,7 @@ const props = defineProps({
 })
 
 const SIM_STORAGE_KEY = 'sim_info'
-const emit = defineEmits(['onMessageLongPress', 'sort'])
+const emit = defineEmits(['onMessageLongPress', 'sort', 'previewImage'])
 
 const simInfo = ref({
     sim1: '中国电信',
diff --git a/components/message/chat/image-preview.vue b/components/message/chat/image-preview.vue
new file mode 100644
index 0000000..d11af33
--- /dev/null
+++ b/components/message/chat/image-preview.vue
@@ -0,0 +1,125 @@
+<template>
+    <view class="preview-container" v-if="show">
+        <view class="header" @tap.stop :style="{ 'padding-top': statusBarHeight }">
+            <image class="icon-back" src="/static/image/phone-message/oppo/back-white.png" @tap="close"></image>
+            <image class="icon-download" src="/static/image/phone-message/oppo/save-white.png"></image>
+        </view>
+        <!-- 图片显示 -->
+        <swiper class="preview-swiper" :current="current" @change="onChange">
+            <swiper-item v-for="(imgSrc, index) in images" :key="index">
+                <image class="preview-img" :src="imgSrc" mode="aspectFit"></image>
+            </swiper-item>
+        </swiper>
+    </view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const statusBarHeight = (uni.getSystemInfoSync().statusBarHeight || 44) + 'px';
+
+const props = defineProps({
+    show: Boolean,
+    images: {
+        type: Array,
+        default: () => []
+    },
+    currentIndex: {
+        type: Number,
+        default: 0
+    }
+});
+const emit = defineEmits(['update:show']);
+
+const current = ref(0);
+
+watch(() => props.currentIndex, (val) => {
+    current.value = val;
+});
+
+const onChange = (e) => {
+    current.value = e.detail.current;
+};
+
+const close = () => {
+    emit('update:show', false);
+};
+
+// const download = () => {
+//     const currentSrc = props.images[current.value];
+//     if (!currentSrc) return;
+
+//     // 触发下载逻辑
+//     uni.saveImageToPhotosAlbum({
+//         filePath: currentSrc,
+//         success: function () {
+//             uni.showToast({
+//                 title: '保存成功',
+//                 icon: 'success'
+//             });
+//         },
+//         fail: function () {
+//             uni.showToast({
+//                 title: '保存失败',
+//                 icon: 'none'
+//             });
+//         }
+//     });
+// };
+</script>
+
+<style scoped>
+.preview-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #000000;
+    z-index: 999999;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    box-sizing: content-box;
+    width: 100%;
+    /* 预留状态栏高度 */
+    height: 98rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.icon-back {
+    width: 48rpx;
+    height: 48rpx;
+    margin: 0 34rpx;
+}
+
+.icon-download {
+    width: 48rpx;
+    height: 48rpx;
+    margin: 0 34rpx;
+}
+
+.preview-swiper {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+.preview-img {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+</style>
diff --git a/pages/message/chat-page/chat-page.vue b/pages/message/chat-page/chat-page.vue
index 1735d1d..74ee59b 100644
--- a/pages/message/chat-page/chat-page.vue
+++ b/pages/message/chat-page/chat-page.vue
@@ -11,7 +11,7 @@
 			:number="data.number" @dblclick-left="onDblclickLeft" @dblclick-right="onDblclickRight"
 			@title-click="handleTitleClick">
 			<ChatList :messageList="messageList" :phone="data.phone" :sortMode="isSortMode"
-				@onLongPress="onMessageLongPress" @sort="onSortChange"></ChatList>
+				@onLongPress="onMessageLongPress" @sort="onSortChange" @previewImage="handlePreviewImage"></ChatList>
 		</ChatLayout>
 
 		<!-- 弹出操作层及遮罩 -->
@@ -161,10 +161,12 @@
 				</view>
 			</view>
 		</view>
+		<ImagePreview v-model:show="showPreview" :images="previewImages" :currentIndex="previewIndex" />
 	</view>
 </template>
 
 <script setup>
+import ImagePreview from '@/components/message/chat/image-preview.vue'
 import ChatLayout from '@/components/message/chat/chat-layout.vue'
 import ChatList from '@/components/message/chat/chat-list.vue'
 import defaultData from '../defaultData.json'
@@ -197,6 +199,16 @@ const selectedMessage = ref(null)
 
 const showEditPopup = ref(false)
 const editingMessage = ref(null)
+const showPreview = ref(false)
+const previewImages = ref([])
+const previewIndex = ref(0)
+
+const handlePreviewImage = (data) => {
+	previewImages.value = data.images
+	previewIndex.value = data.index
+	showPreview.value = true
+}
+
 const editingTime = ref("")       // 完整时间字符串 "YYYY-MM-DD HH:mm"
 const editingDate = ref("")       // 日期部分 "YYYY-MM-DD"
 const editingTimeOfDay = ref("")  // 时刻部分 "HH:mm"
diff --git a/static/image/phone-message/oppo/back-white.png b/static/image/phone-message/oppo/back-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..234f48fc32c6973c85161696b3b2e83df780e9fa
GIT binary patch
literal 1008
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`ol6-Q7*hj$LR^8||D%A$A;9}DDG3<R
zWhFs=!3>PdEbJVdT--do{DMNlBBEmA5|T2q3W~~V8alcLhDIi4);3Nqt{#5=p^-6(
zNy%v$c_pRgl{F2GO|5O+{gb9loi=^eoVoKCE?%;1`N~!6Hg4X&W7qCIdk>#Hb^5}k
z%hzw;xp)8B%hzw-zW?<3%eU`8e*OOQ_g|j9hy^gpk9fK`hD02GJN;#tu%k$e^~?o|
z4HAJY?BWHST?-WS9x$C!TG1fI%#@{cIzcF@ZRVNpfBv0#z`W!a|MMks4_>dbTb_T{
zY}wjv=Q^t5{{JmAURZ3jn(?C7@^e2gFnkgZ@w;Bb@Z-Gf)$=v72`l~2i8AP<r`R(J
z<b3Ivb7i&Ffn%XlKVM^y2>x5L=gZnBM!}-mJI_qkIv{?v|MLp2mew_|(%&#Fc(7_t
zduqd?SH~r_nFB9woxHk2JyG@gKJB7Omi!&x+^)pz6gqG(Bk0MUuMB$xCr*~ox_Q!c
zi)`dc(}1pqS#z=r*dLs4F7dYd|NqCq8jcUYAA5OM{a<6xR?9oFWRpzusg6}g7L<x^
zk!xP}mg&L&JGq{>FHiT&zx}sy>Mes~e`Rh+{!rU}YeTT(vhTqRA7bTxEq{Id+J-%g
zOvM)+(+~f?<pJ}X)&AFKTzNBbu3~1;<WTF!XJ;HwWq3bNdGf5QWft>-9M5iAYP59u
z?)QuzOmrs~9pzYY_QaAWy+RJTZvN&Qgqil7Jh3EA_R90B(14hLuT6E2Z=PjH_}pc~
zqqlx8L*l<hZ&p?dD$LpNL9{lUIZe0Wl764%j@-xPHSezdC_TRA>NUwL_F}UHIJZiE
Ry$VcG44$rjF6*2UngGNnmP7ym

literal 0
HcmV?d00001

diff --git a/static/image/phone-message/oppo/save-white.png b/static/image/phone-message/oppo/save-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..7162bf9584ded4ee73a366dea31739a711e14f36
GIT binary patch
literal 1038
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`ol6-Q7z+b@LR^8||D%A8A<)rOITIM@
zRV6`w!3>N{%q;92oLt;Iy!-+}B4Xka(lW9NifS5~+IsrNCZ=Xq*7lB0&MuzbK7L`5
z(J^reiAh=6xdlZfrR5b>)in)`O)YIby%Q(RoHcvS-1*B_tX#Ev&Bm?Uw(r_|_{h=Y
zr_NuxeC_(p+xPB2e)9bF`wySKe*6C8*Y7`n|CwzPt^y{3OP(%{ArXh)UV9mQ*+J&m
zN3$I5ge6--L-;Jal;XB%xv)gDgdAwDdJt(Mvo(Qt&C-@ne_z)o9~UW5n_b2x@p;dk
znSXuy{@Qvfe6W9h==56ii)<FYlXrjEz!>mZTj4sxic~>^+7s<HVB{wvvj5_vvg{}K
zN}T>M3we4jygv8xucZF7zulb^oe#ySz2LIi&vrt6p|V0^4)fG4yS1&hZ{eRZ|5dxf
z+hwd9ZawDXii>BzF|%K$!Q~W_!S9&=CrZ{a-jIK^^+JH)fj2=FPv6eZY0#fOCm>&L
z!Gr)S8`=Do_gqE2o-ls8F4CWPTZZ9&`&Rpa`&JF63u+cPXL2Uoy(G@K`83Ohpjp2%
zT6j4X<Wn1Yg&mf)Oji^x*J+r<qQzjevQj!ccSnQr?Y0j#KRG|ISMDv4mA$kxru39%
zV7PSbzZk{`;c6l2>s`gl7}BC%=XuoLYujne`{LGx6R&S86+|f?`@Hktf=}C)9b9j(
zK5MSF^8qg($*yM!ue*w$8V0-xYqK(ISW=uSrtxis^Xvn$@>Xgu7!&H}cxkI~zlkq(
zx|_P^+3};Z%Ie---8lcMm{0V!Cnq)c_RCb{ZQQstUwc(#oq5%_58K`QkA@0g-P$n!
b@|^qmj6uB@4laBLOk)h5u6{1-oD!M<M75gC

literal 0
HcmV?d00001