214 lines
7.7 KiB
Vue
214 lines
7.7 KiB
Vue
|
<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">
|
|||
|
|
<img src="../../../assets/images/home/expert/banner.jpg" alt="">
|
|||
|
|
</div>
|
|||
|
|
<!-- 领取咨询机会 -->
|
|||
|
|
<div class="expert-receive" @click="goPage('/information')" v-if="isReceive==0">
|
|||
|
|
<img src="../../../assets/images/home/expert/notice-01.png" alt="">
|
|||
|
|
<p>完善信息，立即领取免费咨询卡(1小时)</p>
|
|||
|
|
<span></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="expert-receive expert-receive-01" v-if="isReceive==1">
|
|||
|
|
<img src="../../../assets/images/home/expert/notice-02.png" alt="">
|
|||
|
|
<p>您已领取一小时免费咨询权益，可向专家进行提问</p>
|
|||
|
|
</div>
|
|||
|
|
<!-- 导航 -->
|
|||
|
|
<div class="expert-nav-list section">
|
|||
|
|
<ul class="expert-nav-item">
|
|||
|
|
<li :class="{'active':current==index}" v-for="(item,index) in navData" :key="index" @click="changeNav(index)">{{item.title}}</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="addr-select">
|
|||
|
|
<div @click="openAddr()">{{addrData[addrIndex].title}}</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">
|
|||
|
|
<ul class="expert-list">
|
|||
|
|
<li v-for="(item,index) in expertData" :key="index">
|
|||
|
|
<div class="expert-list-con" @click="goPage('/expert/detail')">
|
|||
|
|
<div class="expert-list-img"><img src="../../../assets/images/home/index/expert.png" alt=""></div>
|
|||
|
|
<div class="expert-list-txt">
|
|||
|
|
<div class="title">
|
|||
|
|
<h2>{{item.name}}</h2>
|
|||
|
|
<span v-if="item.title">{{item.title}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="integral">
|
|||
|
|
<span>公益积分：{{item.integral}}</span>
|
|||
|
|
<span>好评度：{{item.score}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="honor">
|
|||
|
|
<span v-for="(itemk,indexk) in item.honor" :key="indexk">{{itemk.title}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="slogan">{{item.slogan}}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="expert-list-btns">
|
|||
|
|
<div :class="{'btn':true,'noservice':isReceive==0}" @click="toAsk()">向TA提问</div>
|
|||
|
|
<div class="btn" @click="goPage('/expert/detail')">查看详情</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="my-confirm-bg" v-show="isConfirm" @click="isConfirm=!isConfirm"></div>
|
|||
|
|
<div class="my-confirm" v-show="isConfirm">
|
|||
|
|
<p>您还未领取免费咨询卡，请前往领取！</p>
|
|||
|
|
<div class="confirm-btns">
|
|||
|
|
<span @click="goPage('/information')">确认</span>
|
|||
|
|
<span @click="closeEV()">取消</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "expert",
|
|||
|
|
data(){
|
|||
|
|
return {
|
|||
|
|
isScrollTop: false,
|
|||
|
|
isReceive: 1, //是否领取咨询机会
|
|||
|
|
current: 0,
|
|||
|
|
isConfirm: false,
|
|||
|
|
navData: [
|
|||
|
|
{title:'所有专家'},
|
|||
|
|
{title:'最近活跃'},
|
|||
|
|
{title:'多元升学'}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
addrData:[
|
|||
|
|
{title:'北京'},
|
|||
|
|
{title:'上海'},
|
|||
|
|
{title:'广州'},
|
|||
|
|
{title:'四川'},
|
|||
|
|
{title:'北京'},
|
|||
|
|
{title:'上海'},
|
|||
|
|
{title:'广州'},
|
|||
|
|
{title:'四川'},
|
|||
|
|
{title:'北京'},
|
|||
|
|
{title:'上海'},
|
|||
|
|
{title:'广州'},
|
|||
|
|
{title:'四川'},
|
|||
|
|
{title:'北京'},
|
|||
|
|
{title:'上海'},
|
|||
|
|
{title:'广州'},
|
|||
|
|
{title:'四川'}
|
|||
|
|
],
|
|||
|
|
addrIndex: 0,
|
|||
|
|
isAddr: false, //城市列表是否显示
|
|||
|
|
addrValue:'', //选择城市编号
|
|||
|
|
|
|||
|
|
expertData: [
|
|||
|
|
{name:'赵晓',title:'金牌咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
|
|||
|
|
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
|
|||
|
|
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
|
|||
|
|
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
|
|||
|
|
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
|
|||
|
|
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'},
|
|||
|
|
{name:'赵晓',title:'专家咨询师',imgsrc:'../../../assets/images/home/index/expert.png',integral:'985',score:'8.5',honor:[{title:'中科院心理科'},{title:'硕士'},{title:'从业5年'},{title:'熟悉高考'}],slogan:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'}
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.isScroll = true;
|
|||
|
|
window.addEventListener("scroll", this.eventScrollTop);
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
// 导航切换
|
|||
|
|
changeNav(index){
|
|||
|
|
switch(index) {
|
|||
|
|
case 0:
|
|||
|
|
this.current = 0;
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
this.current = 1;
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
this.current = 2;
|
|||
|
|
break;
|
|||
|
|
case 3:
|
|||
|
|
this.current = 3;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 城市选择
|
|||
|
|
openAddr(){
|
|||
|
|
this.isAddr=!this.isAddr;
|
|||
|
|
},
|
|||
|
|
getAddrValue(index,item){
|
|||
|
|
this.addrValue = item.title;
|
|||
|
|
this.addrIndex = index;
|
|||
|
|
this.isAddr=false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 向TA提问
|
|||
|
|
toAsk(){
|
|||
|
|
if(this.isReceive == 1){
|
|||
|
|
this.$router.push('/expert/ask');
|
|||
|
|
}else if(this.isReceive == 0){
|
|||
|
|
this.isConfirm = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 关闭提示框
|
|||
|
|
closeEV(){
|
|||
|
|
this.isConfirm = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
goPage(path){
|
|||
|
|
this.$router.push(path);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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>
|
|||
|
|
.banner,
|
|||
|
|
.banner img{
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|