fix:移除lime-camera依赖,APP下用系统相机uni.chooseImage连拍
This commit is contained in:
parent
312b91bd48
commit
448f1b1040
@ -1,36 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="cc-page">
|
<view class="cc-page">
|
||||||
<!-- 摄像头预览区 -->
|
<!-- H5 环境:WebRTC 摄像头预览 -->
|
||||||
<view class="cc-camera-wrap">
|
<view class="cc-camera-wrap" v-if="useWebRTC">
|
||||||
<!-- lime-camera 预览(Android nvue / uni-app x) -->
|
<video id="ccVideo" ref="ccVideo" class="cc-video" autoplay playsinline muted></video>
|
||||||
<l-camera
|
|
||||||
v-if="useLimeCamera"
|
|
||||||
ref="lCamera"
|
|
||||||
class="cc-lcamera"
|
|
||||||
mode="normal"
|
|
||||||
:device-position="cameraPosition"
|
|
||||||
flash="off"
|
|
||||||
:focus="true"
|
|
||||||
@initdone="onCameraInitDone"
|
|
||||||
@error="onCameraError"
|
|
||||||
style="width:100%;height:100%;"
|
|
||||||
></l-camera>
|
|
||||||
<!-- WebRTC 预览(H5) -->
|
|
||||||
<video
|
|
||||||
v-else-if="useWebRTC"
|
|
||||||
id="ccVideo"
|
|
||||||
ref="ccVideo"
|
|
||||||
class="cc-video"
|
|
||||||
autoplay
|
|
||||||
playsinline
|
|
||||||
muted
|
|
||||||
></video>
|
|
||||||
<!-- 无预览时占位 -->
|
|
||||||
<view v-else class="cc-camera-hint">
|
|
||||||
<text class="cc-hint-text">相机加载中...</text>
|
|
||||||
</view>
|
|
||||||
<canvas id="ccCanvas" ref="ccCanvas" class="cc-canvas" style="display:none;"></canvas>
|
<canvas id="ccCanvas" ref="ccCanvas" class="cc-canvas" style="display:none;"></canvas>
|
||||||
|
|
||||||
<!-- 连拍模式提示遮罩 -->
|
<!-- 连拍模式提示遮罩 -->
|
||||||
<view class="cc-burst-overlay" v-if="isBurstMode">
|
<view class="cc-burst-overlay" v-if="isBurstMode">
|
||||||
<text class="cc-burst-tip">连拍中⋯</text>
|
<text class="cc-burst-tip">连拍中⋯</text>
|
||||||
@ -41,6 +14,15 @@
|
|||||||
<text class="cc-burst-hint">点击红色按钮停止</text>
|
<text class="cc-burst-hint">点击红色按钮停止</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- APP 环境:提示信息 -->
|
||||||
|
<view class="cc-camera-wrap" v-else>
|
||||||
|
<view class="cc-camera-hint">
|
||||||
|
<text class="cc-hint-icon">📷</text>
|
||||||
|
<text class="cc-hint-text">{{ isBurstMode ? '连拍中… 系统相机将自动打开' : '点击下方按钮打开相机拍照' }}</text>
|
||||||
|
<text class="cc-hint-sub">已拍 {{ capturedList.length }} 张</text>
|
||||||
|
</view>
|
||||||
|
<canvas id="ccCanvas" ref="ccCanvas" class="cc-canvas" style="display:none;"></canvas>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 已拍照九宫格 -->
|
<!-- 已拍照九宫格 -->
|
||||||
<view class="cc-thumb-bar">
|
<view class="cc-thumb-bar">
|
||||||
@ -68,7 +50,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="cc-right-actions">
|
<view class="cc-right-actions">
|
||||||
<view class="cc-burst-toggle" @click="toggleBurstMode" v-if="!isBurstMode && capturedList.length < 9">
|
<view class="cc-burst-toggle" @click="toggleBurst" v-if="!isBurstMode && capturedList.length < 9">
|
||||||
<text class="cc-burst-toggle-text">⚡连拍</text>
|
<text class="cc-burst-toggle-text">⚡连拍</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="cc-confirm-btn" @click="confirmCapture" :class="{ disabled: capturedList.length === 0 }">
|
<view class="cc-confirm-btn" @click="confirmCapture" :class="{ disabled: capturedList.length === 0 }">
|
||||||
@ -80,28 +62,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 尝试导入 lime-camera(Android nvue 环境使用)
|
|
||||||
var limeCameraReady = false
|
|
||||||
var createCameraContext = null
|
|
||||||
try {
|
|
||||||
var limeModule = require('@/uni_modules/lime-camera')
|
|
||||||
createCameraContext = limeModule.createCameraContext
|
|
||||||
limeCameraReady = true
|
|
||||||
} catch (e) {
|
|
||||||
console.log('lime-camera 插件未安装,使用备用方案')
|
|
||||||
limeCameraReady = false
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
capturedList: [],
|
capturedList: [],
|
||||||
mediaStream: null,
|
mediaStream: null,
|
||||||
ctxReady: false,
|
|
||||||
useWebRTC: false,
|
useWebRTC: false,
|
||||||
useLimeCamera: false,
|
ctxReady: false,
|
||||||
cameraContext: null,
|
|
||||||
cameraPosition: 'back',
|
|
||||||
isBurstMode: false,
|
isBurstMode: false,
|
||||||
burstTimer: null
|
burstTimer: null
|
||||||
}
|
}
|
||||||
@ -114,99 +81,53 @@
|
|||||||
this.clearBurstTimer()
|
this.clearBurstTimer()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 检测运行环境
|
// 检测环境
|
||||||
checkEnvironment() {
|
checkEnvironment() {
|
||||||
// 1. 优先尝试 lime-camera(Android nvue)
|
|
||||||
if (limeCameraReady) {
|
|
||||||
this.useLimeCamera = true
|
|
||||||
this.ctxReady = true
|
|
||||||
console.log('使用 lime-camera 相机')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. WebRTC(H5)
|
|
||||||
try {
|
try {
|
||||||
if (typeof document !== 'undefined' && typeof navigator !== 'undefined' && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
if (typeof document !== 'undefined' && typeof navigator !== 'undefined' && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||||
this.useWebRTC = true
|
this.useWebRTC = true
|
||||||
this.startWebRTC()
|
this.startWebRTC()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {}
|
||||||
// fall through
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. 无可用环境
|
|
||||||
this.useWebRTC = false
|
this.useWebRTC = false
|
||||||
this.ctxReady = false
|
|
||||||
uni.showToast({ title: '当前环境不支持相机预览', icon: 'none' })
|
|
||||||
},
|
|
||||||
|
|
||||||
// lime-camera 初始化完成
|
|
||||||
onCameraInitDone(e) {
|
|
||||||
console.log('lime-camera 初始化完成,最大缩放:', e.detail.maxZoom)
|
|
||||||
this.cameraContext = createCameraContext()
|
|
||||||
this.ctxReady = true
|
this.ctxReady = true
|
||||||
|
console.log('APP环境:使用系统相机拍照')
|
||||||
},
|
},
|
||||||
|
|
||||||
// lime-camera 错误
|
// H5: WebRTC 启动摄像头
|
||||||
onCameraError(err) {
|
|
||||||
console.error('lime-camera 错误:', err)
|
|
||||||
uni.showToast({ title: '相机启动失败: ' + (err.detail ? JSON.stringify(err.detail) : '未知错误'), icon: 'none' })
|
|
||||||
this.useLimeCamera = false
|
|
||||||
this.checkEnvironment()
|
|
||||||
},
|
|
||||||
|
|
||||||
// WebRTC 启动摄像头(H5 环境)
|
|
||||||
startWebRTC() {
|
startWebRTC() {
|
||||||
var that = this
|
var that = this
|
||||||
try {
|
try {
|
||||||
if (typeof document === 'undefined') {
|
if (typeof document === 'undefined') { this.ctxReady = true; return }
|
||||||
this.ctxReady = true
|
|
||||||
return
|
|
||||||
}
|
|
||||||
var video = document.getElementById('ccVideo')
|
var video = document.getElementById('ccVideo')
|
||||||
if (!video) {
|
if (!video) { this.ctxReady = true; return }
|
||||||
this.ctxReady = true
|
|
||||||
return
|
|
||||||
}
|
|
||||||
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', width: 1280, height: 720 } })
|
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', width: 1280, height: 720 } })
|
||||||
.then(function(stream) {
|
.then(function(stream) {
|
||||||
that.mediaStream = stream
|
that.mediaStream = stream
|
||||||
video.srcObject = stream
|
video.srcObject = stream
|
||||||
video.play()
|
video.play()
|
||||||
that.ctxReady = true
|
that.ctxReady = true
|
||||||
console.log('WebRTC摄像头已就绪')
|
|
||||||
})
|
})
|
||||||
.catch(function(err) {
|
.catch(function() { that.ctxReady = true })
|
||||||
console.error('getUserMedia失败:', err)
|
} catch (e) { this.ctxReady = true }
|
||||||
that.ctxReady = true
|
|
||||||
})
|
|
||||||
} catch (e) {
|
|
||||||
console.error('摄像头启动异常:', e)
|
|
||||||
this.ctxReady = true
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
stopCamera() {
|
stopCamera() {
|
||||||
this.clearBurstTimer()
|
this.clearBurstTimer()
|
||||||
if (this.mediaStream) {
|
if (this.mediaStream) {
|
||||||
var tracks = this.mediaStream.getTracks()
|
var tracks = this.mediaStream.getTracks()
|
||||||
for (var i = 0; i < tracks.length; i++) {
|
for (var i = 0; i < tracks.length; i++) { tracks[i].stop() }
|
||||||
tracks[i].stop()
|
|
||||||
}
|
|
||||||
this.mediaStream = null
|
this.mediaStream = null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleBurstMode() {
|
// 连拍开关
|
||||||
|
toggleBurst() {
|
||||||
if (this.capturedList.length >= 9) {
|
if (this.capturedList.length >= 9) {
|
||||||
uni.showToast({ title: '最多拍9张', icon: 'none' })
|
uni.showToast({ title: '最多拍9张', icon: 'none' })
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.startBurst()
|
|
||||||
},
|
|
||||||
|
|
||||||
startBurst() {
|
|
||||||
this.isBurstMode = true
|
this.isBurstMode = true
|
||||||
this.doBurstCapture()
|
this.doBurstCapture()
|
||||||
},
|
},
|
||||||
@ -217,11 +138,10 @@
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
var that = this
|
var that = this
|
||||||
this.captureSinglePhoto(function() {
|
this.captureOne(function() {
|
||||||
// 间隔 1.5 秒继续
|
if (that.isBurstMode) {
|
||||||
that.burstTimer = setTimeout(function() {
|
that.burstTimer = setTimeout(function() { that.doBurstCapture() }, 1500)
|
||||||
that.doBurstCapture()
|
}
|
||||||
}, 1500)
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -231,84 +151,39 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
clearBurstTimer() {
|
clearBurstTimer() {
|
||||||
if (this.burstTimer) {
|
if (this.burstTimer) { clearTimeout(this.burstTimer); this.burstTimer = null }
|
||||||
clearTimeout(this.burstTimer)
|
|
||||||
this.burstTimer = null
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 拍摄单张照片
|
// 单拍
|
||||||
capturePhoto() {
|
capturePhoto() {
|
||||||
if (this.capturedList.length >= 9) {
|
if (this.capturedList.length >= 9) { uni.showToast({ title: '最多拍9张', icon: 'none' }); return }
|
||||||
uni.showToast({ title: '最多拍9张', icon: 'none' })
|
this.captureOne()
|
||||||
return
|
|
||||||
}
|
|
||||||
this.captureSinglePhoto()
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 底层拍照逻辑(带可选回调)
|
// 底层拍照
|
||||||
captureSinglePhoto(callback) {
|
captureOne(callback) {
|
||||||
// 1. lime-camera 拍照(Android 内联相机,带预览)
|
if (this.useWebRTC && this.ctxReady && this.mediaStream) {
|
||||||
if (this.useLimeCamera && this.cameraContext) {
|
|
||||||
this.limeCapture(callback)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 2. WebRTC 截图(H5)
|
|
||||||
if (this.useWebRTC && this.mediaStream && this.ctxReady) {
|
|
||||||
this.webRTCCapture(callback)
|
this.webRTCCapture(callback)
|
||||||
return
|
} else {
|
||||||
}
|
|
||||||
// 3. 系统相机(无预览,备用)
|
|
||||||
this.systemCapture(callback)
|
this.systemCapture(callback)
|
||||||
},
|
|
||||||
|
|
||||||
// lime-camera 拍照
|
|
||||||
limeCapture(callback) {
|
|
||||||
var that = this
|
|
||||||
try {
|
|
||||||
this.cameraContext.takePhoto({
|
|
||||||
quality: 'high',
|
|
||||||
success: function(res) {
|
|
||||||
that.capturedList.push(res.tempImagePath)
|
|
||||||
if (callback) { callback() }
|
|
||||||
},
|
|
||||||
fail: function(err) {
|
|
||||||
console.error('lime拍照失败:', err)
|
|
||||||
if (that.isBurstMode) {
|
|
||||||
that.isBurstMode = false
|
|
||||||
}
|
|
||||||
uni.showToast({ title: '拍照失败', icon: 'none' })
|
|
||||||
if (callback) { callback() }
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} catch (e) {
|
|
||||||
console.error('lime拍照异常:', e)
|
|
||||||
if (callback) { callback() }
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// WebRTC 截图
|
// H5: WebRTC canvas截图
|
||||||
webRTCCapture(callback) {
|
webRTCCapture(callback) {
|
||||||
if (typeof document === 'undefined') {
|
if (typeof document === 'undefined') { this.systemCapture(callback); return }
|
||||||
this.systemCapture(callback)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
var canvas = document.getElementById('ccCanvas')
|
var canvas = document.getElementById('ccCanvas')
|
||||||
var video = document.getElementById('ccVideo')
|
var video = document.getElementById('ccVideo')
|
||||||
if (!canvas || !video) {
|
if (!canvas || !video) { this.systemCapture(callback); return }
|
||||||
this.systemCapture(callback)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
canvas.width = video.videoWidth || 1280
|
canvas.width = video.videoWidth || 1280
|
||||||
canvas.height = video.videoHeight || 720
|
canvas.height = video.videoHeight || 720
|
||||||
var ctx = canvas.getContext('2d')
|
var ctx = canvas.getContext('2d')
|
||||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
|
||||||
var dataUrl = canvas.toDataURL('image/jpeg', 0.85)
|
this.capturedList.push(canvas.toDataURL('image/jpeg', 0.85))
|
||||||
this.capturedList.push(dataUrl)
|
if (callback) callback()
|
||||||
if (callback) { callback() }
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 系统相机拍照(无预览,备用)
|
// APP: 系统相机拍照(Android/iOS APP 都走这里)
|
||||||
systemCapture(callback) {
|
systemCapture(callback) {
|
||||||
var that = this
|
var that = this
|
||||||
uni.chooseImage({
|
uni.chooseImage({
|
||||||
@ -319,13 +194,13 @@
|
|||||||
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
|
if (res.tempFilePaths && res.tempFilePaths.length > 0) {
|
||||||
that.capturedList.push(res.tempFilePaths[0])
|
that.capturedList.push(res.tempFilePaths[0])
|
||||||
}
|
}
|
||||||
if (callback) { callback() }
|
if (callback) callback()
|
||||||
},
|
},
|
||||||
fail: function() {
|
fail: function() {
|
||||||
if (that.isBurstMode) {
|
// APP上取消拍照 → 连拍模式暂停
|
||||||
that.isBurstMode = false
|
that.isBurstMode = false
|
||||||
}
|
that.clearBurstTimer()
|
||||||
if (callback) { callback() }
|
if (callback) callback()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@ -335,16 +210,11 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
confirmCapture() {
|
confirmCapture() {
|
||||||
if (this.capturedList.length === 0) {
|
if (this.capturedList.length === 0) { uni.showToast({ title: '请先拍照', icon: 'none' }); return }
|
||||||
uni.showToast({ title: '请先拍照', icon: 'none' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.stopCamera()
|
this.stopCamera()
|
||||||
var pages = getCurrentPages()
|
var pages = getCurrentPages()
|
||||||
var prevPage = pages[pages.length - 2]
|
var prevPage = pages[pages.length - 2]
|
||||||
if (prevPage) {
|
if (prevPage) { prevPage.$vm.capturedPhotoList = this.capturedList }
|
||||||
prevPage.$vm.capturedPhotoList = this.capturedList
|
|
||||||
}
|
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -352,207 +222,42 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.cc-page {
|
.cc-page { display:flex; flex-direction:column; height:100vh; background:#000; overflow:hidden; }
|
||||||
display: flex;
|
.cc-camera-wrap { flex:1; position:relative; overflow:hidden; background:#111; display:flex; align-items:center; justify-content:center; }
|
||||||
flex-direction: column;
|
.cc-video { width:100%; height:100%; object-fit:cover; }
|
||||||
height: 100vh;
|
.cc-canvas { display:none; }
|
||||||
background: #000;
|
.cc-camera-hint { text-align:center; padding:40rpx; }
|
||||||
overflow: hidden;
|
.cc-hint-icon { font-size:80rpx; display:block; margin-bottom:20rpx; }
|
||||||
}
|
.cc-hint-text { color:#999; font-size:28rpx; }
|
||||||
.cc-camera-wrap {
|
.cc-hint-sub { color:#666; font-size:24rpx; margin-top:10rpx; }
|
||||||
flex: 1;
|
|
||||||
position: relative;
|
.cc-burst-overlay { position:absolute; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.25); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:5; pointer-events:none; }
|
||||||
overflow: hidden;
|
.cc-burst-tip { color:#fff; font-size:40rpx; font-weight:bold; text-shadow:0 2rpx 8rpx rgba(0,0,0,0.6); }
|
||||||
background: #111;
|
.cc-burst-count { color:rgba(255,255,255,0.9); font-size:32rpx; margin-top:16rpx; text-shadow:0 2rpx 8rpx rgba(0,0,0,0.6); }
|
||||||
display: flex;
|
.cc-burst-dots { color:#409eff; font-size:60rpx; margin-top:10rpx; animation:burstBlink 0.8s ease-in-out infinite; }
|
||||||
align-items: center;
|
@keyframes burstBlink { 0%,100%{opacity:0.3} 50%{opacity:1} }
|
||||||
justify-content: center;
|
.cc-burst-hint { color:rgba(255,255,255,0.6); font-size:24rpx; margin-top:20rpx; text-shadow:0 2rpx 8rpx rgba(0,0,0,0.6); }
|
||||||
}
|
.cc-dot { margin:0 4rpx; }
|
||||||
.cc-lcamera {
|
|
||||||
width: 100%;
|
.cc-thumb-bar { background:#1a1a1a; padding:16rpx 20rpx; }
|
||||||
height: 100%;
|
.cc-thumb-count { color:#999; font-size:22rpx; margin-bottom:12rpx; }
|
||||||
}
|
.cc-thumb-list { display:flex; flex-wrap:wrap; gap:10rpx; }
|
||||||
.cc-video {
|
.cc-thumb-item { width:100rpx; height:100rpx; border-radius:10rpx; overflow:hidden; position:relative; background:#333; }
|
||||||
width: 100%;
|
.cc-thumb-img { width:100%; height:100%; }
|
||||||
height: 100%;
|
.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; }
|
||||||
object-fit: cover;
|
.cc-del-icon { color:#fff; font-size:18rpx; }
|
||||||
}
|
.cc-thumb-placeholder { border:2rpx dashed #444; box-sizing:border-box; }
|
||||||
.cc-canvas {
|
.cc-footer { display:flex; justify-content:space-between; align-items:center; padding:30rpx 40rpx; padding-bottom:calc(30rpx + constant(safe-area-inset-bottom)); padding-bottom:calc(30rpx + env(safe-area-inset-bottom)); background:#1a1a1a; }
|
||||||
display: none;
|
.cc-capture-btn { width:80rpx;height:80rpx; border-radius:50%; border:6rpx solid #fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
||||||
}
|
.cc-capture-inner { width:64rpx;height:64rpx; border-radius:50%; background:#fff; }
|
||||||
.cc-camera-hint {
|
.cc-capture-btn:active .cc-capture-inner { background:#ccc; }
|
||||||
text-align: center;
|
.cc-capture-btn.disabled { opacity:0.4; }
|
||||||
padding: 40rpx;
|
.cc-stop-btn { width:80rpx;height:80rpx; border-radius:50%; border:6rpx solid #ff4444; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(255,68,68,0.15); }
|
||||||
}
|
.cc-stop-inner { color:#ff4444; font-size:32rpx; font-weight:bold; }
|
||||||
.cc-hint-text {
|
.cc-right-actions { display:flex; align-items:center; gap:20rpx; }
|
||||||
color: #999;
|
.cc-burst-toggle { padding:16rpx 24rpx; border-radius:32rpx; border:2rpx solid #409eff; background:transparent; }
|
||||||
font-size: 28rpx;
|
.cc-burst-toggle-text { color:#409eff; font-size:24rpx; font-weight:bold; }
|
||||||
}
|
.cc-confirm-btn { padding:18rpx 40rpx; border-radius:40rpx; background:#409eff; }
|
||||||
/* 连拍模式遮罩 */
|
.cc-confirm-btn.disabled { background:#555; }
|
||||||
.cc-burst-overlay {
|
.cc-confirm-text { color:#fff; font-size:28rpx; font-weight:bold; }
|
||||||
position: absolute;
|
|
||||||
top: 0; left: 0; right: 0; bottom: 0;
|
|
||||||
background: rgba(0,0,0,0.25);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 5;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.cc-burst-tip {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 40rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.6);
|
|
||||||
}
|
|
||||||
.cc-burst-count {
|
|
||||||
color: rgba(255,255,255,0.9);
|
|
||||||
font-size: 32rpx;
|
|
||||||
margin-top: 16rpx;
|
|
||||||
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.6);
|
|
||||||
}
|
|
||||||
.cc-burst-dots {
|
|
||||||
color: #409eff;
|
|
||||||
font-size: 60rpx;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
animation: burstBlink 0.8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes burstBlink {
|
|
||||||
0%, 100% { opacity: 0.3; }
|
|
||||||
50% { opacity: 1; }
|
|
||||||
}
|
|
||||||
.cc-burst-hint {
|
|
||||||
color: rgba(255,255,255,0.6);
|
|
||||||
font-size: 24rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.6);
|
|
||||||
}
|
|
||||||
.cc-dot {
|
|
||||||
margin: 0 4rpx;
|
|
||||||
}
|
|
||||||
.cc-thumb-bar {
|
|
||||||
background: #1a1a1a;
|
|
||||||
padding: 16rpx 20rpx;
|
|
||||||
}
|
|
||||||
.cc-thumb-count {
|
|
||||||
color: #999;
|
|
||||||
font-size: 22rpx;
|
|
||||||
margin-bottom: 12rpx;
|
|
||||||
}
|
|
||||||
.cc-thumb-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10rpx;
|
|
||||||
}
|
|
||||||
.cc-thumb-item {
|
|
||||||
width: 100rpx;
|
|
||||||
height: 100rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
background: #333;
|
|
||||||
}
|
|
||||||
.cc-thumb-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.cc-del-icon {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 18rpx;
|
|
||||||
}
|
|
||||||
.cc-thumb-placeholder {
|
|
||||||
border: 2rpx dashed #444;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.cc-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 30rpx 40rpx;
|
|
||||||
padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
|
|
||||||
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
|
|
||||||
background: #1a1a1a;
|
|
||||||
}
|
|
||||||
.cc-capture-btn {
|
|
||||||
width: 80rpx;
|
|
||||||
height: 80rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 6rpx solid #fff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.cc-capture-inner {
|
|
||||||
width: 64rpx;
|
|
||||||
height: 64rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
.cc-capture-btn:active .cc-capture-inner {
|
|
||||||
background: #ccc;
|
|
||||||
}
|
|
||||||
.cc-capture-btn.disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
/* 连拍停止按钮 */
|
|
||||||
.cc-stop-btn {
|
|
||||||
width: 80rpx;
|
|
||||||
height: 80rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 6rpx solid #ff4444;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background: rgba(255,68,68,0.15);
|
|
||||||
}
|
|
||||||
.cc-stop-inner {
|
|
||||||
color: #ff4444;
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.cc-right-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20rpx;
|
|
||||||
}
|
|
||||||
/* 连拍模式切换 */
|
|
||||||
.cc-burst-toggle {
|
|
||||||
padding: 16rpx 24rpx;
|
|
||||||
border-radius: 32rpx;
|
|
||||||
border: 2rpx solid #409eff;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.cc-burst-toggle-text {
|
|
||||||
color: #409eff;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.cc-confirm-btn {
|
|
||||||
padding: 18rpx 40rpx;
|
|
||||||
border-radius: 40rpx;
|
|
||||||
background: #409eff;
|
|
||||||
}
|
|
||||||
.cc-confirm-btn.disabled {
|
|
||||||
background: #555;
|
|
||||||
}
|
|
||||||
.cc-confirm-text {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user