fix:预览改为手机屏幕全宽正方形,修复模板结构bug

pages/upload/camera_capture.nvue

@@ -1,9 +1,9 @@
 <template>
 	<view class="cc-page">
-		<!-- 正方形相机预览 -->
+		<!-- 正方形相机预览（全屏宽度） -->
 		<ima-camera-view
 			ref="cameraRef"
-			:style="'width:' + camSize + 'px;height:' + camSize + 'px;margin-top:' + frameTop + 'px;margin-left:' + frameLeft + 'px;'"
+			:style="'width:' + camSize + 'px;height:' + camSize + 'px;'"
 			flash="off"
 			facing="back"
 			:widthRatio="1"
@@ -12,9 +12,6 @@
 			@onCameraOpened="onCameraOpened"
 		></ima-camera-view>
 
-		<!-- 正方形取景框（白色边框） -->
-		<view class="cc-frame" :style="'top:' + frameTop + 'px;left:' + frameLeft + 'px;width:' + camSize + 'px;height:' + camSize + 'px;'"></view>
-
 		<!-- ═══ 顶部栏 ═══ -->
 		<view class="cc-topbar">
 			<view class="cc-topbar-left">
@@ -34,28 +31,23 @@
 
 		<!-- ═══ 底部操作栏 ═══ -->
 		<view class="cc-footer">
-			<!-- 左侧：缩略图预览 -->
 			<view class="cc-footer-left">
 				<view class="cc-thumb-preview" v-if="capturedList.length > 0" @click="previewLast">
 					<image class="cc-thumb-last" :src="capturedList[capturedList.length-1]" mode="aspectFill"></image>
 					<text class="cc-thumb-badge">{{ capturedList.length }}</text>
 				</view>
 			</view>
-
-			<!-- 中间：拍照按钮 -->
 			<view class="cc-footer-center">
 				<view class="cc-capture-outer">
 					<view class="cc-capture-btn" @click="capturePhoto"></view>
 				</view>
 			</view>
-
-			<!-- 右侧：完成按钮 -->
 			<view class="cc-footer-right">
 				<text class="cc-confirm-btn" @click="confirmCapture" v-if="capturedList.length > 0">完成 {{ capturedList.length }}</text>
 			</view>
 		</view>
 
-		<!-- ═══ 缩略图横条（超过1张时） ═══ -->
+		<!-- ═══ 缩略图横条 ═══ -->
 		<view class="cc-thumb-bar" v-if="capturedList.length > 1">
 			<scroll-view scroll-x="true" show-scrollbar="false" style="flex-direction:row;">
 				<view style="flex-direction:row;">
@@ -69,14 +61,13 @@
 			</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>
 
@@ -90,9 +81,6 @@
 				winWidth: 750,
 				winHeight: 1334,
 				camSize: 750,
-				frameTop: 110,
-				frameLeft: 0,
-				// 自定义预览
 				previewVisible: false,
 				previewSrc: '',
 				previewSize: 600
@@ -104,15 +92,8 @@
 				success: function(res) {
 					that.winWidth = res.windowWidth
 					that.winHeight = res.windowHeight
+					that.camSize = res.windowWidth
 					that.previewSize = Math.floor(res.windowWidth * 0.85)
-					// 取景框放在中间偏上一点
-					var barH = 110
- 					var bottomArea = 240
- 					var availableH = res.windowHeight - barH - bottomArea
- 					var size = Math.min(res.windowWidth, availableH)
- 					that.camSize = size
- 					that.frameTop = barH + Math.floor((availableH - size) / 2)
- 					that.frameLeft = Math.floor((res.windowWidth - size) / 2)
 				}
 			})
 		},
@@ -173,14 +154,12 @@
 				}
 				uni.navigateBack()
 			},
-			// 放大预览指定图片（正方形显示）
 			previewPhoto(idx) {
 				if (this.capturedList.length > 0 && idx >= 0 && idx < this.capturedList.length) {
 					this.previewSrc = this.capturedList[idx]
 					this.previewVisible = true
 				}
 			},
-			// 放大预览最新一张
 			previewLast() {
 				this.previewPhoto(this.capturedList.length - 1)
 			}
@@ -194,17 +173,6 @@
 		background-color: #000000;
 		position: relative;
 	}
-
-	/* 取景框（白色边框，视觉引导） */
-	.cc-frame {
-		position: absolute;
-		border-width: 2rpx;
-		border-color: rgba(255,255,255,0.5);
-		border-style: solid;
-		z-index: 4;
-		background-color: transparent;
-	}
-
 	/* ═══ 顶部栏 ═══ */
 	.cc-topbar {
 		position: absolute;
@@ -219,9 +187,7 @@
 		z-index: 8;
 		background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
 	}
