feature-hub-1.0:新增登录验证码

pages/login/login.vue

@@ -32,17 +32,19 @@
 					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" :inputBorder="false" />
 				</uni-forms-item>
 				
-				<uni-forms-item prop="code" v-if="captchaOnOff">
+				<uni-forms-item required name="code">
-					<uni-easyinput
+					<template #label>
-						v-model="formData.code"
+						<div class="form-label l-code">
-						auto-complete="off"
+							<uni-icons type="map-pin-ellipse" size="18" color="#FFFFFF"></uni-icons>
-						placeholder="验证码"
+						</div> 
-						style="width: 63%"
+					</template>
-						@keyup.enter.native="handleLogin">
+					<div class="login-code-item">
-						<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+						<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码" :inputBorder="false"/>
-					</uni-easyinput>
+						<template>
-					<div class="login-code">
+							<div>
-						<img :src="codeUrl" @click="getCode" class="login-code-img"/>
+								<image :src="codeUrl" @click="getCode" class="login-code-img"/>
+							</div>
+						</template>
 					</div>
 				</uni-forms-item>
 			</uni-forms>
@@ -67,12 +69,12 @@
 				noClick:true, //防止重复提交
 				// 验证码开关
 				captchaOnOff: true,
-				codeUrl: "",
+				codeUrl: '',
 				formData: {
 					phone: '',
 					password: '',
-					code: "",
+					code: '',
-					uuid: ""
+					uuid: ''
 				},
 				
 				rules: {
@@ -95,10 +97,12 @@
 							}
 						}]
 					},
-					code: [{
+					code: {
-						required: true,
+						rules: [{
-						errorMessage: '请输入验证码'
+							required: true,
-					}],
+							errorMessage: '请输入验证码'
+						}]
+					}, 
 					phone: {
 						rules: [{
 								required: true,
@@ -138,32 +142,29 @@
 			//获取验证码
 			 getCode() {
 			      getCodeImg().then(res => {
-			        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
+			        this.captchaOnOff = res.data.captchaOnOff === undefined ? true : res.data.captchaOnOff;
 			        if (this.captchaOnOff) {
-			          this.codeUrl = "data:image/gif;base64," + res.img;
+			          this.codeUrl = "data:image/gif;base64," + res.data.img;
-			          this.formData.uuid = res.uuid;
+			          this.formData.uuid = res.data.uuid;
 			        }
 			      });
 			    },
 			login(e) {
 				// console.log(e)
 				let that = this
-				// console.log('that.phoneFlag', that.phoneFlag)
-				// console.log('that.passwordFlag', that.passwordFlag)
 				if (that.phoneFlag === true && that.passwordFlag === true) {
-					// console.log('全部达成')
 					uni.showLoading({
 						title: '艺术家登录中!',
 					})
           let pwd = md5(that.formData.password)
           const param = {
             phone: that.formData.phone,
-            password: pwd
+            password: pwd,
+			code: that.formData.code,
+			uuid: that.formData.uuid
           }
-          // console.log('form', param)
           login(param).then(response => {
             if (response.data.code === 200) {
-              // console.log('response',response)
               //登录成功，设置token、艺术家信息，页面跳转到主页
               uni.setStorage({
                 key: 'userInfo',
@@ -260,6 +261,11 @@
 			background: $uni-bg-base-color;
 		}
 		
+		.l-code {
+			background: $uni-bg-base-color;
+		}
+		
+		
 	}
 	
 	.login-btn {
@@ -298,4 +304,19 @@
     border-radius: 0 24rpx 24rpx 0;
 	}
 }
+
+.login-code-item{
+	display: flex;
+	width: 540rpx;
+	height: 100rpx;
+	
+	.login-code-img {
+	  margin-left: 50rpx;
+	  height: 90rpx;
+	  width: 260rpx;
+	  border-radius: 24rpx 24rpx 24rpx 24rpx;
+	}
+	
+}
+
 </style>