• 微信小程序签名

    2. <view style="padding: 15rpx;font-size: 26rpx;">
    3.     <view style="width: 720rpx;margin-left: 15rpx;">
    4.         <view><rich-text nodes="{{content}}">rich-text>view>
    5.         <view style="margin-top: 50rpx;">
    6.             <view style="display: flex;">
    7.                <view>签名view>
    8.                <view style="position: absolute;margin-left: 60rpx;margin-top: -30rpx;"><image style="width: 170rpx;height: 60rpx;" src="{{img}}">image>view>
    9.             view>
    10.             <view style="width: 200rpx;border-bottom: 1rpx solid #000000;margin-left: 56rpx;">view>
    11.             <view wx:if="{{img == ''}}" style="text-align: center;margin-top: 50rpx;width: 730rpx;">
    12.                 <view class="dade_sign"  bindtap="sign">签名view>
    13.             view>
    14.             <view wx:else style="text-align: center;margin-top: 50rpx;width: 730rpx;">
    15.                 <view class="dade_sign_xh"  bindtap="xhsign">确定签署协议view>
    16.             view>
    17.         view>
    18.         
    19.         <view style="{{sign==1 ? ' display: none;' : ''}}">
    20.             <view class="dade_sign_top" catchtouchmove='true'>
    21.                 <view style="display: flex;line-height: 70rpx;">
    22.                    <view style="width: 750rpx;text-align: center;">开始签名view>
    23.                    <view style="position: absolute;right: 50rpx;" bindtap="colse">关闭view>
    24.                 view>
    25.                 <view>
    26.                     <canvas style="width: 750rpx;background-color: rgb(242, 247, 247);position: fixed;" canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove">canvas>
    27.                 view>
    28.                 <view style="display: flex;position: absolute;bottom: 40rpx;">
    29.                     <button style="font-size: 26rpx;height: 70rpx;border-radius: 100rpx;padding: 0 105rpx;margin-top: 40rpx;background-color: rgb(247, 145, 86);margin-left: 66rpx;" type="warn" bindtap='clear'>重签button>
    30.                     <button style="font-size: 26rpx;height: 70rpx;border-radius: 100rpx;padding: 0 75rpx;margin-top: 40rpx;background-color: rgb(74, 135, 248);margin-left: 66rpx;" type="primary"  bindtap='export'>完成签名button>
    31.                 view>
    32.             view>
    33.         view>
    34.  
    35.     view>
    36.     
    37. view>
    38.  
    1. // pages/topay/sign/sign.js
    2. var app = getApp();
    3. var api = require('../../../api.js');
    4. var util = require("../../../utils/util.js");
    5. Page({
    6.  
    7.     /**
    8.      * 页面的初始数据
    9.      */
    10.     data: {
    11.         context: null,
    12.         index: 0,
    13.         height: 0,
    14.         width: 0,
    15.         img:'',
    16.         sign:1,
    17.         url:'',
    18.         path:'',
    19.         content:'',
    20.     },
    21.  
    22.     /**记录开始点 */
    23.   bindtouchstart: function(e) {
    24.     this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
    25.   },
    26.   /**记录移动点，刷新绘制 */
    27.   bindtouchmove: function(e) {
    28.     this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
    29.     this.data.context.stroke();
    30.     this.data.context.draw(true);
    31.     this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
    32.   },
    33.   
    34.   /**清空画布 */
    35.   clear: function() {
    36.     this.data.context.clearRect(0, 0, this.data.width, this.data.height);
    37.     this.data.context.draw();
    38.     this.data.context.setStrokeStyle('#000000')
    39.     this.data.context.setLineWidth(4)
    40.     this.data.context.setFillStyle('white')
    41.     this.data.context.setFontSize(20)
    42.     let str = "";
    43.     this.data.context.fillText(str, Math.ceil((this.data.width - this.data.context.measureText(str).width) / 2), Math.ceil(this.data.height / 2) - 20)
    44.     this.data.context.draw()
    45.   },
    46.   /**导出图片 */
    47.   export: function() {
    48.     const that=this;
    49.     wx.canvasToTempFilePath({
    50.         canvasId: 'firstCanvas',
    51.         success: function(res) {
    52.           //打印图片路径
    53.           //console.log(res.tempFilePath)
    54.           //设置保存的图片
    55.           // that.setData({
    56.           //   img: res.tempFilePath
    57.           // })
    58.           let imgurl = res.tempFilePath;
    59.         wx.getFileSystemManager().readFile({
    60.             filePath: res.tempFilePath, //选择图片返回的相对路径
    61.             encoding: 'base64', //编码格式
    62.             success: res => {
    63.                 let imgs =  res.data;
    64.                 let data = {'img':imgs};
    65.                 util.post({
    66.                     api_url: api.payOrderSign,
    67.                     params: data,
    68.                     success: function (res) {
    69.                         console.log(res.data.data.data)
    70.                         that.data.sign = 1;
    71.                         that.data.context.setLineWidth(4)
    72.                         that.data.context.setFillStyle('white')
    73.                         that.data.url=res.data.data.data;
    74.                         that.data.path=res.data.data.path;
    75.                         that.setData({
    76.                             img:res.data.data.data,
    77.                             sign:1
    78.                         })
    79.                     }, fail: function (res) {
    80.                         that.setData({"loading.hidden": true});
    81.                         util.showMsg("网络不给力");
    82.                     }
    83.                 }); 
    84.             }
    85.           })
    86.       }
    87.     })
    88.   },
    89.   onLoad: function(options) {
    90.     console.log(options.id);
    91.     if (options.id) {
    92.       wx.showToast({
    93.         title: '姓名' + options.id,
    94.         icon: 'success',
    95.         duration: 2000
    96.       })
    97.     }
    98.   },
    99.   onShow: function() {
    100.     let query = wx.createSelectorQuery();
    101.     const that = this;
    102.     query.select('#firstCanvas').boundingClientRect();
    103.     query.exec(function(rect) {
    104.       let width = rect[0].width;
    105.       let height = rect[0].height;
    106.       that.setData({
    107.         width,
    108.         height
    109.       });
    110.       const context = wx.createCanvasContext('firstCanvas')
    111.       
    112.       context.setStrokeStyle('#000000')
    113.       context.setLineWidth(4)
    114.       context.setFontSize(20)
    115.       context.setFillStyle('white')
    116.       let str = "";
    117.       context.fillText(str, Math.ceil((width - context.measureText(str).width) / 2), Math.ceil(height / 2) - 20)
    118.       context.draw()
    119.       that.setData({
    120.         context: context
    121.       })
    122.     });
    123.   },
    124.  
    125.     /**
    126.      * 生命周期函数--监听页面加载
    127.      */
    128.     onLoad: function (options) {
    129.         let _this = this;
    130.         var data = {'shool_id':3};
    131.         util.post({
    132.             api_url: api.payGetSign,
    133.             params: data,
    134.             success: function (res) {
    135.                 _this.data.content = res.data.data.data[0].content;
    136.                 _this.setData({
    137.                     content:res.data.data.data[0].content
    138.                 })
    139.             }, fail: function (res) {
    140.                 that.setData({"loading.hidden": true});
    141.                 util.showMsg("网络不给力");
    142.             }
    143.         }); 
    144.     },
    145.  
    146.     /**
    147.      * 生命周期函数--监听页面初次渲染完成
    148.      */
    149.     onReady: function () {
    150.  
    151.     },
    152.  
    153.  
    154.     /**
    155.      * 生命周期函数--监听页面隐藏
    156.      */
    157.     onHide: function () {
    158.  
    159.     },
    160.  
    161.     /**
    162.      * 生命周期函数--监听页面卸载
    163.      */
    164.     onUnload: function () {
    165.  
    166.     },
    167.  
    168.     /**
    169.      * 页面相关事件处理函数--监听用户下拉动作
    170.      */
    171.     onPullDownRefresh: function () {
    172.  
    173.     },
    174.  
    175.  
    176.  
    177.     // 签名
    178.     sign:function(){
    179.         this.data.sign = 2;
    180.         this.setData({
    181.             sign:2
    182.         })
    183.     },
    184.     //关闭签名
    185.     colse:function(){
    186.         this.data.sign = 1;
    187.         this.setData({
    188.             sign:1
    189.         })
    190.     },
    191.     //确定签署协议
    192.     xhsign:function(){
    193.         var pages = getCurrentPages();
    194.         var prevPage = pages[pages.length - 2]; // 上一个页面
    195.         let urls = this.data.url;
    196.         let paths = this.data.path;
    197.         let contents = this.data.content;
    198.         console.log(urls)
    199.         //改变上一页参数
    200.         prevPage.setData({
    201.             url:urls,
    202.             path:paths,
    203.             content:contents,
    204.         })
    205.         //返回上一页
    206.         wx.navigateBack({
    207.             delta: 1
    208.         })
    209.     },
    210.  
    211. })
    1. /* pages/topay/sign/sign.wxss */
    2. page {
    3.     background-color: #ffffff;
    4. }
    5. .dade_sign{
    6.     width: 100rpx;
    7.     background-color: rgb(40, 122, 245);
    8.     padding: 10rpx 15rpx 10rpx 15rpx;
    9.     border-radius: 100rpx;
    10.     font-size: 25rpx;
    11.     color: #ffffff;
    12.     margin-left: 300rpx;
    13.     margin-bottom: 10rpx;
    14. }
    15. .dade_sign_xh{
    16.     width: 200rpx;
    17.     background-color: rgb(231, 65, 74);
    18.     padding: 10rpx 15rpx 10rpx 15rpx;
    19.     border-radius: 100rpx;
    20.     font-size: 25rpx;
    21.     color: #ffffff;
    22.     margin-left: 270rpx;
    23.     margin-bottom: 10rpx;
    24. }
    25.  
    26. .dade_sign_top{
    27.     position: fixed;
    28.     bottom: 0;
    29.     width: 100%;
    30.     height: 530rpx;
    31.     background-color: #ffffff;
    32.     border-top-left-radius: 10rpx;
    33.     border-top-right-radius: 10rpx;
    34.     z-index: 1000;
    35. }

  • 相关阅读:
    Vue07/Vue 具名插槽 及 作用域插槽( 带数据插槽 ) 作用介绍和说明
    字符（字符数组）越界
    【每日一题Day336】LC146最近最少使用缓存 | 哈希表+链表
    Git代码仓库管理系统的配置方法之：Gitlab
    ES:模板字符串的使用
    前端三剑客 - JavaScript
    Zookeeper-命令操作
    Kitex踩坑 [Error] KITEX: processing request error,i/o timeout
    系统性详解Redis操作Hash类型数据（带源码分析及测试结果）
    【正点原子STM32连载】 第二十五章 TFTLCD（MCU屏）实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
  • 原文地址：https://blog.csdn.net/qq_34631220/article/details/126299389