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:
R524809
2025-11-25 17:52:18 +08:00
parent ec773a650c
commit 61e7781bf8
56 changed files with 827 additions and 3403 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/buttonTest/buttonTest.json
-10
View File
@@ -1,10 +0,0 @@
{
"navigationBarTitleText": "按钮组件测试",
"navigationBarBackgroundColor": "#FFD719",
"backgroundColor": "#F6F6F6",
"usingComponents": {
"toy-button": "../../ui/button/button",
"van-icon": "@vant/weapp/icon/index",
"word-card": "../../components/word-card/word-card"
}
}
miniprogram/pages/buttonTest/buttonTest.less
-34
View File
@@ -1,34 +0,0 @@
page {
background-color: #F6F6F6;
}
.button-test-container {
padding: 40rpx;
}
.test-section {
margin-bottom: 60rpx;
}
.section-title {
display: block;
font-size: 32rpx;
font-weight: 600;
color: #141414;
margin-bottom: 24rpx;
}
.button-group {
display: flex;
flex-direction: column;
gap: 24rpx;
align-items: flex-start;
}
.word-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32rpx;
width: 100%;
max-width: 600rpx;
}
miniprogram/pages/buttonTest/buttonTest.ts
-28
View File
@@ -1,28 +0,0 @@
Page({
data: {},
onButtonClick(e: WechatMiniprogram.TouchEvent) {
console.log('按钮点击:', e);
wx.showToast({
title: '按钮被点击了',
icon: 'success',
duration: 1000
});
},
onWordColorTap(e: any) {
console.log('点击了颜色:', e);
wx.showToast({
title: '点击了颜色',
icon: 'none',
});
},
onWordDelete(e: any) {
console.log('删除文字:', e);
wx.showToast({
title: '删除文字',
icon: 'none',
});
}
});
miniprogram/pages/buttonTest/buttonTest.wxml
-160
View File
@@ -1,160 +0,0 @@
<view class="button-test-container">
<view class="test-section">
<text class="section-title">主要按钮 (Primary)</text>
<view class="button-group">
<toy-button type="primary" bind:click="onButtonClick"
>主要按钮</toy-button
>
<toy-button type="primary" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="primary" loading bind:click="onButtonClick"
>加载中</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">次要按钮 (Secondary)</text>
<view class="button-group">
<toy-button type="secondary" bind:click="onButtonClick"
>次要按钮</toy-button
>
<toy-button type="secondary" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="secondary" loading bind:click="onButtonClick"
>加载中</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">绿色按钮 (Green)</text>
<view class="button-group">
<toy-button type="green" bind:click="onButtonClick"
>绿色按钮</toy-button
>
<toy-button type="green" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="green" loading bind:click="onButtonClick"
>加载中</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">白色按钮 (White)</text>
<view class="button-group">
<toy-button type="white" bind:click="onButtonClick"
>白色按钮</toy-button
>
<toy-button type="white" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="white" plain bind:click="onButtonClick"
>透明模式</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">扁平化按钮 (Flat)</text>
<view class="button-group">
<toy-button type="primary" flat bind:click="onButtonClick"
>扁平主要</toy-button
>
<toy-button type="secondary" flat bind:click="onButtonClick"
>扁平次要</toy-button
>
<toy-button type="white" flat bind:click="onButtonClick"
>扁平白色</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">带图标按钮</text>
<view class="button-group">
<toy-button type="primary" icon="add" bind:click="onButtonClick"
>添加</toy-button
>
<toy-button
type="secondary"
icon="delete"
bind:click="onButtonClick"
>删除</toy-button
>
<toy-button type="white" icon="edit" bind:click="onButtonClick"
>编辑</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">不同尺寸</text>
<view class="button-group">
<toy-button
type="primary"
width="200rpx"
bind:click="onButtonClick">
小按钮
</toy-button>
<toy-button
type="secondary"
width="300rpx"
bind:click="onButtonClick"
>中按钮</toy-button
>
<toy-button type="white" width="400rpx" bind:click="onButtonClick">
大按钮
</toy-button>
</view>
</view>
</view>
<view class="test-section">
<text class="section-title">点击动效测试</text>
<view class="button-group">
<toy-button type="primary" bind:click="onButtonClick"
>点击我测试动效</toy-button
>
<toy-button type="secondary" bind:click="onButtonClick"
>抖动效果</toy-button
>
<toy-button type="white" bind:click="onButtonClick"
>缩放动画</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">Word Card 测试</text>
<view class="word-cards-grid">
<word-card
word="王"
color="#FFD719"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
<word-card
word="手"
color="#93D333"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
<word-card
word="哭"
color="#FF6B9D"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
<word-card
word="少"
color="#4ECDC4"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
</view>
</view>
miniprogram/pages/mathIndex/mathIndex.json
+8
View File
@@ -0,0 +1,8 @@
{
"navigationBarTitleText": "涂鸦丫-数学",
"navigationBarBackgroundColor": "#FFD719",
"homeButton": true,
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {}
}
miniprogram/pages/mathIndex/mathIndex.less
+165
View File
@@ -0,0 +1,165 @@
page {
background-color: #f6f6f6;
}
.page-container {
background-color: #f6f6f6;
padding: 0 24rpx;
box-sizing: border-box;
.empty {
height: 190rpx;
}
}
/* 数学页面标题和描述 */
.math-page-header {
margin-bottom: 40rpx;
text-align: center;
padding-top: 20rpx;
}
.math-page-title {
font-size: 36rpx;
font-weight: 600;
color: #141414;
margin-bottom: 16rpx;
}
.math-page-subtitle {
font-size: 24rpx;
color: #666666;
line-height: 1.5;
}
/* 数学功能列表样式 */
.math-functions-list {
display: flex;
flex-direction: column;
gap: 24rpx;
margin-bottom: 40rpx;
}
.math-function-item {
background: #ffffff;
border: 2rpx solid #e8e8e8;
border-radius: 24rpx;
padding: 32rpx;
display: flex;
align-items: center;
gap: 24rpx;
// box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
transition: all 0.2s ease-in-out;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 24rpx;
opacity: 0;
background: rgba(147, 211, 51, 0.1);
transition: opacity 0.2s ease-in-out;
}
&:active {
&::after {
opacity: 1;
}
border-color: #93d333;
box-shadow: 0 8rpx 24rpx rgba(147, 211, 51, 0.2);
}
}
.function-item-image {
width: 120rpx;
height: 120rpx;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.function-image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 215, 25, 0.2) 0%, rgba(255, 169, 64, 0.2) 100%);
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 56rpx;
}
.function-item-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 12rpx;
min-width: 0;
position: relative;
z-index: 1;
}
.function-item-title {
font-size: 28rpx;
font-weight: 600;
color: #141414;
line-height: 1.4;
}
.function-item-desc {
font-size: 24rpx;
color: #666666;
line-height: 1.4;
}
.function-item-arrow {
font-size: 36rpx;
color: #999999;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* 使用提示 */
.usage-hint {
background: linear-gradient(135deg, #fff7e6 0%, #fffbe6 100%);
border: 2rpx solid #ffd719;
border-radius: 24rpx;
padding: 32rpx;
display: flex;
align-items: flex-start;
gap: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
.hint-icon {
font-size: 40rpx;
flex-shrink: 0;
}
.hint-text {
flex: 1;
}
.hint-title {
font-size: 28rpx;
font-weight: 600;
color: #141414;
margin-bottom: 8rpx;
}
.hint-desc {
font-size: 24rpx;
color: #666666;
line-height: 1.5;
white-space: pre-line;
}
miniprogram/pages/mathIndex/mathIndex.ts
+98
View File
@@ -0,0 +1,98 @@
Page({
data: {
functionList: [
{
id: 'number-find-color',
page: 'numberColor',
title: '看数字，涂一涂',
desc: '给一个数字，找一找下面相同的数字，涂上颜色',
icon: '🔍',
},
{
id: 'number-coloring',
title: '数字涂色卡',
desc: '一边写数字、一边学数数，数字和卡通图片一一对应',
icon: '🎨',
},
{
id: 'counting-matching',
title: '数一数，连一连',
desc: '通过连线配对数字和对应的数量图形',
icon: '🔗',
},
{
id: 'missing-number',
title: '填上缺少的数字',
desc: '在数字序列中找出并填写缺失的数字',
icon: '❓',
},
{
id: 'compare',
title: '数一数，比大小',
desc: '通过数数比较两组物品的数量大小',
icon: '⚖️',
},
{
id: 'counting-select',
title: '数一数，选一选',
desc: '数出物品数量，从多个选项中选择正确答案',
icon: '✓',
},
{
id: 'counting-fill',
title: '数一数，填一填',
desc: '数出物品数量，填写对应的数字',
icon: '✏️',
},
{
id: 'addition-5',
title: '5以内加法',
desc: '练习5以内的加法运算，图形化展示',
icon: '➕',
},
{
id: 'addition-10',
title: '10以内加法',
desc: '练习10以内的加法运算，图形化展示',
icon: '➕',
},
{
id: 'addition-subtraction-10',
title: '10以内加减法',
desc: '练习10以内的加法和减法混合运算',
icon: '±',
},
],
},
onLoad() {
// 页面加载
},
/**
* 打开数学功能页面
*/
openMathFunction(e: WechatMiniprogram.TouchEvent) {
const functionId = e.currentTarget.dataset.function;
const functionItem = this.data.functionList.find(
(item) => item.id === functionId,
);
if (!functionItem) {
return;
}
// 如果有page字段，跳转到对应页面
if (functionItem.page) {
wx.navigateTo({
url: `/mathPages/${functionItem.page}/${functionItem.page}?id=${functionId}`,
});
} else {
wx.showToast({
title: `即将打开：${functionItem.title}`,
icon: 'none',
duration: 2000,
});
}
},
});
miniprogram/pages/mathIndex/mathIndex.wxml
+42
View File
@@ -0,0 +1,42 @@
<view class="page-container">
<!-- 页面标题和描述 -->
<view class="math-page-header">
<view class="math-page-title">数学学习涂鸦卡</view>
<view class="math-page-subtitle"
>选择功能，生成可打印的数学学习涂鸦卡</view
>
</view>
<!-- 功能列表 -->
<view class="math-functions-list">
<view
class="math-function-item"
wx:for="{{functionList}}"
wx:key="id"
data-function="{{item.id}}"
bind:tap="openMathFunction">
<view class="function-item-image">
<view class="function-image-placeholder">{{item.icon}}</view>
</view>
<view class="function-item-content">
<view class="function-item-title">{{item.title}}</view>
<view class="function-item-desc">{{item.desc}}</view>
</view>
<view class="function-item-arrow">→</view>
</view>
</view>
<!-- 使用提示 -->
<view class="usage-hint">
<view class="hint-icon">💡</view>
<view class="hint-text">
<view class="hint-title">使用提示</view>
<view class="hint-desc">
1. 点击上方功能卡片选择要生成的涂鸦卡类型\n 2.
选择数字范围、图形类型等参数\n 3. 预览生成的涂鸦卡效果\n 4.
下载A4格式PNG图片，打印后使用
</view>
</view>
</view>
<view class="empty"></view>
</view>