2025年04月18日16:47:55

iconfont.json

@@ -1,10 +0,0 @@
-{
-  "symbol_url": "http://at.alicdn.com/t/c/font_4676378_sj2smiyxso7.js",
-  "save_dir": "./src/components/iconfont",
-  "use_typescript": false,
-  "platforms": ["weapp"],
-  "use_rpx": true,
-  "trim_icon_prefix": "",
-  "default_icon_size": 18,
-  "design_width": 750
-}

jsconfig.json

@@ -8,8 +8,7 @@
       "@/images/*": ["./src/images/*"],
       "@/api/*": ["./src/api/*"],
       "@/store/*": ["./src/store/*"],
-      "@/baseRouter/*": ["./src/baseRouter/*"],
-      "@/src/*": ["./src/*"],
+      "@/src/*": ["./src/*"]
     }
   }
 }

package.json

@@ -83,7 +83,6 @@
     "postcss": "^8.4.18",
     "react-refresh": "^0.11.0",
     "stylelint": "^14.4.0",
-    "taro-iconfont-cli": "^3.3.0",
     "ts-node": "^10.9.1",
     "webpack": "5.78.0"
   }

src/app.js

@@ -5,7 +5,7 @@ import BLESDK from './utils/ble'
 
 function App({ children }) {
   useLaunch(() => {
-    BLESDK.openBluetoothAdapter()
+    // BLESDK.openBluetoothAdapter()
   })
 
   // children 是将要会渲染的页面

src/app.less

@@ -1,10 +1,17 @@
 .index {
+  flex: 1;
+}
+
+page {
+  margin: 0;
+  padding: 0;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  align-items: center;
+
 }

src/components/color-diy/index.jsx

@@ -4,7 +4,7 @@ import './index.less'
 import { useEffect, useState } from 'react'
 import Taro from '@tarojs/taro'
 
-export default function Index() {
+export default function Index({ open, handleColorPicker }) {
   const [data, setData] = useState({
     boundaryData: [], // 元素边界信息
     gradient: '',
@@ -37,10 +37,6 @@ export default function Index() {
   })
 
   useEffect(() => {
-    show()
-  }, [])
-
-  const show = () => {
     setData((state) => {
       state.hsb = rgbToHsb(data.rgba)
       state.hex = '#' + rgbToHex(data.rgba)
@@ -50,7 +46,7 @@ export default function Index() {
     wx.nextTick(() => {
       getBoundaryData();
     })
-  }
+  }, [])
 
   // 获取元素边界值
   const getBoundaryData = () => {
@@ -67,15 +63,11 @@ export default function Index() {
   }
 
   const confirm = () => {
-    const { rgba, hex } = data
-    console.log({
-      rgba: [rgba.r, rgba.g, rgba.b, rgba.a],
-      hex
-    });
+    handleColorPicker({ rgba: [data.rgba.r, data.rgba.g, data.rgba.b, data.rgba.a], hex: data.hex })
   }
 
   const close = () => {
-
+    handleColorPicker()
   }
 
   const touchstart = (e) => {
@@ -94,6 +86,7 @@ export default function Index() {
       pageX,
       pageY
     } = e.touches[0];
+    console.log(pageX, pageY, index);
     setPointAndColor(pageX, pageY, index);
   }
 
@@ -350,17 +343,17 @@ export default function Index() {
     };
   }
   const { bgcolor, point, rgba } = data
+  useEffect(() => {
+  }, [])
   return (
-    <View className="cp-wrapper">
-      <View className='cp-mask' onClick={close}></View>
-      <View className="cp-box">
+    <View className={`cp-wrapper ${open ? 'wrapper_show' : ''}`} >
+      <View className={`cp-box ${open ? 'dialog_show' : ''}`}>
         <View className="cp-header">
-          <View className="cp-header-button" onClick={close}>取消</View>
-          <View className="cp-header-button cp-button-confirm" onClick={confirm}>确认</View>
+          <View className="cp-header-icon cancel" onClick={close}></View>
+          <View className="cp-header-title" >颜色选取</View>
+          <View className="cp-header-icon confirm" onClick={confirm}></View>
         </View>
 
-
-
         <View className="cp-color-box" style={'background:' + ('rgb(' + bgcolor.r + ',' + bgcolor.g + ',' + bgcolor.b + ')') + ';'}>
           <View className="cp-background range-box" data-index="0" onTouchStart={touchstart} onTouchMove={touchmove} >
             <View className="cp-color-mask"></View>
@@ -370,7 +363,7 @@ export default function Index() {
 
         <View className="cp-control-box">
           <View className="cp-control-color">
-            <View className="cp-control-color-content" style={'background:' + ('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a + ')') + ';'}></View>
+            <View className="cp-control-color-content" style={'background:' + ('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a + ')') + ';'}>{data.hex}</View>
           </View>
           <View className="cp-control-box-item">
             <View className="cp-controller range-box" data-index="1" onTouchStart={touchstart} onTouchMove={touchmove}>
@@ -378,15 +371,10 @@ export default function Index() {
                 <View className="cp-circle" style={'left:' + (point[1].left - 12 + 'px') + ';'}></View>
               </View>
             </View>
-            <View className="cp-controller range-box" data-index="2" onTouchStart={touchstart} onTouchMove={touchmove}>
-              <View className="cp-transparency" style={'background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + '));'}>
-                <View className="cp-circle" style={'left:' + (point[2].left - 12 + 'px') + ';'}></View>
           </View>
         </View>
       </View>
     </View>
 
-      </View>
-    </View>
   )
 }

src/components/color-diy/index.less

@@ -6,17 +6,33 @@
   right: 0;
   overflow: hidden;
   box-sizing: border-box;
+  z-index: -100;
+  background: rgba(0, 0, 0, 0.4);
+  transition: all 0.3s;
+  opacity: 0;
+}
+
+.wrapper_show {
+  opacity: 1;
   z-index: 9999;
 }
 
+
 .cp-box {
   width: 100%;
   position: absolute;
   bottom: 0;
-  padding: 30rpx 0;
+  padding: 30rpx 0 50rpx;
   padding-top: 0;
   background: #fff;
   transition: all 0.3s;
+  transform: translate(0, 100%);
+  border-radius: 16rpx 16rpx 0 0;
+  overflow: hidden;
+}
+
+.dialog_show {
+  transform: translate(0, 0);
 }
 
 .cp-header {
@@ -24,47 +40,45 @@
   justify-content: space-between;
   align-items: center;
   height: 100rpx;
-  border-bottom: 1px #eee solid;
   box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
   background: #fff;
   padding-left: 20rpx;
   padding-right: 20rpx;
 }
 
-.cp-header-button {
+.cp-header-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 150rpx;
-  height: 80rpx;
-  font-size: 30rpx;
-  color: #666;
-  border: 2rpx solid #3963bc;
-  border-radius: 15rpx;
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.cancel {
+  background: url('../../assets/cancel.png') no-repeat center center;
+  background-size: 30rpx;
+}
+
+.confirm {
+  background: url('../../assets/confirm.png') no-repeat center center;
+  background-size: 30rpx;
+}
+
+.cp-header-title {
+  text-align: center;
 }
 
 .cp-button-confirm {
-  background-color: #3963bc;
+  background-color: #5F93FA;
   color: #fff;
 }
 
-.cp-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: -1;
-  transition: all 0.3s;
-}
 
 .cp-color-box {
   position: relative;
   height: 400rpx;
   background: rgb(255, 0, 0);
   overflow: hidden;
-  box-sizing: border-box;
   margin: 0 20rpx;
   margin-top: 20rpx;
   box-sizing: border-box;
@@ -77,6 +91,7 @@
   right: 0;
   bottom: 0;
   background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+
 }
 
 .cp-color-mask {
@@ -116,9 +131,9 @@
 
 .cp-control-color {
   flex-shrink: 0;
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 50%;
+  width: 170rpx;
+  height: 60rpx;
+  border-radius: 90rpx;
   background-color: #fff;
   background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
     linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
@@ -130,12 +145,16 @@
 .cp-control-color-content {
   width: 100%;
   height: 100%;
+  text-align: center;
+  line-height: 60rpx;
+  font-size: 26rpx;
+  color: #fff;
 }
 
 .cp-control-box-item {
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   padding: 0 30rpx;
 }
@@ -154,6 +173,7 @@
 .cp-hue {
   width: 100%;
   height: 100%;
+  border-radius: 30px;
   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
 }
 

src/pages/index copy/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "首页",
+});

src/pages/index copy/index.jsx

@@ -0,0 +1,62 @@
+import { View } from '@tarojs/components'
+import './index.less'
+import { Button } from "@taroify/core"
+import BLESDK from '../../utils/ble'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { useState } from 'react'
+import { getInitData } from '@/utils/sendOrder'
+
+export default function Index() {
+  const [deviceInfo, setDeviceInfo] = useState(BLESDK.deviceInfo)
+  const [disabled, setDisabled] = useState(!!BLESDK.deviceInfo.state)
+  const [loading, setLoading] = useState(false)
+  const deviceCallBack = () => {
+    setDeviceInfo({ ...BLESDK.deviceInfo })
+    if (BLESDK.deviceInfo.state) {
+      setDisabled(true)
+    }
+  }
+  const lookSleep = () => {
+    // if (!BLESDK.deviceInfo.state) return Taro.showToast({ title: '请先连接设备', icon: 'none' })
+    Taro.navigateTo({ url: '/pages/funList/index' })
+  }
+
+  useDidShow(() => {
+    BLESDK.deviceCallBack(deviceCallBack)
+    setDeviceInfo({ ...BLESDK.deviceInfo })
+    setDisabled(!!BLESDK.deviceInfo.state)
+  })
+
+  const searchBluetooth = () => {
+    BLESDK.startBluetoothDevicesDiscovery()
+    setLoading(true)
+    setDisabled(true)
+    setTimeout(() => {
+      BLESDK.stopBluetoothDevicesDiscovery();
+      setLoading(false)
+      setDisabled(!!BLESDK.deviceInfo.state)
+    }, 6000)
+  }
+
+  return (
+    <View className="index">
+      <View className='device'>
+        <View className='item'>
+          <View className='item-label'>NAME：</View>
+          <View className='item-text'>{deviceInfo.name || '--'}</View>
+        </View>
+        <View className='item'>
+          <View className='item-label'>MAC：</View>
+          <View className='item-text'>{deviceInfo.mac || '--'}</View>
+        </View>
+        <View className='item'>
+          <View className='item-label'>连接状态：</View>
+          <View className='item-text' style={{ color: deviceInfo.state ? 'green' : 'red' }}>{deviceInfo.name ? deviceInfo.state ? '已连接' : '未连接' : '--'}</View>
+        </View>
+      </View>
+      <Button color="info" className='btn' disabled={!!!BLESDK.deviceInfo.state} onClick={getInitData} >获取设备初始化状态</Button>
+      <Button color="info" className='btn' disabled={!!!BLESDK.deviceInfo.state} onClick={lookSleep}>功能设置</Button>
+      <Button color="warning" className='btn connect' disabled={disabled} loading={loading} onClick={searchBluetooth}>连接设备</Button>
+    </View >
+  )
+}

src/pages/index copy/index.less

@@ -0,0 +1,24 @@
+.btn {
+  width: 80%;
+  margin-top: 20rpx;
+}
+
+.device {
+  .item {
+    width: 500rpx;
+    display: flex;
+    align-items: center;
+    font-size: 28rpx;
+    margin-bottom: 10rpx;
+
+    .item-label {
+      width: 160rpx;
+      text-align: right;
+    }
+  }
+}
+
+.connect {
+  position: fixed;
+  bottom: 60px;
+}

src/pages/index/index.jsx

@@ -1,62 +1,38 @@
-import { View } from '@tarojs/components'
+import { View, Image } from '@tarojs/components'
 import './index.less'
-import { Button } from "@taroify/core"
-import BLESDK from '../../utils/ble'
-import Taro, { useDidShow } from '@tarojs/taro'
-import { useState } from 'react'
-import { getInitData } from '@/utils/sendOrder'
+import ColorPicker from "@/components/color-diy";
+import { useEffect, useState } from 'react';
+import history from "../../assets/history.png";
 
 export default function Index() {
-  const [deviceInfo, setDeviceInfo] = useState(BLESDK.deviceInfo)
-  const [disabled, setDisabled] = useState(!!BLESDK.deviceInfo.state)
-  const [loading, setLoading] = useState(false)
-  const deviceCallBack = () => {
-    setDeviceInfo({ ...BLESDK.deviceInfo })
-    if (BLESDK.deviceInfo.state) {
-      setDisabled(true)
-    }
-  }
-  const lookSleep = () => {
-    // if (!BLESDK.deviceInfo.state) return Taro.showToast({ title: '请先连接设备', icon: 'none' })
-    Taro.navigateTo({ url: '/pages/funList/index' })
-  }
+  const list = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',]
+  const [open, setOpen] = useState(false)
 
-  useDidShow(() => {
-    BLESDK.deviceCallBack(deviceCallBack)
-    setDeviceInfo({ ...BLESDK.deviceInfo })
-    setDisabled(!!BLESDK.deviceInfo.state)
-  })
 
-  const searchBluetooth = () => {
-    BLESDK.startBluetoothDevicesDiscovery()
-    setLoading(true)
-    setDisabled(true)
-    setTimeout(() => {
-      BLESDK.stopBluetoothDevicesDiscovery();
-      setLoading(false)
-      setDisabled(!!BLESDK.deviceInfo.state)
-    }, 6000)
+  const handleColorPicker = (e) => {
+    setOpen(false)
   }
+  useEffect(() => {
 
+  }, [])
   return (
     <View className="index">
-      <View className='device'>
-        <View className='item'>
-          <View className='item-label'>NAME：</View>
-          <View className='item-text'>{deviceInfo.name || '--'}</View>
+      <View className='head'>
+        <View className='head-left'>像素跳动</View>
+        <View className='head-right'>  <Image className='icon' src={history} />历史记录</View>
       </View>
-        <View className='item'>
-          <View className='item-label'>MAC：</View>
-          <View className='item-text'>{deviceInfo.mac || '--'}</View>
+      <View className="grid">
+        {list.map((item, index) => <View className={`grid-item ${index == 0 ? 'active' : ''}`} key={index}></View>)}
+      </View >
+
+      <View className='colorbox'>
+        <View className='colorbox-icon'></View>
+        <View className='colorbox-btn'>#EDEDED</View>
       </View>
-        <View className='item'>
-          <View className='item-label'>连接状态：</View>
-          <View className='item-text' style={{ color: deviceInfo.state ? 'green' : 'red' }}>{deviceInfo.name ? deviceInfo.state ? '已连接' : '未连接' : '--'}</View>
-        </View>
-      </View>
-      <Button color="info" className='btn' disabled={!!!BLESDK.deviceInfo.state} onClick={getInitData} >获取设备初始化状态</Button>
-      <Button color="info" className='btn' disabled={!!!BLESDK.deviceInfo.state} onClick={lookSleep}>功能设置</Button>
-      <Button color="warning" className='btn connect' disabled={disabled} loading={loading} onClick={searchBluetooth}>连接设备</Button>
+      <View className='btn' onClick={() => setOpen(true)}>传输画面到音响屏幕</View>
+      <View className='hint'>*点击上方小格子并选取颜色</View>
+
+      <ColorPicker open={open} handleColorPicker={handleColorPicker} />
     </View >
   )
 }

src/pages/index/index.less

@@ -1,24 +1,114 @@
-.btn {
-  width: 80%;
-  margin-top: 20rpx;
-}
+.index {
+  background: #F7F7F7;
 
-.device {
-  .item {
-    width: 500rpx;
+  // overflow-y: scroll;
+  .head {
     display: flex;
     align-items: center;
-    font-size: 28rpx;
-    margin-bottom: 10rpx;
+    justify-content: space-between;
+    padding: 0 32rpx;
+    margin-top: 32rpx;
+    box-sizing: border-box;
 
-    .item-label {
-      width: 160rpx;
-      text-align: right;
+    .head-left {
+      color: #5F93FA;
+      font-size: 32rpx;
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: '';
+        width: 6rpx;
+        height: 36rpx;
+        border-radius: 4rpx;
+        background: #5F93FA;
+        display: inline-block;
+        margin-right: 12rpx;
       }
     }
-}
 
-.connect {
-  position: fixed;
-  bottom: 60px;
+    .head-right {
+      width: 184rpx;
+      height: 50rpx;
+      border-radius: 44rpx;
+      background: #DEE9FF;
+      text-indent: 58rpx;
+      font-size: 26rpx;
+      color: #5F93FA;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        width: 26rpx;
+        height: 26rpx;
+        margin-right: 10rpx;
+      }
+    }
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    gap: 8rpx;
+    padding: 32rpx;
+    box-sizing: border-box;
+
+    .grid-item {
+      width: 64px;
+      height: 64px;
+      border-radius: 8px;
+      background: #FAFAFA;
+      border: 1px solid #999999;
+
+      &.active {
+        border: 1px solid #5F93FA;
+      }
+    }
+  }
+
+  .hint {
+    color: #999999;
+    font-size: 26rpx;
+    margin: 24rpx;
+  }
+
+  .colorbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .colorbox-icon {
+      width: 54rpx;
+      height: 54rpx;
+      background: url('../../assets/chromaticCircle.png') no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .colorbox-btn {
+      width: 180rpx;
+      height: 64rpx;
+      border-radius: 90rpx;
+      background: #38F1E5;
+      border: 2rpx solid #EDEDED;
+      text-align: center;
+      line-height: 64rpx;
+      font-size: 26rpx;
+      color: #fff;
+    }
+  }
+
+  .btn {
+    width: 686rpx;
+    height: 80rpx;
+    border-radius: 50rpx;
+    background: #5F93FA;
+    text-align: center;
+    line-height: 80rpx;
+    color: #FFFFFF;
+    font-size: 30rpx;
+    margin: 24rpx auto;
+  }
+
+
 }