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
| <template>
| <view class="wrap">
| <view class="key-input">
| <view class="title">输入验证码</view>
| <view class="tips">验证码已发送至 +150****9320</view>
| <up-message-input :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine" :maxlength="maxlength"></up-message-input>
| <text :class="{ error: error }">验证码错误，请重新输入</text>
| <view class="captcha">
| <text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
| <text :class="{ regain: !show }">{{ second }}秒后重新获取验证码</text>
| </view>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| data() {
| return {
| maxlength: 4,
| value: '',
| second: 3,
| show: false,
| error: false
| };
| },
| computed: {},
| onLoad() {
| // this.getCaptcha()
| let interval = setInterval(() => {
| this.second--;
| if (this.second <= 0) {
| this.show = true;
| if (this.value.lenth != 4) {
| this.error = true;
| }
| clearInterval(interval);
| }
| }, 1000);
| },
| methods: {
| // 收不到验证码选择时的选择
| noCaptcha() {
| uni.showActionSheet({
| itemList: ['重新获取验证码', '接听语音验证码'],
| success: function(res) {
|
| },
| fail: function(res) {
|
| }
| });
| },
| // change事件侦听
| change(value) {
| // console.log('change', value);
| },
| // 输入完验证码最后一位执行
| finish(value) {
| // console.log('finish', value);
| }
| }
| };
| </script>
|
| <style lang="scss" scoped>
| .wrap {
| padding: 80rpx;
| }
|
| .box {
| margin: 30rpx 0;
| font-size: 30rpx;
| color: 555;
| }
|
| .key-input {
| padding: 30rpx 0;
| 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>
|
|
