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

style:优化拍照页面UI-顶部X关闭/底部缩略图预览/圆环拍照按钮

Browse Source
This commit is contained in:
ShenQiLun 2026-06-25 17:10:34 +08:00
parent 95ff306da4
commit 085855e39e
1 changed files with 166 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
pages/upload/camera_capture.nvue
View File

@ -10,25 +10,50 @@
@onCameraOpened="onCameraOpened" @onCameraOpened="onCameraOpened"
></ima-camera-view> ></ima-camera-view>
<!-- 顶部 --> <!-- ═══ 顶部栏 ═══ -->
<view class="cc-topbar" style="padding-top:50px;"> <view class="cc-topbar">
<text class="cc-topbar-title">{{ capturedList.length > 0 ? '已拍 '+capturedList.length+'/9 张' : '拍照' }}</text> <view class="cc-topbar-left">
<text class="cc-topbar-confirm" @click="confirmCapture">确认 ({{ capturedList.length }})</text> <view class="cc-topbar-back" @click="goBack">
</view> <text class="cc-back-icon">✕</text>
</view>
<!-- 底部 -->
<view class="cc-footer" style="padding-bottom:30px;">
<text class="cc-footer-cancel" @click="goBack">取消</text>
<view class="cc-capture-btn" @click="capturePhoto">
<view class="cc-capture-inner"></view>
</view> </view>
<view class="cc-flip-btn" @click="flipCamera"> <view class="cc-topbar-center">
<text class="cc-flip-icon">↺</text> <text class="cc-topbar-title">{{ capturedList.length > 0 ? '已拍 ' + capturedList.length + '/9' : '拍照' }}</text>
</view>
<view class="cc-topbar-right">
<text class="cc-topbar-confirm" @click="confirmCapture" v-if="capturedList.length > 0">
完成
</text>
</view> </view>
</view> </view>
<!-- 缩略图 --> <!-- ═══ 底部操作栏 ═══ -->
<view class="cc-thumb-bar" v-if="capturedList.length > 0"> <view class="cc-footer">
<!-- 左侧：缩略图预览 -->
<view class="cc-footer-left">
<view class="cc-thumb-preview" v-if="capturedList.length > 0" @click="confirmCapture">
<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">
<view class="cc-flip-btn" @click="flipCamera">
<text class="cc-flip-icon">↺</text>
</view>
</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;"> <scroll-view scroll-x="true" show-scrollbar="false" style="flex-direction:row;">
<view style="flex-direction:row;"> <view style="flex-direction:row;">
<view class="cc-thumb-item" v-for="(img, idx) in capturedList" :key="idx"> <view class="cc-thumb-item" v-for="(img, idx) in capturedList" :key="idx">
@ -94,12 +119,13 @@
}, },
deletePhoto(idx) { deletePhoto(idx) {
this.capturedList.splice(idx, 1) this.capturedList.splice(idx, 1)
// 删完如果为0，缩略图自动隐藏
}, },
goBack() { goBack() {
if (this.capturedList.length > 0) { if (this.capturedList.length > 0) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定取消拍照吗？已拍照片将丢失', content: '确定退出拍照？已拍照片将丢失',
success: function(res) { success: function(res) {
if (res.confirm) { uni.navigateBack() } if (res.confirm) { uni.navigateBack() }
} }
@ -125,105 +151,189 @@
</script> </script>
<style> <style>
/* ─── 页面容器 ─── */
.cc-page { .cc-page {
flex: 1; flex: 1;
background-color: #000000; background-color: #000000;
} }
/* 顶部 */
/* ─── 顶部栏 ─── */
.cc-topbar { .cc-topbar {
position: absolute; position: absolute;
top: 0; left: 0; right: 0; top: 0; left: 0; right: 0;
height: 100px; height: 110px;
padding-top: 50px;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-left: 30rpx; padding-left: 20rpx;
padding-right: 30rpx; padding-right: 20rpx;
z-index: 8; z-index: 8;
background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent); background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}
.cc-topbar-left {
width: 90rpx;
}
.cc-topbar-back {
width: 56rpx; height: 56rpx;
border-radius: 56rpx;
background-color: rgba(0,0,0,0.3);
align-items: center; justify-content: center;
}
.cc-back-icon {
color: #ffffff;
font-size: 32rpx;
line-height: 56rpx;
text-align: center;
}
.cc-topbar-center {
flex: 1;
align-items: center;
} }
.cc-topbar-title { .cc-topbar-title {
color: #ffffff; color: #ffffff;
font-size: 32rpx; font-size: 30rpx;
font-weight: bold; font-weight: 500;
}
.cc-topbar-right {
width: 120rpx;
align-items: flex-end;
} }
.cc-topbar-confirm { .cc-topbar-confirm {
color: #409eff; color: #409eff;
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
padding-left: 24rpx; padding-left: 24rpx; padding-right: 24rpx;
padding-right: 24rpx; padding-top: 10rpx; padding-bottom: 10rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
border-radius: 32rpx; border-radius: 32rpx;
background-color: rgba(64,158,255,0.15); background-color: rgba(64,158,255,0.15);
} }
/* 底部 */
/* ─── 底部操作栏 ─── */
.cc-footer { .cc-footer {
position: absolute; position: absolute;
bottom: 0; left: 0; right: 0; bottom: 0; left: 0; right: 0;
height: 180rpx; height: 220rpx;
padding-bottom: 40rpx;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-left: 40rpx; padding-left: 40rpx;
padding-right: 40rpx; padding-right: 40rpx;
z-index: 8; z-index: 8;
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
} }
.cc-footer-cancel { .cc-footer-left {
color: #ffffff; width: 100rpx;
font-size: 28rpx; align-items: flex-start;
}
.cc-footer-center {
flex: 1;
align-items: center;
justify-content: center;
}
.cc-footer-right {
width: 100rpx;
align-items: flex-end;
}
/* ─── 拍照按钮 ─── */
.cc-capture-outer {
width: 90rpx; height: 90rpx;
border-radius: 90rpx;
border-width: 4rpx;
border-color: rgba(255,255,255,0.6);
border-style: solid;
align-items: center; justify-content: center;
} }
.cc-capture-btn { .cc-capture-btn {
width: 80rpx; height: 80rpx; width: 80rpx; height: 80rpx;
border-radius: 80rpx; border-radius: 80rpx;
border-width: 6rpx; border-color: #ffffff; border-style: solid;
align-items: center; justify-content: center;
}
.cc-capture-inner {
width: 60rpx; height: 60rpx;
border-radius: 60rpx;
background-color: #ffffff; background-color: #ffffff;
} }
.cc-capture-btn:active {
background-color: #dddddd;
}
/* ─── 翻转按钮 ─── */
.cc-flip-btn { .cc-flip-btn {
width: 64rpx; height: 64rpx; width: 72rpx; height: 72rpx;
border-radius: 64rpx; border-radius: 72rpx;
border-width: 2rpx; border-color: rgba(255,255,255,0.4); border-style: solid; border-width: 2rpx;
border-color: rgba(255,255,255,0.35);
border-style: solid;
align-items: center; justify-content: center; align-items: center; justify-content: center;
background-color: rgba(255,255,255,0.08);
} }
.cc-flip-icon { .cc-flip-icon {
color: #ffffff; color: #ffffff;
font-size: 32rpx; font-size: 34rpx;
line-height: 72rpx;
text-align: center;
} }
/* 缩略图 */
/* ─── 缩略图预览（最新一张） ─── */
.cc-thumb-preview {
width: 72rpx; height: 72rpx;
border-radius: 8rpx;
overflow: hidden;
position: relative;
border-width: 2rpx;
border-color: rgba(255,255,255,0.3);
border-style: solid;
}
.cc-thumb-last {
width: 72rpx; height: 72rpx;
}
.cc-thumb-badge {
position: absolute;
top: -6rpx; right: -6rpx;
min-width: 28rpx; height: 28rpx;
border-radius: 28rpx;
background-color: #409eff;
color: #ffffff;
font-size: 18rpx;
text-align: center;
line-height: 28rpx;
padding-left: 4rpx;
padding-right: 4rpx;
}
/* ─── 缩略图横条 ─── */
.cc-thumb-bar { .cc-thumb-bar {
position: absolute; position: absolute;
bottom: 190rpx; left: 0; right: 0; bottom: 240rpx; left: 0; right: 0;
padding-left: 20rpx; padding-right: 20rpx; padding-top: 10rpx; padding-bottom: 10rpx; padding-left: 24rpx; padding-right: 24rpx;
padding-top: 10rpx; padding-bottom: 10rpx;
z-index: 8; z-index: 8;
} }
.cc-thumb-item { .cc-thumb-item {
width: 100rpx; height: 100rpx; width: 110rpx; height: 110rpx;
border-radius: 8rpx; overflow: hidden; border-radius: 8rpx;
overflow: hidden;
position: relative; position: relative;
border-width: 2rpx; border-color: rgba(255,255,255,0.3); border-style: solid; border-width: 2rpx;
margin-right: 12rpx; border-color: rgba(255,255,255,0.3);
border-style: solid;
margin-right: 14rpx;
background-color: #333333; background-color: #333333;
} }
.cc-thumb-img { .cc-thumb-img {
width: 100rpx; height: 100rpx; width: 110rpx; height: 110rpx;
} }
.cc-thumb-del { .cc-thumb-del {
position: absolute; position: absolute;
top: -6rpx; right: -6rpx; top: -8rpx; right: -8rpx;
width: 32rpx; height: 32rpx; width: 36rpx; height: 36rpx;
border-radius: 32rpx; border-radius: 36rpx;
background-color: rgba(0,0,0,0.6); background-color: rgba(0,0,0,0.55);
align-items: center; justify-content: center; align-items: center; justify-content: center;
border-width: 2rpx;
border-color: rgba(255,255,255,0.3);
border-style: solid;
} }
.cc-del-icon { .cc-del-icon {
color: #ffffff; color: #ffffff;
font-size: 18rpx; font-size: 20rpx;
} }
</style> </style>