R524809
82 lines
2.7 KiB
Plaintext
82 lines
2.7 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="{{words.length > 0}}">
|
|
<word-card
|
|
disabledColor="{{true}}"
|
|
wx:key="index"
|
|
wx:for="{{words}}"
|
|
wx:for-item="word"
|
|
wx:for-index="index"
|
|
word="{{word}}"
|
|
bind:onDelete="deleteWordCard"
|
|
bind:onColorTap="onColorTap" />
|
|
</view>
|
|
<view class="word-list-empty" wx:if="{{!words.length}}">
|
|
<view class="empty-icon">
|
|
<text class="toy-icon toy-icon-translate"></text>
|
|
</view>
|
|
<view class="empty-title">还没有添加文字</view>
|
|
<view class="empty-desc"
|
|
>请在上方输入文字或点击"选择文字"按钮<br />开始创建你的练字田字格吧！</view
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view id="previewWrapper" class="wrapper">
|
|
<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>
|
|
|
|
<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="{{words.length <= 0}}"
|
|
icon="download"
|
|
icon-class-prefix="toy-icon">
|
|
下载打印
|
|
</toy-button>
|
|
</view>
|
|
<word-picker
|
|
show="{{showSelectWordPopup}}"
|
|
selectedWords="{{words}}"
|
|
max="11"
|
|
bind:onClose="closeSelectWordPopup"
|
|
bind:onChange="onChangeWord" />
|
|
|
|
<view class="empty"></view>
|
|
</view>
|