weapp-v1/components/kxj-previewImage.vue

<template>
	<view class="previewImage" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" v-if="show" @tap.stop="close" @touchmove.stop.prevent>
		<swiper class="swiper" :current="index" @change="swiperChange" :disable-touch="swiper" :circular="circular">
			<swiper-item v-for="(img, i) in imgs" :key="'swiper-item-'+i" :id="'swiper-item-'+i">
				<movable-area class="marea" scale-area>
					<movable-view
						:id="'movable-view-'+i"
						:key="'movable-view-'+i"
						class="mview"
						direction="all"
						:out-of-bounds="false"
						:inertia="true"
						damping="90"
						friction="2"
						scale="true"
						scale-min="1"
						scale-max="4"
						:scale-value="scale"
						@scale="onScale"
						@change="movableChange"
					>
						<image
							:id="'image-'+i"
							:key="'movable-view'+i"
							class="image"
							:src="img"
							:style="{ transform: 'rotateZ(' + deg + 'deg)' }"
							:data-index="i"
							:data-src="img"
							mode="widthFix"
							@touchmove="handletouchmove"
							@touchstart="handletouchstart"
							@touchend="handletouchend"
						/>
					</movable-view>
				</movable-area>
			</swiper-item>
		</swiper>
		<view class="page" v-if="imgs.length > 0">
			<text class="text">{{ index + 1 }} / {{ imgs.length }}</text>
			<view class="text">长按保存</view>
		</view>
		<!-- <view class="save" v-if="saveBtn" @click.stop.prevent="save"><text class="text">保存</text></view> -->
		<!-- <view class="rotate" v-if="rotateBtn" @click.stop.prevent="rotate"><text class="text">旋转</text></view> -->
		<view class="desc" v-if="descs.length > 0 && descs.length == imgs.length && descs[index].length > 0">{{ descs[index] }}</view>
		
	</view>
</template>

