（小程序）客户签名及签名后页面整体转图片后上传

最新推荐文章于 2023-10-11 16:46:01 发布

web_hj

最新推荐文章于 2023-10-11 16:46:01 发布

阅读量1k

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/web_hj/article/details/121337539

版权

本文介绍了一个小程序项目的需求，其中涉及到门店老板在销货清单上签名，然后将签名连同清单一起转化为图片并上传到服务器。项目利用handwriting插件实现签名功能，wxml-to-canvas插件将页面转换为图片。详细代码未在摘要中展示。

摘要由CSDN通过智能技术生成

先说明下项目需求：

1、销货清单需要门店老板签名

2、签名后将签名以及铺货清单整体转为图片上传到服务器

图片展示：

图片说明：1：页面结构上面为清单下面为客户签名展示区域

2：点击图1 客户签名区域弹出签名面板

3：图2 签名完成后页面展示签名；点击保存后将整个页面转为图片上传到服务器

4：上传到服务器后返回的图片

项目使用插件说明：

1、客户签名使用 handwriting

小程序插件-手写签名 - 简书

2、页面转图片使用 wxml-to-canvas

wxml-to-canvas | 微信开放文档

代码展示：

看代码之前先熟悉下两个插件，两个插件的代码没有贴上来。

整个功能主要就是两个插件的引用。

wxml:

<view class="page-title">
  <view class="h1-view">***配送中心</view>
  <view class="h3-view">{
  {sale.type === 10 ?'销货':'退货'}}清单</view>
</view>

<view class="shop-name-view marginB10 flex flex_LT flex_column_center">
  <view>客户：{
  {sale.distributor_name}}</view>
  <view>{
  {sale.created_at_text}}</view>
</view>

<view class="page-main">
  <view class="table-row flex flex_LT flex_column_center">
    <view class="idx-view">序号</view>
    <view class="name-view">名称及规格</view>
    <view class="unit-view">单位</view>
    <view class="qty-view">数量</view>
    <view class="price-view">单价</view>
    <view class="amount-view">金额</view>
  </view>
  <view>
    <block wx:for="{
  {sale.goods}}" wx:key="index">
      <view class="table-row flex flex_LT flex_column_center">
        <view class="idx-view">{
  {index+1}}</view>
        <view class="name-view">{
  {item.goods_name}}</view>
        <view class="unit-view">{
  {item.unit_name}}</view>
        <view class="qty-view">{
  {item.qty}}</view>
        <view class="price-view">{
  {item.price_text}}</view>
        <view class="amount-view">{
  {item.amount_text}}</view>
      </view>
    </block>
    <block wx:if="{
  {sale.goods.length < 6}}">
      <block wx:for="{
  {6 -sale.goods.length}}" wx:key="index">
        <view class="table-row flex flex_LT flex_column_center">
          <view class="idx-view">{
  {6-(6-sale.goods.length)+1+index}}</view>
          <view class="name-view"></view>
          <view class="unit-view"></view>
          <view class="qty-view"></view>
          <view class="price-view"></view>
          <view class="amount-view"></view>
        </view>
      </block>
    </block>
  </view>

  <view class="count-view table-row flex flex_column_center">
    <text class="count-label">合计：</text>
    <text class="count-amount">{
  {sale.sum_amount_text}}</text>
    <text class="count-end-label">元</text>
  </view>
</view>

<view class="page-footer">
  <view class="address">地址：******************</view>
  <view class="created-by">制单： {
  {sale.created_by}}</view>
  <view class="customer-name flex">
    <text class="customer-label">客户签名：</text>
    <view class="handwriting">
      <handwriting bindOnEdit="onHnadwritingEdit" bindOnClose="onHnadwritingClose" bindOnComplete="onHnadwritingComple