saas_miniprogram/pages2/exam/signCommit.vue

<template>
    <view class="sign_commit">
        <nav-bar title="签署承诺书"></nav-bar>
        <!-- 考试疫情承诺书 -->
      <view class="appointmentItem">
        <view class="title"><text class="star_red">*</text> 考试疫情承诺书</view>
        <view class="commitment">
          本人参加“住房和城乡建设领域施工现场专业人员岗位”考试，愿意遵守疫情防控各项管理的相关要求，秉承对自己、对他人负责的原则，承担疫情防控社会责任，郑重作出以下承诺：<br/>
          一、充分理解并遵守考试期间考点各项防疫安全的要求。<br/>
          二、在考试前14天内，没有到过国内疫情中风险、高风险地区，未出境，不存在自境外回国情形。<br/>
          三、在考试前14天内，每日自觉监测体温，体温均未出现高于37.3度的情形，无发热和呼吸道门诊就诊史。<br/>
          四、在考试前14天内，未和新冠肺炎病例或疑似病例密切接触或间接接触，没有发烧、干咳、乏力、咳痰、气短、肌肉痛或关节痛、咽喉痛、头痛、寒颤、恶心或呕吐、鼻塞、腹泻、咳血、结膜充血等疑似新冠肺炎症状。<br/>
          五、如出现与前述第二、三、四项任何一项不符的情形之一的，本人将及时在考前向相关管理机构报告，自觉配合采取隔离或其他防疫措施，并根据情况，自愿放弃参加考试。<br/>
          六、考试当日自行做好防护工作，佩戴防护口罩。提前抵达考点，配合查验健康码、测量体温等。<br/>
          七、考试期间，将严格遵守应考人员考场守则及疫情防控相关管理要求，完成考试后立即离场，不扎堆，不聚集。<br/>
          八、本人承诺遵守《应考人员安全承诺书》中所有承诺内容，若因有瞒报、谎报造成新冠肺炎疫情传播的，一经查实，由本人承担相应的法律和经济责任。
        </view>
      </view>
      <view class="appointmentItem">
        <view class="title"><text class="star_red">*</text>签名板</view>
        <view class="dis_stys">
          <text v-if="reportStatus != 1" style="color: #999999">请在下方签名区进行签名</text>
          <text v-if="reportStatus != 1" @click="retDraw()" mode="">清空</text>
        </view>
        <view class="handCenter">
          <canvas
            v-if="reportStatus != 1"
            class="handWriting"
            disable-scroll="true"
            :catchtouchmove="true"
            @touchstart="uploadScaleStart"
            @touchmove="uploadScaleMove"
            @touchend="uploadScaleEnd"
            canvas-id="handWriting"
          ></canvas>
          <view
            v-else
            style="width: 100%; height: 100%; position: relative"
          >
            <image
              style="width: 100%; height: 100%"
              :src="$method.splitImgHost(reportFile)"
              mode=""
            ></image>
          </view>
        </view>
      </view>
      <view v-if="reportStatus != 1" class="finish_btn" @click="submits()">
        完成签署
      </view>
    </view>
</template>

<script>
  import Handwriting from "@/common/signature.js";
export default {
    name: 'sign_commit',
    data() {
        return {
            handwriting: '',
            lineColor: "black",
            slideValue: 30,
            commitment_electr_signature: '',
            isUploading: false,
            reportStatus: 0, // 是否线上签署疫情防控承诺书， 1是，0否
            baseAddress: '', // 签名转成base64
            reportFile: '', // 文件路径
            subscribeId: '',
            phone: '',
        }
    },
    onLoad(option) {
        console.log('option', option)
        const { reportStatus, reportFile, subscribeId, phone } = option
        this.reportStatus = reportStatus
        this.reportFile = reportFile
        this.subscribeId = subscribeId
        this.phone = phone
    },
    onReady(res) {
      this.handwriting = new Handwriting({
        lineColor: this.lineColor,
        slideValue: this.slideValue, // 0, 25, 50, 75, 100
        canvasName: "handWriting",
      });
    },
    methods: {
      retDraw() {
        this.handwriting.retDraw()
        this.commitment_electr_signature = ''
      },
      uploadScaleStart(event) {
        this.handwriting.uploadScaleStart(event);
      },
      uploadScaleMove(event) {
        this.handwriting.uploadScaleMove(event);
      },
      uploadScaleEnd(event) {
        this.handwriting.uploadScaleEnd(event);
      },
      subCanvas() {
        return new Promise((resolve, reject) => {
          if (this.commitment_electr_signature) {
            resolve();
            return;
          }
          this.handwriting.saveCanvas().then((res) => {
              if (this.handwriting.linePrack.length) {
                console.log('签名-----res', res)
                this.commitment_electr_signature = res
              }
              resolve(res)
            })
            .catch((err) => {
                uni.showToast({
                    title: "签名上传失败",
                    icon: "error",
                });
                this.isUploading = false
            });
            
        });
      },
      async submits() {
        if (this.isUploading) {
          return;
        }
        this.isUploading = true

        await this.subCanvas()
        if (!this.commitment_electr_signature) {
            uni.showToast({
            title: "请签名",
            icon: "none",
            })
            this.isUploading = false
            return
        } else {
            if (this.commitment_electr_signature) {
                uni.request({
                    url: this.commitment_electr_signature, //临时路径
                    responseType: 'arraybuffer', //设置返回的数据格式为arraybuffer
                    success: res => {
                        const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(res.data)
                        console.log('sfs签名转成base64', base64)
                        this.baseAddress = base64
                        // return
                        this.$http({
                            url: '/apply/signReport',
                            method: 'post',
                            data: {
                                signImageStr: this.baseAddress,
                                subscribeId: this.subscribeId,
                            }
                        }).then((res) => {
                            console.log('res', res)
                            if (res.data.data == 200) {
                                
                            }
                        })
                    },
                    fail: err => {
                        console.log(err)
                    }
                })
                this.isUploading = false
            }
        }
      },
    },
}
</script>

<style>
  page {
    background-color: #eaeef1;
  }
</style>
<style lang="scss" scoped>
.sign_commit {
  padding-bottom: 50rpx;
  .appointmentItem {
    margin: 24rpx 0 40rpx;
    .title {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 1;
      margin-bottom: 16rpx;
      padding-left: 24rpx;
      .star_red {
        color: red;
      }
    }
    .place {
      height: 80rpx;
      background: #ffffff;
      border-radius: 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24rpx;
    }
    .commitment {
      padding: 12rpx;
      height: 900rpx;
      background: #ffffff;
      overflow-y: auto;
    }
    .handCenter, .dis_stys, .commitment {
      margin: 0rpx 24rpx;
    }
    .dis_stys {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
    }
    .handCenter {
        width: 100%;
        height: 400rpx;
        .handWriting {
            width: 100%;
            height: 100%;
            background: #fff;
        }
    }
  }
  .finish_btn {
    // width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background-color:#1890ff;
    font-size: 32rpx;
    color: #fff;
    border-radius: 10rpx;
    margin: 20rpx 24rpx;
  }
}
</style>