feat:练字贴功能基本完成

2025-10-30 18:21:38 +08:00
parent c4f27f2125
commit 2e0f8f0fe1
19 changed files with 450 additions and 564 deletions
@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}
@@ -0,0 +1,67 @@
+.word-list-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 50rpx 40rpx;
+    text-align: center;
+
+    .empty-icon {
+        width: 120rpx;
+        height: 120rpx;
+        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 32rpx;
+        box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
+
+        .empty-logo {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+    }
+
+    .empty-title {
+        font-size: 32rpx;
+        font-weight: 600;
+        color: #374151;
+        margin-bottom: 16rpx;
+        line-height: 1.4;
+    }
+
+    .empty-desc {
+        font-size: 26rpx;
+        color: #6b7280;
+        line-height: 1.6;
+        margin-bottom: 32rpx;
+        max-width: 480rpx;
+    }
+}
+
+.empty-hint {
+    display: flex;
+    align-items: center;
+    background: #f8fafc;
+    border: 1rpx solid #e2e8f0;
+    border-radius: 12rpx;
+    padding: 20rpx 24rpx;
+    max-width: 500rpx;
+
+    .hint-icon {
+        font-size: 24rpx;
+        margin-right: 12rpx;
+        margin-top: -2rpx;
+        flex-shrink: 0;
+    }
+
+    .hint-text {
+        font-size: 22rpx;
+        color: #64748b;
+        line-height: 1.5;
+        text-align: left;
+    }
+}
@@ -0,0 +1,10 @@
+Component({
+    properties: {
+        title: { type: String, value: '' },
+        desc: { type: String, value: '' },
+        hint: { type: String, value: '' },
+    },
+    data: {},
+    methods: {},
+});
+
@@ -0,0 +1,14 @@
+<view class="word-list-empty">
+    <view class="empty-icon">
+        <image
+            class="empty-logo"
+            src="../../assets/imgs/doodle-logo.png"
+            mode="aspectFill"></image>
+    </view>
+    <view class="empty-title">{{title}}</view>
+    <view class="empty-desc">{{desc}}</view>
+    <view class="empty-hint" wx:if="{{hint}}">
+        <text class="hint-icon">💡</text>
+        <text class="hint-text">{{hint}}</text>
+    </view>
+</view>
@@ -31,7 +31,9 @@ Component({
        color: '',
    },
    lifetimes: {
-        attached() { },
+        // attached() {
+        //     console.log('this.data:', this.data);
+        // },
    },
    /**
     * 组件的方法列表
@@ -10,6 +10,10 @@ Component({
            type: Boolean,
            value: false,
        },
+        cardList: {
+            type: Array,
+            value: [],
+        },
        currentTab: {
            type: Number,
            value: 0,
@@ -31,14 +35,20 @@ Component({
    },
    lifetimes: {
        ready() {
+            // 初始化同步一次 selectedWords，避免首次传入时未触发 observers 的情况
+            const list = (this.data as any).cardList || [];
+            if (Array.isArray(list) && list.length > 0) {
+                const selectedWords = list.map((item: any) => item.word);
+                this.setData({ selectedWords });
+            }
        },
    },
-    /* observers: {
+    observers: {
        cardList(newVal: CardList) {
            const selectedWords = newVal.map((item) => item.word);
            this.setData({ selectedWords });
        },
-    }, */
+    },
    /**
     * 组件的方法列表
     */
@@ -30,7 +30,7 @@
                wx:for="{{wordList}}"
                wx:for-index="categoryIndex"
                wx:key="categoryIndex"
-                title="{{wordList[categoryIndex].categoryName}}">
+                title="{{wordList[categoryIndex].icon}} {{wordList[categoryIndex].categoryName}}">
                <view class="word-list-wrapper">
                    <view class="word-list">
                        <view