code.vue
3.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<template>
<view class="wrap">
<view class="key-input">
<view class="title">输入验证码</view>
<view class="tips">验证码已发送至 +{{ startIphoneNumber }}</view>
<u-message-input :value="value" :focus="true" @change="change" @finish="finish" mode="bottomLine"
:maxlength="maxlength"></u-message-input>
<text v-if="verifyFlag" class="error">验证码错误，请重新输入</text>
<view class="captcha">
<text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
<text :class="{ regain: !show }">{{ second }}秒后重新获取验证码</text>
</view>
</view>
</view>
</template>
<script setup>
import { sendCode, userLogin } from "@/apis/user.js";
import { useMainStore } from '@/stores/index.js';
import { onLoad } from "@dcloudio/uni-app";
import { getCurrentInstance, ref } from "vue";
const { proxy } = getCurrentInstance();
const store = useMainStore();
const verifyFlag = ref(false)
const iphoneNumber = ref("")
const startIphoneNumber = ref("")
const maxlength = ref(4)
const value = ref("")
const second = ref(10);
const show = ref(false)
onLoad((options) => {
iphoneNumber.value = options.iphoneNumber;
startIphoneNumber.value = handleIphoneNumber("" + options.iphoneNumber);
getCaptcha(iphoneNumber.value)
})
const handleIphoneNumber = (tel) => {
return tel.replace(tel.substring(3, 7), "****");
}
const getCaptcha = (iphoneNumber) => {
value.value = ''
second.value = 10
show.value = false;
sendCode(iphoneNumber).then(res => {
proxy.$u.toast(res.data.data)
})
let interval = setInterval(() => {
second.value--;
if (second.value <= 0) {
show.value = true
clearInterval(interval);
}
}, 1000);
}
// 收不到验证码选择时的选择
const noCaptcha = () => {
uni.showActionSheet({
itemList: ['重新获取验证码'],
success: function (res) {
getCaptcha(iphoneNumber.value)
},
fail: function (res) {
}
});
}
// 校验验证码
const checkVerifyNum = (code) => {
userLogin({ loginType: 0, tel: iphoneNumber.value, code: code }).then(res => {
// 登录成功
if (res.data.success) {
verifyFlag.value = false;
store.tempToken = res.data.data.token
store.userName = res.data.data.name;
uni.navigateTo({
url: `/pages/wode-info/wode-info-choose/index?ruleVos= ${encodeURIComponent(JSON.stringify(res.data.data.ruleVos))}&userName=${encodeURIComponent(res.data.data.name)}`
});
} else {
verifyFlag.value = true;
}
})
}
// change事件侦听
const change = (value) => {
// console.log("value:", value);
}
// 输入完验证码最后一位执行
const finish = (value) => {
if (value.length == 4) {
checkVerifyNum(value);
}
}
</script>
<style lang="scss" scoped>
.wrap {
padding: 80rpx;
}
.box {
margin: 30rpx 0;
font-size: 30rpx;
color: 555;
}
.key-input {
padding: 30rpx 0;
-webkit-user-select: text !important;
text {
display: none;
}
.error {
display: block;
color: red;
font-size: 30rpx;
margin: 20rpx 0;
}
}
.title {
font-size: 50rpx;
color: #333;
}
.key-input .tips {
font-size: 30rpx;
color: #333;
margin-top: 20rpx;
margin-bottom: 60rpx;
}
.captcha {
color: $u-warning;
font-size: 30rpx;
margin-top: 40rpx;
.noCaptcha {
display: block;
}
.regain {
display: block;
}
}
</style>