小程序获取验证码按钮单独做成一个组件

{"component": true
}

1 Component({
2 options: {
3 multipleSlots: true // 在组件定义时的选项中启用多slot支持
4 },
5 properties: {
6 // 传入组件的数据
7 innerText: {
8 type: String,
9 value: &＃39;default value&＃39;,
10 }
11 },
12 data: {
13 // 这里是一些组件内部数据
14 },
15 methods: {
16 // 这里是一个自定义方法
17 }
18 })

{"usingComponents": {"component-tag-name": "path/to/the/custom/component"}
}

<component-tag-name inner-text&＃61;"Some text">component-tag-name>

1 const app &＃61; getApp()
2 Component({
3 /**
4 * 组件的属性列表
5 */
6 properties: {
7 phone:{//请求的电话号码
8 type:Number,
9 value:&＃39;&＃39;
10 },
11 checkPhone:{//是否验证手机号是否存在&＃xff08;适合忘记密码时使用&＃xff09;
12 type:Boolean,
13 value:&＃39;&＃39;
14 }
15 },
16
17 /**
18 * 组件的初始数据
19 */
20 data: {
21 codemsg:&＃39;&＃39;,
22 btntxt: &＃39;获取验证码&＃39;,
23 time:60,
24 InterValObj:&＃39;&＃39;, //计时器
25 isSend:false
26 },
27
28 /**
29 * 组件的方法列表
30 */
31 methods: {
32 SetRemainTime: function () {
33 let time &＃61; this.data.time
34 if (this.data.time &＃61;&＃61; 0) {
35 clearInterval(this.data.InterValObj); //停止计时器
36 this.setData({
37 isSend:false,
38 time:60,
39 btntxt:&＃39;重新发送验证码&＃39;
40 })
41 }
42 else {
43 time--
44 this.setData({
45 time:time,
46 isSend:true,
47 btntxt:time&＃43;&＃39;s&＃39;
48 })
49 }
50 },
51 getCode(){
52 let reg &＃61; /^1[345678]\d{9}$/;
53 let phone &＃61; this.properties.phone
54 if (!(reg.test(phone))) {
55 this.triggerEvent(&＃39;transCode&＃39;, { error: true})
56 return false;
57 }
58 if (this.properties.checkPhone){
59 //接口请求是我自己又封装的小程序request API&＃xff0c;没什么技术难度&＃xff0c;就不献上了
60 app.ajax(&＃39;get&＃39;, &＃39;api/validate/check_mobile_exist&＃39;, { mobile: this.data.phone }, (res) &＃61;> {
61 if (res.data.code &＃61;&＃61; &＃39;0&＃39;) {
62 this.triggerEvent(&＃39;transCode&＃39;, { hasPhone: true })
63 return false
64 }
65 this.sendCode()
66 }, (error) &＃61;> {
67 })
68
69 }
70 if (!this.properties.checkPhone){
71 this.sendCode()
72 }
73 },
74 sendCode(){
75 let phone &＃61; this.properties.phone
76 app.ajax(&＃39;get&＃39;, &＃39;api/user/sendmsg&＃39;, { phone: phone }, (res) &＃61;> {
77 if (res.data.code &＃61;&＃61; &＃39;0&＃39;) {
78 return wx.showToast({
79 title: &＃39;你操作过于频繁&＃xff0c;请稍后再试&＃39;,
80 icon:&＃39;none&＃39;,
81 duration:2000
82 })
83 }
84 let code &＃61; res.data.data.msg
85 this.triggerEvent(&＃39;transCode&＃39;, { code: code })
86 this.setData({
87 InterValObj: setInterval(() &＃61;> { this.SetRemainTime() }, 1000)
88 })
89 }, (error) &＃61;> {
90
91 })
92 }
93 }
94 })

{"usingComponents": {"get-code": "../getCode/getCode" }
}