safety-verification.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <view>
  3. <!-- 头部 -->
  4. <headContent>
  5. <template #left>
  6. <view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
  7. </template>
  8. <template #content>
  9. <view class="haed-title">安全验证</view>
  10. </template>
  11. </headContent>
  12. <view class="page-content">
  13. <text class="login-title">{{ title }}验证</text>
  14. <text class="login-content">验证码已发送至{{account}}</text>
  15. <view class="form-item">
  16. <view v-if="this.title === '手机号'" class="form-lable" @click.stop="selectAreaCode()">
  17. <text>+{{ areaCode }}</text><text class="form-lable-icon iconfont">&#xeb6d;</text>
  18. </view>
  19. <input class="form-input" v-model="code" placeholder-class="form-input-place" :placeholder="`请输入验证码`" />
  20. <view class="form-code" @click.stop="getCode()">{{ codeText }}</view>
  21. </view>
  22. <view :class="['form-btn' , getInfo() ? '' : 'invalid-form-btn']" style="margin-top: 28rpx;"
  23. @click.stop="formSubmit">
  24. 下一步
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. import {
  31. reverseBack
  32. } from "@/utils/common.js"
  33. import {
  34. Api_getEmailCode,
  35. Api_getSmsSend
  36. } from "@/api/index.js"
  37. export default {
  38. name: 'safety-verification',
  39. data() {
  40. return {
  41. title: '',
  42. type: 0,
  43. account: '',
  44. code: '',
  45. areaCode: 86,
  46. codeText: '获取验证码',
  47. timeInterval: null
  48. };
  49. },
  50. onLoad(opt) {
  51. this.type = opt?.type;
  52. this.account = opt?.account;
  53. },
  54. watch: {
  55. account: {
  56. handler(newAccount) {
  57. if (newAccount.indexOf('@') >= 0) {
  58. // 邮箱
  59. this.title = '邮箱';
  60. } else {
  61. // 手机号
  62. this.title = '手机号';
  63. }
  64. }
  65. }
  66. },
  67. computed: {
  68. getInfo() {
  69. return () => {
  70. let status = false
  71. switch (this.title) {
  72. case '邮箱':
  73. status = this.code ? true : false;
  74. break;
  75. case '手机号':
  76. status = this.code && this.areaCode ? true : false;
  77. break;
  78. }
  79. return status
  80. }
  81. },
  82. },
  83. methods: {
  84. selectAreaCode() {
  85. uni.navigateTo({
  86. url: '/pages/login/area-code'
  87. })
  88. },
  89. setAreaCode(e) {
  90. if (e) {
  91. this.areaCode = e.area_code;
  92. }
  93. },
  94. reversBackBtn() {
  95. reverseBack()
  96. },
  97. getCode() {
  98. if (this.codeText !== '获取验证码') {
  99. return false
  100. }
  101. let Api_ = '',
  102. obj = {
  103. user_string: this.account,
  104. type: 'forget'
  105. }
  106. if (this.title === '邮箱') {
  107. Api_ = Api_getEmailCode;
  108. }
  109. if (this.title === '手机号') {
  110. Api_ = Api_getSmsSend;
  111. obj.area_code = this.areaCode
  112. }
  113. if (Api_) {
  114. Api_(obj).then(res => {
  115. }).catch(err => {
  116. })
  117. let num = 60
  118. this.timeInterval = setInterval(() => {
  119. num--;
  120. if (num <= 0) {
  121. clearInterval(this.timeInterval);
  122. this.codeText = '获取验证码';
  123. return false
  124. };
  125. this.codeText = `${num}秒后重新发送`;
  126. 123456
  127. }, 1000)
  128. }
  129. },
  130. formSubmit() {
  131. // 安全验证
  132. if (this.code) {
  133. let path = ''
  134. switch (this.type) {
  135. case '1':
  136. path = `/pages/login/reset-pswd?account=${this.account}&code=${this.code}`;
  137. break
  138. case '2':
  139. path = `/pages/content/google-verification`;
  140. break
  141. }
  142. if (path) {
  143. uni.navigateTo({
  144. url: path
  145. })
  146. }
  147. }
  148. }
  149. }
  150. }
  151. </script>
  152. <style lang="scss" scoped>
  153. @import "~./common.scss";
  154. // <view class="form-item">
  155. // <input class="form-input" placeholder-class="form-input-place" placeholder="请输入您的邮箱地址" />
  156. // <view class="form-code">52秒后重新发送</view>
  157. // </view>
  158. .login-title {
  159. font-size: 34rpx !important;
  160. }
  161. .login-content {
  162. padding-bottom: 0 !important;
  163. }
  164. .form-lable {
  165. min-width: 100rpx;
  166. text-align: center;
  167. padding: 0 20rpx;
  168. flex-shrink: 0;
  169. }
  170. .form-item {
  171. width: 100%;
  172. min-height: 100rpx;
  173. display: flex;
  174. justify-content: space-between;
  175. align-items: center;
  176. border-bottom: 1rpx solid $border-color4;
  177. .form-input {
  178. flex: 1;
  179. font-size: 26rpx;
  180. }
  181. .form-input-place {
  182. font-size: 26rpx;
  183. font-weight: 800;
  184. }
  185. .form-code {
  186. flex-shrink: 0;
  187. padding-left: 10rpx;
  188. font-size: 26rpx;
  189. color: $Theme-Color;
  190. }
  191. }
  192. .form-btn {
  193. margin-top: 80rpx !important;
  194. }
  195. </style>