tangyi
/
zycp-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: tangyi:830b1c8f8fd525fc448328e6159908575a63fd20
Branches Tags
tangyi:master
..
compare: tangyi:9ef6aeeb3e03895bfbe18de2b353ee21edb7c1ab
Branches Tags
tangyi:master

2 Commits
830b1c8f8f ... 9ef6aeeb3e

Author SHA1 Message Date
tangyi 9ef6aeeb3e 修改 2022-03-03 15:57:18 +08:00
tangyi b4f22b7916 修改 2022-03-03 15:51:49 +08:00
6 changed files with 582 additions and 281 deletions
Show Stats Expand all files Collapse all files

25
src/main.js
View File

@ -4,27 +4,22 @@ import VueAxios from 'vue-axios'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
// Vue.config.productionTip = false // Vue.config.productionTip = false
Vue.prototype.host = 'https://ypzy.emingren.com'
Vue.prototype.HOME = '/api' Vue.prototype.HOME = '/api'
axios.interceptors.request.use(config => { axios.interceptors.request.use(config => {
console.log(config.url) if (config.url!="/api/api/user/login-by-Phone"&&config.url!="/api/api/common/send-sms-captcha") {
// 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.userData) {
// if (!localStorage.token) { window.alert("请登陆")
router.replace('/');
return config
}else{
config.headers.Authorization = "Bearer "+JSON.parse(localStorage.userData).token
}
}
// router.replace('/');
// return config
// }
// }
return config return config

7
src/router/index.js
View File

@ -2,8 +2,8 @@ import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import login from '../views/login.vue' //登录 import login from '../views/login.vue' //登录
import index from '../views/index/index.vue' //登录
import verification from '../views/login/verification.vue' //手机验证 import verification from '../views/login/verification.vue' //手机验证
import start from '../views/home/start/index.vue' //开屏 import start from '../views/home/start/index.vue' //开屏
import expert from '../views/home/expert/index.vue' //专家列表 import expert from '../views/home/expert/index.vue' //专家列表
@ -35,6 +35,11 @@ const routes = [{
name: 'login', name: 'login',
component: login component: login
}, },
{
path: '/index',
name: 'index',
component: index
},
{ {
path: '/verification', path: '/verification',
name: 'verification', name: 'verification',

222
src/views/index/index.vue Normal file
View File

@ -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>

12
src/views/login.vue
View File

@ -133,6 +133,7 @@ export default {
}, },
// 手机号登录 // 手机号登录
phoneLogin() { phoneLogin() {
let that = this;
var reg_tel = 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}$/; /^(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 == "") { if (this.phoneNumber == "") {
@ -144,12 +145,17 @@ export default {
return false; return false;
} }
this.axios this.axios
.post(this.HOME+"/api/common/send-sms-captcha", { .post(this.HOME + "/api/common/send-sms-captcha", {
phone:this.phoneNumber, phone: this.phoneNumber,
type: "login", type: "login",
}) })
.then(function () { .then(function () {
this.$router("/") that.$router.push({
path: "/verification",
query: {
phone: that.phoneNumber,
},
});
}) })
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error);

122
src/views/login/verification.vue
View File

@ -1,62 +1,77 @@
<template> <template>
<div class="content"> <div class="content">
<!-- 头部 --> <!-- 头部 -->
<div :class="{'header':true,'scroll white':isScrollTop,'white':true}"> <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="back" @click="$router.go(-1)">
<img src="../../assets/images/home/expert/back.png" alt="" />
</div>
<div class="header-title">手机验证码</div> <div class="header-title">手机验证码</div>
</div> </div>
<div class="verification pull-content list-section"> <div class="verification pull-content list-section">
<div class="verification-txt"> <div class="verification-txt">
<p>输入验证码</p> <p>输入验证码</p>
<span>验证码已发送至 +86 {{phoneData}}</span> <span>验证码已发送至 +86 {{ phoneData }}</span>
<div class="result"> <div class="result">
<div class="security-code-wrap"> <div class="security-code-wrap">
<label for="code"> <label for="code">
<ul class="security-code-container"> <ul class="security-code-container">
<li class="field-wrap" v-for="(item, index) in number" :key="index"> <li
<i class="char-field">{{value[index] || placeholder}}</i> class="field-wrap"
v-for="(item, index) in number"
:key="index"
>
<i class="char-field">{{ value[index] || placeholder }}</i>
</li> </li>
</ul> </ul>
</label> </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"> <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>
</div> </div>
<span v-show="!show">{{count}}秒后可重新获取验证码</span> <span v-show="!show">{{ count }}秒后可重新获取验证码</span>
<div v-show="show" @click="getCode()" class="getCode">获取验证码</div> <div v-show="show" @click="getCode()" class="getCode">获取验证码</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "login-verification", name: "login-verification",
props: { props: {
number: { number: {
type: Number, type: Number,
default: 4 default: 6,
}, },
placeholder: { placeholder: {
type: String, type: String,
default: '-' default: "-",
} },
}, },
data() { data() {
return { return {
isScrollTop: false, isScrollTop: false,
phoneData: '', //手机号 phoneData: "", //手机号
verification: '', //验证码 verification: "", //验证码
value: '', value: "",
show: false, //显示获取验证码 show: false, //显示获取验证码
count: '', //剩余时间 count: "", //剩余时间
timer: null, timer: null,
} };
},
beforeCreate() {
}, },
beforeCreate() {},
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
@ -73,33 +88,48 @@
clearInterval(this.timer); clearInterval(this.timer);
this.timer = null; this.timer = null;
} }
}, 1000) }, 1000);
} }
}, },
mounted() { mounted() {},
computed: {},
},
computed: {
},
methods: { methods: {
hideKeyboard() { hideKeyboard() {
// 输入完成隐藏键盘 // 输入完成隐藏键盘
document.activeElement.blur() // ios隐藏键盘 var that = this;
this.$refs.input.blur() // android隐藏键盘 document.activeElement.blur(); // ios隐藏键盘
this.$refs.input.blur(); // android隐藏键盘
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() { handleSubmit() {
this.$emit('input', this.value) this.$emit("input", this.value);
}, },
handleInput() { handleInput() {
this.$refs.input.value = this.value this.$refs.input.value = this.value;
if (this.value.length >= this.number) { if (this.value.length >= this.number) {
this.hideKeyboard() this.hideKeyboard();
} }
this.handleSubmit() this.handleSubmit();
}, },
// 倒计时60s // 倒计时60s
getCode(){ getCode() {
const TIME_COUNT = 60; const TIME_COUNT = 60;
if (!this.timer) { if (!this.timer) {
this.count = TIME_COUNT; this.count = TIME_COUNT;
@ -112,12 +142,23 @@
clearInterval(this.timer); clearInterval(this.timer);
this.timer = null; this.timer = null;
} }
}, 1000) }, 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() { eventScrollTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; let scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop >= 5) { if (scrollTop >= 5) {
if (this.isScroll) { if (this.isScroll) {
this.isScroll = false; this.isScroll = false;
@ -129,7 +170,7 @@
this.isScrollTop = false; this.isScrollTop = false;
} }
} }
} },
}, },
destroyed() { destroyed() {
window.removeEventListener("scroll", this.eventScrollTop); window.removeEventListener("scroll", this.eventScrollTop);
@ -137,15 +178,14 @@
//keep-alive进入时触发 //keep-alive进入时触发
activated() { activated() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop) window.addEventListener("scroll", this.eventScrollTop);
}, },
//keep-alive离开时触发 //keep-alive离开时触发
deactivated() { deactivated() {
window.removeEventListener("scroll", this.eventScrollTop); window.removeEventListener("scroll", this.eventScrollTop);
} },
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>

