Blizzard
586875f8c5
- canvas 重画成上下两张：正面(暖黄，头像/名字性别/性别品种毛色年龄/性格 彩色标签/介绍/物ID+一起生活天数)、背面(蓝色照护信息条 + 主人/电话/疫苗/ 备注/发证机构/有效期 + 走失联系框&小程序码) - 生成前查手机号：没有则唤起 getPhoneNumber 组件，验证成功才生成； 拒绝则提示「无法生成」不出卡 - IDCard 增 age/days；ic-canvas 高度改 1480 否则导出被裁 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
39 lines
1.8 KiB
Plaintext
39 lines
1.8 KiB
Plaintext
<nav-bar title="身份卡" show-back="{{true}}"></nav-bar>
|
|
|
|
<scroll-view class="page-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
|
|
<view class="page-body ic-body">
|
|
<!-- 手机号门槛：没验证不生成，先唤起微信取号 -->
|
|
<view wx:if="{{needPhone}}" class="ic-gate">
|
|
<view class="ic-gate-ic"><pt-icon name="user" size="{{72}}"></pt-icon></view>
|
|
<view class="ic-gate-t">生成身份卡需要手机号</view>
|
|
<view class="ic-gate-p">身份卡背面的「联系电话」用于走失时联系你，验证后才能生成</view>
|
|
<button wx:if="{{!phoneRefused}}" class="btn btn-primary btn-block ic-gate-btn" open-type="getPhoneNumber" bindgetphonenumber="onGetPhone">用微信验证手机号</button>
|
|
<view wx:else class="ic-gate-refuse">没有手机号，无法生成身份卡</view>
|
|
</view>
|
|
|
|
<!-- 画好的卡当成图片展示。canvas 本身是离屏的（挪到屏幕外），只用来生成图 -->
|
|
<block wx:else>
|
|
<view class="ic-stage">
|
|
<image wx:if="{{cardImg}}" class="ic-img" src="{{cardImg}}" mode="widthFix" show-menu-by-longpress="{{true}}"></image>
|
|
<view wx:else class="ic-loading">正在生成身份卡…</view>
|
|
</view>
|
|
|
|
<view wx:if="{{!qrReady}}" class="ic-tip">
|
|
小程序码要在小程序发布后才会出现，现在先放一个占位。
|
|
</view>
|
|
|
|
<view class="ic-actions">
|
|
<view class="btn btn-soft ic-btn" bindtap="onSave">
|
|
<pt-icon name="photo" size="{{32}}"></pt-icon>下载到相册
|
|
</view>
|
|
<button class="btn btn-dark ic-btn" open-type="share">
|
|
<pt-icon name="share" size="{{32}}"></pt-icon>分享给好友
|
|
</button>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 离屏 canvas：挪到屏幕外，只用来画图导出 -->
|
|
<canvas type="2d" id="idCanvas" class="ic-canvas"></canvas>
|