zhapp/components/uni-documentPreview/uni-documentPreview.vue

<template>
	<view class="imgview">
		<view class="imgregion">
			<movable-area>
				<movable-view direction="all" out-of-bounds :scale="true" :damping="30" :friction="10">
					<image :src="images[currentIndex].img" mode="widthFix"
						:style="{transform:`rotate(-${images[currentIndex].deg}deg)`}">
					</image>
				</movable-view>
			</movable-area>
			<!-- 操作按钮 -->
			<view class="blur-background ">
				<view class="item dis a-c j-c" @tap="leftTurn">
					<image src="/static/icon/left.png" mode=""></image>
					<text>左转</text>
				</view>
				<view class="item dis a-c j-c " @tap="reUpload(Type)">
					<image src="/static/icon/upload.png" mode=""></image>
					<text>上传</text>
				</view>
				<view class="item dis a-c j-c " @tap="rightTurn">
					<image src="/static/icon/right.png" mode=""></image>
					<text>右转</text>
				</view>
			</view>

		</view>
		<view class="pageTurn dis a-c j-s  mt-3 mb-3" v-if="images.length>1">
			<view class="btn dis a-c j-c" @tap="prevImage">
				上一张
			</view>
			<view class="btn dis a-c j-c" @tap="nextImage">
				下一张
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'uni-documentPreview', //插件名称
		props: {
			images: {
				type: Array,
				default: () => []
			},
			Type: {
				type: String,
				default: 'carInfo'
			}
		},
		computed: {},
		data() {
			return {
				deg: 0, //旋转角度
				currentIndex: 0, // 当前显示图片的索引
				checkType: this.Type,
			};
		},
		watch: {
			Type(newVal) {
				this.checkType = newVal;
			}
		},
		methods: {
			// 上一张（到达第一张时停止）
			prevImage() {
				if (this.currentIndex > 0) {
					this.currentIndex = this.currentIndex - 1
					this.deg = 0;
				}
			},
			// 下一张（到达最后一张时停止）
			nextImage() {
				if (this.currentIndex < this.images.length - 1) {
					this.currentIndex = this.currentIndex + 1;
					this.deg = 0;
				}
			},
			leftTurn() {
				this.images[this.currentIndex].deg = this.images[this.currentIndex].deg == 270 ? 0 : this.images[this
					.currentIndex].deg + 90;
			},
			rightTurn() {
				this.images[this.currentIndex].deg = this.images[this.currentIndex].deg == 0 ? 270 : this.images[this
					.currentIndex].deg - 90;
			},
			reUpload(name) {
				this.$emit('reupload', name)
			},
		}
	};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	/* 新增禁用样式 */
	.disabled {
		background-color: #cccccc !important;
		opacity: 0.6;
		pointer-events: none;
	}

	.imgview {
		width: 100%;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.imgregion {
			position: relative;
			width: 100%;
			height: 393rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}


		}
	}

	.blur-background {
		position: absolute;
		bottom: 0;
		width: 100%;
		background-color: rgba(255, 255, 255, 10%);
		backdrop-filter: blur(20rpx);
		padding: 16rpx;
		box-sizing: border-box;
		border-radius: 0 0 10rpx 10rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;

		.item {
			font-size: 26rpx;
			color: #fff;

			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 8rpx;
			}
		}

		.item:nth-child(2) {
			border-left: 1rpx solid #fff;
			border-right: 1rpx solid #fff;
		}


	}

	.pageTurn {
		border: 2px solid #FDE935;
		border-radius: 40rpx;

		.btn {
			width: 50%;
			font-size: 28rpx;
			color: #333;
		}

		:first-child {
			padding: 16rpx;
			border-right: 1px solid #FDE935;
		}

		:last-child {
			padding: 16rpx;
		}
	}

	movable-area {
		height: 100%;
		width: 100%;
		border-radius: 10rpx;
		background-color: #D8D8D8;
		overflow: hidden;
	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
	}
</style>