91 lines
4.1 KiB
JavaScript
91 lines
4.1 KiB
JavaScript
import { View, Image } from '@tarojs/components'
|
||
import ColorPicker from "@/components/color-picker";
|
||
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"])
|
||
const [open, setOpen] = useState(false)
|
||
const [curColor, setCurColor] = useState({
|
||
hex: '#ff0000',
|
||
rgba: '255, 0, 0'
|
||
})
|
||
const toPage = () => {
|
||
router.navigate('/pages/history/index').then((data) => {
|
||
setList([...data])
|
||
})
|
||
}
|
||
const handleColorPicker = (e) => {
|
||
if (e) {
|
||
setCurColor(e)
|
||
}
|
||
setOpen(false)
|
||
}
|
||
const addColor = (index) => {
|
||
setList((state) => {
|
||
state[index] = curColor.rgba
|
||
return [...state]
|
||
})
|
||
}
|
||
const submit = () => {
|
||
let str = '7B55EA10B2'
|
||
for (let i = 0; i < list.length; i++) {
|
||
const item = list[i].split(',')
|
||
str += hex(item[0])
|
||
str += hex(item[1])
|
||
str += hex(item[2])
|
||
}
|
||
BLESDK.writeBleValue(new Uint8Array(strInsert(str)).buffer)
|
||
setTimeout(() => {
|
||
router.back()
|
||
}, 800)
|
||
}
|
||
const saveTemplate = () => {
|
||
let historyList = Taro.getStorageSync('colorList') || []
|
||
if (historyList.length > 10) {
|
||
historyList[0] = list
|
||
} else {
|
||
historyList.unshift(list)
|
||
}
|
||
Taro.setStorageSync('colorList', historyList)
|
||
Taro.showToast({
|
||
title: '保存成功',
|
||
icon: "none",
|
||
})
|
||
}
|
||
|
||
BLESDK.onBLECharacteristicValueChange((bytes) => {
|
||
if (bytes[0] == 0x7A && bytes[4] == 0xB3) {
|
||
Taro.showToast({ title: '操作成功', icon: 'none' })
|
||
}
|
||
})
|
||
|
||
return (
|
||
<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 >
|
||
|
||
<View className='colorbox'>
|
||
<View className='colorbox-icon' onClick={() => setOpen(true)}></View>
|
||
<View className='colorbox-btn' style={{ backgroundColor: curColor.hex }} onClick={() => setOpen(true)}>{curColor.hex}</View>
|
||
</View>
|
||
<View className='hint'>*请选取喜欢的颜色，再点击小方格填入颜色；</View>
|
||
<View className='btns'>
|
||
<View className='btn' onClick={saveTemplate}>保存模板</View>
|
||
<View className='btn' onClick={submit}>传输到音响屏幕</View>
|
||
</View>
|
||
<ColorPicker open={open} onChange={handleColorPicker} />
|
||
</View >
|
||
)
|
||
}
|