图形验证码集成

@@ -7,34 +7,44 @@ import accountModel from '../models/account/index';
  * 用户未授权-发送验证码
  * @param mobile 手机号
  * @param area 国家码
+ * @param degrees 验证码
  */
-function sendVerifyCode(area, mobile) {
-    return accountModel.sendSms(area, mobile);
+function sendVerifyCode(area, mobile, degrees) {
+    return accountModel.sendSms(area, mobile, degrees);
 }
 
 /**
  * 用户已授权-发送验证码
  * @param mobile 手机号
  * @param area 国家码
+ * @param degrees 验证码
  */
-function sendVerifyCodeWithUnionId(area, mobile) {
-    return accountModel.sendCodeByMiniApp(area, mobile, getApp().getOpenID());
+function sendVerifyCodeWithUnionId(area, mobile, degrees) {
+    return accountModel.sendCodeByMiniApp(area, mobile, getApp().getOpenID(), degrees);
+}
+
+/**
+ * 是否需要验证码
+ */
+function isNeedImgCheck() {
+    return accountModel.isNeedImgCheck();
 }
 
 /**
  * 获取验证码按钮
  * @param area
  * @param mobile
+ * @param degrees 验证码
  * @returns {*}
  */
-function getVerifyCode(area, mobile) {
+function getVerifyCode(area, mobile, degrees) {
     let app = getApp();
 
     if (!app.globalData.unionID) {
-        return sendVerifyCode(area, mobile);
+        return sendVerifyCode(area, mobile, degrees);
     }
 
-    return sendVerifyCodeWithUnionId(area, mobile);
+    return sendVerifyCodeWithUnionId(area, mobile, degrees);
 }
 
 /**
@@ -338,6 +348,7 @@ function getPhoneNumber(e) {
 
 export {
     wechatAuthLogin,
+    isNeedImgCheck,
     getVerifyCode,
     bindMobileAction,
     tapToLogin,

+import udid from '../../common/udid';
+import config from '../../common/config';
+
+Component({
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        imageSrc: '',
+        degrees: [0, 0, 0, 0],
+        imageClass: [0, 0, 0, 0]
+    },
+
+    attached: function () {
+        this.setData({
+            imageSrc: this.getVerifyImage()
+        });
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        /**
+         * 获取图片
+         */
+        getVerifyImage: function () {
+            let timestamp = Date.parse(new Date());
+            let url = `${config.domains.api}/passport/img-check?business_line=${config.apiParams.business_line}&app_version=0.0.1&udid=${udid.get()}&client_type=${config.apiParams.client_type}&fromPage=${config.apiParams.client_type}&t=${timestamp}`;
+
+            return url;
+        },
+
+        /**
+         * 更新图片
+         */
+        refreshImage: function () {
+            this.setData({
+                imageSrc: this.getVerifyImage()
+            });
+        },
+
+        /**
+         * 改变图片的方向
+         */
+        changeDirection: function (event) {
+            let indexNum = event.currentTarget.id.replace('image-', '');
+            let degrees = this.data.degrees;
+            let imageClass = this.data.imageClass;
+
+            degrees[indexNum] = (degrees[indexNum] + 1) % 4;
+            imageClass[indexNum] = (imageClass[indexNum] + 140) % 560;
+
+            this.setData({
+                degrees: degrees,
+                imageClass: imageClass
+            });
+            this.triggerEvent('refreshCode', {
+                degrees: this.data.degrees
+            });
+        }
+    }
+})

+{
+  "component": true,
+  "usingComponents": {}
+}

+<view class="top-box">
+  <text class="tip">请将下列图片点击翻转至正向朝上</text>
+  <text class="refresh" bindtap="refreshImage">换一批</text>
+</view>
+<view class="image-check-box">
+  <view class="image-box">
+    <image class="image image-0 image-margin-{{imageClass[0]}}" src="{{imageSrc}}" bindtap="changeDirection" id="image-0"></image>
+  </view>
+  <view class="image-box">
+    <image class="image image-1 image-margin-{{imageClass[1]}}" src="{{imageSrc}}" bindtap="changeDirection" id="image-1"></image>
+  </view>
+  <view class="image-box">
+    <image class="image image-2 image-margin-{{imageClass[2]}}" src="{{imageSrc}}" bindtap="changeDirection" id="image-2"></image>
+  </view>
+  <view class="image-box">
+    <image class="image image-3 image-margin-{{imageClass[3]}}" src="{{imageSrc}}" bindtap="changeDirection" id="image-3"></image>
+  </view>
+</view>

