feat:添加随机生成和清空功能
This commit is contained in:
@@ -7,48 +7,64 @@ page {
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.wrapper {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
|
||||
margin: 30rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.wrapper-title {
|
||||
font-size: 32rpx;
|
||||
color: #141414;
|
||||
margin-bottom: 30rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// #previewWrapper {
|
||||
// margin-bottom: 200rpx;
|
||||
// }
|
||||
|
||||
.word-card-box {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.word-card-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
height: 190rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-wrapper {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
|
||||
margin: 30rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.wrapper-title {
|
||||
font-size: 32rpx;
|
||||
color: #141414;
|
||||
margin-bottom: 30rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.word-card-box {
|
||||
margin-top: 30rpx;
|
||||
|
||||
.word-card-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.word-input-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.operation-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.operation-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.canvas-wrapper {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
@@ -73,99 +89,4 @@ page {
|
||||
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
|
||||
padding-top: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* .btn-green {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 86rpx;
|
||||
width: 680rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(147, 211, 51, 1);
|
||||
box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 1);
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.btn-text {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: rgba(147, 211, 51, 0.5);
|
||||
box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 0.5);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
/* .color-picker-popup {
|
||||
border-radius: 20rpx;
|
||||
|
||||
.color-picker-container {
|
||||
width: 642rpx;
|
||||
// height: 876rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 36rpx 36rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
.color-picker-title {
|
||||
font-size: 32rpx;
|
||||
color: #141414;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.color-options-title {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
position: relative;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.color-options-title-text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
padding: 0 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.color-options-title-line {
|
||||
margin: 0 14rpx;
|
||||
height: 1rpx;
|
||||
background-color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.color-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.color-option {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 6rpx;
|
||||
margin: 14rpx;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border: 1rpx solid #ccc;
|
||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
} */
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
|
||||
import { WORDS } from '../../constants/words';
|
||||
import TextDrawService from '../../service/textDrawService';
|
||||
|
||||
Page({
|
||||
@@ -82,13 +83,15 @@ Page({
|
||||
updatedCardList?: Array<{ color: string; word: string }>,
|
||||
callback: () => void = () => { },
|
||||
) {
|
||||
if (updatedCardList && updatedCardList.length >= 0) {
|
||||
this.setData({ cardList: updatedCardList }, callback);
|
||||
if (updatedCardList) {
|
||||
this.setData({ cardList: updatedCardList }, () => {
|
||||
this.textDrawService?.draw(updatedCardList!);
|
||||
callback();
|
||||
});
|
||||
} else {
|
||||
updatedCardList = this.data.cardList;
|
||||
this.textDrawService?.draw(updatedCardList);
|
||||
}
|
||||
|
||||
this.textDrawService?.draw(updatedCardList);
|
||||
},
|
||||
|
||||
tapCard(e: WechatMiniprogram.TouchEvent) {
|
||||
@@ -247,4 +250,42 @@ Page({
|
||||
query: '/pages/index/index',
|
||||
};
|
||||
},
|
||||
|
||||
clearCardList() {
|
||||
this.drawCanvas([]);
|
||||
},
|
||||
|
||||
// 随机生成
|
||||
refreshCardList() {
|
||||
// 获取前4个分类的所有文字
|
||||
const allWords = WORDS.slice(0, 4).reduce((acc, category) => {
|
||||
return acc.concat(category.words);
|
||||
}, [] as string[]);
|
||||
|
||||
// 随机获取6个不重复的文字
|
||||
const selectedWords: string[] = [];
|
||||
while (selectedWords.length < 6) {
|
||||
const randomWord = allWords[Math.floor(Math.random() * allWords.length)];
|
||||
if (!selectedWords.includes(randomWord)) {
|
||||
selectedWords.push(randomWord);
|
||||
}
|
||||
}
|
||||
|
||||
// 随机获取6个不重复的颜色
|
||||
const colors = [...WATER_COLORS.basic12];
|
||||
const selectedColors: string[] = [];
|
||||
while (selectedColors.length < 6) {
|
||||
const randomIndex = Math.floor(Math.random() * colors.length);
|
||||
const color = colors.splice(randomIndex, 1)[0];
|
||||
selectedColors.push(color.hex);
|
||||
}
|
||||
|
||||
// 组合文字和颜色
|
||||
const cardList = selectedWords.map((word, index) => ({
|
||||
color: selectedColors[index],
|
||||
word
|
||||
}));
|
||||
console.log('cardList:', cardList);
|
||||
this.drawCanvas(cardList);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,7 +1,16 @@
|
||||
<view class="page-container">
|
||||
<view class="wrapper">
|
||||
<view class="setting-wrapper">
|
||||
<text class="wrapper-title">自定义涂鸦卡</text>
|
||||
<word-input bind:onConfirm="onConfirmInput" />
|
||||
<view class="word-input-box">
|
||||
<word-input bind:onConfirm="onConfirmInput" width="420rpx" />
|
||||
<toy-button
|
||||
type="green"
|
||||
bind:click="openSelectWordPopup"
|
||||
width="220rpx">
|
||||
选择文字
|
||||
</toy-button>
|
||||
</view>
|
||||
|
||||
<view class="word-card-box">
|
||||
<block
|
||||
wx:for="{{cardList}}"
|
||||
@@ -24,6 +33,25 @@
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="operation-box">
|
||||
<toy-button
|
||||
type="primary"
|
||||
bind:click="refreshCardList"
|
||||
width="420rpx"
|
||||
icon="refresh"
|
||||
icon-class-prefix="toy-icon">
|
||||
随机生成
|
||||
</toy-button>
|
||||
<toy-button
|
||||
disabled="{{cardList.length <= 0}}"
|
||||
type="green"
|
||||
bind:click="clearCardList"
|
||||
width="220rpx"
|
||||
icon="clear"
|
||||
icon-class-prefix="toy-icon">
|
||||
清空
|
||||
</toy-button>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
id="previewWrapper"
|
||||
|
||||
Reference in New Issue
Block a user