-	.cc-topbar-left {
+	.cc-topbar-left { width: 100rpx; }
-		width: 100rpx;
-	}
 	.cc-topbar-back {
 		width: 80rpx; height: 80rpx;
 		border-radius: 80rpx;
@@ -233,21 +199,14 @@
 		font-size: 44rpx;
 		text-align: center;
 	}
-	.cc-topbar-center {
+	.cc-topbar-center { flex: 1; align-items: center; }
-		flex: 1;
-		align-items: center;
-	}
 	.cc-topbar-title {
 		color: #ffffff;
 		font-size: 40rpx;
 		font-weight: 700;
 	}
-	.cc-topbar-right {
+	.cc-topbar-right { flex-direction: row; align-items: center; }
-		flex-direction: row;
+	/* 翻转按钮 */
-		align-items: center;
-	}
-
-	/* 翻转按钮（在右上角） */
 	.cc-flip-btn {
 		width: 84rpx; height: 84rpx;
 		border-radius: 84rpx;
@@ -263,8 +222,7 @@
 		font-weight: 700;
 		text-align: center;
 	}
-
+	/* ═══ 底部 ═══ */
-	/* ═══ 底部操作栏 ═══ */
 	.cc-footer {
 		position: absolute;
 		bottom: 0; left: 0; right: 0;
@@ -278,23 +236,10 @@
 		z-index: 8;
 		background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
 	}
-	.cc-footer-left {
+	.cc-footer-left { flex-direction: row; align-items: center; flex: 1; }
-		flex-direction: row;
+	.cc-footer-center { align-items: center; justify-content: center; }
-		align-items: center;
+	.cc-footer-right { flex-direction: row; align-items: center; justify-content: flex-end; flex: 1; }
-		flex: 1;
+	/* 拍照按钮 */
-	}
-	.cc-footer-center {
-		align-items: center;
-		justify-content: center;
-	}
-	.cc-footer-right {
-		flex-direction: row;
-		align-items: center;
-		justify-content: flex-end;
-		flex: 1;
-	}
-
-	/* 拍照按钮（放大） */
 	.cc-capture-outer {
 		width: 120rpx; height: 120rpx;
 		border-radius: 120rpx;
@@ -308,11 +253,7 @@
 		border-radius: 106rpx;
 		background-color: #ffffff;
 	}
-	.cc-capture-btn:active {
+	/* 完成按钮 */
-		background-color: #dddddd;
-	}
-
-	/* 完成按钮（在底部右侧） */
 	.cc-confirm-btn {
 		color: #ffffff;
 		font-size: 30rpx;
@@ -325,8 +266,7 @@
 		background-color: transparent;
 		lines: 1;
 	}
-
+	/* 缩略图预览 */
-	/* 缩略图预览（最新一张） */
 	.cc-thumb-preview {
 		width: 100rpx; height: 100rpx;
 		border-radius: 12rpx;
@@ -336,9 +276,7 @@
 		border-color: rgba(255,255,255,0.3);
 		border-style: solid;
 	}
-	.cc-thumb-last {
+	.cc-thumb-last { width: 100rpx; height: 100rpx; }
-		width: 100rpx; height: 100rpx;
-	}
 	.cc-thumb-badge {
 		position: absolute;
 		top: -8rpx; right: -8rpx;
@@ -351,7 +289,6 @@
 		line-height: 34rpx;
 		padding-left: 6rpx; padding-right: 6rpx;
 	}
-
 	/* 缩略图横条 */
 	.cc-thumb-bar {
 		position: absolute;
@@ -371,9 +308,7 @@
 		margin-right: 16rpx;
 		background-color: #333333;
 	}
-	.cc-thumb-img {
+	.cc-thumb-img { width: 120rpx; height: 120rpx; }
-		width: 120rpx; height: 120rpx;
-	}
 	.cc-thumb-del {
 		position: absolute;
 		top: -8rpx; right: -8rpx;
@@ -385,12 +320,8 @@
 		border-color: rgba(255,255,255,0.3);
 		border-style: solid;
 	}
-	.cc-del-icon {
+	.cc-del-icon { color: #ffffff; font-size: 22rpx; }
-		color: #ffffff;
+	/* 预览 */
-		font-size: 22rpx;
-	}
-
-	/* ═══ 自定义正方形预览 ═══ */
 	.cc-preview-overlay {
 		position: absolute;
 		top: 0; left: 0; right: 0; bottom: 0;
@@ -408,10 +339,7 @@
 		align-items: center; justify-content: center;
 		z-index: 21;
 	}
-	.cc-preview-close-icon {
+	.cc-preview-close-icon { color: #ffffff; font-size: 36rpx; }
-		color: #ffffff;
-		font-size: 36rpx;
-	}
 	.cc-preview-img {
 		border-radius: 8rpx;
 		border-width: 2rpx;