85 lines
2.5 KiB
Plaintext
85 lines
2.5 KiB
Plaintext
<view class="page-container">
|
|
<view class="wrapper">
|
|
<text class="wrapper-title">自定义涂鸦卡</text>
|
|
<view class="btn-area">
|
|
<toy-button
|
|
type="green"
|
|
bind:click="openSelectShapePopup"
|
|
width="290rpx">
|
|
选择图形
|
|
</toy-button>
|
|
<toy-button
|
|
type="primary"
|
|
bind:click="refreshShapeCard"
|
|
width="290rpx"
|
|
icon="refresh"
|
|
icon-class-prefix="toy-icon">
|
|
随机生成
|
|
</toy-button>
|
|
</view>
|
|
<van-divider />
|
|
<view class="shape-list">
|
|
<shape-card
|
|
wx:for="{{ shapeList }}"
|
|
wx:for-item="item"
|
|
wx:for-index="index"
|
|
wx:key="{{index}}"
|
|
index="{{index}}"
|
|
svg="{{ item.svg }}"
|
|
fillColor="{{ item.fillColor }}"
|
|
bind:onShapeTap="openSelectShapePopup"
|
|
bind:onDelete="onDelete"
|
|
bind:onColorTap="onColorTap" />
|
|
</view>
|
|
</view>
|
|
<shape-picker
|
|
show="{{showSelectShapePopup}}"
|
|
selectedShapeIndex="{{selectedShapeIndex}}"
|
|
bind:onClose="closeSelectShapePopup"
|
|
bind:onChange="onChangeShape" />
|
|
<color-picker
|
|
show="{{showColorPopup}}"
|
|
currentColor="{{currentColor}}"
|
|
bind:onClose="onCloseColorPopup"
|
|
bind:onChange="onChangeColor" />
|
|
|
|
<view id="previewWrapper" class="wrapper">
|
|
<text class="wrapper-title">预览打印效果 {{currentShapeId}}</text>
|
|
<view
|
|
wx:if="{{!isPCDevtool}}"
|
|
id="canvasWrapper"
|
|
class="canvas-wrapper">
|
|
<canvas
|
|
type="2d"
|
|
id="canvasContent"
|
|
class="canvas-content"
|
|
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
|
|
</view>
|
|
</view>
|
|
<view class="empty"></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="{{shapeList.length <= 0}}"
|
|
icon="download"
|
|
icon-class-prefix="toy-icon">
|
|
下载打印
|
|
</toy-button>
|
|
</view>
|