图形验证码

app.json

@@ -149,5 +149,11 @@
     ]
   },
   "sitemapLocation": "sitemap.json",
-  "navigateToMiniProgramAppIdList": ["wx5a3a7366fd07e119"]
+  "navigateToMiniProgramAppIdList": ["wx5a3a7366fd07e119"],
+  "plugins": {
+    "captcha": {
+      "version": "2.0.0",
+      "provider": "wx1fe8d9a3cb067a75"
+    }
+  }
 }

components/send-code/send-code.js

@@ -60,18 +60,19 @@ Component({
     numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], // 键盘原始数组
     keybord: [], //键盘实际渲染数组
     time: 60, // 倒计时时长
-    format_phone: '' //整理格式后的电话号码
+    format_phone: '', //整理格式后的电话号码
+    captcha
   },
   pageLifetimes: {
     show() {
-      const captchaResult = getApp().captchaResult;
-      getApp().captchaResult = null; // 验证码的票据为一次性票据，取完需要置空
-      if (captchaResult && captchaResult.ret === 0) {
-        // 将验证码的结果返回至服务端校验
-        const ticket = captchaResult.ticket;
-        const randstr = captchaResult.randstr;
-        this.send({ randstr, ticket })
-      }
+      // const captchaResult = getApp().captchaResult;
+      // getApp().captchaResult = null; // 验证码的票据为一次性票据，取完需要置空
+      // if (captchaResult && captchaResult.ret === 0) {
+      //   // 将验证码的结果返回至服务端校验
+      //   const ticket = captchaResult.ticket;
+      //   const randstr = captchaResult.randstr;
+  
+      // }
     },
   },
   ready() {
@@ -86,13 +87,14 @@ Component({
    */
   methods: {
     toTCaptcha: function () {
-      wx.navigateToMiniProgram({
-        appId: 'wx5a3a7366fd07e119',
-        path: '/pages/captcha/index',
-        extraData: {
-          appId: captcha//您申请的验证码的 appId
-        }
-      })
+      // wx.navigateToMiniProgram({
+      //   appId: 'wx5a3a7366fd07e119',
+      //   path: '/pages/captcha/index',
+      //   extraData: {
+      //     appId: captcha //您申请的验证码的 appId
+      //   }
+      // })
+      this.selectComponent('#captcha').show()
     },
     // 初始化方法  生成键盘布局数组
     init(status) {
@@ -194,6 +196,44 @@ Component({
           })
         }
       }, this.data.step)
-    }
+    },
+    // 验证码验证结果回调
+    handlerVerify: function (ev) {
+      // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
+      if (ev.detail.ret === 0) {
+        // 验证成功
+        console.log('randstr:', ev.detail.randstr)
+        console.log('ticket:', ev.detail.ticket)
+        this.send({
+          ticket: ev.detail.ticket,
+          randstr: ev.detail.randstr
+        })
+      } else {
+        // 验证失败
+        // 请不要在验证失败中调用refresh，验证码内部会进行相应处理
+      }
+    },
+    // 验证码准备就绪
+    handlerReady: function () {
+      console.log('验证码准备就绪')
+    },
+    // 验证码弹框准备关闭
+    handlerClose: function (ev) {
+      // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail,ret为0是验证完成后自动关闭验证码弹窗，ret为2是用户主动点击了关闭按钮关闭验证码弹窗
+      if (ev && ev.detail.ret && ev.detail.ret === 2) {
+        console.log('点击了关闭按钮，验证码弹框准备关闭');
+      } else {
+        console.log('验证完成，验证码弹框准备关闭');
+      }
+    },
+    // 验证码出错
+    handlerError: function (ev) {
+      console.log(ev.detail.errMsg)
+      wx.showModal({
+        title: '提示',
+        content: ev.detail.errMsg,
+        showCancel: false
+      })
+    },
   }
 })

components/send-code/send-code.json

@@ -1,4 +1,6 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "t-captcha": "plugin://captcha/t-captcha"
+  }
 }

components/send-code/send-code.wxml