+.top-box {
+  margin-bottom: 20rpx;
+  display: flex;
+  justify-content: space-between;
+}
+
+.tip {
+  color: #444;
+  font-size: 28rpx;
+}
+
+.refresh {
+  font-size: 28rpx;
+  color: #d0021b;
+}
+
+.image-check-box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+.image-box {
+  width: 140rpx;
+  height: 140rpx;
+  overflow: hidden;
+  border: solid 1px #e0e0e0;
+}
+
+.image {
+  width: 560rpx;
+  height: 560rpx;
+}
+
+.image-0 {
+  margin-left: 0;
+}
+
+.image-1 {
+  margin-left: -140rpx;
+}
+
+.image-2 {
+  margin-left: -280rpx;
+}
+
+.image-3 {
+  margin-left: -420rpx;
+}
+
+.image-margin-140 {
+  margin-top: -140rpx;
+}
+
+.image-margin-280 {
+  margin-top: -280rpx;
+}
+
+.image-margin-420 {
+  margin-top: -420rpx;
+}

@@ -186,36 +186,52 @@ export default {
      * 用户未授权-发送验证码
      * @param area 国家码
      * @param mobile 手机号
+     * @param degrees 验证码
      * @returns {*}
      */
-    sendSms(area, mobile) {
+    sendSms(area, mobile, degrees) {
         return api.get({
             url: '',
             data: {
                 area,
                 mobile,
+                degrees,
                 source_type: 'wechat',
+                fromPage: 'miniapp',
                 method: 'app.message.sendSms'
             }
         });
     },
-
+    
     /**
      * 用户已授权-发送验证码
      * @param mobile 手机号
      * @param area 国家码
+     * @param openId 
+     * @param degrees 验证码
      * @returns {*}
      */
-    sendCodeByMiniApp(area, mobile, openId) {
+    sendCodeByMiniApp(area, mobile, openId, degrees) {
         return api.get({
             url: '',
             data: {
                 area,
                 mobile,
+                degrees,
                 open_id: openId,
                 source_type: 'wechat',
-                method: 'app.bind.sendCodeByMiniApp'
+                fromPage: 'miniapp',
+                method: 'app.bind.sendThirdBindMobileCodeOnlyImg'
             }
         });
+    },
+    
+    /**
+     * 是否需要验证码
+     */
+    isNeedImgCheck(udid) {
+        return api.get({
+            url: '/smart/way',
+        });
     }
 };

 import wx from '../../utils/wx';
 import event from '../../common/event';
 import Yas from '../../common/yas';
-import {getVerifyCode, bindMobileAction} from '../../common/login';
+import { getVerifyCode, bindMobileAction, isNeedImgCheck} from '../../common/login';
 
 let app = getApp();
 let yas = new Yas();
@@ -12,6 +12,7 @@ Page({
         areaCode: '86',
         phoneNum: '',
         smsCode: '',
+        degrees: '0,0,0,0',
         btnText: '获取验证码',
         timerSec: 60,
         counting: false,
@@ -21,7 +22,8 @@ Page({
         areaName: '中国',
         hasUnionID: false,
         isSubmitting: false,
-        autoBtnText: '自动验证'
+        autoBtnText: '自动验证',
+        isNeedImgCheck: false
     },
     onLoad: function(query) {
         const {phone, area} = query || {};
@@ -47,6 +49,18 @@ Page({
         this.setData({
             hasUnionID: !!app.globalData.unionID
         });
+
+        isNeedImgCheck().then(result => {
+            if (result.code === 200) {
+                this.setData({
+                    isNeedImgCheck: result.data
+                });
+            } else {
+                this.setData({
+                    isNeedImgCheck: true
+                });
+            }
+        });
         yas.pageOpenReport();
     },
     phoneInput: function(e) {
@@ -68,8 +82,8 @@ Page({
         }
 
         if (this.checkPhoneFormat()) {
-            return getVerifyCode(this.data.areaCode, this.data.phoneNum).then(res => {
-                if (res.code === 200) {
+            return getVerifyCode(this.data.areaCode, this.data.phoneNum, this.data.degrees).then(res => {
+                    if (res.code === 200) {
                     this.countDown();
                 } else {
                     wx.showModal({

 {
-    "navigationBarTitleText": "验证手机号"
+    "navigationBarTitleText": "验证手机号",
+    "usingComponents": {
+        "image-check": "/components/image-check/image-check"
+    }
 }
\ No newline at end of file

@@ -16,6 +16,7 @@
                placeholder="请输入验证码"></input>
         <span class="{{'send-code ' + activeClass}}" bindtap="sendCode">{{btnText}}</span>
     </view>
+    <image-check wx:if="{{isNeedImgCheck}}" class="image-check" bindrefreshCode="onRefreshCode"></image-check>
     <view bindtap="submitTap" class="{{'btn confirm ' + completeClass}}">完成</view>
     <button wx:if="{{false}}" class="btn auto-bind" bindtap="{{!hasUnionID ? 'autoVerify' : ''}}" 
             open-type="{{hasUnionID ? 'getPhoneNumber' : ''}}" 

@@ -135,3 +135,7 @@
     background-color: #444;
 }
 
+.bind-mobile .image-check {
+    display: block;
+    margin-top: 20rpx;
+}
\ No newline at end of file