jsm-mall-h5-front/src/pages/repairConfirmation.vue

<template>
  <zj-page-layout :hasFooter="true" :isScroll="false">
    <view class="card-container">
      <block v-if="defaultPath">
        <image :src="imageUrl + defaultPath" class="canvasImg" mode="widthFix"></image>
      </block>
      <block v-else>
        <image :src="path" class="canvasImg" mode="widthFix"></image>
        <l-painter
          isCanvasToTempFilePath
          pathType="url"
          @success="canvasSuccess($event)"
          hidden
          css="background: #ffffff; border-radius: 20rpx; padding: 0 30rpx;"
        >
          <template>
            <l-painter-view css="text-align: center; line-height: 140rpx;">
              <l-painter-text text="确认书" css="font-size: 40rpx; font-weight: 500;" />
            </l-painter-view>

            <template v-if="type == 'gz'">
              <l-painter-view css="text-align: left; line-height: 38rpx;text-indent: 2em;">
                <l-painter-text
                  text="鉴于格力电器售后服务过程中存在用户未自行提供产品标配之外辅材配件（如：空气开关、铜管、支架、地架等格力指定专供辅材）需要用户额外付费配置的现象，按照珠海格力公司售后服务要求：为避免安装维修人员使用劣质辅材配件影响产品质量有损品牌名誉以及乱收费从而扰乱格力售后服务市场，本人承诺：本人务必在指定售后服务网点自行采购辅材配件以供备用，在从事安装工单或维修工单中涉及产品标配以外辅材配件按照指导价销售给用户并需要将应当收取用户的辅材配件费用录入系统内对应工单，并要用户扫码付款即“电子支付”后，再由广州嘉讯茂机电工程有限公司通过微信分账形式直接支付到本人微信钱包中。"
                  css="font-size: 26rpx;text-indent: 2em;"
                />
              </l-painter-view>
              <l-painter-view css="text-align: left; line-height: 38rpx;text-indent: 2em;">
                <l-painter-text
                  text="本人通过售卖自行购入的安装维修服务过程中需使用到非产品标配辅材配件，此费用由用户在格力售后系统平台结算后，平台通过微信分账形式返还给乙方，产生的微信支付手续费由乙方自行承担。本人已清楚知晓收到的微信分账结算费用属于辅材配件费用，不属于本人履行安装维修服务而获取的工资报酬组成。广州嘉讯茂机电工程有限公司不为本人向用户收取的辅材配件费用承担任何责任。"
                  css="font-size: 26rpx;text-indent: 2em;"
                />
              </l-painter-view>
            </template>
            <template v-if="type == 'fs'">
              <l-painter-view css="text-align: left; line-height: 38rpx;text-indent: 2em;">
                <l-painter-text
                  text="鉴于格力电器售后服务过程中存在用户未自行提供产品标配之外辅材配件（如：空气开关、铜管、支架、地架等格力指定专供辅材）需要用户额外付费配置的现象，按照珠海格力公司售后服务要求：为避免安装维修人员使用劣质辅材配件影响产品质量有损品牌名誉以及乱收费从而扰乱格力售后服务市场，本人承诺：本人务必在指定售后服务网点自行采购辅材配件以供备用，在从事安装工单或维修工单中涉及产品标配以外辅材配件按照指导价销售给用户并需要将应当收取用户的辅材配件费用录入系统内对应工单，并要用户扫码付款即“电子支付”后，再由佛山嘉讯茂机电工程有限公司通过微信分账形式直接支付到本人微信钱包中。"
                  css="font-size: 26rpx;text-indent: 2em;"
                />
              </l-painter-view>
              <l-painter-view css="text-align: left; line-height: 38rpx;text-indent: 2em;">
                <l-painter-text
                  text="本人通过售卖自行购入的安装维修服务过程中需使用到非产品标配辅材配件，此费用由用户在格力售后系统平台结算后，平台通过微信分账形式返还给乙方，产生的微信支付手续费由乙方自行承担。本人已清楚知晓收到的微信分账结算费用属于辅材配件费用，不属于本人履行安装维修服务而获取的工资报酬组成。佛山嘉讯茂机电工程有限公司不为本人向用户收取的辅材配件费用承担任何责任。"
                  css="font-size: 26rpx;text-indent: 2em;"
                />
              </l-painter-view>
            </template>

            <l-painter-view>
              <l-painter-text text="服务人员：" css="font-size: 28rpx; color: #666666;" />
              <l-painter-text
                :text="`${userInfo.nickName || ''}（${userInfo.workerNumber || ''}）`"
                css="font-size: 28rpx;"
              />
            </l-painter-view>
            <l-painter-view css="margin-top: 20rpx;">
              <l-painter-text text="签署日期：" css="font-size: 28rpx; color: #666666;" />
              <l-painter-text :text="getNowDate()" css="font-size: 28rpx;" />
            </l-painter-view>
            <l-painter-view css="margin-top: 20rpx;">
              <l-painter-text text="用户签名：" css="font-size: 28rpx; color: #666666;" />
            </l-painter-view>
            <template v-if="signNameUrl">
              <l-painter-image
                :src="signNameUrl"
                css="object-fit: contain; margin-top: 20rpx; width: 600rpx; height: 400rpx;"
              />
            </template>
            <template v-else>
              <l-painter-view css="height: 600rpx"></l-painter-view>
            </template>
          </template>
        </l-painter>
      </block>
    </view>

    <template slot="footer">
      <view class="footer-btn-group" v-if="!isFinishSign && !defaultPath">
        <u-button text="点击签名" type="primary" size="large" @click="navToPage(`/pages/signName`)"></u-button>
      </view>
      <view class="footer-btn-group" v-else>
        <u-button text="重新签名" type="primary" size="large" plain @click="navToPage(`/pages/signName`)"></u-button>
        <u-button text="确认提交" type="primary" size="large" @click="submitData"></u-button>
      </view>
    </template>
  </zj-page-layout>
