heshanApp/pages_im/pages/conversation/previewImage/index.nvue

<template>
	<view class="page">
		<swiper class="swiper" :current="current" @change="onChange" :indicator-dots="false">
			<swiper-item v-for="(url, index) in urls" :key="index">
				<view class="image-wrapper" @click="close">
					<image class="image" :src="url" mode="aspectFit" @click="close" @longpress="onLongPress(index)"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		forwardImg,
		downloadToAlbum
	} from "@/pages_im/util/preview";

	export default {
		data() {
			return {
				current: 0,
				urls: []
			}
		},
		onLoad(options) {
			this.current = parseInt(options.current || 0);
			// Get urls from globalData
			const app = getApp();
			if (app.globalData && app.globalData.previewUrls) {
				this.urls = app.globalData.previewUrls;
			}
		},
		methods: {
			close() {
				uni.navigateBack();
			},
			onChange(e) {
				this.current = e.detail.current;
			},
			onLongPress(index) {
				uni.showActionSheet({
					itemList: ["转发图片", "保存图片"],
					success: ({
						tapIndex
					}) => {
						const url = this.urls[index];
						if (tapIndex === 0) {
							// Forward
							// Logic copied from preview.js
							const isWebResource = /^(http|https):\/\//i.test(url);
							if (isWebResource) {
								uni.getImageInfo({
									src: url,
									success: (res) => {
										forwardImg(res.path);
									},
								});
							} else {
								forwardImg(url);
							}
						} else {
							// Save
							downloadToAlbum(url);
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.page {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000000;
	}

	.swiper {
		flex: 1;
	}

	.image-wrapper {
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.image {
		width: 750rpx;
		flex: 1;
	}
</style>