index.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <div>
  3. <div style="text-align: center;line-height: 50px;">
  4. <span class="main-title" style="margin: 0 10px;font-weight: bold;" >专业能力证书查询</span>
  5. </div>
  6. <div>
  7. <div class="label-box">
  8. <div class="label-title">
  9. <p>持证人姓名</p>
  10. <p>(或持证单位全称)</p>
  11. </div>
  12. <input type="text" v-model="userName" class="label-input" />
  13. </div>
  14. <div class="label-box">
  15. <div class="label-title">
  16. <p>证书编码</p>
  17. </div>
  18. <input type="text" v-model="certNumber" class="label-input" />
  19. </div>
  20. <div class="label-box">
  21. <div class="label-title">
  22. <p>验证码<span class="label-must">*</span></p>
  23. </div>
  24. <input type="text" v-model="code" class="label-input" style="border-color:#acb1b5"/>
  25. <div class="captcha-img">
  26. <img :src="codeUrl" @click="getCode" class="login-code-img"/>
  27. </div>
  28. </div>
  29. <div class="btn-box">
  30. <button class="btn-reset">重置</button>
  31. <button class="btn-search" @click="handleSearch">查询</button>
  32. </div>
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. import { getCodeImg } from "@/api/login";
  38. export default {
  39. data() {
  40. return {
  41. userName: "",
  42. certNumber: "",
  43. code: "",
  44. codeUrl:"",
  45. captchaEnabled:true,
  46. uuid:"",
  47. };
  48. },
  49. methods:{
  50. getCode() {
  51. getCodeImg().then(res => {
  52. // console.log(res)
  53. this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
  54. if (this.captchaEnabled) {
  55. this.codeUrl = "data:image/gif;base64," + res.img;
  56. this.uuid = res.uuid;
  57. }
  58. });
  59. },
  60. handleSearch(){
  61. const form = {
  62. userName: this.userName,
  63. certNumber: this.certNumber,
  64. code: this.code,
  65. uuid: this.uuid
  66. }
  67. console.log(form)
  68. }
  69. },
  70. mounted(){
  71. this.getCode()
  72. }
  73. };
  74. </script>
  75. <style>
  76. </style>