@@ -30,4 +30,5 @@
 		</block>
 
 	</view>
-</view>
+</view>
+<t-captcha id="captcha" app-id="{{captcha}}" bindverify="handlerVerify" bindready="handlerReady" bindclose="handlerClose" binderror="handlerError" />

config/config.js

@@ -1,18 +1,18 @@
 // 测试服
-// const apiUrl = "https://kf.hap-job.com/happyjob"
-// const rootUrl = "https://kf.hap-job.com"
-// const imgServerUrl = "https://hpjobtest.oss-cn-shanghai.aliyuncs.com/uploadfiles/mina"//静态资源图片服务器地址
-// const imgServerUrl_new = "https://hpjobtest.oss-cn-shanghai.aliyuncs.com"//图片服务器地址
-// const captcha = '2078399419'
-// const webViewUrl = 'https://hwd.hap-job.com/front'
+const apiUrl = "https://kf.hap-job.com/happyjob"
+const rootUrl = "https://kf.hap-job.com"
+const imgServerUrl = "https://hpjobtest.oss-cn-shanghai.aliyuncs.com/uploadfiles/mina"//静态资源图片服务器地址
+const imgServerUrl_new = "https://hpjobtest.oss-cn-shanghai.aliyuncs.com"//图片服务器地址
+const captcha = '2078399419'
+const webViewUrl = 'https://hwd.hap-job.com/front'
 
 // 正式服
