From 3701d6995db5ee2bc87c3ee606febd6544cf0ea4 Mon Sep 17 00:00:00 2001
From: lefengyang <lefengyang@tencent.com>
Date: Thu, 27 Aug 2026 20:39:58 +0800
Subject: [PATCH] 颜色选择器
---
ledApp/pages/addTemplate/addTemplate.vue | 97 ++++++++++++++++++++++++++++++++----------------
1 files changed, 65 insertions(+), 32 deletions(-)
diff --git a/ledApp/pages/addTemplate/addTemplate.vue b/ledApp/pages/addTemplate/addTemplate.vue
index 3f36ce9..e846fb3 100644
--- a/ledApp/pages/addTemplate/addTemplate.vue
+++ b/ledApp/pages/addTemplate/addTemplate.vue
@@ -37,7 +37,11 @@
</view>
<view class="item">
<uv-radio-group v-model="selectedPreset" placement="column" @change="changePreset" labelSize="26rpx">
- <uv-radio class="spec_radio" v-for="(item, index) in presetList" :key="index" :label="'预制动画：'+item.name"
+ <uv-radio
+ class="spec_radio"
+ v-for="(item, index) in presetList"
+ :key="index"
+ :label="'预制动画：'+item.name+'（'+item.fpsTotal+'帧）'"
:name="item.name">
</uv-radio>
</uv-radio-group>
@@ -103,6 +107,7 @@
</view>
<view class="item">
<uv-button text="编辑" @click="popupAnimationOpen(index)" shape="circle" size="small" color="linear-gradient( 142deg, #6FD2FF 0%, #268DFF 100%)"></uv-button>
+ <uv-button text="复制" @click="copyFrame(index)" shape="circle" size="small" color="linear-gradient( 142deg, #FFB347 0%, #FF8C00 100%)"></uv-button>
</view>
</view>
</view>
@@ -187,11 +192,21 @@
<!-- 分辨率 -->
<uv-picker ref="pickerRatio" :columns="columnsRatio" @confirm="confirmRatio"></uv-picker>
- <!-- 颜色 -->
+ <!-- 颜色选择器 -->
<uv-popup ref="pickerColor" mode="bottom" round="10" :closeable="true">
- <view class="color_list">
- <view class="color_item" v-for="(item, index) in colorList" :class="{ hover: color === item }" :key="index" :style="{ backgroundColor: item }" @click="clickColor(item)"></view>
- </view>
+ <scroll-view scroll-y :show-scrollbar="false" class="color-picker-scroll">
+ <view class="color-picker-wrapper">
+ <view class="color-picker-inner">
+ <x-color-picker
+ v-model="color"
+ :show-alpha="false"
+ :save-history="true"
+ :options="pickerOptions"
+ @confirm="onColorConfirm"
+ @cancel="onColorCancel" />
+ </view>
+ </view>
+ </scroll-view>
</uv-popup>
<!-- 添加文字弹窗 -->
@@ -299,17 +314,11 @@
// columnsRatio: [
// ['12*24']
// ],
- colorList: [
- '#FF0000',
- '#00FF00',
- '#0000FF',
- '#FFFF00',
- '#FFA500',
- '#800080',
- '#00FFFF',
- '#FFC0CB'
- ],
- fpsIndex: 0,
+ color: '#FF0000',
+ gridRect: null,
+ pickerOptions: {
+ width: '50%',
+ },
fpsList: [],
tId: '',
tempInfo:{},
@@ -384,7 +393,7 @@
if (preset) {
this.specVal = preset.screen
this.modeVal = preset.mode
- this.total = preset.cycle
+ this.total = preset.fpsTotal
this.speed = preset.speed
if (preset.fpsList) {
this.fpsList = JSON.parse(preset.fpsList)
@@ -599,9 +608,11 @@
changeColor() {
this.$refs.pickerColor.open();
},
- clickColor(item) {
- console.log('confirmColor---', item);
- this.color = item;
+ onColorConfirm(colorObj) {
+ this.color = colorObj.hex;
+ this.$refs.pickerColor.close();
+ },
+ onColorCancel() {
this.$refs.pickerColor.close();
},
changeRatio() {
@@ -761,6 +772,26 @@
const colCount = this.width * (this.modeVal == 2 ? 10 : 1)
this.pixelData = new Array(this.height * colCount).fill('')
},
+ // 复制当前帧
+ copyFrame(index) {
+ uni.showModal({
+ title: '提示',
+ content: '确定要复制当前帧吗？',
+ success: (res) => {
+ if (res.confirm) {
+ const source = this.fpsList[index];
+ const copy = source ? [...source] : null;
+ this.fpsList.splice(index + 1, 0, copy);
+ this.total = this.fpsList.length;
+ uni.showToast({
+ title: '复制成功',
+ icon: 'success',
+ duration: 1500
+ });
+ }
+ }
+ });
+ },
// 屏幕规格
changeSpec(e) {
const ratio = e.split('*');
@@ -1200,20 +1231,18 @@
justify-content: center;
margin-bottom: 15rpx;
}
- .color_list {
- width: 100%;
+ .color_picker_wrapper {
+ padding: 30rpx 0;
display: flex;
justify-content: center;
- flex-wrap: wrap;
- gap: 30rpx;
+ }
+ .color-picker-scroll {
+ max-height: 90vh;
box-sizing: border-box;
- padding: 50rpx;
-
- .color_item {
- width: 30rpx;
- height: 30rpx;
- border-radius: 5rpx;
- }
+ }
+ .color-picker-wrapper {
+ zoom: 0.5;
+ padding: 0 25%;
}
.action_btn {
@@ -1399,7 +1428,11 @@
}
- .item {}
+ .item {
+ flex-direction:row;
+ gap:20rpx;
+ display:flex;
+ }
}
.temp_item {
--
Gitblit v1.10.0