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 {
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,22 +80,37 @@
font-size: 32rpx;
}
.first-step {
.btn-area {
position: absolute;
top: 128rpx;
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%;
// .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);
// }
&.android {
top: 138rpx;
}
.guide-icon {
position: absolute;
@@ -86,12 +131,180 @@
}
}
.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: 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%;
.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: 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;
}
} */
}
miniprogram/components/introduction-popup/introduction-popup.ts
+25 -8
View File
@@ -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() {},
},
});
miniprogram/components/introduction-popup/introduction-popup.wxml
+42 -5
View File
@@ -1,14 +1,25 @@
<view class="introduction-popup">
<view class="introduction-popup" catchtouchmove="preventScroll">
<view class="introduction-popup-title">跟我一起来涂色、识字吧！</view>
<view class="tip-box tip-box--{{currentStep}}"></view>
<view class="tip-box tip-box--{{currentStep}} {{platform}}"></view>
<view class="btn-area {{currentStep}}">
<toy-button
type="white"
plain
bind:click="toNextStep"
custom-class="btn-next-step">
下一步
{{currentStep === 'fourth' ? '去体验' : '下一步'}}
</toy-button>
<view class="first-step">
</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
class-prefix="toy-icon"
name="guide"
@@ -19,5 +30,31 @@
这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定”
</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>
miniprogram/pages/index/index.less
+5 -1
View File
@@ -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;
miniprogram/pages/index/index.ts
+9 -3
View File
@@ -20,7 +20,7 @@ Page({
const hasShowIntroduction =
wx.getStorageSync('hasShowIntroduction') || false;
if (!hasShowIntroduction) {
// if (!hasShowIntroduction) {
this.setData({
cardList: [
{ color: '#FF0000', word: '涂' },
@@ -32,7 +32,7 @@ Page({
],
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 = () => {},
) {
if (updatedCardList && updatedCardList.length > 0) {
this.setData({ cardList: updatedCardList }, callback);
} else {
updatedCardList = this.data.cardList;
}
this.textDrawService?.draw(updatedCardList);
},
miniprogram/pages/index/index.wxml
+3 -1
View File
@@ -63,4 +63,6 @@
下载打印
</toy-button> -->
</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;
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);
/* 阴影效果 */
}
}