master
parent
60ff17aad1
commit
b4f22b7916
27
src/main.js
27
src/main.js
|
|
@ -4,27 +4,22 @@ import VueAxios from 'vue-axios'
|
|||
import App from './App.vue'
|
||||
import router from './router'
|
||||
// Vue.config.productionTip = false
|
||||
Vue.prototype.host = 'https://ypzy.emingren.com'
|
||||
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!="/api/api/user/login-by-Phone"&&config.url!="/api/api/common/send-sms-captcha") {
|
||||
|
||||
// if (config.url!="/hysc/auth/token") {
|
||||
// if (!localStorage.token) {
|
||||
|
||||
// router.replace('/');
|
||||
// return config
|
||||
// }
|
||||
// }
|
||||
if (!localStorage.userData) {
|
||||
window.alert("请登陆")
|
||||
router.replace('/');
|
||||
return config
|
||||
}else{
|
||||
config.headers.Authorization = "Bearer "+JSON.parse(localStorage.userData).token
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return config
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import Vue from 'vue'
|
|||
import VueRouter from 'vue-router'
|
||||
import login from '../views/login.vue'
|
||||
import verification from '../views/login/verification.vue'
|
||||
|
||||
import index from '../views/index/index.vue'
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
|
|
@ -16,6 +16,11 @@ const routes = [
|
|||
name: 'verification',
|
||||
component: verification
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
name: 'index',
|
||||
component: index
|
||||
},
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<div class="content main-content">
|
||||
<!-- 头部 -->
|
||||
<div :class="{ header: true, 'scroll white': isScrollTop }">
|
||||
<div class="back"></div>
|
||||
<div class="header-title">首页</div>
|
||||
</div>
|
||||
<!-- 轮播图 -->
|
||||
<div class="banner-wrap">
|
||||
<div class="swiper-container" ref="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img :src="host + bannerSrc" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination" ref="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 领取咨询卡 -->
|
||||
<div
|
||||
class="index-receive"
|
||||
@click="goPage('/information')"
|
||||
v-if="consult_amount == 0"
|
||||
>
|
||||
<img src="../../assets/images/home/index/receive.jpg" alt="" />
|
||||
<span>完善信息，立即领取免费咨询卡(1小时)</span>
|
||||
</div>
|
||||
<!-- 专家 -->
|
||||
<div class="index-expert section">
|
||||
<div class="index-title">
|
||||
<h2>专家<em>团队</em></h2>
|
||||
<span @click="goPage('/expert')">查看更多</span>
|
||||
</div>
|
||||
<ul class="index-expert-list">
|
||||
<li v-for="(item, index) in expertData" :key="index">
|
||||
<div class="expert-img">
|
||||
<img :src="item.avatar" alt="" />
|
||||
</div>
|
||||
<div class="expert-name">
|
||||
{{ item.name }}<span>{{ item.keywords_list[1] }}</span>
|
||||
</div>
|
||||
<div class="expert-honor">
|
||||
<span>{{ item.keywords_list[0] }}</span>
|
||||
<span>{{ item.keywords_list[1] }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 计划 -->
|
||||
<div class="index-plan">
|
||||
<ul class="index-plan-list">
|
||||
<li v-for="(item, index) in planData" :key="index">
|
||||
<img src="../../assets/images/home/index/plan-01.png" alt="" />
|
||||
<p>{{ item.title }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 测评 -->
|
||||
<div class="index-evaluation section">
|
||||
<div class="index-title">
|
||||
<h2>专业<em>测评</em></h2>
|
||||
<span @click="goPage('/evaluation')">查看更多</span>
|
||||
</div>
|
||||
<ul class="index-evaluation-list">
|
||||
<li
|
||||
@click="cpUrl()"
|
||||
v-for="(item, index) in evaluationData"
|
||||
:key="index"
|
||||
>
|
||||
<div class="evaluation-img">
|
||||
<img
|
||||
src="../../assets/images/home/index/evaluation-01.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<p>{{ item.title }}</p>
|
||||
<div class="evaluation-btn" @click="goPage()">进入测评</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 直播 -->
|
||||
<div class="index-live section">
|
||||
<div class="index-title">
|
||||
<h2>有谱<em>直播</em></h2>
|
||||
<span @click="goPage()">查看更多</span>
|
||||
</div>
|
||||
<ul class="index-live-list">
|
||||
<li><img src="../../assets/images/home/index/live-01.png" alt="" /></li>
|
||||
<li><img src="../../assets/images/home/index/live-02.png" alt="" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 头条 -->
|
||||
<div class="index-headlines section">
|
||||
<div class="index-title">
|
||||
<h2>有谱<em>头条</em></h2>
|
||||
<span @click="goPage()">查看更多</span>
|
||||
</div>
|
||||
<ul class="index-headlines-list">
|
||||
<li v-for="(item, index) in headlinesData" :key="index">
|
||||
<p>{{ item.title }}</p>
|
||||
<span>{{ item.time }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
isScrollTop: false,
|
||||
isReceive: 0, //是否完善资料
|
||||
bannerSrc: "",
|
||||
expertData: [
|
||||
{
|
||||
name: "赵晓",
|
||||
imgSrc: "",
|
||||
year: "从业5年",
|
||||
honor: [{ title: "硕士" }, { title: "中科院" }],
|
||||
},
|
||||
{
|
||||
name: "赵晓",
|
||||
imgSrc: "",
|
||||
year: "从业3年",
|
||||
honor: [{ title: "硕士" }, { title: "中科院" }],
|
||||
},
|
||||
{
|
||||
name: "赵晓",
|
||||
imgSrc: "",
|
||||
year: "从业8年",
|
||||
honor: [{ title: "硕士" }, { title: "中科院" }],
|
||||
},
|
||||
],
|
||||
planData: [
|
||||
{ imgSrc: "", title: "强基计划" },
|
||||
{ imgSrc: "", title: "综合评价" },
|
||||
{ imgSrc: "", title: "专项计划" },
|
||||
],
|
||||
evaluationData: [
|
||||
{ imgSrc: "", title: "霍兰德职业兴趣测评" },
|
||||
{ imgSrc: "", title: "MBIT职业性格测试" },
|
||||
],
|
||||
headlinesData: [
|
||||
{ title: "全国各省市最好大学+王牌专业盘点", time: "2022年2月12日" },
|
||||
{
|
||||
title: "批次、批次线、大类招生到底是什么？？20个名词帮 你快速了解",
|
||||
time: "2022年2月12日",
|
||||
},
|
||||
{
|
||||
title: "教育部公布2021年度全国高等学校名单，共计3012所",
|
||||
time: "2022年2月12日",
|
||||
},
|
||||
{
|
||||
title: "人民日报权威解读：热门专业和相似专业如何区分！",
|
||||
time: "2022年2月12日",
|
||||
},
|
||||
{
|
||||
title:
|
||||
"比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南",
|
||||
time: "2022年2月12日",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.isScroll = true;
|
||||
window.addEventListener("scroll", this.eventScrollTop);
|
||||
this.consult_amount = JSON.parse(localStorage.userData).consult_amount;
|
||||
},
|
||||
mounted() {
|
||||
this.getBanner();
|
||||
this.getExpertData();
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
cpUrl() {},
|
||||
getBanner() {
|
||||
let that = this;
|
||||
this.axios
|
||||
.post(this.HOME + "/api/dictionary/get-slide-list", {
|
||||
position: "h5_home_banner",
|
||||
})
|
||||
.then(function (res) {
|
||||
that.bannerSrc = res.data.data[0].src;
|
||||
});
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取专家列表
|
||||
getExpertData() {
|
||||
let that = this;
|
||||
this.axios
|
||||
.post(this.HOME + "/api/consumer/expert-list", {
|
||||
page: "1",
|
||||
size: "3",
|
||||
})
|
||||
.then(function (res) {
|
||||
console.log(res.data.data);
|
||||
that.expertData = res.data.data.list;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
|
@ -133,6 +133,7 @@ export default {
|
|||
},
|
||||
// 手机号登录
|
||||
phoneLogin() {
|
||||
let that = this;
|
||||
var reg_tel =
|
||||
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
|
||||
if (this.phoneNumber == "") {
|
||||
|
|
@ -144,12 +145,17 @@ export default {
|
|||
return false;
|
||||
}
|
||||
this.axios
|
||||
.post(this.HOME+"/api/common/send-sms-captcha", {
|
||||
phone:this.phoneNumber,
|
||||
.post(this.HOME + "/api/common/send-sms-captcha", {
|
||||
phone: this.phoneNumber,
|
||||
type: "login",
|
||||
})
|
||||
.then(function () {
|
||||
this.$router("/")
|
||||
that.$router.push({
|
||||
path: "/verification",
|
||||
query: {
|
||||
phone: that.phoneNumber,
|
||||
},
|
||||
});
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
|
|
|
|||
|
|
@ -1,151 +1,191 @@
|
|||
<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>
|
||||
<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() {
|
||||
export default {
|
||||
name: "login-verification",
|
||||
props: {
|
||||
number: {
|
||||
type: Number,
|
||||
default: 6,
|
||||
},
|
||||
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() {
|
||||
// 输入完成隐藏键盘
|
||||
var that = this;
|
||||
document.activeElement.blur(); // ios隐藏键盘
|
||||
this.$refs.input.blur(); // android隐藏键盘
|
||||
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
this.axios
|
||||
.post(this.HOME + "/api/user/login-by-Phone", {
|
||||
phone: this.$route.query.phone,
|
||||
sms_code: this.value,
|
||||
})
|
||||
.then(function (res) {
|
||||
localStorage.userData = JSON.stringify(res.data.data);
|
||||
if (res.data.code == 0) {
|
||||
that.$router.push({
|
||||
path: "/index", });
|
||||
} else {
|
||||
window.alert(res.msg);
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
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);
|
||||
this.axios
|
||||
.post(this.HOME + "/api/common/send-sms-captcha", {
|
||||
phone: this.$route.query.phone,
|
||||
type: "login",
|
||||
})
|
||||
.then(function () {})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
// 滚动改变样式
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue