feat: 添加引导页

miniprogram/components/introduction-popup/introduction-popup.less

@@ -13,7 +13,8 @@
         left: 50%;
         transform: translateX(-50%);
         text-align: center;
-        color: rgba(255, 235, 59, 0.95);
+        // color: rgba(255, 235, 59, 0.95);
+        color: rgb(255, 255, 255, 0.9);
         font-size: 40rpx;
         font-weight: bold;
         width: 100%;
@@ -21,12 +22,31 @@
     }
 
     .tip-box {
+        height: 48px;
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.2);
         border: 4rpx solid rgba(147, 211, 51, 1);
+        transition: all 0.4s;
+
+        &--first {
+            position: absolute;
+            top: 66px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 340px;
+        }
+
+        &--second {
+            position: absolute;
+            top: 127px;
+            left: 28px;
+            width: 48px;
+        }
     }
 
     .tip-text {
-        color: rgba(255, 235, 59, 0.95);
-        // color: #fff;
+        // color: rgba(255, 235, 59, 0.95);
+        color: rgb(255, 255, 255, 0.9);
         font-size: 32rpx;
     }
 
@@ -36,16 +56,16 @@
         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);
-        }
+        // .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;
@@ -70,8 +90,8 @@
         color: rgba(255, 235, 59, 0.95);
         border-radius: 28rpx;
         position: absolute;
-        top: 260rpx;
+        top: 50%;
         left: 50%;
-        transform: translateX(-50%);
+        transform: translate(-50%, -50%);
     }
 }

miniprogram/components/introduction-popup/introduction-popup.ts

@@ -12,7 +12,9 @@ Component({
     /**
      * 组件的初始数据
      */
-    data: {},
+    data: {
+        currentStep: 'first',
+    },
     lifetimes: {
         attached() {},
     },
@@ -23,5 +25,17 @@ Component({
         onClose() {
             this.triggerEvent('onClose');
         },
+
+        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]);
+            this.setData({
+                currentStep: stepArr[currentStepIndex + 1],
+            });
+        },
     },
 });

miniprogram/components/introduction-popup/introduction-popup.wxml

@@ -1,7 +1,14 @@
 <view class="introduction-popup">
     <view class="introduction-popup-title">跟我一起来涂色、识字吧！</view>
+    <view class="tip-box tip-box--{{currentStep}}"></view>
+    <toy-button
+        type="white"
+        plain
+        bind:click="toNextStep"
+        custom-class="btn-next-step">
+        下一步
+    </toy-button>
     <view class="first-step">
-        <view class="tip-box"></view>
         <van-icon
             class-prefix="toy-icon"
             name="guide"
@@ -11,12 +18,6 @@
         <view class="tip-text">
             这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定”
         </view>
-        <toy-button
-            type="white"
-            plain
-            bind:click="toNextStep"
-            custom-class="btn-next-step">
-            下一步
-        </toy-button>
     </view>
+    <view class="second-step"> </view>
 </view>