add banbanmini

banban-mini/src/pages/bind/index.tsx

@@ -0,0 +1,173 @@
+import { View, Text, Button, Image } from '@tarojs/components'
+import { useState, useEffect } from 'react'
+import Taro from '@tarojs/taro'
+import './index.scss'
+
+export default function Bind() {
+  const [isScanning, setIsScanning] = useState(false)
+
+  useEffect(() => {
+    // 检查是否已登录
+    const isLoggedIn = Taro.getStorageSync('isLoggedIn')
+    if (!isLoggedIn) {
+      // 未登录，跳转到登录页面
+      Taro.redirectTo({ url: '/pages/login/index' })
+      return
+    }
+
+    // 检查是否已绑定设备
+    const hasDevice = Taro.getStorageSync('hasDevice')
+    if (hasDevice) {
+      // 已绑定设备，跳转到首页
+      Taro.reLaunch({ url: '/pages/device/index' })
+    }
+  }, [])
+
+  const handleScanCode = () => {
+    setIsScanning(true)
+    
+    Taro.scanCode({
+      onlyFromCamera: true,
+      scanType: ['qrCode', 'barCode'],
+      success: (res) => {
+        setIsScanning(false)
+        console.log('扫码结果：', res.result)
+        
+        // 模拟绑定设备
+        Taro.showLoading({ title: '绑定中...' })
+        
+        setTimeout(() => {
+          Taro.hideLoading()
+          
+          // 保存设备信息
+          Taro.setStorageSync('hasDevice', true)
+          Taro.setStorageSync('deviceInfo', {
+            id: res.result || 'DEVICE_' + Date.now(),
+            name: '小夏的伴伴',
+            status: 'online',
+            battery: 82,
+            bindTime: new Date().toLocaleString()
+          })
+          
+          Taro.showToast({
+            title: '设备绑定成功',
+            icon: 'success',
+            duration: 2000,
+            complete: () => {
+              // 绑定成功，跳转到首页
+              setTimeout(() => {
+                Taro.reLaunch({ url: '/pages/device/index' })
+              }, 500)
+            }
+          })
+        }, 1500)
+      },
+      fail: (err) => {
+        setIsScanning(false)
+        console.error('扫码失败：', err)
+        
+        // 用户取消扫码，不显示错误
+        if (err.errMsg && err.errMsg.includes('cancel')) {
+          return
+        }
+        
+        Taro.showToast({
+          title: '扫码失败，请重试',
+          icon: 'none'
+        })
+      }
+    })
+  }
+
+  const handleManualInput = () => {
+    Taro.showModal({
+      title: '手动输入设备码',
+      editable: true,
+      placeholderText: '请输入设备底部的设备码',
+      success: (res) => {
+        if (res.confirm && res.content) {
+          // 模拟绑定设备
+          Taro.showLoading({ title: '绑定中...' })
+          
+          setTimeout(() => {
+            Taro.hideLoading()
+            
+            Taro.setStorageSync('hasDevice', true)
+            Taro.setStorageSync('deviceInfo', {
+              id: res.content,
+              name: '小夏的伴伴',
+              status: 'online',
+              battery: 82,
+              bindTime: new Date().toLocaleString()
+            })
+            
+            Taro.showToast({
+              title: '设备绑定成功',
+              icon: 'success',
+              duration: 2000,
+              complete: () => {
+                setTimeout(() => {
+                  Taro.reLaunch({ url: '/pages/device/index' })
+                }, 500)
+              }
+            })
+          }, 1500)
+        }
+      }
+    })
+  }
+
+  return (
+    <View className='bind-page'>
+      <View className='bind-header'>
+        <Text className='title'>绑定设备</Text>
+        <Text className='subtitle'>请扫描设备底部的二维码进行绑定</Text>
+      </View>
+
+      <View className='scan-area'>
+        <View className='scan-frame' onClick={handleScanCode}>
+          <View className='icon-bg orange'>
+            <Image
+              className='control-icon-img'
+              src={require('../../assets/tab-icons/rings.png')}
+              mode='aspectFit'
+            />
+          </View>
+          <Text className='scan-text'>{isScanning ? '正在扫码...' : '点击扫码'}</Text>
+          <Text className='scan-hint'>请将二维码放入框内</Text>
+        </View>
+
+        <View className='scan-corners'>
+          <View className='corner top-left'></View>
+          <View className='corner top-right'></View>
+          <View className='corner bottom-left'></View>
+          <View className='corner bottom-right'></View>
+        </View>
+      </View>
+
+      <View className='bind-options'>
+        <View className='option-item' onClick={handleManualInput}>
+          <Text className='option-icon'>⌨️</Text>
+          <Text className='option-text'>手动输入设备码</Text>
+          <Text className='option-arrow'>›</Text>
+        </View>
+      </View>
+
+      <View className='bind-tips'>
+        <Text className='tips-title'>绑定帮助</Text>
+        <View className='tip-item'>
+          <Text className='tip-number'>1</Text>
+          <Text className='tip-text'>找到设备底部的二维码或设备码</Text>
+        </View>
+        <View className='tip-item'>
+          <Text className='tip-number'>2</Text>
+          <Text className='tip-text'>点击上方扫码区域进行扫描</Text>
+        </View>
+        <View className='tip-item'>
+          <Text className='tip-number'>3</Text>
+          <Text className='tip-text'>等待绑定成功提示</Text>
+        </View>
+      </View>
+    </View>
+  )
+}