6 changed files with 262 additions and 4 deletions
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
export default { |
||||
navigationStyle: 'custom', |
||||
navigationBarTitleText: '', |
||||
disableScroll: true, |
||||
} |
||||
@ -0,0 +1,145 @@
@@ -0,0 +1,145 @@
|
||||
/** |
||||
* 扫码页面样式 |
||||
*/ |
||||
|
||||
.scan-code-page { |
||||
width: 100%; |
||||
height: 100vh; |
||||
background-color: #0D1B2A; |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
/* 关闭按钮 */ |
||||
.close-btn { |
||||
position: absolute; |
||||
top: 60px; |
||||
left: 30px; |
||||
width: 80px; |
||||
height: 80px; |
||||
background: rgba(255, 255, 255, 0.9); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
z-index: 100; |
||||
} |
||||
|
||||
/* 扫码区域 */ |
||||
.scan-area { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 100%; |
||||
padding-top: 100px; |
||||
} |
||||
|
||||
/* 扫描框 */ |
||||
.scan-frame { |
||||
width: 500px; |
||||
height: 500px; |
||||
position: relative; |
||||
border: 2px solid rgba(255, 255, 255, 0.3); |
||||
border-radius: 20px; |
||||
} |
||||
|
||||
/* 四个角装饰 */ |
||||
.corner { |
||||
position: absolute; |
||||
width: 60px; |
||||
height: 60px; |
||||
border-color: #00FF88; |
||||
border-style: solid; |
||||
border-width: 0; |
||||
} |
||||
|
||||
.corner-top-left { |
||||
top: -2px; |
||||
left: -2px; |
||||
border-top-width: 6px; |
||||
border-left-width: 6px; |
||||
border-top-left-radius: 20px; |
||||
} |
||||
|
||||
.corner-top-right { |
||||
top: -2px; |
||||
right: -2px; |
||||
border-top-width: 6px; |
||||
border-right-width: 6px; |
||||
border-top-right-radius: 20px; |
||||
} |
||||
|
||||
.corner-bottom-left { |
||||
bottom: -2px; |
||||
left: -2px; |
||||
border-bottom-width: 6px; |
||||
border-left-width: 6px; |
||||
border-bottom-left-radius: 20px; |
||||
} |
||||
|
||||
.corner-bottom-right { |
||||
bottom: -2px; |
||||
right: -2px; |
||||
border-bottom-width: 6px; |
||||
border-right-width: 6px; |
||||
border-bottom-right-radius: 20px; |
||||
} |
||||
|
||||
/* 扫描线动画 */ |
||||
.scan-line { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 20px; |
||||
right: 20px; |
||||
height: 4px; |
||||
background: linear-gradient(90deg, |
||||
transparent 0%, |
||||
#00FF88 20%, |
||||
#00FF88 80%, |
||||
transparent 100% |
||||
); |
||||
box-shadow: 0 0 20px #00FF88, 0 0 40px #00FF88; |
||||
animation: scanAnimation 2s linear infinite; |
||||
} |
||||
|
||||
@keyframes scanAnimation { |
||||
0% { |
||||
top: 20px; |
||||
opacity: 1; |
||||
} |
||||
50% { |
||||
opacity: 1; |
||||
} |
||||
100% { |
||||
top: calc(100% - 24px); |
||||
opacity: 0.5; |
||||
} |
||||
} |
||||
|
||||
/* 提示文字 */ |
||||
.scan-tip { |
||||
margin-top: 60px; |
||||
font-size: 28px; |
||||
color: rgba(255, 255, 255, 0.7); |
||||
} |
||||
|
||||
/* 底部区域 */ |
||||
.bottom-area { |
||||
position: absolute; |
||||
bottom: 150px; |
||||
left: 0; |
||||
right: 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
/* 重新扫码按钮 */ |
||||
.rescan-btn { |
||||
padding: 24px 80px; |
||||
background: rgba(255, 255, 255, 0.1); |
||||
border: 2px solid rgba(255, 255, 255, 0.3); |
||||
border-radius: 50px; |
||||
font-size: 30px; |
||||
color: #fff; |
||||
} |
||||
@ -0,0 +1,107 @@
@@ -0,0 +1,107 @@
|
||||
/** |
||||
* 扫码页面 - 独立页面（无导航栏、无tabbar） |
||||
*/ |
||||
import { View } from '@tarojs/components' |
||||
import Taro, { useLoad } from '@tarojs/taro' |
||||
import { observer } from 'mobx-react' |
||||
import { Cross } from '@taroify/icons' |
||||
import './index.scss' |
||||
|
||||
const ScanCodePage = observer(() => { |
||||
useLoad(() => { |
||||
console.log('扫码页面加载') |
||||
// 页面加载后自动调用扫码
|
||||
startScan() |
||||
}) |
||||
|
||||
// 调用扫码功能
|
||||
const startScan = () => { |
||||
Taro.scanCode({ |
||||
onlyFromCamera: true, // 只允许从相机扫码
|
||||
scanType: ['qrCode', 'barCode'], // 支持二维码和条形码
|
||||
success: (res) => { |
||||
console.log('扫码成功:', res) |
||||
Taro.showToast({ |
||||
title: '扫码成功', |
||||
icon: 'success', |
||||
}) |
||||
// 处理扫码结果，可以根据业务需求跳转或执行其他操作
|
||||
// 例如：根据扫码结果开台
|
||||
handleScanResult(res.result) |
||||
}, |
||||
fail: (err) => { |
||||
console.error('扫码失败:', err) |
||||
// 用户取消扫码或扫码失败
|
||||
if (err.errMsg?.includes('cancel')) { |
||||
// 用户取消，不做提示
|
||||
} else { |
||||
Taro.showToast({ |
||||
title: '扫码失败，请重试', |
||||
icon: 'none', |
||||
}) |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
// 处理扫码结果
|
||||
const handleScanResult = (result: string) => { |
||||
console.log('扫码结果:', result) |
||||
// TODO: 根据扫码结果处理开台逻辑
|
||||
// 例如：调用后端接口验证二维码，然后开台
|
||||
} |
||||
|
||||
// 关闭页面返回首页
|
||||
const handleClose = () => { |
||||
Taro.navigateBack({ |
||||
delta: 1, |
||||
fail: () => { |
||||
// 如果返回失败，直接跳转到首页
|
||||
Taro.switchTab({ |
||||
url: '/pages/index/index' |
||||
}) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
// 点击页面重新扫码
|
||||
const handleRescan = () => { |
||||
startScan() |
||||
} |
||||
|
||||
return ( |
||||
<View className="scan-code-page"> |
||||
{/* 关闭按钮 */} |
||||
<View className="close-btn" onClick={handleClose}> |
||||
<Cross size={40} color="#666" /> |
||||
</View> |
||||
|
||||
{/* 扫码区域 */} |
||||
<View className="scan-area"> |
||||
{/* 扫描框 */} |
||||
<View className="scan-frame"> |
||||
{/* 四个角 */} |
||||
<View className="corner corner-top-left" /> |
||||
<View className="corner corner-top-right" /> |
||||
<View className="corner corner-bottom-left" /> |
||||
<View className="corner corner-bottom-right" /> |
||||
|
||||
{/* 扫描线动画 */} |
||||
<View className="scan-line" /> |
||||
</View> |
||||
|
||||
{/* 提示文字 */} |
||||
<View className="scan-tip">将二维码放入框内，即可自动扫描</View> |
||||
</View> |
||||
|
||||
{/* 底部重新扫码按钮 */} |
||||
<View className="bottom-area"> |
||||
<View className="rescan-btn" onClick={handleRescan}> |
||||
重新扫码 |
||||
</View> |
||||
</View> |
||||
</View> |
||||
) |
||||
}) |
||||
|
||||
export default ScanCodePage |
||||
Loading…
Reference in new issue