uniapp 前端 验证码功能 生成数字字母验证码

    <!-- 解除认证 弹窗 -->
    <u-modal
      v-model="removeShow"
      title="解除认证"
      ref="uModal"
      content-style="modal_content_style"
      :show-cancel-button="true"
      :async-close="true"
      @confirm="removeSubmit"
      @cancel="removeCancel"
    >
      <view class="modal_content" style="padding: 26rpx">
        <view class="modal_content_title">
          <u-icon name="info-circle-fill" color="#faad14"></u-icon>
          仅限完成企业的已认证已签约才能申请账期，你已完成个人认证签约，需先解除绑定后完成企业认证签约~</view
        >
      </view>
      <view style="padding: 26rpx">
        <strong>确认需要解除认证？将图中看到的验证码填入下方输入框中。 </strong>
      </view>

      <u-form
        :model="form"
        ref="uForm"
        :rules="rules"
        label-width="160rpx"
        style="padding: 26rpx"
        label-align="center"
      >
        <u-form-item label="验证码" prop="check">
          <u-input
            v-model="form.check"
            placeholder="请输入验证码 （不区分大小写)"
          />
        </u-form-item>

        <u-form-item>
          <view
            class="canvas-img-code"
            @click="clickCode"
            style="margin-left: 160rpx"
          >
            <!-- 验证码区域 -->
            <canvas
              :style="{ width: width + 'px', height: height + 'px' }"
              canvas-id="imgcanvas"
            ></canvas>
          </view>
        </u-form-item>
      </u-form>
    </u-modal>

    // 解除认证  提交
    async removeSubmit () {
      this.$refs.uForm.validate(async valid => {
        if (valid) {
          const res = await accountUserUnbind()
          if (res.success) {
            uni.showToast({
              title: '解除成功',
              icon: 'success',
              duration: 2000
            })

            this.removeCancel()
            this.initData()
          }
        } else {
          this.$refs.uModal.clearLoading()
        }
      })
      this.$refs.uModal.clearLoading()
    },

    // 解除认证  关闭
    removeCancel () {
      this.$refs.uForm.resetFields()
      this.form.check = ''
      this.removeShow = false
    },