</template>

<script>
import lPainter from '@/components/lime-painter/components/l-painter/l-painter.vue'
import lPainterView from '@/components/lime-painter/components/l-painter-view/l-painter-view.vue'
import lPainterText from '@/components/lime-painter/components/l-painter-text/l-painter-text.vue'
import store from '@/store/index.js'
import { platform } from '@/common/utils/index'
import { mini_env } from '@/common/utils/util'
export default {
  components: {
    lPainter,
    lPainterView,
    lPainterText
  },
  data() {
    return {
      imageUrl: this.$imageUrl,
      userInfo: {},
      signNameUrl: '',
      defaultPath: '',
      path: '',
      isFinishSign: false,
      type: ''
    }
  },

  async onLoad({ url, type }) {
    this.type = type
    this.userInfo = await this.$getUserInfo()
    if (url) {
      this.defaultPath = url
    }
    uni.$on('finishSign', async data => {
      this.defaultPath = ''
      this.signNameUrl = data
    })
  },

  onUnload() {
    uni.$off('finishSign')
  },

  methods: {
    getNowDate() {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      month = month > 9 ? month : '0' + month
      day = day > 9 ? day : '0' + day
      return `${year}年${month}月${day}日`
    },
    canvasSuccess(val) {
      if (this.signNameUrl) {
        this.isFinishSign = true
      }
      this.path = val
    },
    navToPage(url) {
      uni.navigateTo({
        url
      })
    },
    async submitData() {
      mini_env(bool => {
        uni.uploadFile({
          header: {
            'x-token': store.getters.token,
            APPID: store.getters.appId,
            Program: {
              H5: 'wap',
              APP: 'app',
              APPNVUE: 'app',
              WEIXIN: 'miniProgram'
            }[platform()],
            source: bool ? 'A' : 'B',
            miniOpenId: store.getters.miniOpenId,
            sharerOpenId: store.getters.sharerOpenId
          },
          url: `${process.env.VUE_APP_BASE_URL + process.env.VUE_APP_BASE_API}/worker/ocr/handwriting`,
          files: [
            {
              name: 'file',
              uri: this.path
            },
            {
              name: 'signFile',
              uri: this.signNameUrl
            }
          ],
          formData: {
            type: this.type
          },
          success: uploadFileRes => {
            if (JSON.parse(uploadFileRes.data)?.data) {
              this.$navToPage(
                {
                  url: '/pages/index/index'
                },
                'switchTab'
              )
            } else {
              uni.showModal({
                title: '提交失败',
                content: '您的签名不符合要求，请重新签署!',
                showCancel: false,
                confirmText: '知道了',
                success: function (res) {}
              })
            }
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-container {
  @include zj-card;
  margin: 30rpx;
  .canvasImg {
    width: 100%;
  }
  .title {
    font-size: 40rpx;
    font-weight: 500;
    line-height: 140rpx;
    text-align: center;
  }
  .main {
    flex: 1;
    padding-bottom: 30rpx;
    .row {
      padding: 15rpx 0;
      display: flex;
      align-items: center;
      color: $reg-font;
      ::v-deep .u-button {
        width: 180rpx;
        height: 68rpx;
      }
      text {
        color: $main-font;
        font-weight: 500;
      }
    }
  }
  .bottom {
    padding-bottom: 60rpx;
    .text {
      color: $sec-font;
    }
    .info {
      margin-top: 30rpx;
      view {
        color: $minor-color;
        line-height: 36rpx;
      }
    }
  }
}
</style>