125
src/views/user/ucenter/index.vue
View File

@ -1,97 +1,130 @@
<template> <template>
<div class="content my-content main-content"> <div class="content my-content main-content">
<!-- 头部 --> <!-- 头部 -->
<div :class="{'header':true,'scroll white':isScrollTop}"> <div :class="{ header: true, 'scroll white': isScrollTop }">
<div class="back"></div> <div class="back"></div>
<div class="header-title">我的</div> <div class="header-title">我的</div>
</div> </div>
<!-- 轮播图 --> <!-- 轮播图 -->
<div class="banner my-banner"> <div class="banner my-banner">
<img src="../../../assets/images/user/banner.jpg" alt=""> <img src="../../../assets/images/user/banner.jpg" alt="" />
<div class="my-photo"> <div class="my-photo">
<span><img src="../../../assets/images/user/photo.png" ></span> <span><img src="../../../assets/images/user/photo.png" /></span>
<p>张桑</p> <p>张桑</p>
</div> </div>
</div> </div>
<!-- 免费咨询卡 --> <!-- 免费咨询卡 -->
<div class="user-receive" @click="toPage()" v-if="isUse==0"> <div class="user-receive" @click="toPage()" v-if="isUse == 0">
<img src="../../../assets/images/user/card.png" alt=""> <img src="../../../assets/images/user/card.png" alt="" />
<div class="receive-txt"> <div class="receive-txt">
<span class="use-btn" v-if="isReceive==1">立即使用</span> <span class="use-btn" v-if="isReceive == 1">立即使用</span>
<span class="receive-btn" v-if="isReceive==0">立即领取</span> <span class="receive-btn" v-if="isReceive == 0">立即领取</span>
<p>有效期：2022.2.1-2022.2.15</p> <p>有效期：2022.2.1-2022.2.15</p>
</div> </div>
</div> </div>
<div class="line" v-if="isReceive==1"></div> <div class="line" v-if="isReceive == 1"></div>
<ul class="student-information"> <ul class="student-information">
<li @click="goPage('/bind')"> <li @click="goPage('/bind')">
<span><img src="../../../assets/images/user/icon-phone.png" alt=""></span> <span
><img src="../../../assets/images/user/icon-phone.png" alt=""
/></span>
<p>手机号<em>18683958573</em></p> <p>手机号<em>18683958573</em></p>
<img src="../../../assets/images/home/expert/arrow-right.png" alt=""> <img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
</li> </li>
<li @click="goPage('/info')"> <li @click="goPage('/info')">
<span><img src="../../../assets/images/user/icon-student.png" alt=""></span> <span
><img src="../../../assets/images/user/icon-student.png" alt=""
/></span>
<p>考生信息</p> <p>考生信息</p>
<img src="../../../assets/images/home/expert/arrow-right.png" alt=""> <img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
</li> </li>
</ul> </ul>
<div class="feedback" @click="goPage('/feedback')"> <div class="feedback" @click="goPage('/feedback')">
<span><img src="../../../assets/images/user/icon-feedback.png" alt=""></span> <span
><img src="../../../assets/images/user/icon-feedback.png" alt=""
/></span>
<p>意见和反馈</p> <p>意见和反馈</p>
<img src="../../../assets/images/home/expert/arrow-right.png" alt=""> <img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
</div> </div>
<div :class="{'my-report':true,'open':isOpen}" @click="isOpen=!isOpen"> <div :class="{ 'my-report': true, open: isOpen }" @click="isOpen = !isOpen">
<span><img src="../../../assets/images/user/icon-report.png" alt=""></span> <span
><img src="../../../assets/images/user/icon-report.png" alt=""
/></span>
<p>我的报告</p> <p>我的报告</p>
<img src="../../../assets/images/home/expert/arrow-right.png" alt=""> <img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
</div> </div>
<ul :class="{'report-list':true,'open':isOpen}"> <ul :class="{ 'report-list': true, open: isOpen }">
<li @click="goPage('/report')"><p>职业与专业定位整合测试（融合版）</p><span>2022-05-12 13:28</span></li> <li @click="goPage('/report')">
<li @click="goPage('/report')"><p>职业与专业定位整合测试（融合版）</p><span>2022-05-12 13:28</span></li> <p>职业与专业定位整合测试（融合版）</p>
<li @click="goPage('/report')"><p>霍兰德职业兴趣测评（完整版）</p><span>2022-05-12 13:28</span></li> <span>2022-05-12 13:28</span>
<li @click="goPage('/report')"><p>DISC性格测评</p><span>2022-05-12 13:28</span></li> </li>
<li @click="goPage('/report')"><p>职业与专业定位整合测试（融合版）</p><span>2022-05-12 13:28</span></li> <li @click="goPage('/report')">
<li @click="goPage('/report')"><p>职业与专业定位整合测试（融合版）</p><span>2022-05-12 13:28</span></li> <p>职业与专业定位整合测试（融合版）</p>
<li @click="goPage('/report')"><p>霍兰德职业兴趣测评（完整版）</p><span>2022-05-12 13:28</span></li> <span>2022-05-12 13:28</span>
<li @click="goPage('/report')"><p>DISC性格测评</p><span>2022-05-12 13:28</span></li> </li>
<li @click="goPage('/report')">
<p>霍兰德职业兴趣测评（完整版）</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>DISC性格测评</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>职业与专业定位整合测试（融合版）</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>职业与专业定位整合测试（融合版）</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>霍兰德职业兴趣测评（完整版）</p>
<span>2022-05-12 13:28</span>
</li>
<li @click="goPage('/report')">
<p>DISC性格测评</p>
<span>2022-05-12 13:28</span>
</li>
</ul> </ul>
<div class="feedback-btn">退出登录</div> <div class="feedback-btn">退出登录</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "expert", name: "expert",
data(){ data() {
return { return {
isScrollTop: false, isScrollTop: false,
isReceive: 1, //是否领取咨询机会 isReceive: 1, //是否领取咨询机会
isUse: 0, //是否使用 isUse: 0, //是否使用
isOpen: false isOpen: false,
} };
}, },
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
}, },
methods:{ methods: {
// 判断跳转方式 // 判断跳转方式
toPage(){ toPage() {
if(this.isReceive == 1){ if (this.isReceive == 1) {
this.$router.push('/expert'); this.$router.push("/expert");
}else if(this.isReceive == 0){ } else if (this.isReceive == 0) {
this.$router.push('/information'); this.$router.push("/information");
}else{ } else {
return false; return false;
} }
}, },
// 页面跳转 // 页面跳转
goPage(path){ goPage(path) {
this.$router.push(path); this.$router.push(path);
}, },
// 滚动改变样式 // 滚动改变样式
eventScrollTop() { eventScrollTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; let scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop >= 5) { if (scrollTop >= 5) {
if (this.isScroll) { if (this.isScroll) {
this.isScroll = false; this.isScroll = false;
@ -103,7 +136,7 @@
this.isScrollTop = false; this.isScrollTop = false;
} }
} }
} },
}, },
destroyed() { destroyed() {
window.removeEventListener("scroll", this.eventScrollTop); window.removeEventListener("scroll", this.eventScrollTop);
@ -111,18 +144,18 @@
//keep-alive进入时触发 //keep-alive进入时触发
activated() { activated() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop) window.addEventListener("scroll", this.eventScrollTop);
}, },
//keep-alive离开时触发 //keep-alive离开时触发
deactivated() { deactivated() {
window.removeEventListener("scroll", this.eventScrollTop); window.removeEventListener("scroll", this.eventScrollTop);
} },
} };
</script> </script>
<style scoped> <style scoped>
.banner, .banner,
.banner img{ .banner img {
width: 100%; width: 100%;
} }
</style> </style>