feat:自定义正方形预览取代uni.previewImage,点击半透明背景关闭

pages/upload/camera_capture.nvue

@@ -68,6 +68,14 @@
 				</view>
 			</scroll-view>
 		</view>
+
+		<!-- ═══ 自定义图片预览（正方形） ═══ -->
+		<view class="cc-preview-overlay" v-if="previewVisible" @click="previewVisible = false">
+			<view class="cc-preview-close" @click.stop="previewVisible = false">
+				<text class="cc-preview-close-icon">✕</text>
+			</view>
+			<image class="cc-preview-img" :src="previewSrc" mode="aspectFill" :style="'width:' + previewSize + 'px;height:' + previewSize + 'px;'"></image>
+		</view>
 	</view>
 </template>
 
@@ -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) {
+				if (this.capturedList.length > 0 && idx >= 0 && idx < this.capturedList.length) {
-					uni.previewImage({
+					this.previewSrc = this.capturedList[idx]
-						current: this.capturedList[idx],
+					this.previewVisible = true
-						urls: this.capturedList
-					})
 				}
 			},
 			// 放大预览最新一张
@@ -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;
+	}
 </style>