专家列表跟文章页接口调用
parent
e084fc1612
commit
567b3d3517
|
|
@ -1,32 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<style>
|
||||
.load{
|
||||
width:0.6rem;
|
||||
height:0.6rem;
|
||||
background-image:url("<%= BASE_URL %>images/load.gif");
|
||||
background-size:100%;
|
||||
position: fixed;
|
||||
z-index:10000;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
display:none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<script src="<%= BASE_URL %>js/flexible.js"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<style>
|
||||
.load {
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
background-image: url("<%= BASE_URL %>images/load.gif");
|
||||
background-size: 100%;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
|
||||
enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
<script src="<%= BASE_URL %>js/flexible.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,14 +8,11 @@
|
|||
<!-- 轮播图 -->
|
||||
<div class="banner detail-banner">
|
||||
<div class="detail-photo">
|
||||
<span><img src="../../../assets/images/home/expert/expert-list.jpg" ></span>
|
||||
<span><img :src="host + expertDetail.avatar" ></span>
|
||||
<div class="detail-txt">
|
||||
<h1>赵晓<span>专家咨询师</span></h1>
|
||||
<h1>{{expertDetail.name}}<span>{{expertDetail.tags_text}}</span></h1>
|
||||
<p>
|
||||
<span>中科院心理所</span>
|
||||
<span>硕士</span>
|
||||
<span>从业5年</span>
|
||||
<span>熟悉新高考</span>
|
||||
<span v-for="(item,index) in expertDetail.keywords_list" :key="index">{{item}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,51 +24,31 @@
|
|||
<span>咨询理念</span>
|
||||
<img src="../../../assets/images/home/expert/abstract-right.png" >
|
||||
</h2>
|
||||
<p>这里展示咨询理念的文字内容，这里展示咨询理念的 文字内容，这里展示咨询理念的文字内容，这里展示 咨询理念的文字内容，这里展示理</p>
|
||||
<p>{{expertDetail.slogan}}</p>
|
||||
</div>
|
||||
<div class="detail-content detail-section">
|
||||
<div class="expert-body">
|
||||
<h2>个人简介</h2>
|
||||
<span>
|
||||
<p>期从事高考志愿填报研究工作，尤其是在准确定位考生、定量分析院校录取数据方面有独到见解，创立了“3/8线差法”，是各大网站及电视台教育频道的常邀嘉宾，多次接受有关期刊杂志专访。长期从事高考志愿填报研究工作。</p>
|
||||
<p>{{expertDetail.summary}}</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="expert-region">
|
||||
<h2>服务区域</h2>
|
||||
<p>
|
||||
全国，尤其擅长河南省、北京市、河北省、内蒙古自治区的志愿填报。
|
||||
<span>{{expertDetail.service_area_text}}</span>
|
||||
<span>尤其擅长{{expertDetail.service_area_main_text}}的志愿填报</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="expert-case">
|
||||
<h2>咨询案例</h2>
|
||||
<div class="expert-case-list">
|
||||
<div class="expert-case-item">
|
||||
<div class="case-img"><img src="../../../assets/images/home/expert/detail.jpg" alt=""></div>
|
||||
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
|
||||
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
|
||||
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
|
||||
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
|
||||
</div>
|
||||
<div class="expert-case-item">
|
||||
<div class="case-img"><img src="../../../assets/images/home/expert/detail.jpg" alt=""></div>
|
||||
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
|
||||
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
|
||||
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
|
||||
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
|
||||
</div>
|
||||
<div class="expert-case-item">
|
||||
<div class="case-img"><img src="../../../assets/images/home/expert/detail.jpg" alt=""></div>
|
||||
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
|
||||
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
|
||||
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
|
||||
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
|
||||
</div>
|
||||
<div class="expert-case-item">
|
||||
<div class="case-img"><img src="../../../assets/images/home/expert/detail.jpg" alt=""></div>
|
||||
<h3><span>案例1：</span>完美的与湖北工业相遇</h3>
|
||||
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p>
|
||||
<p><span>专业定位：</span><span>兴趣纬度</span> </p>
|
||||
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p>
|
||||
<div class="expert-case-item" v-for="(item,index) in expertDetail.mainCaseList" :key="index">
|
||||
<div class="case-img"><img :src="host + item.cover" alt=""></div>
|
||||
<h3><span>案例{{index+1}}：</span>{{item.title}}</h3>
|
||||
<p v-if="item.result_remarks"><span>录取结果：</span><span>{{item.result_remarks}}</span></p>
|
||||
<p v-if="item.location_remarks"><span>专业定位：</span><span>{{item.location_remarks}}</span> </p>
|
||||
<p v-if="item.other_remarks"><span>兴趣类型：</span><span>{{item.other_remarks}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -85,15 +62,19 @@
|
|||
name: "expert-detail",
|
||||
data() {
|
||||
return {
|
||||
isScrollTop: false
|
||||
isScrollTop: false,
|
||||
expertDetail: [],
|
||||
expertCase: [],
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isScroll = true;
|
||||
window.addEventListener("scroll", this.eventScrollTop);
|
||||
this.id = this.$route.params.id;
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.getDetailData();
|
||||
},
|
||||
computed: {
|
||||
|
||||
|
|
@ -113,6 +94,18 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
// 获取专家详情
|
||||
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() {
|
||||
window.removeEventListener("scroll", this.eventScrollTop);
|
||||
|
|
|
|||
|
|
@ -44,25 +44,25 @@
|
|||
<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-img"><img :src="host + item.avatar" alt=""></div>
|
||||
<div class="expert-list-txt">
|
||||
<div class="title">
|
||||
<h2>{{item.name}}</h2>
|
||||
<span v-if="item.title">{{item.title}}</span>
|
||||
<span v-if="item.tags_text">{{item.tags_text}}</span>
|
||||
</div>
|
||||
<div class="integral">
|
||||
<span>公益积分：{{item.integral}}</span>
|
||||
<span>好评度：{{item.score}}</span>
|
||||
<span>公益积分：{{item.score}}</span>
|
||||
<span>好评度：{{item.comment_score==0?item.comment_score:item.comment_score.toFixed(1)}}</span>
|
||||
</div>
|
||||
<div class="honor">
|
||||
<span v-for="(itemk,indexk) in item.honor" :key="indexk">{{itemk.title}}</span>
|
||||
<span v-for="(itemk,indexk) in item.keywords_list" :key="indexk">{{itemk}}</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 class="btn" @click="toDetail(item.id)">查看详情</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -120,21 +120,16 @@
|
|||
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:'一所好的大学，是年轻人的家，是他 们度过人生最好时光的地方！'}
|
||||
],
|
||||
expertData: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isScroll = true;
|
||||
window.addEventListener("scroll", this.eventScrollTop);
|
||||
},
|
||||
mounted() {
|
||||
this.getExpertData()
|
||||
},
|
||||
methods:{
|
||||
// 导航切换
|
||||
changeNav(index){
|
||||
|
|
@ -177,7 +172,6 @@
|
|||
closeEV(){
|
||||
this.isConfirm = false;
|
||||
},
|
||||
|
||||
eventScrollTop() {
|
||||
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
if (scrollTop >= 5) {
|
||||
|
|
@ -192,6 +186,30 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
// 获取专家列表
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue