feat:添加按钮点击效果

miniprogram/pages/index/index.less

@@ -68,6 +68,7 @@ page {
     background-color: #fff;
     box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
     padding-top: 24rpx;
+    box-sizing: border-box;
 }
 
 

miniprogram/pages/index/index.ts

@@ -13,7 +13,6 @@ Page({
         showColorPopup: false,
         currentKey: 0,
         currentColor: '',
-        WATER_COLORS: WATER_COLORS,
     },
 
     onReady() {
@@ -68,27 +67,24 @@ Page({
 
     tapCard(e: WechatMiniprogram.TouchEvent) {
         const { url } = e.currentTarget.dataset;
-        console.log('navigateTo url:', url);
         wx.navigateTo({ url });
     },
 
     onConfirmInput(e: WechatMiniprogram.Input) {
         const { value } = e.detail;
         const characters = value.split('');
-        const shuffledColors = [...WATER_COLORS.basic12].sort(
+        const shuffledColors = [...WATER_COLORS.extended24].sort(
             () => Math.random() - 0.5,
         );
         const updatedCardList = characters.map((char, index) => ({
             color: shuffledColors[index % shuffledColors.length].hex,
             word: char,
         }));
-        console.log('updatedCardList', updatedCardList);
         this.drawCanvas(updatedCardList);
     },
 
     deleteWordCard(e: WechatMiniprogram.CustomEvent) {
         const { key, word } = e.detail;
-        console.log('deleteWordCard key:', key, 'word:', word);
         const { cardList } = this.data;
         const updatedCardList = cardList.filter((_, index) => index !== key);
 
@@ -131,7 +127,6 @@ Page({
 
     onColorTap(e: WechatMiniprogram.CustomEvent) {
         const { key, word, color } = e.detail;
-        console.log('onColorTap key:', key, 'word:', word, 'color:', color);
         this.setData({
             showColorPopup: true,
             currentKey: key,
@@ -146,4 +141,14 @@ Page({
             currentColor: '',
         });
     },
+
+    onChangeColor(e: WechatMiniprogram.CustomEvent) {
+        const { color } = e.detail;
+        const { currentKey, cardList } = this.data;
+        cardList[currentKey].color = color;
+        this.setData({
+            showColorPopup: false,
+            cardList,
+        });
+    },
 });

miniprogram/pages/index/index.wxml

@@ -41,7 +41,8 @@
     <color-picker
         show="{{showColorPopup}}"
         currentColor="{{currentColor}}"
-        bind:onClose="onCloseColorPopup" />
+        bind:onClose="onCloseColorPopup"
+        bind:onChange="onChangeColor" />
 </view>
 <view class="btn-area">
     <toy-button
@@ -53,4 +54,12 @@
         icon-class-prefix="toy-icon">
         下载打印
     </toy-button>
+    <!-- <toy-button
+        type="green"
+        width="680rpx"
+        disabled="{{cardList.length <= 0}}"
+        icon="download"
+        icon-class-prefix="toy-icon">
+        下载打印
+    </toy-button> -->
 </view>