joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:选择文字

Browse Source
This commit is contained in:
joey
2025-06-30 17:14:03 +08:00
parent 23ad49d333
commit 654afced6f
10 changed files with 129 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/components/word-picker/word-picker.less
+16 -4
View File
@@ -37,9 +37,9 @@
.word-list {
display: grid;
grid-template-columns: repeat(7, 72rpx);
grid-template-rows: repeat(20, 72rpx);
gap: 24rpx;
grid-template-columns: repeat(6, 72rpx);
grid-template-rows: repeat(1, 72rpx);
gap: 40rpx;
justify-content: center;
// box-shadow: 0 0 -10rpx rgba(0, 0, 0, 0.2);
// align-items: flex-start;
@@ -49,12 +49,18 @@
height: 72rpx;
border-radius: 16rpx;
background: rgba(240, 240, 240, 1);
box-shadow: 3.9px 3.9px 5.2px rgba(0, 0, 0, 0.15);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #141414;
&.selected {
background: rgb(147, 211, 51);
color: #ffffff;
box-shadow: 0px 2px 4px rgba(147, 211, 51, 0.15);
}
}
}
@@ -76,4 +82,10 @@
}
}
.btn-area {
display: flex;
justify-content: space-between;
margin-bottom: 96rpx;
}
}
miniprogram/components/word-picker/word-picker.ts
+34 -5
View File
@@ -14,20 +14,20 @@ Component({
type: Number,
value: 0,
},
selectedWords: {
type: Array,
value: [],
},
},
/**
* 组件的初始数据
*/
data: {
wordList: WORDS,
selectedWords: [],
},
lifetimes: {
ready() {
// setTimeout(() => {
// console.log('111');
// this.selectComponent('#tabs').resize();
// }, 1000);
console.log('selectedWords', this.data.selectedWords);
},
},
/**
@@ -38,8 +38,37 @@ Component({
this.triggerEvent('onClose');
},
onChange() {
this.triggerEvent('onChange', { selectedWords: this.data.selectedWords });
},
onTabChange(e: WechatMiniprogram.CustomEvent) {
this.setData({ currentTab: e.detail });
},
onWordClick(e: WechatMiniprogram.TouchEvent) {
const { word } = e.currentTarget.dataset;
const { selectedWords } = this.data;
let newSelectedWords = selectedWords as string[];
// 如果是已选中的文字,直接取消选中
if (newSelectedWords.includes(word)) {
newSelectedWords = newSelectedWords.filter((item) => item !== word);
} else {
// 如果是未选中的文字,先判断是否已选满6个
if (newSelectedWords.length >= 6) {
wx.showToast({
title: '最多选择6个字',
icon: 'none',
});
return;
}
newSelectedWords = [...newSelectedWords, word];
}
this.setData({
selectedWords: newSelectedWords,
});
},
},
});
miniprogram/components/word-picker/word-picker.wxml
+23 -7
View File
@@ -1,9 +1,13 @@
<wxs module="wxs" src="./word-picker.wxs"></wxs>
<van-popup
show="{{ show }}"
bind:close="onClose"
round
close-on-click-overlay="{{false}}"
safe-area-inset-bottom="{{true}}"
position="bottom"
custom-style="height: 65%"
custom-style="height: 70%"
custom-class="word-picker">
<view class="word-picker-title">请选择文字</view>
<van-tabs
@@ -21,14 +25,14 @@
bind:change="onTabChange">
<van-tab
wx:for="{{wordList}}"
wx:for-index="wordIndex"
wx:key="wordIndex"
title="{{wordList[wordIndex].categoryName}}">
wx:for-index="categoryIndex"
wx:key="categoryIndex"
title="{{wordList[categoryIndex].categoryName}}">
<view class="word-list-wrapper">
<view class="word-list">
<view
class="word-item"
wx:for="{{wordList[wordIndex].words}}"
class="word-item {{wxs.isSelected(selectedWords, item) ? 'selected' : ''}}"
wx:for="{{wordList[categoryIndex].words}}"
wx:key="index"
data-word="{{item}}"
bind:tap="onWordClick">
@@ -46,7 +50,19 @@
class="selected-word-text"
wx:for="{{selectedWords}}"
wx:key="index"
>{{item}}</text
>{{item}}{{index !== selectedWords.length - 1 ? '、' : ''}}</text
>
</view>
<view class="btn-area">
<toy-button
type="primary"
bind:click="onChange"
width="420rpx"
disabled="{{selectedWords.length <= 0}}">
（已选{{selectedWords.length}}个） 确定
</toy-button>
<toy-button type="white" bind:click="onClose" width="220rpx">
取消
</toy-button>
</view>
</van-popup>
miniprogram/components/word-picker/word-picker.wxs
+8
View File
@@ -0,0 +1,8 @@
module.exports = {
isSelected: function (selectedWords, word) {
if (selectedWords && selectedWords.length > 0) {
return selectedWords.indexOf(word) !== -1;
}
return false;
},
};
miniprogram/pages/index/index.ts
+13 -6
View File
@@ -16,7 +16,6 @@ Page({
currentColor: '',
showIntroductionPopup: false,
showSelectWordPopup: false, // 选择文字弹窗
selectedWords: [] as string[],
},
onLoad() {
@@ -295,15 +294,23 @@ Page({
showSelectWordPopup: true,
});
},
closeSelectWordPopup() {
this.setData({
showSelectWordPopup: false,
});
},
onSelectWord(e: WechatMiniprogram.CustomEvent) {
const { words } = e.detail;
this.setData({
selectedWords: words,
});
onChangeWord(e: WechatMiniprogram.CustomEvent) {
const selectedWords = e.detail.selectedWords as string[];
console.log('selectedWords:', selectedWords);
const colors = [...WATER_COLORS.basic12];
const cardList = selectedWords.map((word, index) => ({
color: colors[index].hex,
word,
}));
this.setData({ showSelectWordPopup: false });
this.drawCanvas(cardList);
},
});
miniprogram/pages/index/index.wxml
+3 -2
View File
@@ -44,7 +44,7 @@
</toy-button>
<toy-button
disabled="{{cardList.length <= 0}}"
type="green"
type="white"
bind:click="clearCardList"
width="220rpx"
icon="clear"
@@ -73,8 +73,9 @@
bind:onChange="onChangeColor" />
<word-picker
show="{{showSelectWordPopup}}"
selectedWords="{{selectedWords}}"
bind:onClose="closeSelectWordPopup"
bind:onSelect="onSelectWord" />
bind:onChange="onChangeWord" />
</view>
<view class="btn-area">
<toy-button
miniprogram/ui/button/button.less
+11 -9
View File
@@ -27,11 +27,11 @@ wx-button:not([size=mini]) {
&--primary {
background: rgba(255, 215, 25, 1);
box-shadow: 0px 10rpx 4rpx #DBB917;
box-shadow: 0px 10rpx 2rpx #DBB917;
&.disabled {
background: rgba(255, 215, 25, 0.5);
box-shadow: 0px 10rpx 4rpx rgba(219, 185, 23, 0.5);
box-shadow: 0px 10rpx 2rpx rgba(219, 185, 23, 0.5);
}
&.active {
@@ -43,11 +43,11 @@ wx-button:not([size=mini]) {
&--green {
background: #93d333;
box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 1);
box-shadow: 0px 10rpx 2rpx rgba(121, 185, 21, 1);
&.disabled {
background: rgba(147, 211, 51, 0.5);
box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 0.5);
box-shadow: 0px 10rpx 2rpx rgba(121, 185, 21, 0.5);
}
&.active {
@@ -60,18 +60,20 @@ wx-button:not([size=mini]) {
&--white {
color: rgba(34, 36, 37, 0.9);
background: #fff;
box-shadow: 0 6rpx 0 rgba(255, 255, 255, 0.7);
box-shadow: 0 8rpx 0rpx rgba(223, 220, 220, 1);
border: 2rpx solid rgba(223, 220, 220, 1);
&.disabled {
color: rgba(34, 36, 37, 0.7);
background: rgba(255, 255, 255, 0.8);
box-shadow: 0px 6rpx 0px rgba(255, 255, 255, 0.55);
box-shadow: 0px 8rpx 0rpx rgba(223, 220, 220, 0.9);
}
&.plain {
color: #fff;
background: rgba(255, 255, 255, 0.2);
border: 2rpx solid rgba(255, 255, 255, 1);
box-shadow: 0px 6rpx 0px rgba(255, 255, 255, 0.88);
box-shadow: 0px 8rpx 0rpx rgba(255, 255, 255, 0.88);
// &.disabled {
// background: rgba(255, 255, 255, 0.2);
@@ -81,8 +83,8 @@ wx-button:not([size=mini]) {
}
&.active {
transform: translateY(6rpx);
box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);
transform: translateY(8rpx);
box-shadow: 0 0 0 rgba(223, 220, 220, 1);
/* 阴影效果 */
}
}
miniprogram/ui/button/button.ts
+9 -1
View File
@@ -82,7 +82,15 @@ Component({
*/
data: {},
lifetimes: {
attached() {},
attached() {
const { type, plain, disabled } = this.data;
if (type === 'white' && !plain) {
const iconColor = disabled ? 'rgba(34, 36, 37, 0.7)' : 'rgba(34, 36, 37, 0.9)';
this.setData({
iconColor,
});
}
},
},
/**
* 组件的方法列表
miniprogram/ui/button/button.wxml
+1 -1
View File
@@ -40,7 +40,7 @@
size="1.2em"
name="{{ icon }}"
size="{{ iconSize }}"
color="{{ iconColor }}"
color="{{ wxs.getIconColor(iconColor, type, plain, disabled) }}"
class-prefix="{{ iconClassPrefix }}"
class="toy-button__icon" />
</block>
miniprogram/ui/button/button.wxs
+11 -4
View File
@@ -6,18 +6,25 @@ module.exports = {
var loading = dataSet.loading;
if (instance && !disabled && !loading) {
instance.addClass('active')
instance.addClass('active');
}
},
touchEnd: function (event, ownerInstance) {
var instance = event.instance
var instance = event.instance;
var dataSet = instance.getDataset();
var disabled = dataSet.disabled;
var loading = dataSet.loading;
if (instance && !disabled && !loading) {
instance.removeClass('active')
instance.removeClass('active');
}
},
getIconColor: function (iconColor, type, plain, disabled) {
if (type === 'white' && !plain) {
return disabled ? 'rgba(34, 36, 37, 0.7)' : 'rgba(34, 36, 37, 0.9)';
}
return iconColor;
},
};