From efa213bfe19b20d779196aae679351927779e9cf Mon Sep 17 00:00:00 2001 From: joey Date: Tue, 10 Jun 2025 17:32:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=AE=8C=E6=88=90=E9=A2=9C=E8=89=B2?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E5=92=8Cbutton=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/color-picker/color-picker.json | 8 ++ .../components/color-picker/color-picker.less | 103 ++++++++++++++++++ .../components/color-picker/color-picker.ts | 44 ++++++++ .../components/color-picker/color-picker.wxml | 40 +++++++ miniprogram/components/word-card/word-card.ts | 5 + .../components/word-card/word-card.wxml | 5 +- miniprogram/pages/index/index.json | 5 +- miniprogram/pages/index/index.less | 81 +++++++++++++- miniprogram/pages/index/index.ts | 36 +++++- miniprogram/pages/index/index.wxml | 59 +++++++++- miniprogram/ui/button/button.json | 6 +- miniprogram/ui/button/button.less | 41 +++++++ miniprogram/ui/button/button.ts | 58 +++++++++- miniprogram/ui/button/button.wxml | 41 +++++++ 14 files changed, 515 insertions(+), 17 deletions(-) create mode 100644 miniprogram/components/color-picker/color-picker.json create mode 100644 miniprogram/components/color-picker/color-picker.less create mode 100644 miniprogram/components/color-picker/color-picker.ts create mode 100644 miniprogram/components/color-picker/color-picker.wxml diff --git a/miniprogram/components/color-picker/color-picker.json b/miniprogram/components/color-picker/color-picker.json new file mode 100644 index 0000000..b1518f0 --- /dev/null +++ b/miniprogram/components/color-picker/color-picker.json @@ -0,0 +1,8 @@ +{ + "component": true, + "styleIsolation": "isolated", + "usingComponents": { + "van-popup": "@vant/weapp/popup/index", + "toy-button": "/ui/button/button" + } +} diff --git a/miniprogram/components/color-picker/color-picker.less b/miniprogram/components/color-picker/color-picker.less new file mode 100644 index 0000000..715e1d3 --- /dev/null +++ b/miniprogram/components/color-picker/color-picker.less @@ -0,0 +1,103 @@ +.color-picker-popup { + border-radius: 20rpx; + + .color-picker-container { + width: 642rpx; + 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: 10rpx; + margin: 14rpx; + display: inline-block; + cursor: pointer; + border: 1rpx solid #ccc; + box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); + transition: all 0.2s ease; + + &.selected { + // border: 1px solid rgba(10, 111, 252, 1); + transform: scale(1.2); + // border: 1px solid #0A6FFC; + border: 1px solid #4096ff; + // box-shadow: 0px 0px 1px 2px rgba(0, 145, 255, 0.1); + box-shadow: 0 0 6rpx 6rpx rgba(5, 145, 255, 0.1); + } + } + } + } +} + +.btn-area { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + margin: 10rpx 24rpx; +} + +// .btn-yellow { +// display: flex; +// justify-content: center; +// align-items: center; +// height: 86rpx; +// width: 400rpx; +// border-radius: 18rpx; +// background: rgba(255, 215, 25, 1); +// box-shadow: 0px 10rpx 4rpx #DBB917; +// font-size: 32rpx; +// font-weight: bold; +// color: #fff; + +// &.disabled { +// background: rgba(255, 215, 25, 0.5); +// box-shadow: 0px 10rpx 4rpx rgba(219, 185, 23, 0.5); +// } +// } \ No newline at end of file diff --git a/miniprogram/components/color-picker/color-picker.ts b/miniprogram/components/color-picker/color-picker.ts new file mode 100644 index 0000000..cbe9af9 --- /dev/null +++ b/miniprogram/components/color-picker/color-picker.ts @@ -0,0 +1,44 @@ +import { WATER_COLORS } from '../../constants/index'; + +Component({ + options: {}, + /** + * 组件的属性列表 + */ + properties: { + show: { + type: Boolean, + value: false, + }, + currentColor: { + type: String, + value: '', + }, + }, + /** + * 组件的初始数据 + */ + data: { + WATER_COLORS: WATER_COLORS, + }, + lifetimes: { + attached() {}, + }, + /** + * 组件的方法列表 + */ + methods: { + onClose() { + this.triggerEvent('onClose'); + }, + + onSelectColor(e: WechatMiniprogram.TouchEvent) { + const { color } = e.currentTarget.dataset; + console.log('Selected color:', color); + this.setData({ + currentColor: color, + }); + this.triggerEvent('onSelectColor', { color }); + }, + }, +}); diff --git a/miniprogram/components/color-picker/color-picker.wxml b/miniprogram/components/color-picker/color-picker.wxml new file mode 100644 index 0000000..b903875 --- /dev/null +++ b/miniprogram/components/color-picker/color-picker.wxml @@ -0,0 +1,40 @@ + + + 选择颜色 + + 基础12色 + + + + + + + + + 扩展24色 + + + + + + + + + + + 确认选择 + + + + diff --git a/miniprogram/components/word-card/word-card.ts b/miniprogram/components/word-card/word-card.ts index 0dfbf9e..0f31502 100644 --- a/miniprogram/components/word-card/word-card.ts +++ b/miniprogram/components/word-card/word-card.ts @@ -37,5 +37,10 @@ Component({ const { key, word } = this.data; this.triggerEvent('onDelete', { key, word }); }, + + onColorTap() { + const { color, key, word } = this.data; + this.triggerEvent('onColorTap', { key, word, color }); + }, }, }); diff --git a/miniprogram/components/word-card/word-card.wxml b/miniprogram/components/word-card/word-card.wxml index 1bea49f..a508d0f 100644 --- a/miniprogram/components/word-card/word-card.wxml +++ b/miniprogram/components/word-card/word-card.wxml @@ -1,5 +1,8 @@ - + {{word}} diff --git a/miniprogram/pages/index/index.json b/miniprogram/pages/index/index.json index 15b733f..28756d4 100644 --- a/miniprogram/pages/index/index.json +++ b/miniprogram/pages/index/index.json @@ -6,7 +6,10 @@ "enablePullDownRefresh": false, "usingComponents": { "van-icon": "@vant/weapp/icon/index", + "van-popup": "@vant/weapp/popup/index", "word-input": "../../components/word-input/word-input", - "word-card": "../../components/word-card/word-card" + "word-card": "../../components/word-card/word-card", + "color-picker": "../../components/color-picker/color-picker", + "toy-button": "../../ui/button/button" } } diff --git a/miniprogram/pages/index/index.less b/miniprogram/pages/index/index.less index 4b0a1b4..cfb5440 100644 --- a/miniprogram/pages/index/index.less +++ b/miniprogram/pages/index/index.less @@ -67,9 +67,12 @@ page { justify-content: center; background-color: #fff; box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25); + padding-top: 24rpx; } -.btn-green { + + +/* .btn-green { display: flex; justify-content: center; align-items: center; @@ -86,4 +89,78 @@ page { .btn-text { margin-left: 24rpx; } -} \ No newline at end of file + + &.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); + } + } + } +} */ \ No newline at end of file diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index 38bb858..0b6d05a 100644 --- a/miniprogram/pages/index/index.ts +++ b/miniprogram/pages/index/index.ts @@ -10,6 +10,10 @@ Page({ data: { cardList: [] as Array<{ color: string; word: string }>, + showColorPopup: false, + currentKey: 0, + currentColor: '', + WATER_COLORS: WATER_COLORS, }, onReady() { @@ -126,7 +130,7 @@ Page({ /** 下载打印 */ exportToPrint() { console.log('this.canvas:', this.canvas); - if (this.canvas) { + if (this.canvas && this.data.cardList.length > 0) { wx.canvasToTempFilePath({ canvas: this.canvas, fileType: 'png', @@ -150,4 +154,34 @@ Page({ return; } }, + + 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, + currentColor: color, + }); + // const { cardList } = this.data; + // const updatedCardList = cardList.map((item, index) => + // index === key ? { ...item, color } : item, + // ); + // this.setData({ cardList: updatedCardList }); + // wx.showToast({ + // title: `已更改 "${word}" 的颜色`, + // icon: 'none', + // duration: 2000, + // }); + // // this.renderCanvas(); + // this.textDrawService?.draw(updatedCardList); + }, + + onCloseColorPopup() { + this.setData({ + showColorPopup: false, + currentKey: 0, + currentColor: '', + }); + }, }); diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index 7cfb3a1..508d261 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -12,13 +12,15 @@ key="{{index}}" word="{{item.word}}" color="{{item.color}}" - bind:onDelete="deleteWordCard" /> + bind:onDelete="deleteWordCard" + bind:onColorTap="onColorTap" /> + bind:onDelete="deleteWordCard" + bind:onColorTap="onColorTap" /> @@ -36,10 +38,59 @@ + + - + + + 下载打印 + diff --git a/miniprogram/ui/button/button.json b/miniprogram/ui/button/button.json index 278aeab..5371331 100644 --- a/miniprogram/ui/button/button.json +++ b/miniprogram/ui/button/button.json @@ -1,5 +1,7 @@ { "component": true, - "styleIsolation": "apply-shared", - "usingComponents": {} + "usingComponents": { + "van-icon": "@vant/weapp/icon/index", + "van-loading": "@vant/weapp/loading/index" + } } diff --git a/miniprogram/ui/button/button.less b/miniprogram/ui/button/button.less index e69de29..e67ab95 100644 --- a/miniprogram/ui/button/button.less +++ b/miniprogram/ui/button/button.less @@ -0,0 +1,41 @@ +@button-default-height: 86rpx; +@button-border-radius: 18rpx; +@button-default-font-size: 32rpx; +@button-default-color: #fff; + +.toy-button { + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + height: @button-default-height; + line-height: @button-default-height; + border-radius: @button-border-radius; + font-size: @button-default-font-size; + color: @button-default-color; + + &--primary { + background: rgba(255, 215, 25, 1); + box-shadow: 0px 10rpx 4rpx #DBB917; + + &.disabled { + background: rgba(255, 215, 25, 0.5); + box-shadow: 0px 10rpx 4rpx rgba(219, 185, 23, 0.5); + } + } + + &--green { + background: rgba(147, 211, 51, 1); + box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 1); + + &.disabled { + background: rgba(147, 211, 51, 0.5); + box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 0.5); + } + } + + .loading-class, + &__icon { + margin-right: 24rpx; + } +} \ No newline at end of file diff --git a/miniprogram/ui/button/button.ts b/miniprogram/ui/button/button.ts index 25b9380..e98ce4c 100644 --- a/miniprogram/ui/button/button.ts +++ b/miniprogram/ui/button/button.ts @@ -8,16 +8,12 @@ Component({ properties: { type: { type: String, - value: 'default', // default, green, white + value: 'default', // primary, green, white }, size: { type: String, value: 'normal', // large, normal, small, mini }, - icon: { - type: String, - value: '', // 图标名称 - }, disabled: { type: Boolean, value: false, // 是否禁用 @@ -30,6 +26,52 @@ Component({ type: Boolean, value: false, // 是否加载中 }, + style: { + type: String, + value: '', // 自定义样式 + }, + // className: { + // type: String, + // value: '', // 自定义类名 + // }, + width: { + type: String, + value: '', // 按钮宽度 + }, + height: { + type: String, + value: '', + }, + loadingType: { + type: String, + value: 'circular', + }, + loadingSize: { + type: String, + value: '20px', + }, + loadingColor: { + type: String, + value: '#ffffff', + }, + + // icon + icon: { + type: String, + value: '', + }, + iconClassPrefix: { + type: String, + value: 'j-icon', + }, + iconSize: { + type: String, + value: '44rpx', + }, + iconColor: { + type: String, + value: '#ffffff', + }, }, /** * 组件的初始数据 @@ -41,5 +83,9 @@ Component({ /** * 组件的方法列表 */ - methods: {}, + methods: { + onClick(e: WechatMiniprogram.TouchEvent): void { + this.triggerEvent('click', e); + }, + }, }); diff --git a/miniprogram/ui/button/button.wxml b/miniprogram/ui/button/button.wxml index e69de29..0f45c03 100644 --- a/miniprogram/ui/button/button.wxml +++ b/miniprogram/ui/button/button.wxml @@ -0,0 +1,41 @@ + + +