-const apiUrl = "https://web.hap-job.com/happyjob"
-const rootUrl = "https://web.hap-job.com"
-const imgServerUrl = "https://happyjob.oss-cn-shanghai.aliyuncs.com/uploadfiles/mina" //图片服务器地址
-const imgServerUrl_new = "https://happyjob.oss-cn-shanghai.aliyuncs.com" //图片服务器地址
-const captcha = '2019232819'
-const webViewUrl = 'https://hwcloud.hap-job.com/front'
+// const apiUrl = "https://web.hap-job.com/happyjob"
+// const rootUrl = "https://web.hap-job.com"
+// const imgServerUrl = "https://happyjob.oss-cn-shanghai.aliyuncs.com/uploadfiles/mina" //图片服务器地址
+// const imgServerUrl_new = "https://happyjob.oss-cn-shanghai.aliyuncs.com" //图片服务器地址
+// const captcha = '2019232819'
+// const webViewUrl = 'https://hwcloud.hap-job.com/front'
 
 module.exports = {
   apiUrl,

pages/setting/pages/changePhone/changePhone.js

@@ -17,17 +17,18 @@ Page({
 		phone: '',
 		format_phone: '',
 		code: '',
-		cansubmit: false
+    cansubmit: false,
+    captcha
 	},
 	show() {
-		const captchaResult = getApp().captchaResult;
-		getApp().captchaResult = null; // 验证码的票据为一次性票据，取完需要置空
-		if (captchaResult && captchaResult.ret === 0) {
-			// 将验证码的结果返回至服务端校验
-			const ticket = captchaResult.ticket;
-			const randstr = captchaResult.randstr;
-			this.send({ randstr, ticket })
-		}
+		// const captchaResult = getApp().captchaResult;
+		// getApp().captchaResult = null; // 验证码的票据为一次性票据，取完需要置空
+		// if (captchaResult && captchaResult.ret === 0) {
+		// 	// 将验证码的结果返回至服务端校验
+		// 	const ticket = captchaResult.ticket;
+		// 	const randstr = captchaResult.randstr;
+		// 	this.send({ randstr, ticket })
+		// }
 	},
 	submit() {
 		if (this.data.cansubmit) {
@@ -98,13 +99,14 @@ Page({
 					new_phone: this.data.phone,
 					type: 'check_phone',
 				}).then(data => {
-					wx.navigateToMiniProgram({
-						appId: 'wx5a3a7366fd07e119',
-						path: '/pages/captcha/index',
-						extraData: {
-							appId: captcha//您申请的验证码的 appId
-						}
-					})
+					// wx.navigateToMiniProgram({
+					// 	appId: 'wx5a3a7366fd07e119',
+					// 	path: '/pages/captcha/index',
+					// 	extraData: {
+					// 		appId: captcha//您申请的验证码的 appId
+					// 	}
+          // })
+          this.selectComponent('#captcha').show()
 				})
 			} else {
 				wx.showToast({
@@ -120,26 +122,18 @@ Page({
 			})
 		}
 	},
-	send() {
-		const captchaResult = getApp().captchaResult;
-		getApp().captchaResult = null; // 验证码的票据为一次性票据，取完需要置空
-		if (captchaResult && captchaResult.ret === 0) {
-			// 将验证码的结果返回至服务端校验
-			const ticket = captchaResult.ticket;
-			const randstr = captchaResult.randstr;
-			// this.send({ randstr, ticket })
-			sendPhoneCode({
-				phone: this.data.phone,
-				ticket,
-				randstr
-			}).then(data => {
-				wx.showToast({
-					icon: 'none',
-					title: '验证码发送成功',
-				})
-			})
-			this.countdown()
-		}
+	send({ randstr, ticket }) {
+		sendPhoneCode({
+      phone: this.data.phone,
+      ticket,
+      randstr
+    }).then(data => {
+      wx.showToast({
+        icon: 'none',
+        title: '验证码发送成功',
+      })
+    })
+    this.countdown()
 	},
 	countdown() {
 		time--;
@@ -178,7 +172,45 @@ Page({
 			})
 			return false
 		}
-	},
+  },
+    // 验证码验证结果回调
+    handlerVerify: function (ev) {
+      // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
+      if (ev.detail.ret === 0) {
+        // 验证成功
+        console.log('randstr:', ev.detail.ticket)
+        console.log('ticket:', ev.detail.ticket)
+        this.send({
+          ticket: ev.detail.ticket,
+          randstr: ev.detail.randstr
+        })
+      } else {
+        // 验证失败
+        // 请不要在验证失败中调用refresh，验证码内部会进行相应处理
+      }
+    },
+    // 验证码准备就绪
+    handlerReady: function () {
+      console.log('验证码准备就绪')
+    },
+    // 验证码弹框准备关闭
+    handlerClose: function (ev) {
+      // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail,ret为0是验证完成后自动关闭验证码弹窗，ret为2是用户主动点击了关闭按钮关闭验证码弹窗
+      if (ev && ev.detail.ret && ev.detail.ret === 2) {
+        console.log('点击了关闭按钮，验证码弹框准备关闭');
+      } else {
+        console.log('验证完成，验证码弹框准备关闭');
+      }
+    },
+    // 验证码出错
+    handlerError: function (ev) {
+      console.log(ev.detail.errMsg)
+      wx.showModal({
+        title: '提示',
+        content: ev.detail.errMsg,
+        showCancel: false
+      })
+    },
 	/**
 	 * 生命周期函数--监听页面加载
 	 */
@@ -203,8 +235,6 @@ Page({
 				const _data = res.data
 				this.setData({
 					phoneNow: _data.substring(0, 3) + ' **** ' + _data.substring(7, 11)
-				}, () => {
-					this.send()
 				})
 			}
 		})

pages/setting/pages/changePhone/changePhone.json

@@ -1,4 +1,6 @@
 {
   "navigationBarTitleText": "修改手机号",
-  "usingComponents": {}
+  "usingComponents": {
+    "t-captcha": "plugin://captcha/t-captcha"
+  }
 }

pages/setting/pages/changePhone/changePhone.wxml

@@ -35,4 +35,5 @@
 		<view>修改手机号后，可以使用新手机号登录开心工作</view>
 		<view>使用原有手机号则作为新用户登录</view>
 	</view>
-</view>
+</view>
+<t-captcha id="captcha" app-id="{{captcha}}" bindverify="handlerVerify" bindready="handlerReady" bindclose="handlerClose" binderror="handlerError" />

project.config.json

@@ -371,5 +371,5 @@
 		],
 		"include": []
 	},
-	"appid": "wx1e8ed93850777ffb"
+	"appid": "wx5ae6908ae55edcb7"
 }