微信小程序vant+canvas实现签名

最新推荐文章于 2025-01-08 09:21:45 发布

原创

最新推荐文章于 2025-01-08 09:21:45 发布 · 1.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序

微信小程序canvas实现签名

话不多说，先看效果
图1.签名样式
在这里插入图片描述
图2.页面展示效果

下面是具体代码

canvas.wxml


<view class="signBox border">
  <view class="flex-center">
    <view>商户签字</view>
    <van-image style="padding-left:30rpx" wx:if="{
  
  {sign}}" src="{
  
  {sign}}" width="100" height="50" fit="contain"/>
  </view>
  <van-button type="primary" size="small" color="#12b2a8" bind:click="toSign">{
  
  {form.sign == '' ? '点击签名' : '点击重签'}}
  </van-button>
  <!-- <button style="margin-top: 30rpx;" bindtap="submitSignature" disabled="{
  
  {!isSignatureFinish}}">提交保存</button> -->
</view>
<view class="bottom">
  <van-button block round type="primary" color="#12b2a8" bind:click="makeEOrder">
    完成</van-button>
</view>
<page-container show="{
  
  {showPage}}" overlay="{
  
  {false}}" round="{
  
  {false}}" close-on-slideDown="{
  
  {false}}" z-index="1000">
  <view class="flex" style="height: 100vh;">
    <view class="sign-btn-container">
      <view class="cu-btn" bindtap="hideSignPage">取消/返回</view>
      <view class="cu-btn {
  
  {isSignatureFinish?'bg-blue light':''}}" bindtap="clearCanvas">重新签名</view>
      <view class="cu-btn {
  
  {isSignatureFinish?'bg-blue light':''}}" bindtap="co

最低0.47元/天解锁文章