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-10-29 17:45:12 +08:00
parent 643a7e23e7
commit c4f27f2125
13 changed files with 141224 additions and 60061 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/index/index.less
+173
View File
@@ -120,6 +120,179 @@ page {
flex-direction: row;
justify-content: space-between;
}
// 模板选择区域
.template-section {
margin-top: 40rpx;
.template-title {
font-size: 28rpx;
font-weight: 600;
color: #141414;
margin-bottom: 24rpx;
text-align: center;
}
.template-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20rpx;
}
.template-item {
background: #FFFFFF;
border: 2rpx solid #E8E8E8;
border-radius: 16rpx;
padding: 16rpx;
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
&:active {
transform: scale(0.95);
}
&.active {
border-color: #93D333;
box-shadow: 0 0 0 4rpx rgba(147, 211, 51, 0.2);
&::after {
content: '✓';
position: absolute;
top: 12rpx;
right: 12rpx;
width: 24rpx;
height: 24rpx;
background: #93D333;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 14rpx;
font-weight: bold;
}
}
.template-preview {
width: 100%;
height: 80rpx;
background: #F8F8F8;
border-radius: 12rpx;
margin-bottom: 12rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
.template-preview-content {
display: flex;
align-items: center;
justify-content: center;
gap: 6rpx;
width: 100%;
height: 100%;
.preview-word {
font-size: 20rpx;
font-weight: 600;
width: 24rpx;
height: 24rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6rpx;
background: rgba(255, 255, 255, 0.8);
}
// 不同模板的布局样式
&.grid-template {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4rpx;
}
&.circle-template {
position: relative;
.preview-word {
position: absolute;
&:nth-child(1) {
top: 12rpx;
left: 50%;
transform: translateX(-50%);
}
&:nth-child(2) {
right: 12rpx;
top: 50%;
transform: translateY(-50%);
}
&:nth-child(3) {
bottom: 12rpx;
left: 50%;
transform: translateX(-50%);
}
&:nth-child(4) {
left: 12rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
&.random-template {
position: relative;
.preview-word {
position: absolute;
&:nth-child(1) {
top: 10rpx;
left: 16rpx;
}
&:nth-child(2) {
top: 24rpx;
right: 10rpx;
}
&:nth-child(3) {
bottom: 18rpx;
left: 10rpx;
}
&:nth-child(4) {
bottom: 10rpx;
right: 18rpx;
}
}
}
&.line-template {
flex-direction: row;
gap: 8rpx;
}
}
}
.template-name {
font-size: 22rpx;
color: #666666;
text-align: center;
font-weight: 500;
.template-item.active & {
color: #93D333;
font-weight: 600;
}
}
}
}
}
miniprogram/pages/index/index.ts
+17
View File
@@ -18,6 +18,7 @@ Page({
currentColor: '',
showIntroductionPopup: false,
showSelectWordPopup: false, // 选择文字弹窗
selectedTemplate: 'grid', // 选中的模板类型
env: 'release',
isPCDevtool: false,
},
@@ -375,4 +376,20 @@ Page({
url: '/pages/debug/debug',
});
},
// 模板选择事件
onSelectTemplate(e: WechatMiniprogram.TouchEvent) {
const { template } = e.currentTarget.dataset;
this.setData({
selectedTemplate: template
});
// 这里后续可以添加根据模板类型更新canvas绘制效果的逻辑
console.log('选择的模板类型:', template);
// 如果有文字卡片，可以重新绘制canvas
if (this.data.cardList.length > 0) {
this.drawCanvas();
}
},
});
miniprogram/pages/index/index.wxml
+95
View File
@@ -59,6 +59,101 @@
清空
</toy-button>
</view>
<!-- 趣味模板选择区域 -->
<view class="template-section">
<view class="template-title">选择涂色模板</view>
<view class="template-grid">
<view
class="template-item {{selectedTemplate === 'grid' ? 'active' : ''}}"
data-template="grid"
bind:tap="onSelectTemplate">
<view class="template-preview">
<view class="template-preview-content grid-template">
<view class="preview-word" style="color: #ffd719"
>王</view
>
<view class="preview-word" style="color: #93d333"
>手</view
>
<view class="preview-word" style="color: #ff6b9d"
>哭</view
>
<view class="preview-word" style="color: #4ecdc4"
>少</view
>
</view>
</view>
<view class="template-name">网格排列</view>
</view>
<view
class="template-item {{selectedTemplate === 'circle' ? 'active' : ''}}"
data-template="circle"
bind:tap="onSelectTemplate">
<view class="template-preview">
<view class="template-preview-content circle-template">
<view class="preview-word" style="color: #ffd719"
>王</view
>
<view class="preview-word" style="color: #93d333"
>手</view
>
<view class="preview-word" style="color: #ff6b9d"
>哭</view
>
<view class="preview-word" style="color: #4ecdc4"
>少</view
>
</view>
</view>
<view class="template-name">圆形排列</view>
</view>
<view
class="template-item {{selectedTemplate === 'random' ? 'active' : ''}}"
data-template="random"
bind:tap="onSelectTemplate">
<view class="template-preview">
<view class="template-preview-content random-template">
<view class="preview-word" style="color: #ffd719"
>王</view
>
<view class="preview-word" style="color: #93d333"
>手</view
>
<view class="preview-word" style="color: #ff6b9d"
>哭</view
>
<view class="preview-word" style="color: #4ecdc4"
>少</view
>
</view>
</view>
<view class="template-name">随机分布</view>
</view>
<view
class="template-item {{selectedTemplate === 'line' ? 'active' : ''}}"
data-template="line"
bind:tap="onSelectTemplate">
<view class="template-preview">
<view class="template-preview-content line-template">
<view class="preview-word" style="color: #ffd719"
>王</view
>
<view class="preview-word" style="color: #93d333"
>手</view
>
<view class="preview-word" style="color: #ff6b9d"
>哭</view
>
<view class="preview-word" style="color: #4ecdc4"
>少</view
>
</view>
</view>
<view class="template-name">直线排列</view>
</view>
</view>
</view>
</view>
<view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
<text class="wrapper-title">预览打印效果</text>