app-govern/pages/message1/comp/preview.vue

<template>
    <view class="preview-container">
        <!-- 右上角按钮组 -->
        <view class="btn-group">
            <!-- 缩小按钮 -->
            <!-- <view class="btn zoom-out-btn" @click="zoomOut">
                <text class="btn-icon">−</text>
            </view> -->
            
            <!-- 放大按钮 -->
            <!-- <view class="btn zoom-in-btn" @click="zoomIn">
                <text class="btn-icon">+</text>
            </view> -->
            
            <!-- 下载按钮 -->
            <view class="btn download-btn" @click="downloadImage">
                <text class="btn-icon">⬇</text>
            </view>
        </view>

        <!-- 图片预览区域，使用movable-area和movable-view实现缩放移动 -->
        <movable-area class="movable-area" :style="{ width: '100vw', height: '100vh' }">
            <movable-view
                class="movable-view"
                direction="all"
                :scale="true"
                :scale-min="0.2"
                :scale-max="0.5"
                :scale-value="scaleValue"
              
                @touchstart="onTouchStart"
                @touchend="onTouchEnd"
                :x="x"
                :y="y"
                :animation="true"
                :animation-duration="300"
                :style="{
                    width: rotatedWidth + 'px',
                    height: rotatedHeight + 'px',
                }"
            >
                <view
                    class="image-wrapper"
                    :style="{
                        width: imgWidth + 'px',
                        height: imgHeight + 'px',
                        transform: 'rotate(90deg)',
                        transformOrigin: 'center center',
                    }"
                >
                    <image
                        :src="imageUrl"
                        class="preview-img"
                        mode="aspectFill"
                        :style="{
                            width: imgWidth + 'px',
                            height: imgHeight + 'px',
                        }"
                        @load="onImageLoad"
                    ></image>
                </view>
            </movable-view>
        </movable-area>
        
       
    </view>
</template>

