Merge branch 'Branch_1' of https://git.u8t.cn/tangxinyue/alipay-emulator into Branch_1

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: '中国电信',

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>

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"