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-19 17:07:10 +08:00
parent 145ca0bf62
commit 56e8e15620
7 changed files with 354 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/components/introduction-popup/introduction-popup.less
+240 -27
View File
@@ -22,25 +22,55 @@
} }
.tip-box { .tip-box {
height: 48px; height: 96rpx;
border-radius: 24px; border-radius: 50rpx;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
border: 4rpx solid rgba(147, 211, 51, 1); border: 4rpx solid rgba(147, 211, 51, 1);
transition: all 0.4s; transition: all 0.4s;
position: absolute;
&--first { &--first {
position: absolute; top: 122rpx;
top: 66px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 340px; width: 680rpx;
height: 96rpx;
&.android {
top: 128rpx;
}
} }
&--second { &--second {
position: absolute; top: 248rpx;
top: 127px; left: 50rpx;
left: 28px; width: 96rpx;
width: 48px; 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; 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; position: absolute;
top: 128rpx; top: 128rpx;
left: 0; left: 0;
width: 100%; 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 { .guide-icon {
position: absolute; position: absolute;
top: 48rpx; top: 48rpx;
@@ -86,12 +238,73 @@
} }
} }
.btn-next-step { .second-step {
color: rgba(255, 235, 59, 0.95);
border-radius: 28rpx;
position: absolute; position: absolute;
top: 50%; top: 288rpx;
left: 50%; left: 164rpx;
transform: translate(-50%, -50%); 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;
}
} */
} }
miniprogram/components/introduction-popup/introduction-popup.ts
+25 -8
View File
@@ -14,9 +14,23 @@ Component({
*/ */
data: { data: {
currentStep: 'first', currentStep: 'first',
currentStepIndex: 0,
stepTexts: [
'这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定”',
'点击这里修改颜色',
'点击这里删除',
'这里会生成图片，点击下载后可打印、涂色、识字',
],
platform: '',
}, },
lifetimes: { lifetimes: {
attached() {}, attached() {
const { platform } = wx.getDeviceInfo();
console.log('platform:', platform);
this.setData({
platform,
});
},
}, },
/** /**
* 组件的方法列表 * 组件的方法列表
@@ -27,15 +41,18 @@ Component({
}, },
toNextStep() { toNextStep() {
const stepArr = ['first', 'second', 'third', 'fourth', 'fifth']; const stepArr = ['first', 'second', 'third', 'fourth'];
const { currentStep } = this.data; const { currentStepIndex: preStepIndex } = this.data;
const currentStepIndex = currentStep
? stepArr.indexOf(currentStep) if (preStepIndex === 3) return this.triggerEvent('onClose');
: 0; const currentStepIndex = preStepIndex + 1;
console.log('next', stepArr[currentStepIndex + 1]);
this.setData({ this.setData({
currentStep: stepArr[currentStepIndex + 1], currentStepIndex,
currentStep: stepArr[currentStepIndex],
}); });
}, },
preventScroll() {},
}, },
}); });
miniprogram/components/introduction-popup/introduction-popup.wxml
+48 -11
View File
@@ -1,14 +1,25 @@
<view class="introduction-popup"> <view class="introduction-popup" catchtouchmove="preventScroll">
<view class="introduction-popup-title">跟我一起来涂色、识字吧！</view> <view class="introduction-popup-title">跟我一起来涂色、识字吧！</view>
<view class="tip-box tip-box--{{currentStep}}"></view> <view class="tip-box tip-box--{{currentStep}} {{platform}}"></view>
<toy-button <view class="btn-area {{currentStep}}">
type="white" <toy-button
plain type="white"
bind:click="toNextStep" plain
custom-class="btn-next-step"> bind:click="toNextStep"
下一步 custom-class="btn-next-step">
</toy-button> {{currentStep === 'fourth' ? '去体验' : '下一步'}}
<view class="first-step"> </toy-button>
</view>
<view class="step-box {{currentStep}}-step {{platform}}">
<van-icon
class-prefix="toy-icon"
name="guide"
color="#FFEB3B"
custom-class="guide-icon"
size="100rpx" />
<view class="tip-text"> {{stepTexts[currentStepIndex]}} </view>
</view>
<!-- <view class="first-step" wx:if="{{currentStep === 'first'}}">
<van-icon <van-icon
class-prefix="toy-icon" class-prefix="toy-icon"
name="guide" name="guide"
@@ -19,5 +30,31 @@
这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定” 这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定”
</view> </view>
</view> </view>
<view class="second-step"> </view> <view class="second-step" wx:elif="{{currentStep === 'second'}}">
<van-icon
class-prefix="toy-icon"
name="guide"
color="#FFEB3B"
custom-class="guide-icon"
size="100rpx" />
<view class="tip-text"> 点击这里修改颜色 </view>
</view>
<view class="third-step" wx:elif="{{currentStep === 'third'}}">
<van-icon
class-prefix="toy-icon"
name="guide"
color="#FFEB3B"
custom-class="guide-icon"
size="100rpx" />
<view class="tip-text"> 点击这里删除 </view>
</view>
<view class="fourth-step" wx:else>
<van-icon
class-prefix="toy-icon"
name="guide"
color="#FFEB3B"
custom-class="guide-icon"
size="100rpx" />
<view class="tip-text"> 这里会生成图片，下载后可打印、涂色、识字 </view>
</view> -->
</view> </view>
miniprogram/pages/index/index.less
+5 -1
View File
@@ -52,11 +52,15 @@ page {
.canvas-wrapper { .canvas-wrapper {
margin-top: 20rpx; margin-top: 20rpx;
width: 100%; width: 100%;
border: 1rpx solid #141414; // border: 1rpx solid #141414;
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
} }
#canvasContent {
border: 1px solid #666;
}
.btn-area { .btn-area {
position: fixed; position: fixed;
left: 0; left: 0;
miniprogram/pages/index/index.ts
+21 -15
View File
@@ -20,19 +20,19 @@ Page({
const hasShowIntroduction = const hasShowIntroduction =
wx.getStorageSync('hasShowIntroduction') || false; wx.getStorageSync('hasShowIntroduction') || false;
if (!hasShowIntroduction) { // if (!hasShowIntroduction) {
this.setData({ this.setData({
cardList: [ cardList: [
{ color: '#FF0000', word: '涂' }, { color: '#FF0000', word: '涂' },
{ color: '#00FF00', word: '欢' }, { color: '#00FF00', word: '欢' },
{ color: '#FF7F00', word: '鸦' }, { color: '#FF7F00', word: '鸦' },
{ color: '#00FFFF', word: '迎' }, { color: '#00FFFF', word: '迎' },
{ color: '#FFFF00', word: '丫' }, { color: '#FFFF00', word: '丫' },
{ color: '#8A2BE2', word: '你' }, { color: '#8A2BE2', word: '你' },
], ],
showIntroductionPopup: true, showIntroductionPopup: true,
}); });
} // }
}, },
onReady() { onReady() {
@@ -71,6 +71,7 @@ Page({
this.textDrawService = new TextDrawService(canvas, ctx); this.textDrawService = new TextDrawService(canvas, ctx);
// textDrawService.draw(); // textDrawService.draw();
this.setData({ boxWidth, boxHeight }); this.setData({ boxWidth, boxHeight });
this.drawCanvas();
} }
} }
}); });
@@ -78,10 +79,15 @@ Page({
/** 变更cardList 并更新canvas */ /** 变更cardList 并更新canvas */
drawCanvas( drawCanvas(
updatedCardList: Array<{ color: string; word: string }>, updatedCardList?: Array<{ color: string; word: string }>,
callback: () => void = () => {}, 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); this.textDrawService?.draw(updatedCardList);
}, },
miniprogram/pages/index/index.wxml
+3 -1
View File
@@ -63,4 +63,6 @@
下载打印 下载打印
</toy-button> --> </toy-button> -->
</view> </view>
<introduction-popup wx:if="{{showIntroductionPopup}}" /> <introduction-popup
wx:if="{{showIntroductionPopup}}"
bind:onClose="onCloseIntroductionPopup" />
miniprogram/ui/button/button.less
+12 -5
View File
@@ -20,7 +20,8 @@ wx-button:not([size=mini]) {
font-size: @button-default-font-size; font-size: @button-default-font-size;
color: @button-default-color; color: @button-default-color;
padding: 0 44rpx; padding: 0 44rpx;
width: auto !important; // width: auto !important;
// transition: all 0.04s;
&--primary { &--primary {
@@ -58,18 +59,18 @@ wx-button:not([size=mini]) {
&--white { &--white {
color: rgba(34, 36, 37, 0.9); color: rgba(34, 36, 37, 0.9);
background: #fff; 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 { &.disabled {
background: rgba(255, 255, 255, 0.8); 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 { &.plain {
color: #fff; color: #fff;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 1); border: 2rpx solid rgba(255, 255, 255, 1);
box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.88); box-shadow: 0px 6rpx 0px rgba(255, 255, 255, 0.88);
// &.disabled { // &.disabled {
// background: rgba(255, 255, 255, 0.2); // 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); // 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);
/* 阴影效果 */
}
} }