<script>
export default {
    onLoad(options) {
        this.imageUrl = decodeURIComponent(options.url) // 接收传递的图片URL，需要解码
    },

    data() {
        return {
            imageUrl: '',
            // 缩放相关 - 默认0.5
            scaleValue: 0.2,
            x: 0,
            y: 0,
            // 图片原始尺寸
            imgWidth: 0,
            imgHeight: 0,
            // 旋转后的尺寸（交换宽高）
            rotatedWidth: 0,
            rotatedHeight: 0,
            // 提示显示控制
            showScaleTip: false,
            tipTimer: null,
            // 屏幕尺寸
            windowWidth: 0,
            windowHeight: 0,
            // 缩放步长
            zoomStep: 0.1,
            // 动画控制
            isTouching: false,
            animationTimer: null
        }
    },

    mounted() {
        // 获取屏幕尺寸
        const systemInfo = uni.getSystemInfoSync()
        this.windowWidth = systemInfo.windowWidth
        this.windowHeight = systemInfo.windowHeight
    },

    methods: {
        // 图片加载完成后获取尺寸
        onImageLoad(e) {
            const { width, height } = e.detail

            // 保存原始尺寸
            this.imgWidth = width
            this.imgHeight = height

            // 旋转90度后，宽度和高度互换
            this.rotatedWidth = height // 旋转后宽度 = 原高度
            this.rotatedHeight = width // 旋转后高度 = 原宽度

            // 计算初始位置居中（考虑0.5缩放）
            this.resetPosition()
        },

        // 重置位置到中心（考虑当前缩放比例）
        resetPosition() {
            // 计算居中的偏移量，考虑缩放比例
            const displayWidth = this.rotatedWidth * this.scaleValue
            const displayHeight = this.rotatedHeight * this.scaleValue

            this.x = (this.windowWidth - displayWidth) / 2
            this.y = (this.windowHeight - displayHeight) / 2
        },

        // 触摸开始
        onTouchStart() {
            this.isTouching = true
        },

        // 触摸结束
        onTouchEnd() {
            this.isTouching = false
        },

        // 缩放事件处理
        onScale(e) {
            this.scaleValue = e.detail.scale

            // 显示缩放提示
            this.showScaleTip = true
            if (this.tipTimer) {
                clearTimeout(this.tipTimer)
            }
            this.tipTimer = setTimeout(() => {
                this.showScaleTip = false
            }, 1500)
        },

        // 放大
        zoomIn() {
            // 计算新的缩放值，不超过最大值
            const newScale = Math.min(this.scaleValue + this.zoomStep, 0.5)
            this.setScaleWithAnimation(newScale)
        },

        // 缩小
        zoomOut() {
            // 计算新的缩放值，不低于最小值
            const newScale = Math.max(this.scaleValue - this.zoomStep, 0.2)
            this.setScaleWithAnimation(newScale)
        },

        // 带动画的设置缩放值
        setScaleWithAnimation(newScale) {
            // 保存旧的缩放值用于动画
            const oldScale = this.scaleValue
            
            // 计算缩放中心点（屏幕中心）
            const centerX = this.windowWidth / 2
            const centerY = this.windowHeight / 2
            
            // 计算当前图片中心点
            const oldDisplayWidth = this.rotatedWidth * oldScale
            const oldDisplayHeight = this.rotatedHeight * oldScale
            const oldCenterX = this.x + oldDisplayWidth / 2
            const oldCenterY = this.y + oldDisplayHeight / 2
            
            // 计算偏移量，使缩放后图片中心保持在屏幕中心
            const newDisplayWidth = this.rotatedWidth * newScale
            const newDisplayHeight = this.rotatedHeight * newScale
            const newX = centerX - newDisplayWidth / 2
            const newY = centerY - newDisplayHeight / 2
            
            // 更新缩放值和位置
            this.scaleValue = newScale
            this.x = newX
            this.y = newY

            // 显示缩放提示
            this.showScaleTip = true
            if (this.tipTimer) {
                clearTimeout(this.tipTimer)
            }
            this.tipTimer = setTimeout(() => {
                this.showScaleTip = false
            }, 1500)
            
            console.log('缩放:', {oldScale, newScale, x: this.x, y: this.y})
        },

        // 下载图片
        downloadImage() {
            uni.showLoading({
                title: '下载中,请稍等...',
                mask: true,
            })

            // 先获取图片信息（如果是网络图片需要先下载）
            uni.downloadFile({
                url: this.imageUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        // 保存图片到相册
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: () => {
                                uni.hideLoading()
                                uni.showToast({
                                    title: '保存成功',
                                    icon: 'success',
                                })
                            },
                            fail: (err) => {
                                uni.hideLoading()
                                console.error('保存失败', err)

                                // 处理用户拒绝权限的情况
                                if (err.errMsg.includes('auth deny')) {
                                    uni.showModal({
                                        title: '提示',
                                        content: '需要您授权保存图片到相册',
                                        success: (res) => {
                                            if (res.confirm) {
                                                uni.openSetting({
                                                    success: (settingRes) => {
                                                        console.log('打开设置页面', settingRes)
                                                    },
                                                })
                                            }
                                        },
                                    })
                                } else {
                                    uni.showToast({
                                        title: '保存失败',
                                        icon: 'none',
                                    })
                                }
                            },
                        })
                    } else {
                        uni.hideLoading()
                        uni.showToast({
                            title: '下载失败',
                            icon: 'none',
                        })
                    }
                },
                fail: (err) => {
                    uni.hideLoading()
                    console.error('下载失败', err)
                    uni.showToast({
                        title: '下载失败',
                        icon: 'none',
                    })
                },
            })
        },
    },

    // 页面返回前清理定时器
    onUnload() {
        if (this.tipTimer) {
            clearTimeout(this.tipTimer)
        }
        if (this.animationTimer) {
            cancelAnimationFrame(this.animationTimer)
        }
    },
}
</script>

<style lang="scss" scoped>
.preview-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

.movable-area {
    width: 100vw;
    height: 100vh;
    background: #000;
}

.movable-view {
    display: flex;
    align-items: center;
    justify-content: center;
    // 添加硬件加速
    transform: translateZ(0);
    will-change: transform;
}

.image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    // 添加硬件加速
    transform: translateZ(0) rotate(90deg);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.preview-img {
    display: block;
    // 添加硬件加速
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

// 按钮组
.btn-group {
    position: fixed;
    top: 30rpx;
    right: 30rpx;
    display: flex;
    flex-direction: row;
    gap: 20rpx;
    z-index: 1000;
}

// 通用按钮样式
.btn {
    width: 70rpx;
    height: 70rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    // 按钮不参与动画
    transform: translateZ(0);
    transition: background-color 0.2s ease;
    
    &:active {
        background: rgba(0, 0, 0, 0.8);
        transform: scale(0.95);
    }
    
    .btn-icon {
        color: #fff;
        font-size: 40rpx;
        line-height: 1;
        font-weight: bold;
    }
}

// 缩小按钮
.zoom-out-btn {
    .btn-icon {
        font-size: 50rpx;
    }
}

// 放大按钮
.zoom-in-btn {
    .btn-icon {
        font-size: 40rpx;
    }
}

// 下载按钮
.download-btn {
    .btn-icon {
        font-size: 35rpx;
    }
}

// 缩放提示
.scale-tip {
    position: fixed;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10rpx 30rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    z-index: 1000;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInOut 1.5s ease;
    // 提示不参与动画
    will-change: opacity;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
</style>