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

专家列表跟文章页接口调用

master
Lee-1203 2022-03-03 19:36:36 +08:00
parent e084fc1612
commit 567b3d3517
3 changed files with 95 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
public/index.html
View File

@ -1,32 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<style> <style>
.load{ .load {
width:0.6rem; width: 0.6rem;
height:0.6rem; height: 0.6rem;
background-image:url("<%= BASE_URL %>images/load.gif"); background-image: url("<%= BASE_URL %>images/load.gif");
background-size:100%; background-size: 100%;
position: fixed; position: fixed;
z-index:10000; z-index: 10000;
left:50%; left: 50%;
top:50%; top: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
display:none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
</noscript> enabled. Please enable it to continue.</strong>
<div id="app"></div> </noscript>
<!-- built files will be auto injected --> <div id="app"></div>
<script src="<%= BASE_URL %>js/flexible.js"></script> <!-- built files will be auto injected -->
</body> <script src="<%= BASE_URL %>js/flexible.js"></script>
</body>
</html> </html>

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

@ -8,14 +8,11 @@
<!-- 轮播图 --> <!-- 轮播图 -->
<div class="banner detail-banner"> <div class="banner detail-banner">
<div class="detail-photo"> <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"> <div class="detail-txt">
<h1>赵晓<span>专家咨询师</span></h1> <h1>{{expertDetail.name}}<span>{{expertDetail.tags_text}}</span></h1>
<p> <p>
<span>中科院心理所</span> <span v-for="(item,index) in expertDetail.keywords_list" :key="index">{{item}}</span>
<span>硕士</span>
<span>从业5年</span>
<span>熟悉新高考</span>
</p> </p>
</div> </div>
</div> </div>
@ -27,51 +24,31 @@
<span>咨询理念</span> <span>咨询理念</span>
<img src="../../../assets/images/home/expert/abstract-right.png" > <img src="../../../assets/images/home/expert/abstract-right.png" >
</h2> </h2>
<p>这里展示咨询理念的文字内容，这里展示咨询理念的 文字内容，这里展示咨询理念的文字内容，这里展示 咨询理念的文字内容，这里展示理</p> <p>{{expertDetail.slogan}}</p>
</div> </div>
<div class="detail-content detail-section"> <div class="detail-content detail-section">
<div class="expert-body"> <div class="expert-body">
<h2>个人简介</h2> <h2>个人简介</h2>
<span> <span>
<p>期从事高考志愿填报研究工作，尤其是在准确定位考生、定量分析院校录取数据方面有独到见解，创立了“3/8线差法”，是各大网站及电视台教育频道的常邀嘉宾，多次接受有关期刊杂志专访。长期从事高考志愿填报研究工作。</p> <p>{{expertDetail.summary}}</p>
</span> </span>
</div> </div>
<div class="expert-region"> <div class="expert-region">
<h2>服务区域</h2> <h2>服务区域</h2>
<p> <p>
全国，尤其擅长河南省、北京市、河北省、内蒙古自治区的志愿填报。 <span>{{expertDetail.service_area_text}}</span>
<span>尤其擅长{{expertDetail.service_area_main_text}}的志愿填报</span>
</p> </p>
</div> </div>
<div class="expert-case"> <div class="expert-case">
<h2>咨询案例</h2> <h2>咨询案例</h2>
<div class="expert-case-list"> <div class="expert-case-list">
<div class="expert-case-item"> <div class="expert-case-item" v-for="(item,index) in expertDetail.mainCaseList" :key="index">
<div class="case-img"><img src="../../../assets/images/home/expert/detail.jpg" alt=""></div> <div class="case-img"><img :src="host + item.cover" alt=""></div>
<h3><span>案例1：</span>完美的与湖北工业相遇</h3> <h3><span>案例{{index+1}}：</span>{{item.title}}</h3>
<p><span>录取结果：</span><span>604，超专业线4分，湖北工业大学电子工程 专业</span></p> <p v-if="item.result_remarks"><span>录取结果：</span><span>{{item.result_remarks}}</span></p>
<p><span>专业定位：</span><span>兴趣纬度</span> </p> <p v-if="item.location_remarks"><span>专业定位：</span><span>{{item.location_remarks}}</span> </p>
<p><span>兴趣类型：</span><span>这里展示兴趣类型的文字内容，这里展示兴趣类型的文字内容，这里展示兴趣类型的文 字内容.</span></p> <p v-if="item.other_remarks"><span>兴趣类型：</span><span>{{item.other_remarks}}</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> </div>
</div> </div>
</div> </div>
@ -85,15 +62,19 @@
name: "expert-detail", name: "expert-detail",
data() { data() {
return { return {
isScrollTop: false isScrollTop: false,
expertDetail: [],
expertCase: [],
id: ''
} }
}, },
created() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
this.id = this.$route.params.id;
}, },
mounted() { mounted() {
this.getDetailData();
}, },
computed: { 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() { destroyed() {
window.removeEventListener("scroll", this.eventScrollTop); window.removeEventListener("scroll", this.eventScrollTop);

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

@ -44,25 +44,25 @@
<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="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="expert-list-txt">
<div class="title"> <div class="title">
<h2>{{item.name}}</h2> <h2>{{item.name}}</h2>
<span v-if="item.title">{{item.title}}</span> <span v-if="item.tags_text">{{item.tags_text}}</span>
</div> </div>
<div class="integral"> <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>
<div class="honor"> <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>
<div class="slogan">{{item.slogan}}</div> <div class="slogan">{{item.slogan}}</div>
</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()">向TA提问</div>
<div class="btn" @click="goPage('/expert/detail')">查看详情</div> <div class="btn" @click="toDetail(item.id)">查看详情</div>
</div> </div>
</li> </li>
</ul> </ul>
@ -120,21 +120,16 @@
isAddr: false, //城市列表是否显示 isAddr: false, //城市列表是否显示
addrValue:'', //选择城市编号 addrValue:'', //选择城市编号
expertData: [ 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() { created() {
this.isScroll = true; this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop); window.addEventListener("scroll", this.eventScrollTop);
}, },
mounted() {
this.getExpertData()
},
methods:{ methods:{
// 导航切换 // 导航切换
changeNav(index){ changeNav(index){
@ -177,7 +172,6 @@
closeEV(){ closeEV(){
this.isConfirm = false; this.isConfirm = false;
}, },
eventScrollTop() { eventScrollTop() {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop >= 5) { 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){ goPage(path){
this.$router.push(path); this.$router.push(path);
} }