验证码

app.json

 {
   "pages": [
-    "pages/person/auth/index",
     "pages/person/verifycode/index",
+    "pages/person/auth/index",
     "pages/person/login/index",
     "pages/person/getphone/index",
     "pages/person/agreement/index",

pages/person/verifycode/index.js

@@ -154,6 +154,12 @@ Page({
 
   },
   /**
+   * 刷新验证码
+   */
+  verificationFn:function(){
+
+  },
+  /**
    * 校验字段
    */
   bindinputFn: function(e) {

pages/person/verifycode/index.less

@@ -22,7 +22,7 @@
 			color: #adb6bf;
 		}
 		.vcode {
-			width: 219rpx; 
+			width: 219rpx;
 			text-align: right;
 			font-size: 32rpx;
 			color: #61a0f2;
@@ -33,8 +33,8 @@
 				border: 0 !important;
 			}
 		}
-		.vcode-color{
-			color: #ADB6BF; 
+		.vcode-color {
+			color: #adb6bf;
 		}
 		.areacode {
 			border-left: 1px solid #d8dfe6;
@@ -81,6 +81,14 @@
 		color: #adb6bf;
 		font-size: 32rpx;
 	}
+	.code-img {
+		width: 210rpx;
+		height: 70rpx;
+		.img {
+			width: 210rpx;
+			height: 70rpx;
+		}
+	}
 	.inp-error {
 		border-bottom: 1px solid #ea1717;
 		.icon {
@@ -89,5 +97,5 @@
 		input {
 			color: #ea1717;
 		}
-	} 
+	}
 }

pages/person/verifycode/index.wxml

@@ -21,15 +21,17 @@
      <view class="inp-wrap row verCenter {{vcodeFlag ? 'inp-error':''}}" wx:if="{{vcode}}">
       <text class="icon iconfont iconiconxiantiaoshouji"></text>
       <view class="form-item-right row verCenter bothSide">
-        <input placeholder="请输入验证码" placeholder-class="placeholderClass" name='code' data-type="2" bindinput='bindinputFn'></input>
-        <button class="vcode {{disabled ? 'vcode-color':''}}" disabled="{{disabled}}" bindtap="getVerificationCode">{{timeText}}</button>
+        <input placeholder="请输入图形验证码" placeholder-class="placeholderClass" name='code' data-type="3" bindinput='bindinputFn'></input>
+        <view class='code-img'>
+          <cover-image src="http://authapi.icsales.cc/captcha/default/d162987e-6aa8-545e-3b73-8c2cf3c361cc" class="img" bindtap='verificationFn'></cover-image>
+        </view>
       </view>
     </view>
 
     <view class="inp-wrap row verCenter {{codeFlag ? 'inp-error':''}}">
       <text class="icon iconfont iconiconxiantiaoshouji"></text>
       <view class="form-item-right row verCenter bothSide">
-        <input placeholder="请输入验证码" placeholder-class="placeholderClass" name='code' data-type="2" bindinput='bindinputFn'></input>
+        <input placeholder="请输入手机验证码" placeholder-class="placeholderClass" name='code' data-type="2" bindinput='bindinputFn'></input>
         <button class="vcode {{disabled ? 'vcode-color':''}}" disabled="{{disabled}}" bindtap="getVerificationCode">{{timeText}}</button>
       </view>
     </view>

pages/person/verifycode/index.wxss

@@ -36,7 +36,7 @@
   border: 0 !important;
 }
 .person .inp-wrap .vcode-color {
-  color: #ADB6BF;
+  color: #adb6bf;
 }
 .person .inp-wrap .areacode {
   border-left: 1px solid #d8dfe6;
@@ -82,6 +82,14 @@
   color: #adb6bf;
   font-size: 32rpx;
 }
+.person .code-img {
+  width: 210rpx;
+  height: 70rpx;
+}
+.person .code-img .img {
+  width: 210rpx;
+  height: 70rpx;
+}
 .person .inp-error {
   border-bottom: 1px solid #ea1717;
 }