feat: 完成引导页

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

@@ -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>
-    <toy-button
-        type="white"
-        plain
-        bind:click="toNextStep"
-        custom-class="btn-next-step">
-        下一步
-    </toy-button>
-    <view class="first-step">
+    <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>
+    <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>