<script>
export default {
	name: 'ksj-previewImage', //插件名称
	props: {
		imgs: {
			//图片列表
			type: Array,
			required: true,
			default: () => {
				return [];
			}
		},
		descs: {
			//描述列表
			type: Array,
			required: false,
			default: () => {
				return [];
			}
		},
		//透明度,0到1之间。
		opacity: {
			type: Number,
			default: 0.8
		},
		//保存按键
		saveBtn: {
			type: Boolean,
			default: true
		},
		//旋转按键
		rotateBtn: {
			type: Boolean,
			default: true
		},
		//循环预览
		circular:{
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			swiper:false,//是否禁用
			show: false, //显示状态
			index: 0, //当前页
			deg: 0, //旋转角度
			time: 0, //定时器
			interval: 1000, //长按事件
			scale: 1 //缩放比例
		};
	},
	methods: {
		//比例变化
		onScale(e) {
			
		},

		//长按事件相关内容---------开始-------------------
		//接触开始
		handletouchstart(e) {
			var tchs = e.touches.length;
			if (tchs != 1) {
				return false;
			}
			this.time = setTimeout(() => {
				this.onLongPress(e);
			}, this.interval);
			return false;
		},
		//清除定时器
		handletouchend() {
			clearTimeout(this.time);
			if (this.time != 0) {
				//处理点击时间
			}
			return false;
		},
		//清除定时器
		handletouchmove() {
			clearTimeout(this.time);
			this.time = 0;
		},
		// 处理长按事件
		onLongPress(e) {
			var src = e.currentTarget.dataset.src;
			var index = e.currentTarget.dataset.index;
			var data = { src: src, index: index };
			this.$emit('longPress', data);
		},
		//长按事件相关内容---------结束-------------------

		//图片改变
		swiperChange(e) {
			this.index = e.target.current; //更新当前图片index
			
			this.$nextTick(function() {
				this.scale = 1;
			})
			
			//this.deg = 0; //旋转角度
			//this.swiper=true;
		},
		
		//移动变化
		movableChange(e) {
			//console.log(e);
			/* if(this.old.scale <= 1){
				this.swiper=false;
			}else if(e.detail.x===0){
				this.swiper=false;
			} */
		},
		

		//保存
		save(e) {
			var _this = this;
			var src = this.imgs[this.index];
			//#ifdef MP-WEIXIN
			//提前向用户发起授权请求
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success() {
					console.log('kxj-previewImage:允许储存');
					_this.downloadImg(src);
				}
			});
			//#endif

			//#ifdef APP-PLUS
			this.downloadImg(src);
			//#endif

			//#ifdef H5
			//非同源图片将直接打开
			var abtn = document.createElement('a');
			abtn.href = src;
			abtn.download = '';
			abtn.target = '_blank';
			abtn.click();
			//#endif
		},

		//下载并保存文件
		downloadImg(src) {
			//下载图片文件
			uni.showLoading({
				title: '大图提取中'
			});
			uni.downloadFile({
				url: src,
				success: function(res) {
					console.log('kxj-previewImage:下载成功');
					uni.hideLoading();
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
							uni.showToast({
								title: '已保存至相册',
								duration: 1000
							});
						}
					});
				},
				fail: function() {
					uni.hideLoading();
					uni.showToast({
						title: '图片下载失败',
						icon: 'none',
						duration: 1000
					});
				}
			});
		},

		//旋转
		rotate(e) {
			this.deg = this.deg == 270 ? 0 : this.deg + 90;
		},
		//打开
		open(e) {
			if (e === null || e === '') {
				console.log('kxj-previewImage:打开参数无效');
				return;
			}

			if (!isNaN(e)) {
				if(e>=this.imgs.length){
					console.log('kxj-previewImage:打开参数无效');
				}else{
					this.index = e;
				}
			} else {
				var index = this.imgs.indexOf(e);
				if(index===-1){
					this.imgs = [e];
					this.index = 0;
					console.log('kxj-previewImage:未在图片地址数组中找到传入的图片，已为你自动打开单张预览模式')
				}else{
					this.index = this.imgs.indexOf(e);
				}
			}
			console.log('kxj-previewImage:当前预览图片序号'+this.index);
			this.show = true;
		},
		//关闭
		close(e) {
			this.show = false;
			this.index = 0; //当前页
			this.deg = 0; //旋转角度
			this.time = 0; //定时器
			this.interval = 1000; //长按事件
			this.scale = 1; //缩放比例
		}
	}
};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
.previewImage {
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	user-select: none;
	.swiper {
		width: 100%;
		height: 100%;
		.marea {
			height: 100%;
			width: 100%;
			position: fixed;
			overflow: hidden;
			.mview {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: auto;
				min-height: 100%;
				.image {
					width: 100%;
				}
			}
		}
	}

	.page {
		position: absolute;
		width: 100%;
		bottom: 20rpx;
		text-align: center;
		.text {
			color: #fff;
			font-size: 26rpx;
			background-color: rgba(0, 0, 0, 0.5);
			padding: 3rpx 16rpx;
			border-radius: 20rpx;
			user-select: none;
		}
	}
	.save {
		position: absolute;
		left: 10rpx;
		width: 120rpx;
		height: 56rpx;
		bottom: 10rpx;
		text-align: center;
		padding: 10rpx;
		.text {
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 30rpx;
			border-radius: 20rpx;
			border: 1rpx solid #f1f1f1;
			padding: 6rpx 22rpx;
			user-select: none;
		}
		.text:active {
			background-color: rgba(100, 100, 100, 0.5);
		}
	}
	.rotate {
		position: absolute;
		right: 10rpx;
		width: 120rpx;
		height: 56rpx;
		bottom: 10rpx;
		text-align: center;
		padding: 10rpx;
		.text {
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 30rpx;
			border-radius: 20rpx;
			border: 1rpx solid #f1f1f1;
			padding: 6rpx 22rpx;
			user-select: none;
		}
		.text:active {
			background-color: rgba(100, 100, 100, 0.5);
		}
	}
	.desc {
		position: absolute;
		top: 0;
		width: 100%;
		padding: 5rpx 10rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 28rpx;
		letter-spacing: 3rpx;
		user-select: none;
	}
}
</style>