修改

src/App.vue

@@ -484,7 +484,7 @@ textarea {
 	line-height: .42rem;
 	padding-top: .02rem;
 	background-color: #d1d5ff;
-	background-image: url(../assets/../assets/images/home/index/arrow-more.png);
+	background-image: url(./assets/images/home/index/arrow-more.png);
 	background-repeat: no-repeat;
 	background-position: 1.18rem center;
 	background-size: .11rem .2rem;
@@ -693,7 +693,7 @@ textarea {
 	display: block;
 	width: .16rem;
 	height: .28rem;
-	background-image: url(../assets/images/home/expert/arrow-notice.png);
+	background-image: url(./assets/images/home/expert/arrow-notice.png);
 	background-size: .16rem .28rem;
 }
 .expert-receive-01{
@@ -732,7 +732,7 @@ textarea {
 .addr-select{
 	width: 2.5rem;
 	height: .8rem;
-	background-image: url(../assets/images/home/expert/arrow-down.png);
+	background-image: url(./assets/images/home/expert/arrow-down.png);
 	background-repeat: no-repeat;
 	background-size: .22rem .12rem;
 	background-position: center right;
@@ -1242,7 +1242,7 @@ textarea::-webkit-input-placeholder{
 }
 .ask-top{
 	padding: .6rem 0 .55rem;
-	background-image: url(../assets/images/home/expert/expert-bg.png);
+	background-image: url(./assets/images/home/expert/expert-bg.png);
 	background-size: cover;
 	border-radius: .1rem;
 	overflow: hidden;
@@ -2260,7 +2260,7 @@ textarea::-webkit-input-placeholder{
 	padding: 0 .1rem;
 	border: .02rem solid #dedede;
 	border-radius: .04rem;
-	background-image: url(../assets/images/home/expert/arrow-down.png);
+	background-image: url(./assets/images/home/expert/arrow-down.png);
 	background-repeat: no-repeat;
 	background-size: .22rem .12rem;
 	background-position: 3.1rem center;

src/main.js

@@ -3,7 +3,32 @@ import axios from 'axios'
 import VueAxios from 'vue-axios'
 import App from './App.vue'
 import router from './router'
-Vue.config.productionTip = false
+// Vue.config.productionTip = false
+Vue.prototype.HOME = '/api'
+
+
+axios.interceptors.request.use(config => {
+  console.log(config.url)
+  // config.headers.Authorization = "Basic c2FiZXI6c2FiZXJfc2VjcmV0"
+  // if (config.url!="/hysc/auth/token") {
+  //   if (!localStorage.token) {
+  //     router.replace('/');
+  //     return config    
+  //   }
+  // }
+  // config.headers.common['Blade-Auth'] =localStorage.token
+  
+  // if (config.url!="/hysc/auth/token") {
+  //   if (!localStorage.token) {
+   
+  //     router.replace('/');
+  //     return config    
+  //   }
+  // }
+
+
+  return config
+})
 Vue.use(VueAxios, axios)
 new Vue({
   router,

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import login from '../views/login.vue'
+import verification from '../views/login/verification.vue'
 
 Vue.use(VueRouter)
 
@@ -10,7 +11,11 @@ const routes = [
     name: 'login',
     component: login
   },
- 
+  {
+    path: '/verification',
+    name: 'verification',
+    component: verification
+  },
 ]
 
 const router = new VueRouter({

src/views/login.vue

@@ -8,7 +8,7 @@
     <div class="login pull-content list-section">
       <div class="login-txt">
         <div class="logo">
-          <img src="../../assets/images/login/logo.png" alt="" />
+          <img src="../assets/images/login/logo.png" alt="" />
         </div>
         <div class="company">有谱志愿</div>
         <div class="phone-number" v-if="mode == 1">
@@ -21,7 +21,7 @@
             @click="isAgreement = !isAgreement"
             ><img
               v-show="isAgreement"
-              src="../../assets/images/login/yes.png"
+              src="../assets/images/login/yes.png"
               alt=""
           /></span>
           <p>
@@ -30,11 +30,9 @@
         </div>
         <div class="login-btns">
           <span @click="nailLogin()" v-if="mode == 0" class="nail-btn"
-            ><img src="../../assets/images/login/nail.png" />钉钉授权登录</span
+            ><img src="../assets/images/login/nail.png" />钉钉授权登录</span
-          >
-          <span @click="phoneLogin(phoneNumber)" v-if="mode == 1"
-            >获取验证码</span
           >
+          <span @click="phoneLogin()" v-if="mode == 1">获取验证码</span>
         </div>
       </div>
       <div class="login-mode">
@@ -42,20 +40,18 @@
         <ul class="mode-item">
           <li>
             <span @click="changeMode(0)"
-              ><img src="../../assets/images/login/nail.png"
+              ><img src="../assets/images/login/nail.png"
             /></span>
             <p :class="{ active: mode == 0 }">当前登录方式</p>
           </li>
           <li>
             <span @click="changeMode(1)"
-              ><img src="../../assets/images/login/phone.png"
+              ><img src="../assets/images/login/phone.png"
             /></span>
             <p :class="{ active: mode == 1 }">当前登录方式</p>
           </li>
         </ul>
       </div>
-
-   
     </div>
     <!-- 阅读协议弹窗 -->
     <div
@@ -77,14 +73,14 @@
     ></div>
     <div class="nail-popup" v-show="openEmpower">
       <div class="nail-popup-title">
-        <span><img src="../../assets/images/login/logo.png" alt="" /></span>
+        <span><img src="../assets/images/login/logo.png" alt="" /></span>
         <p>有谱志愿</p>
         <em>申请</em>
       </div>
       <p>获取您的钉钉昵称</p>
       <div class="nick-name">
         <span>钉钉昵称</span>
-        <p>张三<img src="../../assets/images/login/green-yes.png" alt="" /></p>
+        <p>张三<img src="../assets/images/login/green-yes.png" alt="" /></p>
       </div>
       <div class="nail-popup-btns">
         <span @click="isEmpower()">同意</span>
@@ -98,7 +94,7 @@
       @click="openPhoneTips = !openPhoneTips"
     ></div>
     <div class="my-confirm my-confirm2" v-show="openPhoneTips">
-      <p>{{ tipsMsg }}</p>
+      <!-- <p>{{ tipsMsg }}</p> -->
       <div class="confirm-btns">
         <span @click="openPhoneTips = false">确认</span>
       </div>
@@ -107,33 +103,26 @@
 </template>
 
 <script>
-
 export default {
   name: "login",
   data() {
     return {
       isScrollTop: false,
-      mode: 0, //登录方式
+      mode: 1, //登录方式
       openAgreement: false, //阅读协议弹窗
       isAgreement: false, //阅读协议状态
       openEmpower: false, //钉钉授权状态
       openPhoneTips: false, //验证手机号弹出框
-      phoneNumber: "",
+      phoneNumber: "13608235524",
-      tipsMsg: "请填写手机号",
+      phone: "",
-      username: "",
-      password: "",
     };
   },
   created() {
     this.isScroll = true;
     window.addEventListener("scroll", this.eventScrollTop);
   },
-  mounted() {
+  mounted() {},
-
-  },
   methods: {
-
-
     // 钉钉授权登录
     nailLogin() {
       if (this.isAgreement) {
@@ -143,32 +132,28 @@ export default {
       }
     },
     // 手机号登录
-    phoneLogin(number) {
+    phoneLogin() {
-      if (this.phoneNumber.match(/^\s*$/)) {
+      var reg_tel =
-        this.tipsMsg = "手机号不能为空";
+        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
-        this.openPhoneTips = true;
+      if (this.phoneNumber == "") {
+        alert("请填写您的手机号码！");
+
         return false;
-      } else if (
+      } else if (!reg_tel.test(this.phoneNumber)) {
-        !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
+        alert("请正确填写您的手机号码！");
-          this.phoneNumber
-        )
-      ) {
-        this.tipsMsg = "请填写正确的手机号码";
-        this.openPhoneTips = true;
-        this.phoneNumber = "";
         return false;
-      } else {
-        if (this.isAgreement) {
-          this.$router.push({
-            path: "/login/verification",
-            query: {
-              number: number,
-            },
-          });
-        } else {
-          this.openAgreement = true;
-        }
       }
+      this.axios
+        .post(this.HOME+"/api/common/send-sms-captcha", {
+          phone:this.phoneNumber,
+          type: "login",
+        })
+        .then(function () {
+           this.$router("/")
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
     },
 
     // 同意钉钉授权

src/views/login/verification.vue

@@ -0,0 +1,151 @@
+<template>
+	<div class="content">
+		<!-- 头部 -->
+		<div :class="{'header':true,'scroll white':isScrollTop,'white':true}">
+			<div class="back" @click="$router.go(-1)"><img src="../../assets/images/home/expert/back.png" alt=""></div>
+			<div class="header-title">手机验证码</div>
+		</div>
+     
+		<div class="verification pull-content list-section">
+			<div class="verification-txt">
+				<p>输入验证码</p>
+				<span>验证码已发送至 +86 {{phoneData}}</span>
+				<div class="result">
+					<div class="security-code-wrap">
+						<label for="code">
+							<ul class="security-code-container">
+								<li class="field-wrap" v-for="(item, index) in number" :key="index">
+									<i class="char-field">{{value[index] || placeholder}}</i>
+								</li>
+							</ul>
+						</label>
+						<input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value" id="code" name="code" type="tel" :maxlength="number" autocorrect="off" autocomplete="off" autocapitalize="off">
+					</div>
+				</div>
+				<span v-show="!show">{{count}}秒后可重新获取验证码</span>
+				<div v-show="show" @click="getCode()" class="getCode">获取验证码</div>
+			</div>
+			
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "login-verification",
+		props: {
+			number: {
+				type: Number,
+				default: 4
+			},
+			placeholder: {
+				type: String,
+				default: '-'
+			}
+		},
+		data() {
+			return {
+				isScrollTop: false,
+				phoneData: '', //手机号
+				verification: '', //验证码
+				value: '',
+				show: false, //显示获取验证码
+				count: '', //剩余时间
+				timer: null,
+			}
+		},
+		beforeCreate() {
+			
+		},
+		created() {
+			this.isScroll = true;
+			window.addEventListener("scroll", this.eventScrollTop);
+			this.phoneData = this.$route.query.number;
+			const TIME_COUNT = 60;
+			if (!this.timer) {
+				this.count = TIME_COUNT;
+				this.show = false;
+				this.timer = setInterval(() => {
+					if (this.count > 0 && this.count <= TIME_COUNT) {
+						this.count--;
+					} else {
+						this.show = true;
+						clearInterval(this.timer);
+						this.timer = null;
+					}
+				}, 1000)
+			}
+		},
+		mounted() {
+
+		},
+		computed: {
+
+		},
+		methods: {
+			hideKeyboard() {
+				// 输入完成隐藏键盘
+				document.activeElement.blur() // ios隐藏键盘
+				this.$refs.input.blur() // android隐藏键盘
+			},
+			handleSubmit() {
+				this.$emit('input', this.value)
+			},
+			handleInput() {
+				this.$refs.input.value = this.value
+				if (this.value.length >= this.number) {
+					this.hideKeyboard()
+				}
+				this.handleSubmit()
+			},
+			// 倒计时60s
+			getCode(){
+				const TIME_COUNT = 60;
+				if (!this.timer) {
+					this.count = TIME_COUNT;
+					this.show = false;
+					this.timer = setInterval(() => {
+						if (this.count > 0 && this.count <= TIME_COUNT) {
+							this.count--;
+						} else {
+							this.show = true;
+							clearInterval(this.timer);
+							this.timer = null;
+						}
+					}, 1000)
+				}
+			},
+			// 滚动改变样式
+			eventScrollTop() {
+				let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+				if (scrollTop >= 5) {
+					if (this.isScroll) {
+						this.isScroll = false;
+						this.isScrollTop = true;
+					}
+				} else {
+					if (!this.isScroll) {
+						this.isScroll = true;
+						this.isScrollTop = false;
+					}
+				}
+			}
+		},
+		destroyed() {
+			window.removeEventListener("scroll", this.eventScrollTop);
+		},
+		//keep-alive进入时触发
+		activated() {
+			this.isScroll = true;
+			window.addEventListener("scroll", this.eventScrollTop)
+		},
+		//keep-alive离开时触发
+		deactivated() {
+			window.removeEventListener("scroll", this.eventScrollTop);
+		}
+	}
+</script>
+
+<style scoped>
+	
+</style>

vue.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+    devServer: {
+        proxy: {
+
+            '/api': {
+                target: 'https://ypzy.emingren.com', // 你请求的第三方接口
+
+                changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
+
+                pathRewrite: { // 路径重写，
+
+                    '^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
+
+                }
+
+            }
+
+        }
+
+    }
+
+}