From 11606b87ad7efd7c650618bbd5d2374a68f65f1f Mon Sep 17 00:00:00 2001
From: luojiayi <1712054227@qq.com>
Date: Fri, 18 Apr 2025 18:40:31 +0800
Subject: [PATCH] =?UTF-8?q?2025=E5=B9=B404=E6=9C=8818=E6=97=A518:40:29?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/color-diy/index.jsx | 27 ++++++++++++++-------------
 src/pages/index/index.jsx          |  9 +++++----
 src/pages/index/index.less         |  6 ++++--
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/color-diy/index.jsx b/src/components/color-diy/index.jsx
index 6026fff..8a23ecd 100644
--- a/src/components/color-diy/index.jsx
+++ b/src/components/color-diy/index.jsx
@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react'
 import Taro from '@tarojs/taro'
 
 export default function Index({ open, handleColorPicker }) {
-  const [data, setData] = useState({
+  let [data, setData] = useState({
     boundaryData: [], // 元素边界信息
     gradient: '',
     hex: '#000000',
@@ -42,23 +42,26 @@ export default function Index({ open, handleColorPicker }) {
       state.hex = '#' + rgbToHex(data.rgba)
       return { ...state }
     })
-
-    wx.nextTick(() => {
-      getBoundaryData();
-    })
   }, [])
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        getBoundaryData();
+      }, 200)
+    }
+  }, [open])
 
   // 获取元素边界值
   const getBoundaryData = () => {
-    Taro.createSelectorQuery().selectAll('.range-box').boundingClientRect((data) => {
-      if (!data || data.length === 0) {
+    Taro.createSelectorQuery().selectAll('.range-box').boundingClientRect((res) => {
+      if (!res || res.length === 0) {
         setTimeout(() => getBoundaryData(), 20)
         return
       }
-      setData((state) => {
-        state.boundaryData = data
-        return { ...state }
-      })
+      data.boundaryData = res
+      console.log(res);
+
+      setData({ ...data })
     }).exec()
   }
 
@@ -72,7 +75,6 @@ export default function Index({ open, handleColorPicker }) {
 
   const touchstart = (e) => {
     const index = e.currentTarget.dataset.index;
-
     const {
       pageX,
       pageY
@@ -86,7 +88,6 @@ export default function Index({ open, handleColorPicker }) {
       pageX,
       pageY
     } = e.touches[0];
-    console.log(pageX, pageY, index);
     setPointAndColor(pageX, pageY, index);
   }
 
diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 652c3e1..23cc8e3 100644
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -26,11 +26,12 @@ export default function Index() {
       </View >
 
       <View className='colorbox'>
-        <View className='colorbox-icon'></View>
-        <View className='colorbox-btn'>#EDEDED</View>
+        <View className='colorbox-icon' onClick={() => setOpen(true)}></View>
+        <View className='colorbox-btn' onClick={() => setOpen(true)}>#EDEDED</View>
       </View>
-      <View className='btn' onClick={() => setOpen(true)}>传输画面到音响屏幕</View>
-      <View className='hint'>*点击上方小格子并选取颜色</View>
+      <View className='hint'>*请选取喜欢的颜色，再点击小方格填入颜色；</View>
+
+      <View className='btn' >传输画面到音响屏幕</View>
 
       <ColorPicker open={open} handleColorPicker={handleColorPicker} />
     </View >
diff --git a/src/pages/index/index.less b/src/pages/index/index.less
index 9fad78e..290402f 100644
--- a/src/pages/index/index.less
+++ b/src/pages/index/index.less
@@ -70,7 +70,8 @@
   .hint {
     color: #999999;
     font-size: 26rpx;
-    margin: 24rpx;
+    margin: 32rpx 0 64rpx;
+    margin-left: 48rpx;
   }
 
   .colorbox {
@@ -83,6 +84,7 @@
       height: 54rpx;
       background: url('../../assets/chromaticCircle.png') no-repeat;
       background-size: 100% 100%;
+      margin-right: 16rpx;
     }
 
     .colorbox-btn {
@@ -107,7 +109,7 @@
     line-height: 80rpx;
     color: #FFFFFF;
     font-size: 30rpx;
-    margin: 24rpx auto;
+    margin: 0 auto;
   }