email-verify.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <view>
  3. <headContent>
  4. <template #left>
  5. <view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
  6. </template>
  7. </headContent>
  8. <view class="page-content">
  9. <text class="login-title">{{ title }}</text>
  10. <text class="login-content">验证码已发送至{{account}}</text>
  11. <view class="code-box">
  12. <u-code-input v-model="accountCode" :maxlength="6" :focus="true" color="#000000" :fontSize="30" :size="80" :space="30"></u-code-input>
  13. <view class=" code-hint" @click.stop="resendCode()">{{ CodeText }} </view>
  14. </view>
  15. </view>
  16. <slider-verify ref="sliderVerifyRef" @slideImgSuccess="slideImgSuccess" />
  17. </view>
  18. </template>
  19. <script>
  20. import {
  21. Api_getEmailCode,
  22. Api_getSmsSend
  23. } from "@/api/index.js"
  24. import {
  25. reverseBack
  26. } from "@/utils/common.js"
  27. export default {
  28. name: 'emailVerify',
  29. data() {
  30. return {
  31. title: '',
  32. type: '',
  33. areaCode: '',
  34. account: '',
  35. invitationCode: '',
  36. accountCode: '',
  37. CodeText: '重新发送',
  38. timeInterval: null
  39. };
  40. },
  41. onLoad(opt) {
  42. this.type = opt?.type;
  43. this.areaCode = opt?.areaCode;
  44. this.account = opt?.account;
  45. this.invitationCode = opt?.invitationCode;
  46. this.title = this.type == 1 ? '邮箱验证' : '手机验证'
  47. this.getEmailCode()
  48. },
  49. watch: {
  50. accountCode: {
  51. handler(newCode) {
  52. if (newCode.length >= 6) {
  53. uni.navigateTo({
  54. url: `/pages/login/submit-register?type=${this.type}&account=${this.account}&invitationCode=${this.invitationCode}&accountCode=${this.accountCode}`
  55. })
  56. }
  57. },
  58. immediate: true
  59. }
  60. },
  61. methods: {
  62. getEmailCode() {
  63. if (this.CodeText !== '重新发送') {
  64. return false
  65. }
  66. let Api_ = '',
  67. obj = {};
  68. obj.user_string = this.account;
  69. switch (this.type) {
  70. case '0':
  71. case 0:
  72. // 手机号 - 获取验证码
  73. Api_ = Api_getSmsSend;
  74. obj.area_code = this.areaCode;
  75. break;
  76. case '1':
  77. case 1:
  78. // 邮箱 - 获取验证码
  79. Api_ = Api_getEmailCode;
  80. break;
  81. default:
  82. break;
  83. }
  84. if (Api_) {
  85. Api_(obj).then(res => {
  86. }).catch(err => {
  87. })
  88. let num = 60
  89. this.timeInterval = setInterval(() => {
  90. num--;
  91. if (num <= 0) {
  92. clearInterval(this.timeInterval);
  93. this.CodeText = '重新发送';
  94. return false
  95. };
  96. this.CodeText = `${num}秒后重新发送`;
  97. 123456
  98. }, 1000)
  99. }
  100. },
  101. reversBackBtn() {
  102. reverseBack()
  103. },
  104. resendCode() {
  105. this.getEmailCode()
  106. },
  107. setPassWord() {
  108. },
  109. slideImgSuccess(){
  110. }
  111. }
  112. }
  113. </script>
  114. <style lang="scss" scoped>
  115. @import "~./common.scss";
  116. ::v-deep .u-code-input__item{
  117. border-radius: 10rpx;
  118. }
  119. </style>