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

修改

master
Lee-1203 2022-03-04 20:26:35 +08:00
parent 605627780c
commit 020e92879e
9 changed files with 994 additions and 800 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -736,6 +736,10 @@ textarea {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .22rem .12rem; background-size: .22rem .12rem;
background-position: center right; background-position: center right;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.addr-select>div{ .addr-select>div{
width: 100%; width: 100%;

1
src/main.js
View File

@ -10,7 +10,6 @@ Vue.prototype.HOME = '/api'
axios.interceptors.request.use(config => { axios.interceptors.request.use(config => {
if (config.url!="/api/api/user/login-by-Phone"&&config.url!="/api/api/common/send-sms-captcha") { if (config.url!="/api/api/user/login-by-Phone"&&config.url!="/api/api/common/send-sms-captcha") {
if (!localStorage.userData) { if (!localStorage.userData) {
window.alert("请登陆") window.alert("请登陆")
router.replace('/'); router.replace('/');

43
src/views/home/expert/ask.vue
View File

@ -7,7 +7,7 @@
</div> </div>
<div class="ask pull-content list-section"> <div class="ask pull-content list-section">
<div class="ask-top"> <div class="ask-top">
<span><img src="../../../assets/images/home/expert/expert-list.jpg" ></span> <span><img :src="host + expertDetail.avatar" ></span>
<p>请使用以下两种方式加入钉钉专属服务群，我 在您的专属服务群回答您的问题。</p> <p>请使用以下两种方式加入钉钉专属服务群，我 在您的专属服务群回答您的问题。</p>
</div> </div>
<div class="ask-mode-item"> <div class="ask-mode-item">
@ -17,12 +17,12 @@
<div class="ask-mode-list"> <div class="ask-mode-list">
<div class="ask-mode-txt" v-show="isActive"> <div class="ask-mode-txt" v-show="isActive">
<p>下载二维码并用钉钉扫一扫进入专属群</p> <p>下载二维码并用钉钉扫一扫进入专属群</p>
<img src="../../../assets/images/home/expert/ewm.jpg" alt=""> <img :src="host + expertDetail.im_group_qr">
<span>点击下载二维码</span> <span>点击下载二维码</span>
</div> </div>
<div class="ask-mode-txt" v-show="!isActive"> <div class="ask-mode-txt" v-show="!isActive">
<p>专属群DingTalk链接<span>(复制此链接，在浏览器地址栏粘贴后打开钉钉， 自动进入专属群)</span></p> <p>专属群DingTalk链接<span>(复制此链接，在浏览器地址栏粘贴后打开钉钉， 自动进入专属群)</span></p>
<div class="mode-links">{{linkUrl}}</div> <div class="mode-links">{{expertDetail.im_group_link}}</div>
<span @click="copyUrl()">点击复制此链接</span> <span @click="copyUrl()">点击复制此链接</span>
</div> </div>
</div> </div>
@ -37,30 +37,49 @@
return { return {
isScrollTop: false, isScrollTop: false,
isActive: true, isActive: true,
linkUrl: 'dingtalk://dingtalkclient/page/link?pc_slide=true&url=https%3A%2F%2Fh5.dingtalk.com%2Fservice-group%2Findex.html%3FjoinGroupCode%3Dp3cAnJVnxMMiPvkT1zJLiiup35T4nkdE3uNFJIiiUkGhZSCsiSL0qydvCuolCftWNT7C%23%2Fjoin-group' id:'',
expertDetail:[],
} }
}, },
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
this.id = this.$route.query.id;
}, },
mounted() { mounted() {
this.getDetailData();
}, },
computed: { computed: {
}, },
methods: { methods: {
// 获取专家详情
getDetailData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-info", {
id: that.id
})
.then(function (res) {
console.log(res,111111);
that.expertDetail = res.data.data;
});
},
// 复制链接 // 复制链接
copyUrl(){ copyUrl(){
let input = document.createElement("input"); // 直接构建input if(this.expertDetail.im_group_link != ''){
input.value = this.linkUrl; // 设置内容 let input = document.createElement("input"); // 直接构建input
document.body.appendChild(input); // 添加临时实例 input.value = this.expertDetail.im_group_link; // 设置内容
input.select(); // 选择实例内容 document.body.appendChild(input); // 添加临时实例
document.execCommand("Copy"); // 执行复制 input.select(); // 选择实例内容
document.body.removeChild(input); // 删除临时实例 document.execCommand("Copy"); // 执行复制
alert("链接复制成功") document.body.removeChild(input); // 删除临时实例
alert("链接复制成功")
}
}, },
// 滚动改变样式 // 滚动改变样式
eventScrollTop() { eventScrollTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

28
src/views/home/expert/detail.vue
View File

@ -71,7 +71,7 @@
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
this.id = this.$route.params.id; this.id = this.$route.query.id;
}, },
mounted() { mounted() {
this.getDetailData(); this.getDetailData();
@ -80,6 +80,19 @@
}, },
methods: { methods: {
// 获取专家详情
getDetailData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-info", {
id: that.id
})
.then(function (res) {
that.expertDetail = res.data.data;
});
},
// 滚动显示头部
eventScrollTop() { eventScrollTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop >= 5) { if (scrollTop >= 5) {
@ -94,18 +107,7 @@
} }
} }
}, },
// 获取专家详情
getDetailData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-info", {
id: that.id
})
.then(function (res) {
// console.log(res.data.data,111111);
that.expertDetail = res.data.data;
});
},
}, },
destroyed() { destroyed() {
window.removeEventListener("scroll", this.eventScrollTop); window.removeEventListener("scroll", this.eventScrollTop);

239
src/views/home/expert/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="content main-content"> <div class="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>
@ -7,16 +7,16 @@
</div> </div>
<!-- 轮播图 --> <!-- 轮播图 -->
<div class="banner"> <div class="banner">
<img src="../../../assets/images/home/expert/banner.jpg" alt=""> <img :src="host + bannerSrc?host + bannerSrc:''">
</div> </div>
<!-- 领取咨询机会 --> <!-- 领取咨询机会 -->
<div class="expert-receive" @click="goPage('/information')" v-if="isReceive==0"> <div class="expert-receive" @click="goPage('/information')" v-if="isReceive==0">
<img src="../../../assets/images/home/expert/notice-01.png" alt=""> <img src="../../../assets/images/home/expert/notice-01.png">
<p>完善信息，立即领取免费咨询卡(1小时)</p> <p>完善信息，立即领取免费咨询卡(1小时)</p>
<span></span> <span></span>
</div> </div>
<div class="expert-receive expert-receive-01" v-if="isReceive==1"> <div class="expert-receive expert-receive-01" v-if="isReceive==1">
<img src="../../../assets/images/home/expert/notice-02.png" alt=""> <img src="../../../assets/images/home/expert/notice-02.png">
<p>您已领取一小时免费咨询权益，可向专家进行提问</p> <p>您已领取一小时免费咨询权益，可向专家进行提问</p>
</div> </div>
<!-- 导航 --> <!-- 导航 -->
@ -24,27 +24,18 @@
<ul class="expert-nav-item"> <ul class="expert-nav-item">
<li :class="{'active':current==index}" v-for="(item,index) in navData" :key="index" @click="changeNav(index)">{{item.title}}</li> <li :class="{'active':current==index}" v-for="(item,index) in navData" :key="index" @click="changeNav(index)">{{item.title}}</li>
</ul> </ul>
<!-- 城市 -->
<div class="addr-select"> <div class="addr-select">
<div @click="openAddr()">{{addrData[addrIndex].title}}</div> <div @click="openAddr()">{{addrData[addrIndex].name}}</div>
</div> </div>
</div> </div>
<!-- 地址弹出框 -->
<div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div>
<div class="addr-select-item" v-show="isAddr">
<div class="addr-btns">
<span>请选择城市</span>
<span @click="isAddr=!isAddr">取消</span>
</div>
<ul>
<li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">{{item.title}}<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 咨询师列表 --> <!-- 咨询师列表 -->
<div class="expert-list-all section"> <div class="expert-list-all section">
<ul class="expert-list"> <ul class="expert-list">
<li v-for="(item,index) in expertData" :key="index"> <li v-for="(item,index) in expertData" :key="index">
<div class="expert-list-con" @click="goPage('/expert/detail')"> <div class="expert-list-con" @click="toDetail(item.id)">
<div class="expert-list-img"><img :src="host + item.avatar" alt=""></div> <div class="expert-list-img"><img :src="host + item.avatar"></div>
<div class="expert-list-txt"> <div class="expert-list-txt">
<div class="title"> <div class="title">
<h2>{{item.name}}</h2> <h2>{{item.name}}</h2>
@ -61,12 +52,29 @@
</div> </div>
</div> </div>
<div class="expert-list-btns"> <div class="expert-list-btns">
<div :class="{'btn':true,'noservice':isReceive==0}" @click="toAsk()">向TA提问</div> <div :class="{'btn':true,'noservice':isReceive==0}" @click="toAsk(item.id)">向TA提问</div>
<div class="btn" @click="toDetail(item.id)">查看详情</div> <div class="btn" @click="toDetail(item.id)">查看详情</div>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<!-- 地址弹出框 -->
<div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div>
<div class="addr-select-item" v-show="isAddr">
<div class="addr-btns">
<span>请选择城市</span>
<span @click="isAddr=!isAddr">取消</span>
</div>
<ul>
<li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">
{{item.name}}
<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png">
</li>
</ul>
</div>
<!-- 领取咨询卡弹出框 -->
<div class="my-confirm-bg" v-show="isConfirm" @click="isConfirm=!isConfirm"></div> <div class="my-confirm-bg" v-show="isConfirm" @click="isConfirm=!isConfirm"></div>
<div class="my-confirm" v-show="isConfirm"> <div class="my-confirm" v-show="isConfirm">
<p>您还未领取免费咨询卡，请前往领取！</p> <p>您还未领取免费咨询卡，请前往领取！</p>
@ -75,65 +83,54 @@
<span @click="closeEV()">取消</span> <span @click="closeEV()">取消</span>
</div> </div>
</div> </div>
<!-- 底部 -->
<tabbar :current="2"></tabbar> <tabbar :current="2"></tabbar>
</div> </div>
</template> </template>
<script> <script>
import tabbar from '../../../components/tabbar.vue' import tabbar from '../../../components/tabbar.vue'
export default { export default {
name: "expert", name: "expert",
components: { components: {
tabbar tabbar
}, },
data(){ data() {
return { return {
isScrollTop: false, isScrollTop: false,
name: '',
isReceive: 1, //是否领取咨询机会 isReceive: 1, //是否领取咨询机会
current: 0, current: 0,
isConfirm: false, isConfirm: false,
navData: [ bannerSrc: '', //banner图地址
{title:'所有专家'}, navData: [{
{title:'最近活跃'}, title: '所有专家'
{title:'多元升学'} }, {
], title: '最近活跃'
}, {
addrData:[ title: '多元升学'
{title:'北京'}, }],
{title:'上海'}, expertData: [], //专家列表
{title:'广州'}, addrData: [],
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'}
],
addrIndex: 0, addrIndex: 0,
isAddr: false, //城市列表是否显示 isAddr: false, //城市列表是否显示
addrValue:'', //选择城市编号 addrValue: '', //选择城市编号
}
expertData: [],
}
}, },
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
}, },
mounted() { mounted() {
this.getExpertData() this.getBanner();
this.getExpertData();
this.getAddrData();
}, },
methods:{ methods: {
// 导航切换 // 导航切换
changeNav(index){ changeNav(index) {
switch(index) { switch (index) {
case 0: case 0:
this.current = 0; this.current = 0;
break; break;
@ -148,30 +145,95 @@
break; break;
} }
}, },
// 获取banner
getBanner() {
let that = this;
this.axios
.post(this.HOME + "/api/dictionary/get-slide-list", {
position: "h5_expert_banner",
})
.then(function(res) {
that.bannerSrc = res.data.data[0].src;
});
},
// 获取专家列表
getExpertData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-list", {
page: "1",
size: "100",
})
.then(function(res) {
that.expertData = res.data.data.list;
});
},
// 获取城市列表
getAddrData() {
let that = this;
this.axios
.post(this.HOME + "/api/area/index", {
pcode: 86
})
.then(function(res) {
that.addrData = res.data.data;
});
},
// 城市选择 // 城市选择
openAddr(){ openAddr() {
this.isAddr=!this.isAddr; this.isAddr = !this.isAddr;
}, },
getAddrValue(index,item){ getAddrValue(index, item) {
this.addrValue = item.title; this.addrValue = item.code;
this.addrIndex = index; this.addrIndex = index;
this.isAddr=false; this.isAddr = false;
}, },
// 关闭提示框
closeEV() {
this.isConfirm = false;
},
// 向TA提问 // 向TA提问
toAsk(){ toAsk(id) {
if(this.isReceive == 1){ if (this.isReceive == 1) {
this.$router.push('/expert/ask'); this.$router.push({
}else if(this.isReceive == 0){ path: '/expert/ask',
name: 'expert-ask',
query: {
id: id
},
});
} else if (this.isReceive == 0) {
this.isConfirm = true; this.isConfirm = true;
} }
}, },
// 关闭提示框 // 跳转到详情页
closeEV(){ toDetail(id) {
this.isConfirm = false; this.$router.push({
path: '/expert/detail',
name: 'expert-detail',
query: {
id: id
},
})
}, },
// 页面跳转
goPage(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) {
@ -186,34 +248,7 @@
} }
} }
}, },
// 获取专家列表 },
getExpertData() {
let that = this;
this.axios
.post(this.HOME + "/api/consumer/expert-list", {
page: "1",
size: "10",
})
.then(function (res) {
console.log(res.data.data,121212);
that.expertData = res.data.data.list;
});
},
// 跳转到详情页
toDetail(id) {
this.$router.push({
path: '/expert/detail',
name: 'expert-detail',
params: {
id: id
},
})
},
// 页面跳转
goPage(path){
this.$router.push(path);
}
},
destroyed() { destroyed() {
window.removeEventListener("scroll", this.eventScrollTop); window.removeEventListener("scroll", this.eventScrollTop);
}, },
@ -226,12 +261,12 @@
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>

