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

fix:修复nvue CSS兼容问题(var/env/gap/inline-flex等)

Browse Source
This commit is contained in:
ShenQiLun 2026-06-25 17:04:03 +08:00
parent c427a65b0d
commit 651b3d8ec7
1 changed files with 61 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
pages/upload/camera_capture.nvue
View File

@ -1,49 +1,36 @@
<template>
<view class="cc-page">
<!-- 相机预览（一直显示） -->
<!-- 相机预览 -->
<ima-camera-view
ref="cameraRef"
class="cc-camera"
style="width:750rpx;flex:1;"
flash="off"
facing="back"
@onPictureTaken="onPictureTaken"
@onCameraOpened="onCameraOpened"
></ima-camera-view>
<!-- 顶部：已拍数量 & 确认 -->
<view class="cc-topbar">
<text class="cc-topbar-title">{{ capturedList.length > 0 ? '已拍 ' + capturedList.length + '/9 张' : '拍照' }}</text>
<text class="cc-topbar-confirm" @click="confirmCapture" :class="{ disabled: capturedList.length === 0 }">
确认 ({{ capturedList.length }})
</text>
<!-- 顶部 -->
<view class="cc-topbar" style="padding-top:50px;">
<text class="cc-topbar-title">{{ capturedList.length > 0 ? '已拍 '+capturedList.length+'/9 张' : '拍照' }}</text>
<text class="cc-topbar-confirm" @click="confirmCapture">确认 ({{ capturedList.length }})</text>
</view>
<!-- 底部操作区 -->
<view class="cc-footer">
<!-- 取消 -->
<view class="cc-footer-left" @click="goBack">
<text class="cc-footer-text">取消</text>
<!-- 底部 -->
<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 class="cc-footer-center">
<view class="cc-capture-btn" @click="capturePhoto" :class="{ disabled: capturedList.length >= 9 }">
<view class="cc-capture-inner"></view>
</view>
</view>
<!-- 右侧：翻转 -->
<view class="cc-footer-right">
<view class="cc-flip-btn" @click="flipCamera">
<text class="cc-flip-icon">↺</text>
</view>
<view class="cc-flip-btn" @click="flipCamera">
<text class="cc-flip-icon">↺</text>
</view>
</view>
<!-- 已拍照缩略图横条 -->
<!-- 缩略图 -->
<view class="cc-thumb-bar" v-if="capturedList.length > 0">
<scroll-view class="cc-thumb-scroll" scroll-x="true" show-scrollbar="false">
<view class="cc-thumb-list">
<scroll-view scroll-x="true" show-scrollbar="false" style="flex-direction:row;">
<view style="flex-direction:row;">
<view class="cc-thumb-item" v-for="(img, idx) in capturedList" :key="idx">
<image class="cc-thumb-img" :src="img" mode="aspectFill"></image>
<view class="cc-thumb-del" @click.stop="deletePhoto(idx)">
@ -66,13 +53,10 @@
}
},
methods: {
// 相机初始化完成
onCameraOpened() {
this.cameraReady = true
console.log('相机已就绪')
},
// 拍照（预览一直显示，拍完继续拍下一张）
capturePhoto() {
if (this.capturedList.length >= 9) {
uni.showToast({ title: '最多拍9张', icon: 'none' })
@ -84,44 +68,35 @@
}
this.$refs.cameraRef.takePhoto()
},
// 拍照完成回调
onPictureTaken(e) {
var path = e.detail?.path || ''
var path = ''
if (e.detail) {
path = e.detail.path || ''
}
if (path) {
this.capturedList.push(path)
}
},
// 切换摄像头
flipCamera() {
this.facing = this.facing === 'back' ? 'front' : 'back'
this.$refs.cameraRef.changeFacing(this.facing)
},
// 删除照片
deletePhoto(idx) {
this.capturedList.splice(idx, 1)
},
// 取消
goBack() {
if (this.capturedList.length > 0) {
uni.showModal({
title: '提示',
content: '确定取消拍照吗？已拍照片将丢失',
success: function(res) {
if (res.confirm) {
uni.navigateBack()
}
if (res.confirm) { uni.navigateBack() }
}
})
} else {
uni.navigateBack()
}
},
// 确认
confirmCapture() {
if (this.capturedList.length === 0) {
uni.showToast({ title: '请先拍照', icon: 'none' })
@ -141,20 +116,14 @@
<style>
.cc-page {
flex: 1;
background-color: #000;
background-color: #000000;
position: relative;
}
.cc-camera {
flex: 1;
width: 750rpx;
}
/* 顶部栏 */
/* 顶部 */
.cc-topbar {
position: absolute;
top: 0; left: 0; right: 0;
height: 100rpx;
padding-top: var(--status-bar-height);
display: flex;
height: 100px;
flex-direction: row;
align-items: center;
justify-content: space-between;
@ -164,7 +133,7 @@
background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
}
.cc-topbar-title {
color: #fff;
color: #ffffff;
font-size: 32rpx;
font-weight: bold;
}
@ -172,21 +141,18 @@
color: #409eff;
font-size: 28rpx;
font-weight: bold;
padding: 10rpx 24rpx;
padding-left: 24rpx;
padding-right: 24rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
border-radius: 32rpx;
background: rgba(64, 158, 255, 0.15);
background-color: rgba(64,158,255,0.15);
}
.cc-topbar-confirm.disabled {
color: #666;
background: transparent;
}
/* 底部操作区 */
/* 底部 */
.cc-footer {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 200rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
display: flex;
height: 180rpx;
flex-direction: row;
align-items: center;
justify-content: space-between;
@ -195,104 +161,59 @@
z-index: 8;
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.cc-footer-left {
width: 120rpx;
}
.cc-footer-text {
color: #fff;
.cc-footer-cancel {
color: #ffffff;
font-size: 28rpx;
}
.cc-footer-center {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.cc-footer-right {
width: 120rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
/* 拍照按钮 */
.cc-capture-btn {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: 6rpx solid #fff;
display: flex;
align-items: center;
justify-content: center;
width: 80rpx; height: 80rpx;
border-radius: 80rpx;
border-width: 6rpx; border-color: #ffffff; border-style: solid;
align-items: center; justify-content: center;
}
.cc-capture-inner {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
background: #fff;
width: 60rpx; height: 60rpx;
border-radius: 60rpx;
background-color: #ffffff;
}
.cc-capture-btn.disabled {
opacity: 0.4;
}
/* 翻转按钮 */
.cc-flip-btn {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
border: 2rpx solid rgba(255,255,255,0.4);
display: flex;
align-items: center;
justify-content: center;
width: 64rpx; height: 64rpx;
border-radius: 64rpx;
border-width: 2rpx; border-color: rgba(255,255,255,0.4); border-style: solid;
align-items: center; justify-content: center;
}
.cc-flip-icon {
color: #fff;
color: #ffffff;
font-size: 32rpx;
}
/* 缩略图横条 */
/* 缩略图 */
.cc-thumb-bar {
position: absolute;
bottom: 200rpx;
left: 0;
right: 0;
padding: 10rpx 20rpx;
bottom: 190rpx; left: 0; right: 0;
padding-left: 20rpx; padding-right: 20rpx; padding-top: 10rpx; padding-bottom: 10rpx;
z-index: 8;
}
.cc-thumb-scroll {
white-space: nowrap;
}
.cc-thumb-list {
display: flex;
flex-direction: row;
gap: 12rpx;
}
.cc-thumb-item {
width: 100rpx;
height: 100rpx;
border-radius: 8rpx;
overflow: hidden;
width: 100rpx; height: 100rpx;
border-radius: 8rpx; overflow: hidden;
position: relative;
border: 2rpx solid rgba(255,255,255,0.3);
flex-shrink: 0;
background: #333;
border-width: 2rpx; border-color: rgba(255,255,255,0.3); border-style: solid;
margin-right: 12rpx;
background-color: #333333;
}
.cc-thumb-img {
width: 100rpx;
height: 100rpx;
width: 100rpx; height: 100rpx;
}
.cc-thumb-del {
position: absolute;
top: -6rpx;
right: -6rpx;
width: 32rpx;
height: 32rpx;
border-radius: 50%;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
top: -6rpx; right: -6rpx;
width: 32rpx; height: 32rpx;
border-radius: 32rpx;
background-color: rgba(0,0,0,0.6);
align-items: center; justify-content: center;
}
.cc-del-icon {
color: #fff;
color: #ffffff;
font-size: 18rpx;
}
</style>