diff --git a/pages/upload/camera_capture.nvue b/pages/upload/camera_capture.nvue index 9db24b1..f22cc0b 100644 --- a/pages/upload/camera_capture.nvue +++ b/pages/upload/camera_capture.nvue @@ -68,6 +68,14 @@ + + + + + + + + @@ -82,7 +90,11 @@ winHeight: 1334, camSize: 750, frameTop: 110, - frameLeft: 0 + frameLeft: 0, + // 自定义预览 + previewVisible: false, + previewSrc: '', + previewSize: 600 } }, onLoad() { @@ -91,6 +103,7 @@ success: function(res) { that.winWidth = res.windowWidth that.winHeight = res.windowHeight + that.previewSize = Math.floor(res.windowWidth * 0.85) // 取景框放在中间偏上一点 var barH = 110 var bottomArea = 240 @@ -159,13 +172,11 @@ } uni.navigateBack() }, - // 放大预览指定图片 + // 放大预览指定图片(正方形显示) previewPhoto(idx) { - if (this.capturedList.length > 0) { - uni.previewImage({ - current: this.capturedList[idx], - urls: this.capturedList - }) + if (this.capturedList.length > 0 && idx >= 0 && idx < this.capturedList.length) { + this.previewSrc = this.capturedList[idx] + this.previewVisible = true } }, // 放大预览最新一张 @@ -180,6 +191,7 @@ .cc-page { flex: 1; background-color: #000000; + position: relative; } /* 取景框(白色边框,视觉引导) */ @@ -376,4 +388,33 @@ color: #ffffff; font-size: 22rpx; } + + /* ═══ 自定义正方形预览 ═══ */ + .cc-preview-overlay { + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + background-color: rgba(0,0,0,0.9); + z-index: 20; + align-items: center; + justify-content: center; + } + .cc-preview-close { + position: absolute; + top: 60px; right: 30rpx; + width: 60rpx; height: 60rpx; + border-radius: 60rpx; + background-color: rgba(255,255,255,0.2); + align-items: center; justify-content: center; + z-index: 21; + } + .cc-preview-close-icon { + color: #ffffff; + font-size: 36rpx; + } + .cc-preview-img { + border-radius: 8rpx; + border-width: 2rpx; + border-color: rgba(255,255,255,0.2); + border-style: solid; + }