feat:添加随机生成和清空功能
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -6,32 +6,46 @@
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "5374234",
|
||||
"name": "guide-5",
|
||||
"font_class": "guide-5",
|
||||
"unicode": "e670",
|
||||
"unicode_decimal": 58992
|
||||
"icon_id": "29525216",
|
||||
"name": "moon",
|
||||
"font_class": "moon",
|
||||
"unicode": "e92b",
|
||||
"unicode_decimal": 59691
|
||||
},
|
||||
{
|
||||
"icon_id": "24036363",
|
||||
"name": "guide-4",
|
||||
"font_class": "guide-4",
|
||||
"unicode": "e693",
|
||||
"unicode_decimal": 59027
|
||||
"icon_id": "35089838",
|
||||
"name": "evernote",
|
||||
"font_class": "evernote",
|
||||
"unicode": "e6ea",
|
||||
"unicode_decimal": 59114
|
||||
},
|
||||
{
|
||||
"icon_id": "37120878",
|
||||
"name": "guide-3",
|
||||
"font_class": "guide-3",
|
||||
"unicode": "e622",
|
||||
"unicode_decimal": 58914
|
||||
"icon_id": "12578929",
|
||||
"name": "refresh2",
|
||||
"font_class": "refresh2",
|
||||
"unicode": "e6e3",
|
||||
"unicode_decimal": 59107
|
||||
},
|
||||
{
|
||||
"icon_id": "39563133",
|
||||
"name": "guide-2",
|
||||
"font_class": "guide-2",
|
||||
"unicode": "e6c4",
|
||||
"unicode_decimal": 59076
|
||||
"icon_id": "18441414",
|
||||
"name": "sun",
|
||||
"font_class": "sun",
|
||||
"unicode": "e712",
|
||||
"unicode_decimal": 59154
|
||||
},
|
||||
{
|
||||
"icon_id": "21937756",
|
||||
"name": "refresh",
|
||||
"font_class": "refresh",
|
||||
"unicode": "e6c2",
|
||||
"unicode_decimal": 59074
|
||||
},
|
||||
{
|
||||
"icon_id": "27107465",
|
||||
"name": "clear",
|
||||
"font_class": "clear",
|
||||
"unicode": "e63b",
|
||||
"unicode_decimal": 58939
|
||||
},
|
||||
{
|
||||
"icon_id": "41982380",
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -5,7 +5,16 @@ Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {},
|
||||
properties: {
|
||||
width: {
|
||||
type: String,
|
||||
value: '', // 按钮宽度
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
value: '请输入文字',
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<view class="word-input-container">
|
||||
<view
|
||||
class="word-input-container"
|
||||
style="{{width ? 'width:' + width + ';' : ''}}">
|
||||
<van-icon
|
||||
class-prefix="toy-icon"
|
||||
name="translate"
|
||||
@@ -7,6 +9,6 @@
|
||||
<input
|
||||
class="word-input"
|
||||
type="text"
|
||||
placeholder="请输入小朋友喜欢的文字"
|
||||
placeholder="{{placeholder}}"
|
||||
bindconfirm="onConfirm" />
|
||||
</view>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -20,6 +20,7 @@ wx-button:not([size=mini]) {
|
||||
font-size: @button-default-font-size;
|
||||
color: @button-default-color;
|
||||
padding: 0 44rpx;
|
||||
font-weight: normal;
|
||||
// width: auto !important;
|
||||
// transition: all 0.04s;
|
||||
|
||||
@@ -90,7 +91,7 @@ wx-button:not([size=mini]) {
|
||||
|
||||
.loading-class,
|
||||
&__icon {
|
||||
margin-right: 24rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user