diff --git a/src/app.config.ts b/src/app.config.ts index 581941e..772474e 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -5,6 +5,7 @@ export default defineAppConfig({ 'pages/scan/index', 'pages/message/index', 'pages/user/index', + 'pages/scanCode/index', // 独立扫码页面（无tabbar） ], window: { backgroundTextStyle: 'light', diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index 1a9d639..9b6b36c 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -8,7 +8,7 @@ height: calc(100vh - 40Px); height: calc(100vh - 40Px - constant(safe-area-inset-bottom)); // iOS 11.0-11.2 height: calc(100vh - 40Px - env(safe-area-inset-bottom)); // iOS 11.2+ - background-color: red; + background-color: #121212; position: relative; overflow-x: hidden; overflow-y: auto; // 超出计算高度后才可以滚动 diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 87347a0..7f0bc9d 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -70,10 +70,10 @@ const Index = observer(() => { requestLocationPermission() }, []) - // 处理扫码开台点击 + // 处理扫码开台点击 - 跳转到独立扫码页面（无tabbar） const handleScanClick = () => { - Taro.switchTab({ - url: '/pages/scan/index' + Taro.navigateTo({ + url: '/pages/scanCode/index' }) } diff --git a/src/pages/scanCode/index.config.ts b/src/pages/scanCode/index.config.ts new file mode 100644 index 0000000..34011c6 --- /dev/null +++ b/src/pages/scanCode/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationStyle: 'custom', + navigationBarTitleText: '', + disableScroll: true, +} diff --git a/src/pages/scanCode/index.scss b/src/pages/scanCode/index.scss new file mode 100644 index 0000000..ead7002 --- /dev/null +++ b/src/pages/scanCode/index.scss @@ -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; +} diff --git a/src/pages/scanCode/index.tsx b/src/pages/scanCode/index.tsx new file mode 100644 index 0000000..193bea2 --- /dev/null +++ b/src/pages/scanCode/index.tsx @@ -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 ( + + {/* 关闭按钮 */} + + + + + {/* 扫码区域 */} + + {/* 扫描框 */} + + {/* 四个角 */} + + + + + + {/* 扫描线动画 */} + + + + {/* 提示文字 */} + 将二维码放入框内，即可自动扫描 + + + {/* 底部重新扫码按钮 */} + + + 重新扫码 + + + + ) +}) + +export default ScanCodePage