feat: 打印预览组件化
This commit is contained in:
R524809
@@ -10,6 +10,7 @@
|
||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||
"draw-ad": "../../components/draw-ad/draw-ad",
|
||||
"preview-footer-actions": "../../components3.0/preview-footer-actions/preview-footer-actions",
|
||||
"toy-icon": "../../toy/icon/icon"
|
||||
"toy-icon": "../../toy/icon/icon",
|
||||
"preview-card": "../../components3.0/preview-card/preview-card"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,51 +18,6 @@ page {
|
||||
gap: 64rpx;
|
||||
}
|
||||
|
||||
/* ===== 预览卡 ===== */
|
||||
.md-preview-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.md-preview-card {
|
||||
background: @bg-white;
|
||||
border-radius: @radius-xl;
|
||||
box-shadow: @shadow;
|
||||
padding: 40rpx;
|
||||
border: @border;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.md-preview-kicker {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: @fs-section-head-title;
|
||||
font-weight: bold;
|
||||
color: @text-secondary;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.md-canvas-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400rpx;
|
||||
background: @bg-gray;
|
||||
border-radius: @radius-sm;
|
||||
border: 2rpx dashed rgba(50, 46, 37, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.md-canvas {
|
||||
max-width: 100%;
|
||||
border-radius: @radius-sm;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
/* ===== 区块 ===== */
|
||||
.md-section {
|
||||
display: flex;
|
||||
|
||||
@@ -39,6 +39,7 @@ createMathPage({
|
||||
showNumberGrid: false,
|
||||
numberList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||||
selectedNumber: 0,
|
||||
isPreviewFavorite: false,
|
||||
},
|
||||
|
||||
onLoad(options: { id?: string; mode?: string }) {
|
||||
@@ -74,13 +75,13 @@ createMathPage({
|
||||
this.initPageInfo(routeId, title);
|
||||
},
|
||||
|
||||
onReady() {
|
||||
onCanvasReady(e: WechatMiniprogram.CustomEvent) {
|
||||
if (!this.currentTypeConfig) return;
|
||||
|
||||
const typeConfig = this.currentTypeConfig;
|
||||
const mode = this.data.currentMode;
|
||||
|
||||
this.initCanvas({
|
||||
this.initCanvasFromComponent(e.detail, {
|
||||
createDrawService: (
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
@@ -246,4 +247,17 @@ createMathPage({
|
||||
);
|
||||
this.drawCanvas();
|
||||
},
|
||||
|
||||
onPreviewRefresh() {
|
||||
this.onRandom();
|
||||
},
|
||||
|
||||
onPreviewFavorite() {
|
||||
const next = !this.data.isPreviewFavorite;
|
||||
this.setData({ isPreviewFavorite: next });
|
||||
wx.showToast({
|
||||
title: next ? '收藏成功' : '已取消收藏',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -3,42 +3,20 @@
|
||||
<view class="md-page">
|
||||
<view class="md-main">
|
||||
<!-- 打印预览卡 -->
|
||||
<view class="md-preview-wrap">
|
||||
<view class="md-preview-card">
|
||||
<text class="md-preview-kicker">打印预览</text>
|
||||
<view id="canvasWrapper" class="md-canvas-wrap">
|
||||
<canvas
|
||||
type="2d"
|
||||
id="canvasContent"
|
||||
class="md-canvas"
|
||||
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 练习类型选择（2列卡片网格） -->
|
||||
<view class="md-section">
|
||||
<text class="md-section-title">练习类型</text>
|
||||
<view class="md-type-grid">
|
||||
<view
|
||||
wx:for="{{typeList}}"
|
||||
wx:key="id"
|
||||
class="md-type-card {{selectedTypeId === item.id ? 'md-type-card--active' : ''}}"
|
||||
data-id="{{item.id}}"
|
||||
hover-class="md-type-card--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bindtap="onSelectType">
|
||||
<text class="md-type-card__icon">{{item.icon}}</text>
|
||||
<text class="md-type-card__label">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<preview-card
|
||||
id="previewCard"
|
||||
showRefresh="{{true}}"
|
||||
showFavorite="{{true}}"
|
||||
favorited="{{isPreviewFavorite}}"
|
||||
bind:canvas-ready="onCanvasReady"
|
||||
bind:refresh="onPreviewRefresh"
|
||||
bind:favorite="onPreviewFavorite" />
|
||||
|
||||
<!-- 子选项（当前类型有模式切换时显示） -->
|
||||
<view wx:if="{{showActions}}" class="md-section">
|
||||
<text class="md-section-title">{{actionsTitle}}</text>
|
||||
<view class="md-chip-row {{currentActions.length > 3 ? 'md-chip-row--wrap' : ''}}">
|
||||
<view
|
||||
class="md-chip-row {{currentActions.length > 3 ? 'md-chip-row--wrap' : ''}}">
|
||||
<view
|
||||
wx:for="{{currentActions}}"
|
||||
wx:key="value"
|
||||
@@ -71,7 +49,26 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 随机生成按钮 -->
|
||||
<!-- 练习类型选择（2列卡片网格） -->
|
||||
<view class="md-section">
|
||||
<text class="md-section-title">练习类型</text>
|
||||
<view class="md-type-grid">
|
||||
<view
|
||||
wx:for="{{typeList}}"
|
||||
wx:key="id"
|
||||
class="md-type-card {{selectedTypeId === item.id ? 'md-type-card--active' : ''}}"
|
||||
data-id="{{item.id}}"
|
||||
hover-class="md-type-card--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bindtap="onSelectType">
|
||||
<text class="md-type-card__icon">{{item.icon}}</text>
|
||||
<text class="md-type-card__label">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 随机生成按钮
|
||||
<view
|
||||
class="md-shuffle-btn"
|
||||
hover-class="md-shuffle-btn--hover"
|
||||
@@ -84,7 +81,7 @@
|
||||
color="#605b50"
|
||||
custom-class="md-shuffle-btn__icon" />
|
||||
<text class="md-shuffle-btn__text">随机生成</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 广告位 -->
|
||||
<draw-ad type="mathDraw"></draw-ad>
|
||||
|
||||
Reference in New Issue
Block a user