1222

.env.development

@@ -5,7 +5,7 @@ NODE_ENV = development
 VUE_APP_TITLE = 涤斐先生
 
 # 接口地址
-VUE_APP_API_BASEURL = http://127.0.0.1:8790/api
+VUE_APP_API_BASEURL = http://127.0.0.1:8790/api/
 
 # 本地端口
 VUE_APP_PORT = 2801

.env.production

@@ -5,4 +5,4 @@ NODE_ENV = production
 VUE_APP_TITLE = 涤斐先生
 
 # 接口地址
-VUE_APP_API_BASEURL = https://lass-api.jsshuita.cn/api
+VUE_APP_API_BASEURL = https://lass-api.jsshuita.cn/api/

src/api/model/auth.js

@@ -2,9 +2,9 @@ import config from "@/config"
 import http from "@/utils/request"
 
 export default {
-	token: {
-		url: `${config.API_URL}/token`,
-		name: "登录获取TOKEN",
+	login: {
+		url: `${config.API_URL}/login/user`,
+		name: "-",
 		post: async function(data={}){
 			return await http.post(this.url, data);
 		}

src/locales/lang/zh-cn.js

@@ -21,6 +21,8 @@ export default {
 		signInOther: "其他登录方式",
 		userName: "用户名",
 		PWName: "登录密码",
+		code: "验证码",
+		codeErr: "请输入验证码",
 		userPlaceholder: "请输入用户名",
 		userError: "请输入用户名",
 		PWPlaceholder: "请输入密码",

src/views/login/components/mobile.vue

@@ -11,6 +11,13 @@
 				<el-button @click="getYzm" :disabled="disabled">{{this.$t('login.smsGet')}}<span v-if="disabled"> ({{time}})</span></el-button>
 			</div>
 		</el-form-item>
+        <el-form-item prop="code" :label="$t('login.code')">
+            <el-input v-model="form.code" :placeholder="$t('login.codeErr')">
+				<template #suffix>
+					<div class="captcha" @click="updateCaptcha"><img :src="captcha.base64" /></div>
+				</template>
+			</el-input>
+        </el-form-item>
         <el-form-item prop="privacy">
             <el-checkbox :label="$t('login.rememberMe')" v-model="form.privacy">
                 <template #default>
@@ -34,7 +41,8 @@
 
 <script>
 export default {
-	props: ['baseData'],
+    emits: ['success', 'upCaptcha'],
+    props: ['baseData',"captcha"],
 	data() {
 		return {
 			form: {
@@ -62,6 +70,9 @@ export default {
 				yzm: [
 					{required: true, message: this.$t('login.smsError')}
 				],
+				code: [
+					{ required: true, message: this.$t('login.codeErr'), trigger: 'blur' }
+				],
 				privacy: [
 					{ required: true, message: this.$t('login.privacy'), trigger: 'change' }
 				]
@@ -77,6 +88,9 @@ export default {
 
 	},
 	methods: {
+		updateCaptcha(){
+			this.$emit("upCaptcha");
+		},
 		showPrivacy(){
 			this.visible = true;
 		},
@@ -91,7 +105,19 @@ export default {
 		},
 		async onSuccess(){
 			this.isShow = false;
-			var resp = await this.$API.login.sms.post({"mobile":this.form.phone,"scene":"login"});
+		},
+		async getYzm(){
+			var field = ["phone","code"];
+			var flag = true;
+			field.forEach((item,key) => {
+				this.$refs.loginForm.validateField(item, valid => {
+					if(valid.length){
+						return flag = false
+					}
+				})
+			})
+			if(!flag){ return false }
+			var resp = await this.$API.login.sms.post({"mobile":this.form.phone,"code":this.form.codem,"key":this.captcha.key,"scene":"login"});
 			if (resp.code == 0) {
 				return this.$message.error(resp.msg);
 			}
@@ -107,11 +133,6 @@ export default {
 				}
 			},1000)
 		},
-		async getYzm(){
-			var validate = await this.$refs.loginForm.validateField("phone").catch(()=>{})
-			if(!validate){ return false }
-			this.isShow = true;
-		},
 		async login(){
 			var validate = await this.$refs.loginForm.validate().catch(()=>{})
 			if(!validate){ return false }
@@ -204,4 +225,21 @@ export default {
 	overflow-y: scroll;
 	line-height: 1.5;
 }
+.el-input--large .el-input__wrapper{
+	position: relative;
+}
+.captcha{
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	position: absolute;
+	right: 1px;
+	top: 1px;
+	bottom: 1px;
+	z-index: 99;
+}
+.captcha img{
+	height: 38px;
+	border-radius: 5px;
+}
 </style>

src/views/login/components/passwd.vue

@@ -6,6 +6,13 @@
         <el-form-item prop="password" :label="$t('login.PWName')">
             <el-input v-model="form.password" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
         </el-form-item>
+        <el-form-item prop="code" :label="$t('login.code')">
+            <el-input v-model="form.code" :placeholder="$t('login.codeErr')">
+				<template #suffix>
+					<div class="captcha" @click="updateCaptcha"><img :src="captcha.base64" /></div>
+				</template>
+			</el-input>
+        </el-form-item>
         <el-form-item style="margin-bottom: 0;">
             <el-col :span="12">
                 <el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
@@ -22,7 +29,7 @@
             </el-checkbox>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" size="large" style="width: 100%;" :loading="islogin" @click="login_code">{{ $t('login.signIn') }}</el-button>
+            <el-button type="primary" size="large" style="width: 100%;" :loading="islogin" @click="onSuccess">{{ $t('login.signIn') }}</el-button>
         </el-form-item>
     </el-form>
 	<el-dialog title="隐私协议" v-model="visible" :width="680" destroy-on-close :close-on-click-modal="false" :show-close="false">
@@ -36,7 +43,8 @@
 </template>
 <script>
 export default {
-    props: ['baseData'],
+    emits: ['success', 'upCaptcha'],
+    props: ['baseData',"captcha"],
     data(){
         return {
 			visible:false,
@@ -50,6 +58,9 @@ export default {
 				password: [
 					{ required: true, message: this.$t('login.PWError'), trigger: 'blur' }
 				],
+				code: [
+					{ required: true, message: this.$t('login.codeErr'), trigger: 'blur' }
+				],
 				privacy: [
 					{ required: true, message: this.$t('login.privacy'), trigger: 'change' }
 				]
@@ -57,6 +68,9 @@ export default {
         }
     },
     methods: {
+		updateCaptcha(){
+			this.$emit("upCaptcha");
+		},
 		showPrivacy(){
 			this.visible = true;
 		},
@@ -68,19 +82,23 @@ export default {
 		},
 		async onSuccess() {
 			this.isShow = false;
-			this.islogin = true
 			var data = {
 				username: this.form.user,
+				code: this.form.code,
+				key: this.captcha.key,
 				password: this.$TOOL.crypto.MD5(this.form.password)
 			}
+			var validate = await this.$refs.loginForm.validate().catch(() => { })
+			if (!validate) { return false }
 			//获取token
+			this.islogin = true
 			var user = await this.$API.auth.login.post(data)
+			this.islogin = false
 			if (user.code == 1) {
 				this.$TOOL.cookie.set("TOKEN", user.data.access_token, {
 					expires: user.data.expires_in
 				})
 			} else {
-				this.islogin = false
 				this.$message.error(user.msg)
 				return false
 			}
@@ -158,4 +176,21 @@ export default {
 	overflow-y: scroll;
 	line-height: 1.5;
 }
+.el-input--large .el-input__wrapper{
+	position: relative;
+}
+.captcha{
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	position: absolute;
+	right: 1px;
+	top: 1px;
+	bottom: 1px;
+	z-index: 99;
+}
+.captcha img{
+	height: 38px;
+	border-radius: 5px;
+}
 </style>

src/views/login/index.vue

@@ -9,8 +9,8 @@
 							<div class="line"></div>
 							<div :class="tabMenu==2?'tab-item active':'tab-item'" @click="menuType(2)">{{ $t('login.mobileLogin') }}</div>
 						</div>
-						<phoneForm :baseData="baseData" @success="handleSuccess" v-if="tabMenu==2"></phoneForm>
-						<passwordForm :baseData="baseData" @success="handleSuccess" v-if="tabMenu==1"></passwordForm>
+						<phoneForm :baseData="baseData" :captcha="captcha" @success="handleSuccess" @upCaptcha="getService" v-if="tabMenu==2"></phoneForm>
+						<passwordForm :baseData="baseData" :captcha="captcha" @success="handleSuccess" @upCaptcha="getService" v-if="tabMenu==1"></passwordForm>
 					</div>
 				</div>
 			</section>
@@ -36,6 +36,7 @@ export default {
 			isShow: false,
 			code: null,
 			baseData: {},
+			captcha: {},
 			loginType:"zh",
 			tabMenu:1
 		}
@@ -73,7 +74,8 @@ export default {
 				return this.$message.warning(resp.msg)
 			}
 			this.$TOOL.data.set("AGENT_SERVICE", resp.data)
-			this.baseData = resp.data;
+			this.baseData = resp.data.service;
+			this.captcha = resp.data.captcha;
 		},
 	}
 }