R524809
203 lines
8.0 KiB
Plaintext
203 lines
8.0 KiB
Plaintext
<view class="page-container">
|
|
<view class="wrapper">
|
|
<text class="wrapper-title">自定义涂鸦卡</text>
|
|
<view class="word-input-box">
|
|
<word-input bind:onConfirm="onConfirmInput" width="410rpx" />
|
|
<toy-button
|
|
type="green"
|
|
bind:click="openSelectWordPopup"
|
|
width="200rpx">
|
|
选择文字
|
|
</toy-button>
|
|
</view>
|
|
|
|
<view class="word-card-box">
|
|
<view class="word-cards-grid" wx:if="{{cardList.length > 0}}">
|
|
<word-card
|
|
wx:key="index"
|
|
wx:for="{{cardList}}"
|
|
wx:for-item="item"
|
|
wx:for-index="index"
|
|
key="{{index}}"
|
|
word="{{item.word}}"
|
|
color="{{item.color}}"
|
|
bind:onDelete="deleteWordCard"
|
|
bind:onColorTap="onColorTap" />
|
|
</view>
|
|
<empty-state
|
|
wx:if="{{!cardList.length}}"
|
|
title="还没有添加文字"
|
|
desc="请在上方输入文字或点击“选择文字”按钮，开始创建你的涂鸦卡吧！"
|
|
hint="提示：最多可以同时添加 6 个文字" />
|
|
</view>
|
|
<view class="operation-box">
|
|
<toy-button
|
|
type="primary"
|
|
bind:click="refreshCardList"
|
|
width="410rpx"
|
|
icon="refresh"
|
|
icon-class-prefix="toy-icon">
|
|
随机生成
|
|
</toy-button>
|
|
<toy-button
|
|
disabled="{{cardList.length <= 0}}"
|
|
type="white"
|
|
bind:click="clearCardList"
|
|
width="200rpx"
|
|
icon="clear"
|
|
icon-class-prefix="toy-icon">
|
|
清空
|
|
</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>
|
|
<view id="canvasWrapper" class="canvas-wrapper">
|
|
<canvas
|
|
type="2d"
|
|
id="canvasContent"
|
|
class="canvas-content"
|
|
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
|
|
</view>
|
|
</view>
|
|
<van-cell
|
|
wx:if="{{env !== 'release'}}"
|
|
is-link
|
|
title="debug页面"
|
|
link-type="navigateTo"
|
|
url="/pages/debug/debug" />
|
|
<view class="empty"></view>
|
|
<color-picker
|
|
show="{{showColorPopup}}"
|
|
currentColor="{{currentColor}}"
|
|
bind:onClose="onCloseColorPopup"
|
|
bind:onChange="onChangeColor" />
|
|
<word-picker
|
|
show="{{showSelectWordPopup}}"
|
|
cardList="{{cardList}}"
|
|
bind:onClose="closeSelectWordPopup"
|
|
bind:onChange="onChangeWord" />
|
|
</view>
|
|
<view class="bottom-btn-box">
|
|
<toy-button
|
|
openType="share"
|
|
type="green"
|
|
flat="{{true}}"
|
|
bind:click="onShareAppMessage"
|
|
width="220rpx"
|
|
height="80rpx"
|
|
icon="wechat"
|
|
icon-class-prefix="toy-icon">
|
|
分享
|
|
</toy-button>
|
|
<toy-button
|
|
type="primary"
|
|
flat="{{true}}"
|
|
bind:click="exportToPrint"
|
|
width="420rpx"
|
|
height="80rpx"
|
|
disabled="{{cardList.length <= 0}}"
|
|
icon="download"
|
|
icon-class-prefix="toy-icon">
|
|
下载打印
|
|
</toy-button>
|
|
</view>
|
|
<introduction-popup
|
|
wx:if="{{showIntroductionPopup}}"
|
|
bind:onClose="onCloseIntroductionPopup" />
|