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;
|
||||
}
|
||||
|
||||
/* ===== 预览卡 ===== */
|
||||
.fd-preview-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fd-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;
|
||||
}
|
||||
|
||||
.fd-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;
|
||||
}
|
||||
|
||||
.fd-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;
|
||||
}
|
||||
|
||||
.fd-canvas {
|
||||
max-width: 100%;
|
||||
border-radius: @radius-sm;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
/* ===== 区块 ===== */
|
||||
.fd-section {
|
||||
display: flex;
|
||||
|
||||
@@ -35,6 +35,7 @@ createFocusPage({
|
||||
actionsTitle: '选择模式',
|
||||
currentActions: [] as FocusTypeAction[],
|
||||
currentMode: '',
|
||||
isPreviewFavorite: false,
|
||||
},
|
||||
|
||||
onLoad(options: { id?: string; mode?: string }) {
|
||||
@@ -65,13 +66,13 @@ createFocusPage({
|
||||
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,
|
||||
@@ -181,4 +182,18 @@ createFocusPage({
|
||||
);
|
||||
this.drawCanvas();
|
||||
},
|
||||
|
||||
/** 打印预览角标：换一批，与「随机生成」相同逻辑 */
|
||||
onPreviewRefresh() {
|
||||
this.onRandom();
|
||||
},
|
||||
|
||||
onPreviewFavorite() {
|
||||
const next = !this.data.isPreviewFavorite;
|
||||
this.setData({ isPreviewFavorite: next });
|
||||
wx.showToast({
|
||||
title: next ? '收藏成功' : '已取消收藏',
|
||||
icon: 'none',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -3,15 +3,29 @@
|
||||
<view class="fd-page">
|
||||
<view class="fd-main">
|
||||
<!-- 打印预览卡 -->
|
||||
<view class="fd-preview-wrap">
|
||||
<view class="fd-preview-card">
|
||||
<text class="fd-preview-kicker">打印预览</text>
|
||||
<view id="canvasWrapper" class="fd-canvas-wrap">
|
||||
<canvas
|
||||
type="2d"
|
||||
id="canvasContent"
|
||||
class="fd-canvas"
|
||||
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
|
||||
<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="fd-section">
|
||||
<text class="fd-section-title">{{actionsTitle}}</text>
|
||||
<view class="fd-chip-row">
|
||||
<view
|
||||
wx:for="{{currentActions}}"
|
||||
wx:key="value"
|
||||
class="fd-chip {{currentMode === item.value ? 'fd-chip--active' : ''}}"
|
||||
data-value="{{item.value}}"
|
||||
hover-class="fd-chip--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bindtap="onSelectMode">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -35,25 +49,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 子选项（当前类型有模式切换时显示） -->
|
||||
<view wx:if="{{showActions}}" class="fd-section">
|
||||
<text class="fd-section-title">{{actionsTitle}}</text>
|
||||
<view class="fd-chip-row">
|
||||
<view
|
||||
wx:for="{{currentActions}}"
|
||||
wx:key="value"
|
||||
class="fd-chip {{currentMode === item.value ? 'fd-chip--active' : ''}}"
|
||||
data-value="{{item.value}}"
|
||||
hover-class="fd-chip--pressed"
|
||||
hover-start-time="0"
|
||||
hover-stay-time="70"
|
||||
bindtap="onSelectMode">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 随机生成按钮 -->
|
||||
<!-- 随机生成按钮
|
||||
<view
|
||||
class="fd-shuffle-btn"
|
||||
hover-class="fd-shuffle-btn--hover"
|
||||
@@ -66,7 +62,7 @@
|
||||
color="#605b50"
|
||||
custom-class="fd-shuffle-btn__icon" />
|
||||
<text class="fd-shuffle-btn__text">随机生成</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 广告位 -->
|
||||
<draw-ad type="focusDraw"></draw-ad>
|
||||
|
||||
Reference in New Issue
Block a user