sishitongtang-worker/pages/sign/sign.vue

<template>
  <view class="sign">
    <canvas canvas-id="sign-cnv" :style="{ height: cnv.height + 'px', width: cnv.width + 'px' }"></canvas>
    <image class="hide-img" ref="resultImg" :src="src" alt="" @load="resultImgLoad"></image>
    <view class="sign-bkg">
      <view class="sign-bkg__word">
        <span>签</span>
        <span>名</span>
      </view>
    </view>

<!--    <view class="sign-pic">-->
<!--      <image src="/static/cloud.png" class="sign-pic__cloud" mode="widthFix"></image>-->
<!--      <image class="sign-pic__city" src="/static/home-city.png" mode="widthFix" />-->
<!--    </view>-->

    <view class="sign-cnv">
      <l-signature disableScroll backgroundColor="#ddd" ref="signatureRef" :penColor="options.penColor"
                   :backgroundColor="options.backgroundColor" :penSize="options.penSize" :openSmooth="options.openSmooth">
      </l-signature>
    </view>

    <view class="sign-btn">
      <view class="sign-btn__back" @click="$u.throttle(pageBack())">返回</view>
      <view class="sign-btn__reset" @click="$u.throttle(onClick('clear'))">重置</view>
      <view class="sign-btn__confirm" @click="$u.throttle(onClick('save'))">确认</view>
    </view>
  </view>
</template>

<script>
import {
  base64ToFile, writeFile
} from '@/common/util.js'
import {
  ROOTPATH
} from '@/common/config.js'
export default {
  data() {
    return {
      src: '',
      Img: {},
      cnv: {
        width: 300,
        height: 225
      },
      saveKey: '',
      url: '',
      options: {
        penColor: '#000',
        penSize: 16,
        openSmooth: true,
        backgroundColor: 'rgba(0,0,0,0)'
      },
    }
  },
  methods: {
    resultImgLoad (e) {
      // this.Img = e.detail;
      // let rate = this.Img.width / this.Img.height;
      // this.cnv.width  = this.Img.height;
      // this.cnv.height = this.Img.width ;
      // this.rotateImage(this.src, 270)
    },
    pageBack () {
      uni.navigateBack()
    },
    //src - 图片路径，deg旋转角度
    rotateImage(src, degree) {
      const ctx = uni.createCanvasContext('sign-cnv',this);
      ctx.translate(this.cnv.width / 2, 0);
      ctx.rotate(degree * Math.PI / 180);
      ctx.drawImage(src, 0, 0,-this.cnv.width / 2, -this.cnv.height / 2, this.cnv.width, this.cnv.height);
      ctx.draw(false, () => {
        // 将canvas转换为图片
        uni.canvasToTempFilePath({
          canvasId: 'sign-cnv',
          success: (res) => {
            // res.tempFilePath是旋转后的图片路径
            console.log(this.saveKey, res.tempFilePath)
            this.$u.vuex(this.saveKey, res.tempFilePath)
            setTimeout(() => {
              this.pageBack()
            }, 500)
          },
          fail: (err) => {
            console.error(err);
          }
        });
      });
    },

    onClick(type) {
      if (type == 'openSmooth') {
        this.openSmooth = !this.openSmooth
        return
      }
      if (type == 'save') {
        this.$refs.signatureRef.canvasToTempFilePath({
          success: (res) => {
            // 是否为空画板 无签名
            if (res.isEmpty) {
              uni.showToast({
                title: '请签名',
                icon: 'none'
              })
              return
            }
            // 生成图片的临时路径
            // app | H5 | 微信小程序 生成的是base64
            if (res.tempFilePath) {
              //this.$u.vuex('vuex_sign_base64', res.tempFilePath)
              writeFile(res.tempFilePath).then(url => {
                // console.log(url)
                // this.src = url
                this.$u.vuex(this.saveKey, url)
                setTimeout(() => {
                  this.pageBack()
                }, 500)
              })

              // this.rotateBase64Img(res.tempFilePath, -90).then(res => {
              //   this.$u.vuex(this.saveKey, res)
              //   this.pageBack()
              // })
            }
          }
        })
        return
      }
      if (this.$refs.signatureRef)
        this.$refs.signatureRef[type]()
    },
  },
  onLoad (option) {
    console.log(option)
    this.saveKey = option.key;
  }
}
</script>

