2025年04月18日18:40:29

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

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 >

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