435
src/views/index/index.vue
View File

@ -1,230 +1,219 @@
<template> <template>
<div class="content main-content"> <div class="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-wrap"> <div class="banner-wrap">
<div class="swiper-container" ref="swiper-container"> <div class="swiper-container" ref="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<img :src="host + bannerSrc" alt="" /> <img :src="host + bannerSrc" />
</div> </div>
</div> </div>
<div class="swiper-pagination" ref="swiper-pagination"></div> <div class="swiper-pagination" ref="swiper-pagination"></div>
</div> </div>
</div> </div>
<!-- 领取咨询卡 --> <!-- 领取咨询卡 -->
<div <div class="index-receive" @click="goPage('/information')" v-if="consult_amount == 0">
class="index-receive" <img src="../../assets/images/home/index/receive.jpg" />
@click="goPage('/information')" <span>完善信息，立即领取免费咨询卡(1小时)</span>
v-if="consult_amount == 0" </div>
> <!-- 专家 -->
<img src="../../assets/images/home/index/receive.jpg" alt="" /> <div class="index-expert section">
<span>完善信息，立即领取免费咨询卡(1小时)</span> <div class="index-title">
</div> <h2>专家<em>团队</em></h2>
<!-- 专家 --> <span @click="goPage('/expert')">查看更多</span>
<div class="index-expert section"> </div>
<div class="index-title"> <ul class="index-expert-list">
<h2>专家<em>团队</em></h2> <li v-for="(item, index) in expertData" :key="index">
<span @click="goPage('/expert')">查看更多</span> <div class="expert-img">
</div> <img :src="host + item.avatar"/>
<ul class="index-expert-list"> </div>
<li v-for="(item, index) in expertData" :key="index"> <div class="expert-name">
<div class="expert-img"> {{item.name}}<span>{{item.keywords_list[1]}}</span>
<img :src="host + item.avatar" alt="" /> </div>
</div> <div class="expert-honor">
<div class="expert-name"> <span>{{item.keywords_list[0]}}</span>
{{ item.name }}<span>{{ item.keywords_list[1] }}</span> <span>{{item.keywords_list[1]}}</span>
</div> </div>
<div class="expert-honor"> </li>
<span>{{ item.keywords_list[0] }}</span> </ul>
<span>{{ item.keywords_list[1] }}</span> </div>
</div> <!-- 计划 -->
</li> <div class="index-plan">
</ul> <ul class="index-plan-list">
</div> <li>
<!-- 计划 --> <img src="../../assets/images/home/index/plan-01.png"/>
<div class="index-plan"> <p>强基计划</p>
<ul class="index-plan-list"> </li>
<li v-for="(item, index) in planData" :key="index"> <li>
<img src="../../assets/images/home/index/plan-01.png" alt="" /> <img src="../../assets/images/home/index/plan-02.png"/>
<p>{{ item.title }}</p> <p>综合评价</p>
</li> </li>
</ul> <li>
</div> <img src="../../assets/images/home/index/plan-03.png"/>
<!-- 测评 --> <p>专项计划</p>
<div class="index-evaluation section"> </li>
<div class="index-title"> </ul>
<h2>专业<em>测评</em></h2> </div>
<span @click="goPage('/evaluation')">查看更多</span> <!-- 测评 -->
</div> <div class="index-evaluation section">
<ul class="index-evaluation-list"> <div class="index-title">
<li <h2>专业<em>测评</em></h2>
@click="cpUrl()" <span @click="goPage('/evaluation')">查看更多</span>
v-for="(item, index) in evaluationData" </div>
:key="index" <ul class="index-evaluation-list">
> <li>
<div class="evaluation-img"> <div class="evaluation-img">
<img <img src="../../assets/images/home/index/evaluation-01.png"/>
src="../../assets/images/home/index/evaluation-01.png" </div>
alt="" <p>霍兰德职业兴趣测评</p>
/> <div class="evaluation-btn" @click="toEvaluation()">进入测评</div>
</div> </li>
<p>{{ item.title }}</p> <li>
<div class="evaluation-btn" @click="goPage()">进入测评</div> <div class="evaluation-img">
</li> <img src="../../assets/images/home/index/evaluation-02.png"/>
</ul> </div>
</div> <p>MBIT职业性格测试</p>
<!-- 直播 --> <div class="evaluation-btn" @click="toEvaluation()">进入测评</div>
<div class="index-live section"> </li>
<div class="index-title"> </ul>
<h2>有谱<em>直播</em></h2> </div>
<span @click="goPage()">查看更多</span> <!-- 直播 -->
</div> <div class="index-live section">
<ul class="index-live-list"> <div class="index-title">
<li><img src="../../assets/images/home/index/live-01.png" alt="" /></li> <h2>有谱<em>直播</em></h2>
<li><img src="../../assets/images/home/index/live-02.png" alt="" /></li> <span @click="goPage()">查看更多</span>
</ul> </div>
</div> <ul class="index-live-list">
<!-- 头条 --> <li><img src="../../assets/images/home/index/live-01.png"/></li>
<div class="index-headlines section"> <li><img src="../../assets/images/home/index/live-02.png"/></li>
<div class="index-title"> </ul>
<h2>有谱<em>头条</em></h2> </div>
<span @click="goPage()">查看更多</span> <!-- 头条 -->
</div> <div class="index-headlines section">
<ul class="index-headlines-list"> <div class="index-title">
<li v-for="(item, index) in headlinesData" :key="index"> <h2>有谱<em>头条</em></h2>
<p>{{ item.title }}</p> <span @click="goPage()">查看更多</span>
<span>{{ item.time }}</span> </div>
</li> <ul class="index-headlines-list">
</ul> <li v-for="(item, index) in headlinesData" :key="index">
</div> <p><a href="https://wwww.baidu.com">{{ item.title }}</a></p>
<tabbar :current="1"></tabbar> <span>{{ item.time }}</span>
</div> </li>
</ul>
</div>
<tabbar :current="1"></tabbar>
</div>
</template> </template>
<script> <script>
import tabbar from "../../components/tabbar.vue"; import tabbar from "../../components/tabbar.vue";
export default { export default {
name: "index", name: "index",
components: { components: {
tabbar, tabbar,
}, },
data() { data() {
return { return {
isScrollTop: false, isScrollTop: false,
isReceive: 0, //是否完善资料 isReceive: 0, //是否完善资料
bannerSrc: "", bannerSrc: "",
expertData: [ expertData: [], //专家列表
{ headlinesData: [{
name: "赵晓", title: "全国各省市最好大学+王牌专业盘点",
imgSrc: "", time: "2022年2月12日"
year: "从业5年", },
honor: [{ title: "硕士" }, { title: "中科院" }], {
}, title: "批次、批次线、大类招生到底是什么？？20个名词帮 你快速了解",
{ time: "2022年2月12日",
name: "赵晓", },
imgSrc: "", {
year: "从业3年", title: "教育部公布2021年度全国高等学校名单，共计3012所",
honor: [{ title: "硕士" }, { title: "中科院" }], time: "2022年2月12日",
}, },
{ {
name: "赵晓", title: "人民日报权威解读：热门专业和相似专业如何区分！",
imgSrc: "", time: "2022年2月12日",
year: "从业8年", },
honor: [{ title: "硕士" }, { title: "中科院" }], {
}, title: "比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南",
], time: "2022年2月12日",
planData: [ },
{ imgSrc: "", title: "强基计划" }, ],
{ imgSrc: "", title: "综合评价" }, };
{ imgSrc: "", title: "专项计划" }, },
], created() {
evaluationData: [ this.isScroll = true;
{ imgSrc: "", title: "霍兰德职业兴趣测评" }, window.addEventListener("scroll", this.eventScrollTop);
{ imgSrc: "", title: "MBIT职业性格测试" }, this.consult_amount = JSON.parse(localStorage.userData).consult_amount;
], },
headlinesData: [ mounted() {
{ title: "全国各省市最好大学+王牌专业盘点", time: "2022年2月12日" }, this.getBanner();
{ this.getExpertData();
title: "批次、批次线、大类招生到底是什么？？20个名词帮 你快速了解", },
time: "2022年2月12日", computed: {},
}, methods: {
{ // 测试跳转
title: "教育部公布2021年度全国高等学校名单，共计3012所", toEvaluation() {
time: "2022年2月12日", this.$router.push({
}, path: "/evaluation",
{ });
title: "人民日报权威解读：热门专业和相似专业如何区分！", },
time: "2022年2月12日",
}, // 获取banner
{ getBanner() {
title: let that = this;
"比普通批低100多分！从高一准备到高三报考，2022 年强基计划最新报考指南", this.axios
time: "2022年2月12日", .post(this.HOME + "/api/dictionary/get-slide-list", {
}, position: "h5_home_banner",
], })
}; .then(function(res) {
}, that.bannerSrc = res.data.data[0].src;
created() { });
this.isScroll = true; },
window.addEventListener("scroll", this.eventScrollTop);
this.consult_amount = JSON.parse(localStorage.userData).consult_amount;
}, // 获取专家列表
mounted() { getExpertData() {
this.getBanner(); let that = this;
this.getExpertData(); this.axios
}, .post(this.HOME + "/api/consumer/expert-list", {
computed: {}, page: "1",
methods: { size: "3",
cpUrl() { })
this.$router.push({ .then(function(res) {
path: "/evaluation", console.log(res.data.data);
}); that.expertData = res.data.data.list;
}, });
getBanner() { },
let that = this;
this.axios // 跳转页面
.post(this.HOME + "/api/dictionary/get-slide-list", { goPage(path){
position: "h5_home_banner", this.$router.push(path);
}) },
.then(function (res) {
that.bannerSrc = res.data.data[0].src; // 滚动显示头部
}); eventScrollTop() {
}, let scrollTop =
eventScrollTop() { document.body.scrollTop || document.documentElement.scrollTop;
let scrollTop = if (scrollTop >= 5) {
document.body.scrollTop || document.documentElement.scrollTop; if (this.isScroll) {
if (scrollTop >= 5) { this.isScroll = false;
if (this.isScroll) { this.isScrollTop = true;
this.isScroll = false; }
this.isScrollTop = true; } else {
} if (!this.isScroll) {
} else { this.isScroll = true;
if (!this.isScroll) { this.isScrollTop = false;
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> </script>
<style scoped> <style scoped>

401
src/views/login.vue
View File

@ -1,232 +1,187 @@
<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"></div> <div class="back"></div>
<div class="header-title">登录</div> <div class="header-title">登录</div>
</div> </div>
<div class="login pull-content list-section"> <div class="login pull-content list-section">
<div class="login-txt"> <div class="login-txt">
<div class="logo"> <div class="logo">
<img src="../assets/images/login/logo.png" alt="" /> <img src="../assets/images/login/logo.png" alt="" />
</div> </div>
<div class="company">有谱志愿</div> <div class="company">有谱志愿</div>
<div class="phone-number" v-if="mode == 1"> <div class="phone-number" v-if="mode == 1">
<span>手机号</span> <span>手机号</span>
<input type="text" v-model="phoneNumber" placeholder="请输入手机号" /> <input type="text" v-model="phoneNumber" placeholder="请输入手机号" />
</div> </div>
<div class="agreement"> <div class="agreement">
<span <span :class="{ checked: isAgreement }" @click="isAgreement = !isAgreement"><img
:class="{ checked: isAgreement }" v-show="isAgreement" src="../assets/images/login/yes.png" alt="" /></span>
@click="isAgreement = !isAgreement" <p>
><img 我已阅读并同意<span>《有谱志愿用户协议》</span>、<span>《隐私政策》</span>，未注册将引导完成账号注册
v-show="isAgreement" </p>
src="../assets/images/login/yes.png" </div>
alt="" <div class="login-btns">
/></span> <span @click="nailLogin()" v-if="mode == 0" class="nail-btn"><img
<p> src="../assets/images/login/nail.png" />钉钉授权登录</span>
我已阅读并同意<span>《有谱志愿用户协议》</span>、<span>《隐私政策》</span>，未注册将引导完成账号注册 <span @click="phoneLogin()" v-if="mode == 1">获取验证码</span>
</p> </div>
</div> </div>
<div class="login-btns"> <div class="login-mode">
<span @click="nailLogin()" v-if="mode == 0" class="nail-btn" <div class="mode-title"><span></span>其他登录方式<span></span></div>
><img src="../assets/images/login/nail.png" />钉钉授权登录</span <ul class="mode-item">
> <li>
<span @click="phoneLogin()" v-if="mode == 1">获取验证码</span> <span @click="changeMode(0)"><img src="../assets/images/login/nail.png" /></span>
</div> <p :class="{ active: mode == 0 }">当前登录方式</p>
</div> </li>
<div class="login-mode"> <li>
<div class="mode-title"><span></span>其他登录方式<span></span></div> <span @click="changeMode(1)"><img src="../assets/images/login/phone.png" /></span>
<ul class="mode-item"> <p :class="{ active: mode == 1 }">当前登录方式</p>
<li> </li>
<span @click="changeMode(0)" </ul>
><img src="../assets/images/login/nail.png" </div>
/></span> </div>
<p :class="{ active: mode == 0 }">当前登录方式</p> <!-- 阅读协议弹窗 -->
</li> <div class="my-confirm-bg" v-show="openAgreement" @click="openAgreement = !openAgreement"></div>
<li> <div class="my-confirm my-confirm2" v-show="openAgreement">
<span @click="changeMode(1)" <p>您还未阅读并同意授权</p>
><img src="../assets/images/login/phone.png" <div class="confirm-btns">
/></span> <span @click="openAgreement = false">确认</span>
<p :class="{ active: mode == 1 }">当前登录方式</p> </div>
</li> </div>
</ul> <!-- 钉钉授权登录弹窗 -->
</div> <div class="addr-select-bg" v-show="openEmpower" @click="openEmpower = !openEmpower"></div>
</div> <div class="nail-popup" v-show="openEmpower">
<!-- 阅读协议弹窗 --> <div class="nail-popup-title">
<div <span><img src="../assets/images/login/logo.png" alt="" /></span>
class="my-confirm-bg" <p>有谱志愿</p>
v-show="openAgreement" <em>申请</em>
@click="openAgreement = !openAgreement" </div>
></div> <p>获取您的钉钉昵称</p>
<div class="my-confirm my-confirm2" v-show="openAgreement"> <div class="nick-name">
<p>您还未阅读并同意授权</p> <span>钉钉昵称</span>
<div class="confirm-btns"> <p>张三<img src="../assets/images/login/green-yes.png" alt="" /></p>
<span @click="openAgreement = false">确认</span> </div>
</div> <div class="nail-popup-btns">
</div> <span @click="isEmpower()">同意</span>
<!-- 钉钉授权登录弹窗 --> <span @click="noEmpower()">拒绝</span>
<div </div>
class="addr-select-bg" </div>
v-show="openEmpower" <!-- 手机验证弹窗 -->
@click="openEmpower = !openEmpower" <div class="my-confirm-bg" v-show="openPhoneTips" @click="openPhoneTips = !openPhoneTips"></div>
></div> <div class="my-confirm my-confirm2" v-show="openPhoneTips">
<div class="nail-popup" v-show="openEmpower"> <!-- <p>{{ tipsMsg }}</p> -->
<div class="nail-popup-title"> <div class="confirm-btns">
<span><img src="../assets/images/login/logo.png" alt="" /></span> <span @click="openPhoneTips = false">确认</span>
<p>有谱志愿</p> </div>
<em>申请</em> </div>
</div> </div>
<p>获取您的钉钉昵称</p>
<div class="nick-name">
<span>钉钉昵称</span>
<p>张三<img src="../assets/images/login/green-yes.png" alt="" /></p>
</div>
<div class="nail-popup-btns">
<span @click="isEmpower()">同意</span>
<span @click="noEmpower()">拒绝</span>
</div>
</div>
<!-- 手机验证弹窗 -->
<div
class="my-confirm-bg"
v-show="openPhoneTips"
@click="openPhoneTips = !openPhoneTips"
></div>
<div class="my-confirm my-confirm2" v-show="openPhoneTips">
<!-- <p>{{ tipsMsg }}</p> -->
<div class="confirm-btns">
<span @click="openPhoneTips = false">确认</span>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "login", name: "login",
data() { data() {
return { return {
isScrollTop: false, isScrollTop: false,
mode: 1, //登录方式 mode: 1, //登录方式
openAgreement: false, //阅读协议弹窗 openAgreement: false, //阅读协议弹窗
isAgreement: false, //阅读协议状态 isAgreement: true, //阅读协议状态
openEmpower: false, //钉钉授权状态 openEmpower: false, //钉钉授权状态
openPhoneTips: false, //验证手机号弹出框 openPhoneTips: false, //验证手机号弹出框
phoneNumber: "13608235524", phoneNumber: "",
phone: "", phone: "",
}; };
}, },
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
}, },
mounted() {}, mounted() {},
methods: { methods: {
// 钉钉授权登录 // 钉钉授权登录
nailLogin() { nailLogin() {
if (this.isAgreement) { if (this.isAgreement) {
this.openEmpower = true; this.openEmpower = true;
} else { } else {
this.openAgreement = true; this.openAgreement = true;
} }
}, },
// 手机号登录 // 手机号登录
phoneLogin() { phoneLogin() {
let that = this; 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 == "") {
alert("请填写您的手机号码！"); alert("请填写您的手机号码！");
return false; return false;
} else if (!reg_tel.test(this.phoneNumber)) { } else if (!reg_tel.test(this.phoneNumber)) {
alert("请正确填写您的手机号码！"); alert("请正确填写您的手机号码！");
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() {
that.$router.push({ that.$router.push({
path: "/verification", path: "/verification",
query: { query: {
phone: that.phoneNumber, phone: that.phoneNumber,
}, },
}); });
}) })
.catch(function (error) { .catch(function(error) {
console.log(error); console.log(error);
}); });
}, },
// 同意钉钉授权 // 同意钉钉授权
isEmpower() { isEmpower() {
this.openEmpower = false; this.openEmpower = false;
}, },
//拒绝钉钉授权 //拒绝钉钉授权
noEmpower() { noEmpower() {
this.openEmpower = false; this.openEmpower = false;
}, },
// 改变登录方式 // 改变登录方式
changeMode(mode) { changeMode(mode) {
this.mode = mode; this.mode = mode;
}, },
doLogin() { // 滚动改变样式
if (this.username.match(/^\s*$/)) { eventScrollTop() {
alert("请输入用户名"); let scrollTop =
return; document.body.scrollTop || document.documentElement.scrollTop;
} if (scrollTop >= 5) {
if (this.password.match(/^\s*$/)) { if (this.isScroll) {
alert("请输入密码"); this.isScroll = false;
return; this.isScrollTop = true;
} }
this.login({ } else {
cellphone: this.username, if (!this.isScroll) {
password: this.password, this.isScroll = true;
success: (res) => { this.isScrollTop = false;
// console.log(res); }
if (res.code === 200) { }
this.$router.go(-1); },
} else { },
alert(res.data); destroyed() {
} window.removeEventListener("scroll", this.eventScrollTop);
}, },
}); //keep-alive进入时触发
}, activated() {
// 滚动改变样式 this.isScroll = true;
eventScrollTop() { window.addEventListener("scroll", this.eventScrollTop);
let scrollTop = },
document.body.scrollTop || document.documentElement.scrollTop; //keep-alive离开时触发
if (scrollTop >= 5) { deactivated() {
if (this.isScroll) { window.removeEventListener("scroll", this.eventScrollTop);
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> </script>
<style scoped> <style scoped>
</style> </style>

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

@ -1,192 +1,179 @@
<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)"> <div class="back" @click="$router.go(-1)">
<img src="../../assets/images/home/expert/back.png" alt="" /> <img src="../../assets/images/home/expert/back.png" alt="" />
</div> </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 <li class="field-wrap" v-for="(item, index) in number" :key="index">
class="field-wrap" <i class="char-field">{{ value[index] || placeholder }}</i>
v-for="(item, index) in number" </li>
:key="index" </ul>
> </label>
<i class="char-field">{{ value[index] || placeholder }}</i> <input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value" id="code"
</li> name="code" type="tel" :maxlength="number" autocorrect="off" autocomplete="off"
</ul> autocapitalize="off" />
</label> </div>
<input </div>
ref="input" <span v-show="!show">{{count}}秒后可重新获取验证码</span>
class="input-code" <div v-show="show" @click="getCode()" class="getCode">获取验证码</div>
@keyup="handleInput($event)" </div>
v-model="value" </div>
id="code" </div>
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> </template>
<script> <script>
export default { export default {
name: "login-verification", name: "login-verification",
props: { props: {
number: { number: {
type: Number, type: Number,
default: 6, 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);
this.phoneData = this.$route.query.phone this.phoneData = this.$route.query.phone
const TIME_COUNT = 60; const TIME_COUNT = 60;
if (!this.timer) { if (!this.timer) {
this.count = TIME_COUNT; this.count = TIME_COUNT;
this.show = false; this.show = false;
this.timer = setInterval(() => { this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) { if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--; this.count--;
} else { } else {
this.show = true; this.show = true;
clearInterval(this.timer); clearInterval(this.timer);
this.timer = null; this.timer = null;
} }
}, 1000); }, 1000);
} }
}, },
mounted() { mounted() {
},
computed: {},
methods: {
hideKeyboard() {
// 输入完成隐藏键盘
var that = this;
document.activeElement.blur(); // ios隐藏键盘
this.$refs.input.blur(); // android隐藏键盘
this.axios },
.post(this.HOME + "/api/user/login-by-Phone", { computed: {},
phone: this.$route.query.phone, methods: {
sms_code: this.value, hideKeyboard() {
}) // 输入完成隐藏键盘
.then(function (res) { var that = this;
localStorage.userData = JSON.stringify(res.data.data); document.activeElement.blur(); // ios隐藏键盘
if (res.data.code == 0) { this.$refs.input.blur(); // android隐藏键盘
that.$router.push({
path: "/index", }); this.axios
} else { .post(this.HOME + "/api/user/login-by-Phone", {
window.alert(res.msg); phone: this.$route.query.phone,
} sms_code: this.value,
}) })
.catch(function (error) { .then(function(res) {
console.log(error); localStorage.userData = JSON.stringify(res.data.data);
}); if (res.data.code == 0) {
}, that.$router.push({
handleSubmit() { path: "/index",
this.$emit("input", this.value); });
}, } else {
handleInput() { window.alert(res.msg);
this.$refs.input.value = this.value; }
if (this.value.length >= this.number) { })
this.hideKeyboard(); .catch(function(error) {
} console.log(error);
this.handleSubmit(); });
}, },
// 倒计时60s handleSubmit() {
getCode() { this.$emit("input", this.value);
const TIME_COUNT = 60; },
if (!this.timer) { handleInput() {
this.count = TIME_COUNT; this.$refs.input.value = this.value;
this.show = false; if (this.value.length >= this.number) {
this.timer = setInterval(() => { this.hideKeyboard();
if (this.count > 0 && this.count <= TIME_COUNT) { }
this.count--; this.handleSubmit();
} else { },
this.show = true; // 倒计时60s
clearInterval(this.timer); getCode() {
this.timer = null; const TIME_COUNT = 60;
} if (!this.timer) {
}, 1000); this.count = TIME_COUNT;
this.axios this.show = false;
.post(this.HOME + "/api/common/send-sms-captcha", { this.timer = setInterval(() => {
phone: this.$route.query.phone, if (this.count > 0 && this.count <= TIME_COUNT) {
type: "login", this.count--;
}) } else {
.then(function () {}) this.show = true;
.catch(function (error) { clearInterval(this.timer);
console.log(error); this.timer = null;
}); }
}, 1000);
} this.axios
}, .post(this.HOME + "/api/common/send-sms-captcha", {
// 滚动改变样式 phone: this.$route.query.phone,
eventScrollTop() { type: "login",
let scrollTop = })
document.body.scrollTop || document.documentElement.scrollTop; .then(function() {})
if (scrollTop >= 5) { .catch(function(error) {
if (this.isScroll) { console.log(error);
this.isScroll = false; });
this.isScrollTop = true;
} }
} else { },
if (!this.isScroll) { // 滚动改变样式
this.isScroll = true; eventScrollTop() {
this.isScrollTop = false; let scrollTop =
} document.body.scrollTop || document.documentElement.scrollTop;
} if (scrollTop >= 5) {
}, if (this.isScroll) {
}, this.isScroll = false;
destroyed() { this.isScrollTop = true;
window.removeEventListener("scroll", this.eventScrollTop); }
}, } else {
//keep-alive进入时触发 if (!this.isScroll) {
activated() { this.isScroll = true;
this.isScroll = true; this.isScrollTop = false;
window.addEventListener("scroll", this.eventScrollTop); }
}, }
//keep-alive离开时触发 },
deactivated() { },
window.removeEventListener("scroll", this.eventScrollTop); 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> </script>
<style scoped> <style scoped>

290
src/views/user/information/index.vue
View File

@ -10,51 +10,58 @@
<li> <li>
<span><em>*</em>姓名</span> <span><em>*</em>姓名</span>
<p> <p>
<input type="text" value="" placeholder="请输入姓名"> <input type="text" value="" v-model="name" placeholder="请输入姓名">
</p> </p>
</li> </li>
<li @click="openAddr()"> <li @click="openAddr()">
<span><em>*</em>考籍</span> <span><em>*</em>考籍</span>
<p> <p>
<input type="text" readonly="readonly" :value="addrData[addrIndex].title" placeholder="请选择考生所在省份"> <input type="text" readonly="readonly" :value="addrData[addrIndex].name" placeholder="请选择考生所在省份">
<img src="../../../assets/images/home/expert/arrow-right.png" > <img src="../../../assets/images/home/expert/arrow-right.png" >
</p> </p>
</li> </li>
<li @click="openSex()"> <li @click="openSex()">
<span><em>*</em>性别</span> <span><em>*</em>性别</span>
<p> <p>
<input type="text" readonly="readonly" :value="sexData[sexIndex].title" placeholder="请输入性别"> <input type="text" readonly="readonly" :value="sexData[sexIndex].title" placeholder="请选择性别">
<img src="../../../assets/images/home/expert/arrow-right.png" > <img src="../../../assets/images/home/expert/arrow-right.png" >
</p> </p>
</li> </li>
<li @click="openCategory()"> <li @click="openCategory()">
<span><em>*</em>考生类型</span> <span><em>*</em>考生类型</span>
<p> <p>
<input type="text" readonly="readonly" :value="categoryData[categoryIndex].title" placeholder="请输入姓名"> <input type="text" readonly="readonly" :value="categoryData[categoryIndex].title" placeholder="请选择考生姓名">
<img src="../../../assets/images/home/expert/arrow-right.png" >
</p>
</li>
<li @click="openDate()">
<span><em>*</em>高考年份</span>
<p>
<input type="text" readonly="readonly" :value="dateArray[dateIndex]" placeholder="请选择高考年份">
<img src="../../../assets/images/home/expert/arrow-right.png" > <img src="../../../assets/images/home/expert/arrow-right.png" >
</p> </p>
</li> </li>
<li> <li>
<span><em>*</em>选科组合</span> <span><em>*</em>选科组合</span>
<div class="course-list"> <div class="course-list">
<span :class="{'checked':index==checkedIndex}" v-for="(item,index) in courseData" :key="index" @click="changeCourse(index)">{{item.title}}</span> <span :class="{'checked':item.isActive}" v-for="(item,index) in subjectArray" :key="index" @click="onChangeA(index,item.id)">{{item.name}}</span>
</div> </div>
</li> </li>
<li> <li>
<span>预估/模考成绩</span> <span>预估/模考成绩</span>
<p> <p>
<input type="text" value="" placeholder="请填写预估/模考成绩（非必填）"> <input type="text" v-model="achievementExpect" placeholder="请填写预估/模考成绩（非必填）">
</p> </p>
</li> </li>
<li> <li>
<span>预估/模考省内排名</span> <span>预估/模考省内排名</span>
<p> <p>
<input type="text" value="" placeholder="请填写预估/模考省内排名（非必填）"> <input type="text" v-model="provinceRanking" placeholder="请填写预估/模考省内排名（非必填）">
</p> </p>
</li> </li>
</ul> </ul>
</div> </div>
<div class="information-btn" @click="setInformationEV()">确认</div> <div class="information-btn" @click="getStudentInfo()">确认</div>
<!-- 地址弹出框 --> <!-- 地址弹出框 -->
<div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div> <div class="addr-select-bg" v-show="isAddr" @click="isAddr=!isAddr"></div>
<div class="addr-select-item" v-show="isAddr"> <div class="addr-select-item" v-show="isAddr">
@ -63,7 +70,7 @@
<span @click="isAddr=!isAddr">取消</span> <span @click="isAddr=!isAddr">取消</span>
</div> </div>
<ul> <ul>
<li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">{{item.title}}<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png"></li> <li :class="{'checked':index == addrIndex}" @click="getAddrValue(index,item)" v-for="(item,index) in addrData" :key="index">{{item.name}}<img v-show="index==addrIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul> </ul>
</div> </div>
<!-- 性别弹出框 --> <!-- 性别弹出框 -->
@ -77,6 +84,17 @@
<li :class="{'checked':index == sexIndex}" @click="getSexValue(index,item)" v-for="(item,index) in sexData" :key="index">{{item.title}}<img v-show="index==sexIndex" src="../../../assets/images/home/expert/yes.png"></li> <li :class="{'checked':index == sexIndex}" @click="getSexValue(index,item)" v-for="(item,index) in sexData" :key="index">{{item.title}}<img v-show="index==sexIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul> </ul>
</div> </div>
<!-- 日期弹出框 -->
<div class="addr-select-bg" v-show="isDate" @click="isDate=!isDate"></div>
<div class="addr-select-item" v-show="isDate">
<div class="addr-btns">
<span>请选择高考日期</span>
<span @click="isDate=!isDate">取消</span>
</div>
<ul>
<li :class="{'checked':index == dateIndex}" @click="getDateValue(index,item)" v-for="(item,index) in dateArray" :key="index">{{item}}<img v-show="index==dateIndex" src="../../../assets/images/home/expert/yes.png"></li>
</ul>
</div>
<!-- 考生类别弹出框 --> <!-- 考生类别弹出框 -->
<div class="addr-select-bg" v-show="isCategory" @click="isCategory=!isCategory"></div> <div class="addr-select-bg" v-show="isCategory" @click="isCategory=!isCategory"></div>
<div class="addr-select-item" v-show="isCategory"> <div class="addr-select-item" v-show="isCategory">
@ -103,28 +121,13 @@
data(){ data(){
return { return {
isScrollTop: false, isScrollTop: false,
name:'',
addrData:[ addrData:[], //考籍列表
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'},
{title:'北京'},
{title:'上海'},
{title:'广州'},
{title:'四川'}
],
addrIndex: 0, addrIndex: 0,
isAddr: false, //城市列表是否显示 isAddr: false, //城市列表是否显示
addrValue:'', //选择城市编号 addrValue:'', //考籍城市编号
studentName: '', //考生姓名
sexData:[ sexData:[
{title:'男'}, {title:'男'},
@ -134,6 +137,11 @@
isSex: false, //性别列表是否显示 isSex: false, //性别列表是否显示
sexValue:'', //选择性别 sexValue:'', //选择性别
dateArray:[],
dateIndex: 0,
isDate: false, //时间列表是否显示
dateValue:'', //选择时间
categoryData:[ categoryData:[
{title:'普通高考生'}, {title:'普通高考生'},
{title:'艺考生'}, {title:'艺考生'},
@ -143,33 +151,78 @@
isCategory: false, //性别列表是否显示 isCategory: false, //性别列表是否显示
categoryValue:'', //选择性别 categoryValue:'', //选择性别
courseData: [
{title:'物理'},
{title:'化学'},
{title:'生物'},
{title:'政治'},
{title:'历史'},
{title:'地理'}
],
checkedIndex: -1, checkedIndex: -1,
isSeekCard: false isSeekCard: false,
achievementExpect:'',//预估成绩
provinceRanking: '' ,//预估排名
// 学科
subjectArray: [],
subjectValue: [],
subjectIndex: 0,
numberArr: [],
temporaryCode:[],//暂存编号
limitArr:[],//多选一数组
count:0,
userObj:'',
lenNum:0,//最少最多
iscount:true,
ispopu:false
} }
}, },
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
this.getAddrData();
this.getDate();
this.getSubjectArray();
}, },
mounted() {
this.getAddrData();
this.getDate();
this.getSubjectArray();
},
methods:{ methods:{
// 获取城市列表
getAddrData() {
let that = this;
this.axios
.post(this.HOME + "/api/area/index", {
pcode: 86
})
.then(function(res) {
that.addrData = res.data.data;
});
},
// 获取考试时间
getDate(){
const date = new Date();
let year = Math.trunc(date.getFullYear());
let end = year + 10;
let newArray=[];
for(let i=year; i<= end; i++){
newArray.push(i);
}
this.dateArray = newArray;
},
// 城市选择 // 城市选择
openAddr(){ openAddr(){
this.isAddr=!this.isAddr; this.isAddr=!this.isAddr;
}, },
getAddrValue(index,item){ getAddrValue(index,item){
this.addrValue = item.title; this.addrValue = item.code;
this.addrIndex = index; this.addrIndex = index;
this.isAddr=false; this.isAddr=false;
// 查询科目
this.getSubjectArray();
console.log(this.addrData[this.addrIndex],3636)
}, },
// 选择性别 // 选择性别
openSex(){ openSex(){
this.isSex=!this.isSex; this.isSex=!this.isSex;
@ -179,6 +232,17 @@
this.sexIndex = index; this.sexIndex = index;
this.isSex=false; this.isSex=false;
}, },
// 选择时间
openDate(){
this.isDate=!this.isDate;
},
getDateValue(index,item){
this.dateValue = item;
this.dateIndex = index;
this.isDate=false;
},
//选择考生类别 //选择考生类别
openCategory(){ openCategory(){
this.isCategory=!this.isCategory; this.isCategory=!this.isCategory;
@ -193,9 +257,149 @@
changeCourse(index){ changeCourse(index){
this.checkedIndex = index this.checkedIndex = index
}, },
// 提交
setInformationEV(){ // 获取选科组合列表
this.isSeekCard = !this.isSeekCard; getSubjectArray() {
let that = this;
this.axios
.post(this.HOME + "/api/dictionary/subjects", {
type: 0
})
.then(function(res) {
console.log(res,222)
let list = res.data.data;
let newArray = [];
let baiArr = that.addrData[that.addrIndex].subject_white.split(',');
list.forEach(item=>{
baiArr.forEach(item1=>{
if(item.id==item1){
let obj = {
id: item.id,
name: item.name,
isActive:false
}
newArray.push(obj);
}
})
})
that.subjectArray =newArray;
console.log(that.subjectArray,123)
});
},
// 选科组合选择事件
onChangeA(index,id) {
let stuJect = this.data.userObj.student.student_subject.split(',');
let arrList = [];
stuJect.forEach(item=>{
this.data.subjectArray.forEach(item1=>{
if(item==item1.id){
item1.isActive = true;
}
})
arrList.push(item*1);
});
// // 有限制的科目
// if(this.data.limitArr.length && this.data.temporaryCode.length!=3){
// // 判断限制的科目在，选择的科目数组里是否存在
// let isc = this.data.limitArr.filter(item=>this.data.temporaryCode.indexOf(item) > -1);
// if(isc.length){
// let existli = this.data.limitArr.indexOf(id);
// if(existli==-1){
// this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
// if(existtemp!=-1) {
// // 再次点击已经存在的科目，删除
// this.data.temporaryCode.splice(existtemp,1);
// } else {
// this.data.temporaryCode.push(id);
// }
// this.setData({
// subjectArray:this.data.subjectArray
// })
// } else {
// if(existtemp!=-1) {
// this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
// // 再次点击已经存在的科目，删除
// this.data.temporaryCode.splice(existtemp,1);
// this.setData({
// subjectArray:this.data.subjectArray
// })
// } else {
// // 存在，就不能再选
// dd.showToast({content:'选科冲突',type: 'none',duration:2000});
// }
// }
// } else {
// this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
// if(existtemp!=-1) {
// // 再次点击已经存在的科目，删除
// this.data.temporaryCode.splice(existtemp,1);
// } else {
// // 可继续选择
// this.data.temporaryCode.push(id);
// }
// this.setData({
// subjectArray:this.data.subjectArray
// })
// }
// } else if(this.data.temporaryCode.length!=3) {
// this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
// // 没有限制的科目
// if(existtemp!=-1) {
// // 再次点击已经存在的科目，删除
// this.data.temporaryCode.splice(existtemp,1);
// } else {
// // 添加选中的科目
// this.data.temporaryCode.push(id);
// }
// this.setData({
// subjectArray:this.data.subjectArray
// })
// } else {
// // 没有限制的科目
// if(existtemp!=-1) {
// this.data.subjectArray[indexes].isActive = !this.data.subjectArray[indexes].isActive
// // 再次点击已经存在的科目，删除
// this.data.temporaryCode.splice(existtemp,1);
// this.setData({
// subjectArray:this.data.subjectArray
// })
// } else {
// dd.showToast({content:`最多选${this.data.lenNum}科`,type: 'none',duration:2000});
// }
// }
// this.subjectArray[index].isActive=true;
console.log(index,id)
},
// 获取考生信息
getStudentInfo() {
let that = this;
this.axios
.post(this.HOME + "/api/area/index", {
student_name: that.studentName,//姓名
student_gender: that.sexIndex==0 ? 1 : 2,//性别
student_native: that.addrData[that.addrIndex].code, //考籍（省级）编号
student_native_str: that.addrData[that.addrIndex].name,//考籍（省级）名称
student_subject: this.temporaryCode.join(','),//选科组合（选科ID，多个用英文逗号分割）
student_exam_year: that.dateValue,//高考年份
is_art: that.dateIndex==1?1:0,//是否是艺考生
is_PE:that.dateIndex==2?1:0,//是否是体考生
achievement_expect: this.data.achievementExpect,//预估或模考成绩
province_ranking: this.data.provinceRanking,//预估/省内排名
achievement_high: '',//高考成绩，-1表示未考（用户留空时默认传值为-1）
})
.then(function(res) {
// that.isSeekCard = true;
console.log(res,123)
});
}, },
// 跳转 // 跳转