diff --git a/miniprogram/components/word-picker/word-picker.less b/miniprogram/components/word-picker/word-picker.less
index 4e15c79..783d9de 100644
--- a/miniprogram/components/word-picker/word-picker.less
+++ b/miniprogram/components/word-picker/word-picker.less
@@ -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;
+ }
+
}
\ No newline at end of file
diff --git a/miniprogram/components/word-picker/word-picker.ts b/miniprogram/components/word-picker/word-picker.ts
index dd3c950..ec74cea 100644
--- a/miniprogram/components/word-picker/word-picker.ts
+++ b/miniprogram/components/word-picker/word-picker.ts
@@ -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,
+ });
+ },
},
});
diff --git a/miniprogram/components/word-picker/word-picker.wxml b/miniprogram/components/word-picker/word-picker.wxml
index 3ada5e6..e56bd40 100644
--- a/miniprogram/components/word-picker/word-picker.wxml
+++ b/miniprogram/components/word-picker/word-picker.wxml
@@ -1,9 +1,13 @@
+
+
请选择文字
+ wx:for-index="categoryIndex"
+ wx:key="categoryIndex"
+ title="{{wordList[categoryIndex].categoryName}}">
@@ -46,7 +50,19 @@
class="selected-word-text"
wx:for="{{selectedWords}}"
wx:key="index"
- >{{item}}{{item}}{{index !== selectedWords.length - 1 ? '、' : ''}}
+
+
+ （已选{{selectedWords.length}}个） 确定
+
+
+ 取消
+
+
diff --git a/miniprogram/components/word-picker/word-picker.wxs b/miniprogram/components/word-picker/word-picker.wxs
new file mode 100644
index 0000000..01cd6ed
--- /dev/null
+++ b/miniprogram/components/word-picker/word-picker.wxs
@@ -0,0 +1,8 @@
+module.exports = {
+ isSelected: function (selectedWords, word) {
+ if (selectedWords && selectedWords.length > 0) {
+ return selectedWords.indexOf(word) !== -1;
+ }
+ return false;
+ },
+};
diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts
index 80b627f..04e35b1 100644
--- a/miniprogram/pages/index/index.ts
+++ b/miniprogram/pages/index/index.ts
@@ -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);
},
});
diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml
index cb382e2..504fc42 100644
--- a/miniprogram/pages/index/index.wxml
+++ b/miniprogram/pages/index/index.wxml
@@ -44,7 +44,7 @@
+ bind:onChange="onChangeWord" />
diff --git a/miniprogram/ui/button/button.wxs b/miniprogram/ui/button/button.wxs
index f41d067..fd9e0fb 100644
--- a/miniprogram/ui/button/button.wxs
+++ b/miniprogram/ui/button/button.wxs
@@ -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;
+ },
};