123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217 |
- <template>
- <view>
- <!-- 头部 -->
- <headContent>
- <template #left>
- <view class="head-revers-back iconfont" @click.stop="reversBackBtn()"></view>
- </template>
- <template #content>
- <view class="haed-title">安全验证</view>
- </template>
- </headContent>
- <view class="page-content">
- <text class="login-title">{{ title }}验证</text>
- <text class="login-content">验证码已发送至{{account}}</text>
- <view class="form-item">
- <view v-if="this.title === '手机号'" class="form-lable" @click.stop="selectAreaCode()">
- <text>+{{ areaCode }}</text><text class="form-lable-icon iconfont"></text>
- </view>
- <input class="form-input" v-model="code" placeholder-class="form-input-place" :placeholder="`请输入验证码`" />
- <view class="form-code" @click.stop="getCode()">{{ codeText }}</view>
- </view>
- <view :class="['form-btn' , getInfo() ? '' : 'invalid-form-btn']" style="margin-top: 28rpx;"
- @click.stop="formSubmit">
- 下一步
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- reverseBack
- } from "@/utils/common.js"
- import {
- Api_getEmailCode,
- Api_getSmsSend
- } from "@/api/index.js"
- export default {
- name: 'safety-verification',
- data() {
- return {
- title: '',
- type: 0,
- account: '',
- code: '',
- areaCode: 86,
- codeText: '获取验证码',
- timeInterval: null
- };
- },
- onLoad(opt) {
- this.type = opt?.type;
- this.account = opt?.account;
- },
- watch: {
- account: {
- handler(newAccount) {
- if (newAccount.indexOf('@') >= 0) {
- // 邮箱
- this.title = '邮箱';
- } else {
- // 手机号
- this.title = '手机号';
- }
- }
- }
- },
- computed: {
- getInfo() {
- return () => {
- let status = false
- switch (this.title) {
- case '邮箱':
- status = this.code ? true : false;
- break;
- case '手机号':
- status = this.code && this.areaCode ? true : false;
- break;
- }
- return status
- }
- },
- },
- methods: {
- selectAreaCode() {
- uni.navigateTo({
- url: '/pages/login/area-code'
- })
- },
- setAreaCode(e) {
- if (e) {
- this.areaCode = e.area_code;
- }
- },
- reversBackBtn() {
- reverseBack()
- },
- getCode() {
- if (this.codeText !== '获取验证码') {
- return false
- }
- let Api_ = '',
- obj = {
- user_string: this.account,
- type: 'forget'
- }
- if (this.title === '邮箱') {
- Api_ = Api_getEmailCode;
- }
- if (this.title === '手机号') {
- Api_ = Api_getSmsSend;
- obj.area_code = this.areaCode
- }
- if (Api_) {
- Api_(obj).then(res => {
- }).catch(err => {
- })
- let num = 60
- this.timeInterval = setInterval(() => {
- num--;
- if (num <= 0) {
- clearInterval(this.timeInterval);
- this.codeText = '获取验证码';
- return false
- };
- this.codeText = `${num}秒后重新发送`;
- 123456
- }, 1000)
- }
- },
- formSubmit() {
- // 安全验证
- if (this.code) {
- let path = ''
- switch (this.type) {
- case '1':
- path = `/pages/login/reset-pswd?account=${this.account}&code=${this.code}`;
- break
- case '2':
- path = `/pages/content/google-verification`;
- break
- }
- if (path) {
- uni.navigateTo({
- url: path
- })
- }
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "~./common.scss";
- // <view class="form-item">
- // <input class="form-input" placeholder-class="form-input-place" placeholder="请输入您的邮箱地址" />
- // <view class="form-code">52秒后重新发送</view>
- // </view>
- .login-title {
- font-size: 34rpx !important;
- }
- .login-content {
- padding-bottom: 0 !important;
- }
- .form-lable {
- min-width: 100rpx;
- text-align: center;
- padding: 0 20rpx;
- flex-shrink: 0;
- }
- .form-item {
- width: 100%;
- min-height: 100rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1rpx solid $border-color4;
- .form-input {
- flex: 1;
- font-size: 26rpx;
- }
- .form-input-place {
- font-size: 26rpx;
- font-weight: 800;
- }
- .form-code {
- flex-shrink: 0;
- padding-left: 10rpx;
- font-size: 26rpx;
- color: $Theme-Color;
- }
- }
- .form-btn {
- margin-top: 80rpx !important;
- }
- </style>
|