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>