From 56e8e15620860c1036f0b8747cc6fa6c05ae6f00 Mon Sep 17 00:00:00 2001 From: joey Date: Thu, 19 Jun 2025 17:07:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=BC=95=E5=AF=BC?= =?UTF-8?q?=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../introduction-popup.less | 267 ++++++++++++++++-- .../introduction-popup/introduction-popup.ts | 33 ++- .../introduction-popup.wxml | 59 +++- miniprogram/pages/index/index.less | 6 +- miniprogram/pages/index/index.ts | 36 ++- miniprogram/pages/index/index.wxml | 4 +- miniprogram/ui/button/button.less | 17 +- 7 files changed, 354 insertions(+), 68 deletions(-) diff --git a/miniprogram/components/introduction-popup/introduction-popup.less b/miniprogram/components/introduction-popup/introduction-popup.less index 77425e0..e1d907d 100644 --- a/miniprogram/components/introduction-popup/introduction-popup.less +++ b/miniprogram/components/introduction-popup/introduction-popup.less @@ -22,25 +22,55 @@ } .tip-box { - height: 48px; - border-radius: 24px; + height: 96rpx; + border-radius: 50rpx; background: rgba(255, 255, 255, 0.2); border: 4rpx solid rgba(147, 211, 51, 1); transition: all 0.4s; + position: absolute; &--first { - position: absolute; - top: 66px; + top: 122rpx; left: 50%; transform: translateX(-50%); - width: 340px; + width: 680rpx; + height: 96rpx; + + &.android { + top: 128rpx; + } } &--second { - position: absolute; - top: 127px; - left: 28px; - width: 48px; + top: 248rpx; + left: 50rpx; + width: 96rpx; + height: 96rpx; + + &.android { + top: 256rpx; + left: 54rpx; + } + } + + &--third { + top: 248rpx; + left: 232rpx; + width: 96rpx; + height: 96rpx; + + &.android { + top: 254rpx; + left: 236rpx; + } + } + + &--fourth { + top: 682rpx; + left: 50%; + transform: translateX(-50%); + width: 712rpx; + height: 710rpx; } } @@ -50,23 +80,145 @@ font-size: 32rpx; } - .first-step { + .btn-area { + position: absolute; + top: 50%; + left: 0; + width: 100%; + display: flex; + justify-content: center; + transition: all 0.4s; + + &.fourth { + top: 420rpx; + } + + .btn-next-step { + border-radius: 28rpx; + } + + } + + .step-box { + transition: all 0.4s; + + &.first-step { + position: absolute; + top: 130rpx; + left: 0; + width: 100%; + + &.android { + top: 138rpx; + } + + .guide-icon { + position: absolute; + top: 48rpx; + left: 106rpx; + width: 22px; + height: 39px; + opacity: 1; + } + + .tip-text { + position: absolute; + top: 138rpx; + left: 110rpx; + width: 550rpx; + height: 94rpx; + line-height: 46rpx; + } + } + + &.second-step { + position: absolute; + top: 290rpx; + left: 164rpx; + width: 100%; + + &.android { + top: 294rpx; + left: 164rpx; + } + + .guide-icon { + position: absolute; + top: 0; + left: 0; + width: 22px; + height: 39px; + transform: rotate(-64.28deg); + } + + .tip-text { + position: absolute; + top: 46rpx; + left: 44rpx; + line-height: 46rpx; + } + } + + &.third-step { + position: absolute; + top: 290rpx; + left: 342rpx; + width: 100%; + + &.android { + top: 294rpx; + left: 342rpx; + } + + .guide-icon { + position: absolute; + top: 0; + left: 0; + width: 22px; + height: 39px; + transform: rotate(-64.28deg); + } + + .tip-text { + position: absolute; + top: 46rpx; + left: 44rpx; + line-height: 46rpx; + } + } + + &.fourth-step { + position: absolute; + top: 550rpx; + left: 40rpx; + width: 100%; + + .guide-icon { + position: absolute; + top: 60rpx; + left: 26rpx; + width: 44rpx; + height: 78rpx; + transform: rotate(180deg); + } + + .tip-text { + position: absolute; + top: 0; + left: 0rpx; + line-height: 46rpx; + } + } + } + + + + /* .first-step { position: absolute; top: 128rpx; left: 0; width: 100%; - // .tip-box { - // position: absolute; - // top: 0; - // left: 50%; - // transform: translateX(-50%); - // width: 342px; - // height: 46px; - // border-radius: 21px; - // background: rgba(255, 255, 255, 0.2); - // } - .guide-icon { position: absolute; top: 48rpx; @@ -86,12 +238,73 @@ } } - .btn-next-step { - color: rgba(255, 235, 59, 0.95); - border-radius: 28rpx; + .second-step { position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + top: 288rpx; + left: 164rpx; + width: 100%; + + .guide-icon { + position: absolute; + top: 0; + left: 0; + width: 22px; + height: 39px; + transform: rotate(-64.28deg); + } + + .tip-text { + position: absolute; + top: 46rpx; + left: 44rpx; + line-height: 46rpx; + } } + + .third-step { + position: absolute; + top: 288rpx; + left: 342rpx; + width: 100%; + + .guide-icon { + position: absolute; + top: 0; + left: 0; + width: 22px; + height: 39px; + transform: rotate(-64.28deg); + } + + .tip-text { + position: absolute; + top: 46rpx; + left: 44rpx; + line-height: 46rpx; + } + } + + .fourth-step { + position: absolute; + top: 550rpx; + left: 76rpx; + width: 100%; + + .guide-icon { + position: absolute; + top: 60rpx; + left: 20rpx; + width: 44rpx; + height: 78rpx; + transform: rotate(180deg); + } + + .tip-text { + position: absolute; + top: 0; + left: 0rpx; + line-height: 46rpx; + } + } */ + } \ No newline at end of file diff --git a/miniprogram/components/introduction-popup/introduction-popup.ts b/miniprogram/components/introduction-popup/introduction-popup.ts index 56f8847..087a83c 100644 --- a/miniprogram/components/introduction-popup/introduction-popup.ts +++ b/miniprogram/components/introduction-popup/introduction-popup.ts @@ -14,9 +14,23 @@ Component({ */ data: { currentStep: 'first', + currentStepIndex: 0, + stepTexts: [ + '这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定”', + '点击这里修改颜色', + '点击这里删除', + '这里会生成图片，点击下载后可打印、涂色、识字', + ], + platform: '', }, lifetimes: { - attached() {}, + attached() { + const { platform } = wx.getDeviceInfo(); + console.log('platform:', platform); + this.setData({ + platform, + }); + }, }, /** * 组件的方法列表 @@ -27,15 +41,18 @@ Component({ }, toNextStep() { - const stepArr = ['first', 'second', 'third', 'fourth', 'fifth']; - const { currentStep } = this.data; - const currentStepIndex = currentStep - ? stepArr.indexOf(currentStep) - : 0; - console.log('next', stepArr[currentStepIndex + 1]); + const stepArr = ['first', 'second', 'third', 'fourth']; + const { currentStepIndex: preStepIndex } = this.data; + + if (preStepIndex === 3) return this.triggerEvent('onClose'); + const currentStepIndex = preStepIndex + 1; + this.setData({ - currentStep: stepArr[currentStepIndex + 1], + currentStepIndex, + currentStep: stepArr[currentStepIndex], }); }, + + preventScroll() {}, }, }); diff --git a/miniprogram/components/introduction-popup/introduction-popup.wxml b/miniprogram/components/introduction-popup/introduction-popup.wxml index 80688ec..6693db9 100644 --- a/miniprogram/components/introduction-popup/introduction-popup.wxml +++ b/miniprogram/components/introduction-popup/introduction-popup.wxml @@ -1,14 +1,25 @@ - + 跟我一起来涂色、识字吧！ - - - 下一步 - - + + + + {{currentStep === 'fourth' ? '去体验' : '下一步'}} + + + + + {{stepTexts[currentStepIndex]}} + + diff --git a/miniprogram/pages/index/index.less b/miniprogram/pages/index/index.less index 536909d..c74fb20 100644 --- a/miniprogram/pages/index/index.less +++ b/miniprogram/pages/index/index.less @@ -52,11 +52,15 @@ page { .canvas-wrapper { margin-top: 20rpx; width: 100%; - border: 1rpx solid #141414; + // border: 1rpx solid #141414; background-color: #fff; box-sizing: border-box; } +#canvasContent { + border: 1px solid #666; +} + .btn-area { position: fixed; left: 0; diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index 9b8dc72..ba8ff2d 100644 --- a/miniprogram/pages/index/index.ts +++ b/miniprogram/pages/index/index.ts @@ -20,19 +20,19 @@ Page({ const hasShowIntroduction = wx.getStorageSync('hasShowIntroduction') || false; - if (!hasShowIntroduction) { - this.setData({ - cardList: [ - { color: '#FF0000', word: '涂' }, - { color: '#00FF00', word: '欢' }, - { color: '#FF7F00', word: '鸦' }, - { color: '#00FFFF', word: '迎' }, - { color: '#FFFF00', word: '丫' }, - { color: '#8A2BE2', word: '你' }, - ], - showIntroductionPopup: true, - }); - } + // if (!hasShowIntroduction) { + this.setData({ + cardList: [ + { color: '#FF0000', word: '涂' }, + { color: '#00FF00', word: '欢' }, + { color: '#FF7F00', word: '鸦' }, + { color: '#00FFFF', word: '迎' }, + { color: '#FFFF00', word: '丫' }, + { color: '#8A2BE2', word: '你' }, + ], + showIntroductionPopup: true, + }); + // } }, onReady() { @@ -71,6 +71,7 @@ Page({ this.textDrawService = new TextDrawService(canvas, ctx); // textDrawService.draw(); this.setData({ boxWidth, boxHeight }); + this.drawCanvas(); } } }); @@ -78,10 +79,15 @@ Page({ /** 变更cardList 并更新canvas */ drawCanvas( - updatedCardList: Array<{ color: string; word: string }>, + updatedCardList?: Array<{ color: string; word: string }>, callback: () => void = () => {}, ) { - this.setData({ cardList: updatedCardList }, callback); + if (updatedCardList && updatedCardList.length > 0) { + this.setData({ cardList: updatedCardList }, callback); + } else { + updatedCardList = this.data.cardList; + } + this.textDrawService?.draw(updatedCardList); }, diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml index df5d227..dc19194 100644 --- a/miniprogram/pages/index/index.wxml +++ b/miniprogram/pages/index/index.wxml @@ -63,4 +63,6 @@ 下载打印 --> - + diff --git a/miniprogram/ui/button/button.less b/miniprogram/ui/button/button.less index 5da0a17..64f10e6 100644 --- a/miniprogram/ui/button/button.less +++ b/miniprogram/ui/button/button.less @@ -20,7 +20,8 @@ wx-button:not([size=mini]) { font-size: @button-default-font-size; color: @button-default-color; padding: 0 44rpx; - width: auto !important; + // width: auto !important; + // transition: all 0.04s; &--primary { @@ -58,18 +59,18 @@ wx-button:not([size=mini]) { &--white { color: rgba(34, 36, 37, 0.9); background: #fff; - box-shadow: 0 10rpx 0 rgba(255, 255, 255, 0.7); + box-shadow: 0 6rpx 0 rgba(255, 255, 255, 0.7); &.disabled { background: rgba(255, 255, 255, 0.8); - box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.55); + box-shadow: 0px 6rpx 0px rgba(255, 255, 255, 0.55); } &.plain { color: #fff; background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 1); - box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.88); + border: 2rpx solid rgba(255, 255, 255, 1); + box-shadow: 0px 6rpx 0px rgba(255, 255, 255, 0.88); // &.disabled { // background: rgba(255, 255, 255, 0.2); @@ -77,6 +78,12 @@ wx-button:not([size=mini]) { // box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.6); // } } + + &.active { + transform: translateY(6rpx); + box-shadow: 0 0 0 rgba(255, 255, 255, 0.7); + /* 阴影效果 */ + } }