crm-mobile/components/wk-form/wk-field-write-sign.vue

<template>
  <view class="wk-field wk-field-write-sign" @click.stop>
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
    <view class="wk-field__body" @click="handleToSignature">
      <view v-if="!formValue" class="signature-area">
        <text class="wk wk-edit-pen" />
        <text>添加手写签名</text>
      </view>
      <view v-else class="signature-img">
        <wk-signature-view
          :batch-id="formValue"
          :preview="false" />
      </view>
    </view>

    <wk-popup-sign ref="signature" v-model="formValue" />
  </view>
</template>

<script>
  import mixins from './mixins'

  export default {
    name: 'WkFieldWriteSign',
    mixins: [mixins],
    data() {
      return {
        guid: null
      }
    },
    created() {
      this.guid = this.$guid()
    },
    methods: {
      handleToSignature() {
        this.$refs.signature
          .sign()
          .then(batchId => {
            this.signatureFn(batchId)
          })
          .catch(() => {});
      },

      signatureFn(batchId) {
        this.formValue = null
        setTimeout(() => {
          this.formValue = batchId || ''
          this.$emit('input', batchId)
          this.$emit('change', {
            index: this.index,
            field: this.field,
            value: this.formValue
          })
        }, 100)
      }
    }
  }
</script>

<style scoped lang="scss">
	@import './wkField.scss';

	.wk-field {
		.wk-field__body {
			border: 1rpx dashed #C0C0C0;
			padding: 0;
			overflow: hidden;
			@include center;

			.signature-area {
				font-size: $wk-font-mini;
				color: $theme-color;
				padding: 50rpx 0;
				.wk-edit-pen {
					margin-right: 10rpx;
				}
			}

			.signature-img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>