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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <van-cell-group class="home-congratulation-from">
        <van-field ref="phone" type="tel" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
            keyboardType="UIKeyboardTypeDecimalPad;" v-model="phone" maxlength="11" placeholder="请输入手机号" />
        <div>
            <van-field type="tel" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
                keyboardType="UIKeyboardTypeDecimalPad;" v-model="verifycode" maxlength="6" center clearable
                placeholder="请输入验证码" />
            <van-button :color="(types==1?`#09BB07`:`#2480FF`)" class="home-congratulation-from-button"
                @click="sendVerifycode()" type="primary" round :disabled="!disabledCodeBtn">{{codeText}}</van-button>
        </div>
        <div>
            <van-button :color="(types==1?`#09BB07`:`#2480FF`)" slot="button" type="primary" round block
                @click="login()" native-type="submit">立即领取</van-button>
        </div>
    </van-cell-group>

    <script>
        export default {
            data() {
                return {
                    phone: "",
                    verifycode: "",
                    codeText: "获取验证码",
                    disabledCodeBtn: true,
                }
            },
            methods: {
                // 向后台要验证码方法
                sendVerifycode() {
                    if (this.verifyPhone()) {
                        Toast(this.verifyPhone());
                    } else {
                        let data = {
                            phone: this.phone
                        };
                        axios
                            .post(store.state.baseURL + "xxxxxxx", data, {
                                headers: {
                                    "content-type": "application/x-www-form-urlencoded"
                                }
                            })
                            .then(res => {
                                console.log(res);
                                if (res.data.error == 0) {
                                    alert(res.data.error_reason);
                                    this.countDown(60);
                                } else if (res.data.error != 0) {
                                    alert(res.data.error_reason);
                                }
                            })
                            .catch(error => {
                                console.log(error);
                            });
                    }
                },
                // 表单校验方法
                verifyPhone() {
                    if (!this.phone) {
                        return "请输入手机号";
                    } else if (this.phone.length !== 11) {
                        return "请输入11位手机号";
                    } else {
                        return false;
                    }
                },
                // 倒计时方法
                countDown(time) {
                    if (time === 0) {
                        this.disabledCodeBtn = true;
                        this.codeText = "获取验证码";
                        return;
                    } else {
                        this.disabledCodeBtn = false;
                        this.codeText = "重新发送(" + time + ")";
                        time--;
                    }
                    setTimeout(() => {
                        this.countDown(time);
                    }, 1000);
                },
                async login() {
                    if (this.verifyPhone()) {
                        Toast(this.verifyPhone());
                    } else if (this.verifycode == "") {
                        Toast("请输入验证码");
                    } else {
                        let list = {
                            phone: this.phone,
                            code: this.verifycode
                        };
                        let resq = await request("xx验证验证码接口路径xx", list);
                        if (resq.error == 0) {
                            let data = {
                                id: this.money.id,
                                phone: this.phone,
                                money: this.money.money,
                                total_money: this.total_amount,
                                uniqueid: this.user_id,
                                type: this.types
                            };
                            let res = await request(
                                "xx接口路径xx",
                                data
                            );
                            if (res.error == 0) {
                                Toast(res.error_reason);
                                this.$router.push({
                                    path: "要跳转的页面"
                                });
                            } else {
                                Toast(res.error_reason);
                            }
                        } else {
                            Toast(resq.error_reason);
                        }

                    }
                }
            }
        }
    </script>
</body>
</html>