<style scoped lang="scss">
.hide-img {
  position: fixed;
  width: 200px;
  object-fit: contain;
  top: 0;
  left: 0;
  z-index: 999999999;
}
@media screen and (orientation: portrait) {
  .sign {
    height: 100vh;
    width: 100vw;

    &-pic {
      width: 100vh;
      display: flex;
      align-items: flex-end;
      transform: rotate(90deg) translateX(0%) translateY(-100%);
      transform-origin: 0 0;

      position: absolute;

      &__cloud {
        flex: 1;

      }

      &__city {
        flex: 1;

      }
    }

    &-bkg {
      background-color: #FEFAEE;

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &__word {
        width: 390rpx;
        font-size: 128rpx;
        //font-family: CloudHeiTiGBK;
        font-weight: 400;
        color: #BBB6B2;
        opacity: 0.3;
        display: flex;
        justify-content: space-between;
        transform: rotate(90deg) translateX(-50%) translateY(calc(-100% - 426rpx));
        transform-origin: 0 0;

        position: absolute;
        top: 50%;
      }
    }

    &-cnv {

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    &-btn {
      display: flex;
      transform: rotate(90deg) translateX(-50%) translateY(-100%);
      transform-origin: 0% 0%;

      margin-left: 112rpx;
      z-index: 99999;
      position: fixed;
      top: 50%;

      &__back {
        width: 200rpx;
        height: 66rpx;
        background: #FEFAEE;
        border: 4rpx solid #CA3F32;
        border-radius: 34rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #B61F2E;
        line-height: 58rpx;
        text-align: center;

        margin-right: 52rpx;
      }
      &__reset {
        width: 200rpx;
        height: 66rpx;
        background: #FEFAEE;
        border: 4rpx solid #CA3F32;
        border-radius: 34rpx;
        font-size: 26rpx;
        //font-family: FZXiaoBiaoSong-B05S;
        font-weight: 400;
        color: #B61F2E;
        line-height: 58rpx;
        text-align: center;

        margin-right: 52rpx;
      }

      &__confirm {
        font-size: 26rpx;
        //font-family: FZXiaoBiaoSong-B05S;
        font-weight: 400;
        color: #FFFFFF;
        width: 200rpx;
        height: 66rpx;
        background: linear-gradient(0deg, #E16055, #C54439);
        border-radius: 34rpx;
        line-height: 66rpx;
        text-align: center;
      }
    }
  }
}


@media screen and (orientation: landscape) {
  .sign {
    height: 100vh;
    width: 100vw;

    &-pic {
      width: 100vw;
      display: flex;
      align-items: flex-end;

      position: absolute;
      bottom: 0;

      &__cloud {
        flex: 1;

      }

      &__city {
        flex: 1;

      }
    }

    &-bkg {
      background-color: #FEFAEE;

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &__word {
        width: 18vw;
        font-size: 6vw;
        //font-family: CloudHeiTiGBK;
        font-weight: 400;
        color: #BBB6B2;
        opacity: 0.3;
        display: flex;
        justify-content: space-between;
        transform: translate(-50%, -50%);

        position: absolute;
        top: 50%;
        left: 50%;
      }
    }

    &-cnv {

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    &-btn {
      display: flex;
      transform: translateX(-50%);

      z-index: 99999;
      position: fixed;
      bottom: 8vh;
      left: 50%;

      &__back {
        width: 16.6vw;
        height: 5.2vw;
        background: #FEFAEE;
        border: 0.4vw solid #CA3F32;
        border-radius: 34rpx;
        font-size: 2.6vw;
        font-weight: 400;
        color: #B61F2E;
        text-align: center;
        line-height: 5.2vw;
        box-sizing: content-box;

        margin-right: 48rpx;
      }
      &__reset {
        width: 16.6vw;
        height: 5.2vw;
        background: #FEFAEE;
        border: 0.4vw solid #CA3F32;
        border-radius: 34rpx;
        font-size: 2.6vw;
        //font-family: FZXiaoBiaoSong-B05S;
        font-weight: 400;
        color: #B61F2E;
        text-align: center;
        line-height: 5.2vw;
        box-sizing: content-box;

        margin-right: 48rpx;
      }

      &__confirm {
        font-size: 2.6vw;
        //font-family: FZXiaoBiaoSong-B05S;
        font-weight: 400;
        color: #FFFFFF;
        width: 17.4vw;
        height: 6vw;
        background: linear-gradient(0deg, #E16055, #C54439);
        border-radius: 34rpx;
        text-align: center;
        line-height: 6vw;
      }
    }
  }
}
</style>