DaShangDao/daShangDao_scanBook
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ShenQiLun 2026-06-25 18:11:46 +08:00
parent b2002f3d92
commit e640496bb4
1 changed files with 21 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
pages/upload/camera_capture.nvue
View File

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