tra-app/src/components/image-preview/image-preview.vue

<template>
	<view style="line-height: 0;">
		<image :src="imgUrlShow" :mode="mode" @click="showDetail" style="width: 100%; height: 100%"></image>
		<uni-popup ref="PopupRef" class="popup" mask-background-color="rgba(0,0,0,.2)" background-color="rgba(0,0,0,.2)"
			@change="changeShow">
			<view class="overlay-box" @click="closePopup">
				<movable-area scale-area class="detail-movable">
					<movable-view class="detail-movable-view" direction="all" @scale="onScale" :scale="true" scale-min="1"
						scale-max="4" :scale-value="scale">
						<image class="detail-img" :src="imgUrlShow" mode="aspectFit"></image>
					</movable-view>
				</movable-area>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		previewFile,
		previewCacheThumbImage
	} from '@/api/common.js';
	import {
		get_base_url
	} from '@/api/request.js';
	import {
		useStorageStore
	} from '@/store/storage.js';
	import {
		getToken
	} from '@/common/common.js'

	// const storageStore = useStorageStore()
	export default {
		name: 'image-preview',
		props: {
			imgId: {
				default: '',
				type: String
			},
			src: {
				default: '',
				type: String
			},
			width: {
				default: 50,
				type: [String, Number]
			},
			height: {
				default: 50,
				type: [String, Number]
			},
			isCache: {
				// 获取缩略图
				type: Boolean,
				default: false
			},
			mode: {
				type: String,
				default: 'aspectFill'
			},
			previewDetail: {
				default: '',
				type: [String, Boolean]
			}
		},
		data() {
			return {
				imgUrlShow: '',
				watching: false,
				base_url: get_base_url(),
				showModel: false,
				token: getToken(),
				scale: 1
			};
		},
		computed: {
			storageStore: () => useStorageStore(),
			imageObj() {
				return this.storageStore?.imgObj || {};
			}
		},
		watch: {
			imgId: {
				handler(newval, oldval) {
					if (newval.indexOf('/') === 0) {
						this.imgUrlShow = this.base_url + newval + '?tk=' + this.token;
						return;
					}
					if (newval.indexOf('http') === 0) {
						this.imgUrlShow = newval + '?tk=' + this.token;
						return;
					}
					if (newval && this.watching) {
						this.getPreviewUrlBlob(newval);
					}
				},
				immediate: true,
				deep: true
			},
			src: {
				handler(newval, oldval) {
					if (newval && this.watching) {
						this.imgUrlShow = this.base_url + this.src + '?tk=' + this.token;;
					}
				},
				immediate: true,
				deep: true
			},
			showModel(val) {
				if (!val) {
					this.storageStore.setTouchBtnZIndex(12);
				}
			}
		},
		methods: {
			changeShow(data) {
				if (!data.show) {
					this.storageStore.setTouchBtnZIndex(12);
				} else {
					this.storageStore.setTouchBtnZIndex(-1);
				}
			},
			onScale(e) {
				console.log(e)
			},
			closePopup() {
				this.showModel = false;
				this.$refs.PopupRef.close();
			},
			showDetail() {
				if (!!this.previewDetail) {
					this.showModel = true;
					this.$refs.PopupRef.open();
				}
			},
			getPreviewUrlBlob(id) {
				if (!id) {
					this.imgUrlShow = '';
					return;
				}
				if (this.isCache) {
					let _cache = this.imageObj[`/${id}/${this.width}/${this.height}`] || '';
					if (_cache) {
						this.imgUrlShow = _cache;
						return;
					}
					previewCacheThumbImage(id, this.width, this.height).then((res) => {
						this.imgUrlShow = res;
						this.storageStore.setStorage('image', `/${id}/${this.width}/${this.height}`, res);
					});
				} else {
					let _cache = this.imageObj[`${id}`] || '';
					if (_cache) {
						this.imgUrlShow = _cache;
						return;
					}
					previewFile(id).then((result) => {
						//#ifdef APP-PLUS
						let _header = result.header['Content-Type'].split(';')[0];
						// #endif
						//#ifndef APP-PLUS
						let _header = result.header['content-type'].split(';')[0];
						// #endif
						let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data);
						this.imgUrlShow = base64;
						this.storageStore.setStorage('image', id, base64);
					});
				}
			}
		},
		mounted() {
			if (this.imgId) {
				if (this.imgId.indexOf('/') === 0) {
					this.imgUrlShow = this.base_url + this.imgId + '?tk=' + this.token;
				} else if (this.imgId.indexOf('http') === 0) {
					this.imgUrlShow = this.imgId + '?tk=' + this.token;
				} else {
					this.getPreviewUrlBlob(this.imgId);
				}
			}
			this.watching = true;
			if (this.src) {
				this.imgUrlShow = this.base_url + this.src + '?tk=' + this.token;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.overlay-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.65);

		// .detail-movable{
		// 		width: 100vw;
		// 		height: 100vh;
		// }
		// .detail-movable-view{
		// 		width: 100vw;
		// 		height: 100vh;
		// }
		// 	.detail-img {
		// 		position: absolute;
		// 		left: 50%;
		// 		top: 50%;
		// 		width: 100vw;
		// 		max-height: 100%;
		// 		transform: translate(-50%, -50%);
		// 		z-index: 1001;

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

		movable-area {
			height: 100%;
			width: 100%;
			position: fixed;
			overflow: hidden;
		}

		movable-view image {
			width: 100%;
		}
	}
</style>