R524809
68 lines
2.5 KiB
Plaintext
68 lines
2.5 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"
|
|
word="{{item.word}}"
|
|
color="{{item.color}}"
|
|
bind:onDelete="deleteWordCard"
|
|
bind:onColorTap="onColorTap" />
|
|
</view>
|
|
<view class="word-list-empty" wx:if="{{!cardList.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 class="tianzige" wx:if="{{rowHeaderWords.length > 0}}">
|
|
<view
|
|
class="tzg-row"
|
|
wx:for="{{rowsArray}}"
|
|
wx:for-index="rowIndex"
|
|
wx:key="rowIndex">
|
|
<view
|
|
class="tzg-cell"
|
|
wx:for="{{colsArray}}"
|
|
wx:for-index="colIndex"
|
|
wx:key="{{rowIndex}}-{{colIndex}}">
|
|
<text wx:if="{{colIndex === 0}}" class="tzg-word"
|
|
>{{rowHeaderWords[rowIndex]}}</text
|
|
>
|
|
<view class="mid-line h"></view>
|
|
<view class="mid-line v"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view wx:else class="empty-tip">请选择或输入汉字后生成田字格</view>
|
|
</view>
|
|
|
|
<word-picker
|
|
show="{{showSelectWordPopup}}"
|
|
cardList="{{cardList}}"
|
|
bind:onClose="closeSelectWordPopup"
|
|
bind:onChange="onChangeWord" />
|
|
</view>
|