扫码功能页面

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',

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; // 超出计算高度后才可以滚动

src/pages/index/index.tsx

@@ -70,10 +70,10 @@ const Index = observer(() => {
     requestLocationPermission()
   }, [])
 
-  // 处理扫码开台点击
+  // 处理扫码开台点击 - 跳转到独立扫码页面（无tabbar）
   const handleScanClick = () => {
-    Taro.switchTab({
+    Taro.navigateTo({
-      url: '/pages/scan/index'
+      url: '/pages/scanCode/index'
     })
   }
 

src/pages/scanCode/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationStyle: 'custom',
+  navigationBarTitleText: '',
+  disableScroll: true,
+}

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;
+}

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 (
+    <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