2025年05月19日18:25:41

2025-05-19 18:25:43 +08:00 · 2025-05-19 18:25:43 +08:00 · 98d362f360
commit 98d362f360
parent 499babed26
8 changed files with 223 additions and 132 deletions
--- a/src/components/PullDownScrollView/index.jsx
+++ b/src/components/PullDownScrollView/index.jsx
@ -0,0 +1,34 @@
+import { memo, useRef, useState } from 'react';
+import { ScrollView } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+
+const Index = (props) => {
+  const { children, refreshFetcher } = props;
+  const scrollTop = useRef(0);
+  const [refreshStatus, setStatus] = useState(false);
+  return (
+    <ScrollView
+      {...props}
+      refresherEnabled={props.refresherEnabled}
+      refresherTriggered={refreshStatus}
+      onRefresherRefresh={() => {
+        setStatus(() => true);
+        refreshFetcher && refreshFetcher()
+        setTimeout(() => {
+          setStatus(() => false)
+        }, 1000)
+      }}
+      onTouchMove={(e) => {
+        if (scrollTop.current !== 0) {
+          e.stopPropagation();
+        }
+      }}
+      onScroll={(e) => {
+        scrollTop.current = e.detail.scrollTop;
+      }}
+    >
+      {children}
+    </ScrollView>
+  );
+};
+export default memo(Index);
--- a/src/pages/device/index.jsx
+++ b/src/pages/device/index.jsx
@ -1,25 +1,28 @@
-import { View, Image, Text } from '@tarojs/components'
-import './index.less'
+import { View, Image } from '@tarojs/components'
 import connectble from "@/assets/connectble.png";
 import addDev from "@/assets/addDev.png";
 import router from '@/baseRouter/index'
 import BLESDK from '@/utils/ble'
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import Taro, { useDidShow } from '@tarojs/taro';
+import './index.less'

 export default function Index() {
  const [isLink, setIsLink] = useState(BLESDK.deviceInfo.state)
+  const [deviceInfo, setDeviceInfo] = useState(BLESDK.deviceInfo)

  const addDevice = () => {
    router.navigate('/pages/deviceList/index')
  }
  const deviceCallBack = () => {
    console.log(BLESDK.deviceInfo, '解绑2');
+    setDeviceInfo({ ...BLESDK.deviceInfo })
    setIsLink(BLESDK.deviceInfo.state)
  }
  useDidShow(() => {
    BLESDK.deviceCallBack(deviceCallBack)
    setIsLink(BLESDK.deviceInfo.state)
+    setDeviceInfo({ ...BLESDK.deviceInfo })
  })

  const unbind = () => {
@ -28,7 +31,6 @@ export default function Index() {
      content: '确认解绑当前设备？',
      success: (res) => {
        if (res.confirm) {
-          setIsLink(false)
          BLESDK.closeBluetoothAdapter()
          Taro.showToast({ title: '设备解绑成功', icon: 'success' })
        }
@ -37,21 +39,21 @@ export default function Index() {
  }

  return (
-    <View className="index device">
-      {BLESDK.deviceInfo?.name ? <>
-        <View className="deviceinfo">
+    <View className='index device'>
+      {deviceInfo?.name ? <>
+        <View className='deviceinfo'>
          <Image src={connectble} className='deviceimg' />
-          <View className="item">
-            <View className="item-label">连接状态</View>
-            <View className="item-text active">{isLink ? '已连接' : '未连接'}</View>
+          <View className='item'>
+            <View className='item-label'>连接状态</View>
+            <View className='item-text active'>{isLink ? '已连接' : '未连接'}</View>
          </View>
-          <View className="item">
-            <View className="item-label">设备名称</View>
-            <View className="item-text">{BLESDK.deviceInfo.name}</View>
+          <View className='item'>
+            <View className='item-label'>设备名称</View>
+            <View className='item-text'>{deviceInfo.name}</View>
          </View>
-          <View className="item">
-            <View className="item-label">MAC 地址</View>
-            <View className="item-text">{BLESDK.deviceInfo.mac}</View>
+          <View className='item'>
+            <View className='item-label'>MAC 地址</View>
+            <View className='item-text'>{deviceInfo.mac}</View>
          </View>
        </View>
        <View className='btn' onClick={unbind}>解绑设备</View>
--- a/src/pages/game/index.jsx
+++ b/src/pages/game/index.jsx
@ -1,12 +1,12 @@
 import { View, Image } from '@tarojs/components'
-import './index.less'
 import ColorPicker from "@/components/color-picker";
-import { useEffect, useState } from 'react';
-import history from "../../assets/history.png";
+import { useState } from 'react';
 import Taro from '@tarojs/taro';
 import { hex, strInsert } from '@/utils/sendOrder';
 import BLESDK from '@/utils/ble'
 import router from '@/baseRouter/index'
+import './index.less'
+import history from "../../assets/history.png";

 export default function Index() {
  const [list, setList] = useState(["255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255", "255, 255, 255"])
@ -39,7 +39,6 @@ export default function Index() {
      str += hex(item[0])
      str += hex(item[1])
      str += hex(item[2])
-      str += hex(1)
    }
    BLESDK.writeBleValue(new Uint8Array(strInsert(str)).buffer)
    setTimeout(() => {
@ -67,13 +66,13 @@ export default function Index() {
  })

  return (
-    <View className="index">
+    <View className='index'>
      <View className='head'>
        <View className='head-left'>像素跳动</View>
        <View className='head-right' onClick={toPage}>  <Image className='icon' src={history} />模板列表</View>
      </View>
-      <View className="grid">
-        {list.map((item, index) => <View className="grid-item" style={{ backgroundColor: `rgb(${item})` }} key={index} onClick={() => addColor(index)}></View>)}
+      <View className='grid'>
+        {list.map((item, index) => <View className='grid-item' style={{ backgroundColor: `rgb(${item})` }} key={index} onClick={() => addColor(index)}></View>)}
      </View >

      <View className='colorbox'>
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@ -1,19 +1,20 @@
 import { View, Image, Text } from '@tarojs/components'
-import './index.less'
 import { Switch, Slider } from "@taroify/core"
 import ble from "@/assets/ble.png";
-import soundCard from "@/assets/soundCard.png";
+// import soundCard from "@/assets/soundCard.png";
 import game from "@/assets/game.png";
 import ai from "@/assets/ai.png";
-import Taro, { useDidShow } from '@tarojs/taro';
+import Taro, { useDidHide, useDidShow } from '@tarojs/taro';
 import { useCallback, useState } from 'react';
-import { hex, strInsert } from '@/utils/sendOrder';
+import { hex, strInsert, getInitData } from '@/utils/sendOrder';
 import { debounce } from '@/utils/index'
 import BLESDK from '@/utils/ble'
+import PullDownScrollView from "@/components/PullDownScrollView";
+import './index.less'

 export default function Index() {
-  const sourceList = ['Line', 'OPT', 'ARC', 'USB']
-  const [ruleForm, setRuleForm] = useState({
+  const sourceList = ['Line', 'OPT', 'USB']
+  let [ruleForm, setRuleForm] = useState({
    volume: 0, //话筒音量
    music: 0, //音乐音量
    source: 0, //音源设置
@ -28,14 +29,26 @@ export default function Index() {
    AI: 0, //AI
    playPause: 0, //播放暂停
  })
+  let timeout = null
  const musicModeEnum = ['标准', '动感', '轻柔', '安静']

+
  const toPage = () => {
    Taro.navigateTo({ url: '/pages/game/index' })
  }
  const sendCode = useCallback(debounce((e) => {
    BLESDK.writeBleValue(new Uint8Array(strInsert(e)).buffer)
  }), [])
+  const refresh = () => {
+    clearTimeout(timeout)
+    if (BLESDK.deviceInfo.state) {
+      getInitData()
+      timeout = setTimeout(() => {
+        refresh()
+      }, 3000)
+    }
+  }
+
  const handleChange = (e, key) => {
    if (key !== 'nextAndPre') {
      setRuleForm({
@ -99,75 +112,103 @@ export default function Index() {
    handleChange(num, 'musicMode')
  }

-  const control = (type) => {
-    let num = ruleForm.girth
-    if (type == "+" && ruleForm.girth < 3) {
-      num++
-    } else if (type == "-" && ruleForm.girth > 0) {
-      num--
-    }
-    if (num == ruleForm.girth) return
-    handleChange(num, 'girth')
-  }
+  // const control = (type) => {
+  //   let num = ruleForm.girth
+  //   if (type == "+" && ruleForm.girth < 3) {
+  //     num++
+  //   } else if (type == "-" && ruleForm.girth > 0) {
+  //     num--
+  //   }
+  //   if (num == ruleForm.girth) return
+  //   handleChange(num, 'girth')
+  // }
  const BleCallBack = (bytes) => {
    if (bytes[0] == 0x7D && bytes[4] == 0xB0) {
      Taro.showToast({ title: bytes[5] == 0x00 ? '操作失败' : '操作成功', icon: 'none' })
    }
+
+    if (bytes[4] == 0xB3) {
+      let nameEnum = {
+        5: 'volume',
+        6: 'music',
+        7: 'source',
+        8: 'bleSwitch',
+        10: 'musicMode',
+        11: 'playPause',
+        13: 'reverb',
+        14: 'microphoneReverberation',
+      }
+      ruleForm[nameEnum[bytes[3]]] = bytes[5]
+      setRuleForm({ ...ruleForm })
+    }
  }
+
  useDidShow(() => {
    BLESDK.onBLECharacteristicValueChange(BleCallBack)
+    refresh()
+  })
+  useDidHide(() => {
+    clearTimeout(timeout)
  })

  return (
-    <View className="index">
-      <View className="headbox">
-        <View className="source">
-          <View className="title">音乐信号(音源)</View>
-          <View className="list">
-            {
-              sourceList.map((item, index) => {
-                return <View className={`list-item ${index == ruleForm.source ? 'active' : ''}`} key={index} onClick={() => handleChange(index, 'source')}>
-                  <View className="yuan"></View>
-                  <View className="line"></View>
-                  <View className="text">{item}</View>
-                </View>
-              })
-            }
+    <PullDownScrollView
+      className='PullDownScrollView'
+      scrollY
+      refresherEnabled
+      refresherBackground='#f3f8f7'
+      refreshFetcher={refresh}
+    >
+      <View className='index'>
+        <View className='headbox'>
+          <View className='source'>
+            <View className='title'>音乐信号(音源)</View>
+            <View className='list'>
+              {
+                sourceList.map((item, index) => {
+                  return <View className={`list-item ${index == ruleForm.source ? 'active' : ''}`} key={index} onClick={() => handleChange(index, 'source')}>
+                    <View className='yuan'></View>
+                    <View className='line'></View>
+                    <View className='text'>{item}</View>
+                  </View>
+                })
+              }
+            </View>
          </View>
-        </View>

-        <View className="switch">
-          <View className="title">开关状态</View>
-          <View className="switch-item">
-            <Image className='img' src={ble} />
-            <Text className='text'>蓝牙</Text>
-            <Switch size="20" onChange={(e) => handleChange(e, 'bleSwitch')} checked={ruleForm.bleSwitch} />
-          </View>
-          <View className="switch-item">
+          <View className='switch'>
+            <View className='title'>开关状态</View>
+            <View className='switch-item'>
+              <Image className='img' src={ble} />
+              <Text className='text'>蓝牙</Text>
+              <Switch size='20' onChange={(e) => handleChange(e, 'bleSwitch')} checked={ruleForm.bleSwitch} />
+            </View>
+            {/* <View className='switch-item'>
            <Image className='img' src={soundCard} />
            <Text className='text'>声卡</Text>
-            <Switch size="20" onChange={(e) => handleChange(e, 'soundCadSwitch')} checked={ruleForm.soundCadSwitch} />
+            <Switch size='20' onChange={(e) => handleChange(e, 'soundCadSwitch')} checked={ruleForm.soundCadSwitch} />
+          </View> */}
          </View>
        </View>
-      </View>
-      <View className='play'>
-        <View className='play-icon pre' onClick={() => handleChange(3, 'nextAndPre')}></View>
-        <View className={ruleForm.playPause ? 'play-pause' : 'play-play'} onClick={() => {
-          handleChange(!ruleForm.playPause, 'playPause')
-        }}></View>
-        <View className='play-icon next' onClick={() => handleChange(4, 'nextAndPre')}></View>
-      </View>
-      <View className='card'>
-        <View className='funitem'>
-          <View className='funitem-text'>音乐模式</View>
-          <View className='mode'>
-            <View className='icon l' onClick={() => handelMusicMode("-")}></View>
-            <View className='input'>{musicModeEnum[ruleForm.musicMode]}</View>
-            <View className='icon r' onClick={() => handelMusicMode("+")}></View>
+        <View className='play'>
+          <View className='play-icon pre' onClick={() => handleChange(3, 'nextAndPre')}></View>
+          <View className={ruleForm.playPause ? 'play-pause' : 'play-play'} onClick={() => {
+            handleChange(!ruleForm.playPause, 'playPause')
+          }}
+          ></View>
+          <View className='play-icon next' onClick={() => handleChange(4, 'nextAndPre')}></View>
+        </View>
+        <View className='card'>
+          <View className='funitem'>
+            <View className='funitem-text'>音乐模式</View>
+            <View className='mode'>
+              <View className='icon l' onClick={() => handelMusicMode("-")}></View>
+              <View className='input'>{musicModeEnum[ruleForm.musicMode]}</View>
+              <View className='icon r' onClick={() => handelMusicMode("+")}></View>
+            </View>
          </View>
        </View>
-      </View>
-      <View className='card'>
+        {/* <View className='card'>
        <View className='funitem'>
          <View className='funitem-text'>超低音强度</View>
          <View className='mode'>
@ -176,65 +217,68 @@ export default function Index() {
            <View className='icon r' onClick={() => control("+")}></View>
          </View>
        </View>
-      </View>
-      <View className='card'>
-        <View className='funitem'>
-          <View className='funitem-text'>音乐音量</View>
-          <View className='funitem-right'>
-            <View className='num'>{ruleForm.volume}%</View>
-            <Slider className="custom-color" min={0} max={100} size={4} onChange={(e) => handleChange(e, 'volume')} value={ruleForm.volume} >
-              <Slider.Thumb>
-                <View className="custom-thumb"></View>
-              </Slider.Thumb>
-            </Slider>
+      </View> */}
+        <View className='card'>
+          <View className='funitem'>
+            <View className='funitem-text'>音乐音量</View>
+            <View className='funitem-right'>
+              <View className='num'>{ruleForm.volume}%</View>
+              <Slider className='custom-color' min={0} max={100} size={4} onChange={(e) => handleChange(e, 'volume')} value={ruleForm.volume} >
+                <Slider.Thumb>
+                  <View className='custom-thumb'></View>
+                </Slider.Thumb>
+              </Slider>
+            </View>
          </View>
        </View>
-      </View>
-      <View className='card'>
-        <View className='funitem'>
-          <View className='funitem-text'>话筒音量</View>
-          <View className='funitem-right'>
-            <View className='num'>{ruleForm.music}%</View>
-            <Slider className="custom-color" min={0} max={100} size={4} onChange={(e) => handleChange(e, 'music')} value={ruleForm.music} >
-              <Slider.Thumb>
-                <View className="custom-thumb"></View>
-              </Slider.Thumb>
-            </Slider>
+        <View className='card'>
+          <View className='funitem'>
+            <View className='funitem-text'>话筒音量</View>
+            <View className='funitem-right'>
+              <View className='num'>{ruleForm.music}%</View>
+              <Slider className='custom-color' min={0} max={100} size={4} onChange={(e) => handleChange(e, 'music')} value={ruleForm.music} >
+                <Slider.Thumb>
+                  <View className='custom-thumb'></View>
+                </Slider.Thumb>
+              </Slider>
+            </View>
          </View>
-        </View>
-        <View className='funitem'>
+          {/* <View className='funitem'>
          <View className='funitem-text'>话筒混响音量</View>
          <View className='funitem-right'>
            <View className='num'>{ruleForm.microphoneReverberation}%</View>
-            <Slider className="custom-color" min={0} max={32} size={4} onChange={(e) => handleChange(e, 'microphoneReverberation')} value={ruleForm.microphoneReverberation} >
+            <Slider className='custom-color' min={0} max={32} size={4} onChange={(e) => handleChange(e, 'microphoneReverberation')} value={ruleForm.microphoneReverberation} >
              <Slider.Thumb>
-                <View className="custom-thumb"></View>
+                <View className='custom-thumb'></View>
              </Slider.Thumb>
            </Slider>
          </View>
+        </View> */}
+          <View className='funitem'>
+            <View className='funitem-text'>话筒混响模式</View>
+            <View className='numlist'>
+              {[1, 2, 3, 4, 5, 6].map(item => {
+                return <View className={`numlist-num ${ruleForm.reverb == item ? 'active' : ''} `} key={item} onClick={() => {
+                  if (item == ruleForm.reverb) return
+                  handleChange(item, 'reverb')
+                }}
+                >{item}</View>
+              })}
+            </View>
+          </View>
        </View>
-        <View className='funitem'>
-          <View className='funitem-text'>话筒混响模式</View>
-          <View className='numlist'>
-            {[1, 2, 3, 4, 5, 6].map(item => {
-              return <View className={`numlist-num ${ruleForm.reverb == item ? 'active' : ''} `} key={item} onClick={() => {
-                if (item == ruleForm.reverb) return
-                handleChange(item, 'reverb')
-              }}>{item}</View>
-            })}
+        <View className='btns'>
+          <View className='btn-item' onClick={toPage}>
+            <Image src={game} className='img' />
+            GAME
+          </View>
+          <View className='btn-item'>
+            <Image src={ai} className='img' />
+            AI
          </View>
        </View>
      </View>
-      <View className='btns'>
-        <View className='btn-item' onClick={toPage}>
-          <Image src={game} className='img' />
-          GAME
-        </View>
-        <View className='btn-item'>
-          <Image src={ai} className='img' />
-          AI
-        </View>
-      </View>
-    </View>
+    </PullDownScrollView>
+
  )
 }
--- a/src/pages/index/index.less
+++ b/src/pages/index/index.less
@ -1,7 +1,17 @@
+.PullDownScrollView {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background: #F7F7F7;
+}
+
 .index {
  padding: 24rpx 40rpx 60rpx;
  background: #F7F7F7;
  overflow: auto;
+  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;

--- a/src/utils/ble.js
+++ b/src/utils/ble.js
@ -162,7 +162,7 @@ class Bluetooth {

  // 蓝牙连接
  createBleConnection() {
-    if (!this.available || this.linkFlag) return;
+    if (!this.available || this.linkFlag || !this.deviceInfo.deviceId) return;
    this.linkFlag = true;
    Taro.setStorageSync("deviceInfo", this.deviceInfo);
    console.log("正在连接设备");
@ -274,7 +274,7 @@ class Bluetooth {
        this.timeout = setTimeout(() => {
          this.timeout && this.clearTimeoutFn("timeout");
          this.createBleConnection();
-        }, 1000);
+        }, 3000);
      }
    });
  }
@ -288,7 +288,7 @@ class Bluetooth {
  closeBluetoothAdapter() {
    this.linkFlag = false;
    this.deviceInfo = { state: false };
-    wx.removeStorageSync("deviceInfo");
+    Taro.removeStorageSync("deviceInfo");
    Taro.closeBluetoothAdapter({
      success: (res) => {
        console.log(this.deviceInfo, '解绑1');
@ -311,7 +311,7 @@ class Bluetooth {
  }
  // unBindDevice() {
  //   this.deviceInfo = {}
-  //   wx.removeStorageSync('deviceInfo')
+  //   Taro.removeStorageSync('deviceInfo')
  //   this.closeBluetoothAdapter()
  // }
  /**
--- a/src/utils/sendOrder.js
+++ b/src/utils/sendOrder.js
@ -1,4 +1,3 @@
-import BLESDK from './ble'
 import TASK from './taskQueue'
 import { aes128Encrypt } from '@/utils/index'

@ -88,6 +87,9 @@ export function getInitData() {
  // 话筒混响模式
  TASK.addTask(strInsert(`7B05EA0DB100`));

+  // 音乐控制
+  TASK.addTask(strInsert(`7B05EA0BB100`));
+
 }


--- a/src/utils/taskQueue.js
+++ b/src/utils/taskQueue.js
@ -27,7 +27,7 @@ class taskQueue {
    this.overtime = setTimeout(() => {
      this.stopOverTime()
      this.executeTask()
-    }, 800)
+    }, 300)
  }
  stopOverTime() {
    clearTimeout(this.overtime)