feat: 添加引导内容，第一步引导

2025-06-17 17:31:33 +08:00
parent 02df74f35f
commit c0c55fb4f1
15 changed files with 373 additions and 8 deletions
@@ -5,6 +5,41 @@
  "css_prefix_text": "icon-",
  "description": "",
  "glyphs": [
+    {
+      "icon_id": "5374234",
+      "name": "guide-5",
+      "font_class": "guide-5",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "24036363",
+      "name": "guide-4",
+      "font_class": "guide-4",
+      "unicode": "e693",
+      "unicode_decimal": 59027
+    },
+    {
+      "icon_id": "37120878",
+      "name": "guide-3",
+      "font_class": "guide-3",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
+    {
+      "icon_id": "39563133",
+      "name": "guide-2",
+      "font_class": "guide-2",
+      "unicode": "e6c4",
+      "unicode_decimal": 59076
+    },
+    {
+      "icon_id": "41982380",
+      "name": "guide",
+      "font_class": "guide",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
    {
      "icon_id": "15838430",
      "name": "dustbin-o",
@@ -0,0 +1,55 @@
+@font-face {
+  font-family: "toy-icon";
+  /* Project id 4942823 */
+  src:
+    url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+    url('iconfont.ttf?t=1749610446637') format('truetype');
+}
+
+.toy-icon {
+  font-family: "toy-icon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.toy-icon-dustbin-o:before {
+  content: "\e71d";
+}
+
+.toy-icon-editor-o:before {
+  content: "\e72a";
+}
+
+.toy-icon-close:before {
+  content: "\e704";
+}
+
+.toy-icon-download:before {
+  content: "\e716";
+}
+
+.toy-icon-error-o:before {
+  content: "\e73b";
+}
+
+.toy-icon-close-bold:before {
+  content: "\e70d";
+}
+
+.toy-icon-translate:before {
+  content: "\e73c";
+}
+
+.toy-icon-share-o:before {
+  content: "\e729";
+}
+
+.toy-icon-share:before {
+  content: "\e728";
+}
+
+.toy-icon-wechat-o:before {
+  content: "\e727";
+}
@@ -0,0 +1,9 @@
+{
+    "component": true,
+    "styleIsolation": "isolated",
+    "usingComponents": {
+        "van-popup": "@vant/weapp/popup/index",
+        "van-icon": "@vant/weapp/icon/index",
+        "toy-button": "/ui/button/button"
+    }
+}
@@ -0,0 +1,60 @@
+.introduction-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.75);
+    z-index: 9999;
+
+    &-title {
+        text-align: center;
+        color: rgba(255, 235, 59, 0.95);
+        font-size: 40rpx;
+        font-weight: bold;
+        margin-top: 52rpx;
+    }
+
+    .tip-box {
+        border: 4rpx solid rgba(147, 211, 51, 1);
+    }
+
+    .tip-text {
+        color: rgba(255, 235, 59, 0.95);
+        font-size: 32rpx;
+    }
+
+    .first-step {
+        position: relative;
+
+        .tip-box {
+            position: absolute;
+            top: 18rpx;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 342px;
+            height: 46px;
+            border-radius: 21px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .guide-icon {
+            position: absolute;
+            top: 66rpx;
+            left: 106rpx;
+            width: 22px;
+            height: 39px;
+            opacity: 1;
+        }
+
+        .tip-text {
+            position: absolute;
+            top: 156rpx;
+            left: 110rpx;
+            width: 550rpx;
+            height: 94rpx;
+            line-height: 46rpx;
+        }
+    }
+
+}
@@ -0,0 +1,27 @@
+Component({
+    options: {},
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        show: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {},
+    lifetimes: {
+        attached() {},
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        onClose() {
+            this.triggerEvent('onClose');
+        },
+    },
+});
@@ -0,0 +1,15 @@
+<view class="introduction-popup">
+    <view class="introduction-popup-title">跟我一起来涂色、识字吧！</view>
+    <view class="first-step">
+        <view class="tip-box"></view>
+        <van-icon
+            class-prefix="toy-icon"
+            name="guide"
+            color="#FFEB3B"
+            custom-class="guide-icon"
+            size="100rpx" />
+        <view class="tip-text">
+            这里请输入你想让小朋友熟悉的汉字、字母、数字等，点击“确定”
+        </view>
+    </view>
+</view>
@@ -10,6 +10,7 @@
        "word-input": "../../components/word-input/word-input",
        "word-card": "../../components/word-card/word-card",
        "color-picker": "../../components/color-picker/color-picker",
+        "introduction-popup": "../../components/introduction-popup/introduction-popup",
        "toy-button": "../../ui/button/button"
    }
 }
@@ -13,6 +13,26 @@ Page({
        showColorPopup: false,
        currentKey: 0,
        currentColor: '',
+        showIntroductionPopup: false,
+    },
+
+    onLoad() {
+        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,
+            });
+        }
    },

    onReady() {
@@ -151,4 +171,9 @@ Page({
            cardList,
        });
    },
+
+    onCloseIntroductionPopup() {
+        this.setData({ showIntroductionPopup: false });
+        wx.setStorageSync('hasShowIntroduction', true);
+    },
 });
@@ -63,3 +63,4 @@
        下载打印
    </toy-button> -->
 </view>
+<introduction-popup wx:if="{{showIntroductionPopup}}" />
@@ -25,7 +25,8 @@

        &.active {
            transform: translateY(10rpx);
-            box-shadow: 0 0 0 rgba(219, 185, 23, 0.5); /* 阴影效果 */
+            box-shadow: 0 0 0 rgba(219, 185, 23, 0.5);
+            /* 阴影效果 */
        }
    }

@@ -40,7 +41,8 @@

        &.active {
            transform: translateY(10rpx);
-            box-shadow: 0 0 0 rgba(121, 185, 21, 0.5); /* 阴影效果 */
+            box-shadow: 0 0 0 rgba(121, 185, 21, 0.5);
+            /* 阴影效果 */
        }
    }

@@ -48,5 +50,5 @@
    &__icon {
        margin-right: 24rpx;
    }
-    
+
 }