2025年05月19日18:25:41

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);

src/pages/device/index.jsx

@@ -1,25 +1,28 @@
-import { View, Image, Text } from '@tarojs/components'
+import { View, Image } from '@tarojs/components'
-import './index.less'
 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">
+    <View className='index device'>
-      {BLESDK.deviceInfo?.name ? <>
+      {deviceInfo?.name ? <>
-        <View className="deviceinfo">
+        <View className='deviceinfo'>
           <Image src={connectble} className='deviceimg' />
-          <View className="item">
+          <View className='item'>
-            <View className="item-label">连接状态</View>
+            <View className='item-label'>连接状态</View>
-            <View className="item-text active">{isLink ? '已连接' : '未连接'}</View>
+            <View className='item-text active'>{isLink ? '已连接' : '未连接'}</View>
           </View>
-          <View className="item">
+          <View className='item'>
-            <View className="item-label">设备名称</View>
+            <View className='item-label'>设备名称</View>
-            <View className="item-text">{BLESDK.deviceInfo.name}</View>
+            <View className='item-text'>{deviceInfo.name}</View>
           </View>
-          <View className="item">
+          <View className='item'>
-            <View className="item-label">MAC 地址</View>
+            <View className='item-label'>MAC 地址</View>
-            <View className="item-text">{BLESDK.deviceInfo.mac}</View>
+            <View className='item-text'>{deviceInfo.mac}</View>
           </View>
         </View>
         <View className='btn' onClick={unbind}>解绑设备</View>

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 { useState } from 'react';
-import history from "../../assets/history.png";
 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">
+      <View className='grid'>
-        {list.map((item, index) => <View className="grid-item" style={{ backgroundColor: `rgb(${item})` }} key={index} onClick={() => addColor(index)}></View>)}
+        {list.map((item, index) => <View className='grid-item' style={{ backgroundColor: `rgb(${item})` }} key={index} onClick={() => addColor(index)}></View>)}
       </View >
 
       <View className='colorbox'>

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 sourceList = ['Line', 'OPT', 'USB']
-  const [ruleForm, setRuleForm] = useState({
+  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) => {
+  // const control = (type) => {
-    let num = ruleForm.girth
+  //   let num = ruleForm.girth
-    if (type == "+" && ruleForm.girth < 3) {
+  //   if (type == "+" && ruleForm.girth < 3) {
-      num++
+  //     num++
-    } else if (type == "-" && ruleForm.girth > 0) {
+  //   } else if (type == "-" && ruleForm.girth > 0) {
-      num--
+  //     num--
-    }
+  //   }
-    if (num == ruleForm.girth) return
+  //   if (num == ruleForm.girth) return
-    handleChange(num, 'girth')
+  //   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">
+    <PullDownScrollView
-      <View className="headbox">
+      className='PullDownScrollView'
-        <View className="source">
+      scrollY
-          <View className="title">音乐信号(音源)</View>
+      refresherEnabled
-          <View className="list">
+      refresherBackground='#f3f8f7'
-            {
+      refreshFetcher={refresh}
-              sourceList.map((item, index) => {
+    >
-                return <View className={`list-item ${index == ruleForm.source ? 'active' : ''}`} key={index} onClick={() => handleChange(index, 'source')}>
+      <View className='index'>
-                  <View className="yuan"></View>
+        <View className='headbox'>
-                  <View className="line"></View>
+          <View className='source'>
-                  <View className="text">{item}</View>
+            <View className='title'>音乐信号(音源)</View>
-                </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='switch'>
-          <View className="title">开关状态</View>
+            <View className='title'>开关状态</View>
-          <View className="switch-item">
+            <View className='switch-item'>
-            <Image className='img' src={ble} />
+              <Image className='img' src={ble} />
-            <Text className='text'>蓝牙</Text>
+              <Text className='text'>蓝牙</Text>
-            <Switch size="20" onChange={(e) => handleChange(e, 'bleSwitch')} checked={ruleForm.bleSwitch} />
+              <Switch size='20' onChange={(e) => handleChange(e, 'bleSwitch')} checked={ruleForm.bleSwitch} />
-          </View>
+            </View>
-          <View className="switch-item">
+            {/* <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'>
+          <View className='play-icon pre' onClick={() => handleChange(3, 'nextAndPre')}></View>
-        <View className='play-icon pre' onClick={() => handleChange(3, 'nextAndPre')}></View>
+          <View className={ruleForm.playPause ? 'play-pause' : 'play-play'} onClick={() => {
-        <View className={ruleForm.playPause ? 'play-pause' : 'play-play'} onClick={() => {
+            handleChange(!ruleForm.playPause, 'playPause')
-          handleChange(!ruleForm.playPause, 'playPause')
+          }}
-        }}></View>
+          ></View>
-        <View className='play-icon next' onClick={() => handleChange(4, 'nextAndPre')}></View>
+          <View className='play-icon next' onClick={() => handleChange(4, 'nextAndPre')}></View>
-      </View>
+        </View>
-      <View className='card'>
+        <View className='card'>
-        <View className='funitem'>
+          <View className='funitem'>
-          <View className='funitem-text'>音乐模式</View>
+            <View className='funitem-text'>音乐模式</View>
-          <View className='mode'>
+            <View className='mode'>
-            <View className='icon l' onClick={() => handelMusicMode("-")}></View>
+              <View className='icon l' onClick={() => handelMusicMode("-")}></View>
-            <View className='input'>{musicModeEnum[ruleForm.musicMode]}</View>
+              <View className='input'>{musicModeEnum[ruleForm.musicMode]}</View>
-            <View className='icon r' onClick={() => handelMusicMode("+")}></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> */}
-      <View className='card'>
+        <View className='card'>
-        <View className='funitem'>
+          <View className='funitem'>
-          <View className='funitem-text'>音乐音量</View>
+            <View className='funitem-text'>音乐音量</View>
-          <View className='funitem-right'>
+            <View className='funitem-right'>
-            <View className='num'>{ruleForm.volume}%</View>
+              <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 className='custom-color' min={0} max={100} size={4} onChange={(e) => handleChange(e, 'volume')} value={ruleForm.volume} >
-              <Slider.Thumb>
+                <Slider.Thumb>
-                <View className="custom-thumb"></View>
+                  <View className='custom-thumb'></View>
-              </Slider.Thumb>
+                </Slider.Thumb>
-            </Slider>
+              </Slider>
+            </View>
           </View>
         </View>
-      </View>
+        <View className='card'>
-      <View className='card'>
+          <View className='funitem'>
-        <View className='funitem'>
+            <View className='funitem-text'>话筒音量</View>
-          <View className='funitem-text'>话筒音量</View>
+            <View className='funitem-right'>
-          <View className='funitem-right'>
+              <View className='num'>{ruleForm.music}%</View>
-            <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 className="custom-color" min={0} max={100} size={4} onChange={(e) => handleChange(e, 'music')} value={ruleForm.music} >
+                <Slider.Thumb>
-              <Slider.Thumb>
+                  <View className='custom-thumb'></View>
-                <View className="custom-thumb"></View>
+                </Slider.Thumb>
-              </Slider.Thumb>
+              </Slider>
-            </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='btns'>
-          <View className='funitem-text'>话筒混响模式</View>
+          <View className='btn-item' onClick={toPage}>
-          <View className='numlist'>
+            <Image src={game} className='img' />
-            {[1, 2, 3, 4, 5, 6].map(item => {
+            GAME
-              return <View className={`numlist-num ${ruleForm.reverb == item ? 'active' : ''} `} key={item} onClick={() => {
+          </View>
-                if (item == ruleForm.reverb) return
+          <View className='btn-item'>
-                handleChange(item, 'reverb')
+            <Image src={ai} className='img' />
-              }}>{item}</View>
+            AI
-            })}
           </View>
         </View>
       </View>
-      <View className='btns'>
+    </PullDownScrollView>
-        <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>
   )
 }

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;
 

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()
   // }
   /**

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

src/utils/taskQueue.js

@@ -27,7 +27,7 @@ class taskQueue {
     this.overtime = setTimeout(() => {
       this.stopOverTime()
       this.executeTask()
-    }, 800)
+    }, 300)
   }
   stopOverTime() {
     clearTimeout(this.overtime)