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

193
pages/upload/camera_capture.nvue
View File

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