@@ -3,7 +3,9 @@ import request from '@/config/request_java'; | |||||
export const APIOptimize = { | export const APIOptimize = { | ||||
getExpertList, // 获取专家列表 | getExpertList, // 获取专家列表 | ||||
getTalkList, // 获取养育话题列表 | getTalkList, // 获取养育话题列表 | ||||
addTalkLabels // 新增养育话题标签 | |||||
addTalkLabels, // 新增养育话题标签 | |||||
getCampList, // 获取训练营列表 | |||||
getCampRecommendList // 获取训练营推荐列表 | |||||
}; | }; | ||||
export default APIOptimize; | export default APIOptimize; | ||||
@@ -32,4 +34,21 @@ function addTalkLabels(params) { | |||||
method: 'post', | method: 'post', | ||||
data: params | data: params | ||||
}); | }); | ||||
} | |||||
} | |||||
// 获取训练营列表 | |||||
function getCampList(id) { | |||||
return request({ | |||||
url: `/java_api/optimize/getCampList`, | |||||
method: 'get', | |||||
params: { id } | |||||
}); | |||||
} | |||||
// 获取训练营推荐列表 | |||||
function getCampRecommendList() { | |||||
return request({ | |||||
url: `/java_api/optimize/getCampRecommendList`, | |||||
method: 'get' | |||||
}); | |||||
} |
@@ -35,24 +35,13 @@ | |||||
</div> | </div> | ||||
<div class="main"> | <div class="main"> | ||||
<ul> | <ul> | ||||
<li @click="goTrainingcamp(1)"> | |||||
<li v-for="(item, index) in campList" :key="index" @click="goTrainingcamp(item.id)"> | |||||
<div class="left"> | <div class="left"> | ||||
<p>情绪管理控制</p> | |||||
<span>入门易学</span> | |||||
<p>{{item.name}}</p> | |||||
<span>{{item.summary}}</span> | |||||
<div> | <div> | ||||
<h5>会员价 ¥998</h5> | |||||
<s>¥1288</s> | |||||
</div> | |||||
</div> | |||||
<img src="@/assets/today/images/2_42.png" /> | |||||
</li> | |||||
<li @click="goTrainingcamp(2)"> | |||||
<div class="left"> | |||||
<p>情绪管理控制</p> | |||||
<span>入门易学</span> | |||||
<div> | |||||
<h5>会员价 ¥998</h5> | |||||
<s>¥1288</s> | |||||
<h5>会员价 ¥{{item.vipPrice}}</h5> | |||||
<s>¥{{item.price}}</s> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<img src="@/assets/today/images/2_42.png" /> | <img src="@/assets/today/images/2_42.png" /> | ||||
@@ -67,55 +56,29 @@ | |||||
</div> | </div> | ||||
<div class="select"> | <div class="select"> | ||||
<ul> | <ul> | ||||
<li> | |||||
<img src="@/assets/optimize/icons/3_55.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<img src="@/assets/optimize/icons/3_58.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<img src="@/assets/optimize/icons/3_62.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<img src="@/assets/optimize/icons/3_66.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<li v-for="(item, index) in expertList" :key="index" @click="switchPsychology(item.id)"> | |||||
<img src="@/assets/optimize/icons/3_55.png" alt="" /> | <img src="@/assets/optimize/icons/3_55.png" alt="" /> | ||||
</li> | </li> | ||||
<li> | |||||
<img src="@/assets/optimize/icons/3_58.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<img src="@/assets/optimize/icons/3_62.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<img src="@/assets/optimize/icons/3_66.png" alt="" /> | |||||
</li> | |||||
</ul> | </ul> | ||||
</div> | </div> | ||||
<div class="main"> | <div class="main"> | ||||
<div class="top"> | <div class="top"> | ||||
<p>黛建松</p> | |||||
<span>清华大学心理学教授</span> | |||||
<p>{{psychologyInfo.name}}</p> | |||||
<span>{{psychologyInfo.title}}</span> | |||||
<img src="@/assets/optimize/images/3_48.png" alt="" /> | <img src="@/assets/optimize/images/3_48.png" alt="" /> | ||||
</div> | </div> | ||||
<div class="bottom"> | <div class="bottom"> | ||||
<h4>700人次<span>咨询</span>,<span>从业</span>8年</h4> | |||||
<!-- <h4>700人次<span>咨询</span>,<span>从业</span>8年</h4> --> | |||||
<h4>{{psychologyInfo.seek}}</h4> | |||||
<ul> | <ul> | ||||
<li>焦虑</li> | |||||
<li>抑郁</li> | |||||
<li>儿童心理</li> | |||||
<li>亲子关系</li> | |||||
<li>青春期心理</li> | |||||
<li>家庭关系</li> | |||||
<li>压力管理</li> | |||||
<li v-for="(item, index) in psychologyInfo.labels" :key="index">{{item}}</li> | |||||
</ul> | </ul> | ||||
<div> | <div> | ||||
<h5> | <h5> | ||||
<img src="@/assets/optimize/icons/location.png" alt="" /> | <img src="@/assets/optimize/icons/location.png" alt="" /> | ||||
<span>郴州市苏仙区</span> | |||||
<span>{{psychologyInfo.address}}</span> | |||||
</h5> | </h5> | ||||
<p>¥2480</p> | |||||
<p>¥{{psychologyInfo.price}}</p> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -144,7 +107,9 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
expertList: [], | expertList: [], | ||||
talkList: [] | |||||
talkList: [], | |||||
campList: [], | |||||
psychologyInfo: {} | |||||
}; | }; | ||||
}, | }, | ||||
created() { | created() { | ||||
@@ -157,6 +122,8 @@ export default { | |||||
APIOptimize.getExpertList(0) | APIOptimize.getExpertList(0) | ||||
.then(res => { | .then(res => { | ||||
this.expertList = res.data.data | this.expertList = res.data.data | ||||
this.psychologyInfo = this.expertList[0] | |||||
this.psychologyInfo.labels = this.psychologyInfo.labels.split('|'); | |||||
}) | }) | ||||
.catch(e => { | .catch(e => { | ||||
console.log(e); | console.log(e); | ||||
@@ -169,6 +136,14 @@ export default { | |||||
.catch(e => { | .catch(e => { | ||||
console.log(e); | console.log(e); | ||||
}) | }) | ||||
// 训练营列表 | |||||
APIOptimize.getCampList(0) | |||||
.then(res => { | |||||
this.campList = res.data.data | |||||
}) | |||||
.catch(e => { | |||||
console.log(e); | |||||
}) | |||||
}, | }, | ||||
goExperts(id) { | goExperts(id) { | ||||
this.$router.push({ | this.$router.push({ | ||||
@@ -193,6 +168,12 @@ export default { | |||||
id: id | id: id | ||||
} | } | ||||
}); | }); | ||||
}, | |||||
switchPsychology(id) { | |||||
this.psychologyInfo = this.expertList.find(item => item.id == id); | |||||
if ( typeof this.psychologyInfo.labels == 'string' ) { | |||||
this.psychologyInfo.labels = this.psychologyInfo.labels.split('|'); | |||||
} | |||||
} | } | ||||
} | } | ||||
}; | }; | ||||
@@ -144,6 +144,7 @@ | |||||
display: block; | display: block; | ||||
font-size: 28px; | font-size: 28px; | ||||
color: grey; | color: grey; | ||||
margin-top: 10px; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -20,99 +20,37 @@ | |||||
</div> | </div> | ||||
<div class="content-box" v-show="active == 'content'"> | <div class="content-box" v-show="active == 'content'"> | ||||
<ul> | <ul> | ||||
<li> | |||||
<p>001 小学生学习能力发展的特点</p> | |||||
<li v-for="(item, index) in info.videoList" :key="index"> | |||||
<!-- <p>{{index + 1 <= 9 ? '0' + (index + 1) : index + 1}} {{item.title}}</p> --> | |||||
<p>{{item.title}}</p> | |||||
<div> | <div> | ||||
<span><i>免费</i>09:26 | 11034次播放</span> | |||||
<img src="@/assets/optimize/icons/play.png" alt="" /> | |||||
</div> | |||||
</li> | |||||
<li> | |||||
<p>002 小学生学习能力发展的特点</p> | |||||
<div> | |||||
<span>09:26 | 11034次播放</span> | |||||
<img src="@/assets/optimize/icons/lock.png" alt="" /> | |||||
</div> | |||||
</li> | |||||
<li> | |||||
<p>003 小学生学习能力发展的特点</p> | |||||
<div> | |||||
<span><i>免费</i>09:26 | 11034次播放</span> | |||||
<img src="@/assets/optimize/icons/play.png" alt="" /> | |||||
</div> | |||||
</li> | |||||
<li> | |||||
<p>004 小学生学习能力发展的特点</p> | |||||
<div> | |||||
<span>09:26 | 11034次播放</span> | |||||
<img src="@/assets/optimize/icons/play.png" alt="" /> | |||||
<span><i v-if="item.isFree == 0">免费</i>{{item.duration}} | {{item.playBack}}次播放</span> | |||||
<img v-if="item.isFree == 0" src="@/assets/optimize/icons/play.png" alt="" /> | |||||
<img v-else src="@/assets/optimize/icons/lock.png" alt="" /> | |||||
</div> | </div> | ||||
</li> | </li> | ||||
</ul> | </ul> | ||||
</div> | </div> | ||||
<div class="evaluate-box" v-show="active == 'evaluate'"> | <div class="evaluate-box" v-show="active == 'evaluate'"> | ||||
<ul> | <ul> | ||||
<li> | |||||
<li v-for="(item, index) in info.evaluate" :key="index"> | |||||
<div class="top"> | <div class="top"> | ||||
<img src="@/assets/optimize/icons/3_55.png" alt="" /> | <img src="@/assets/optimize/icons/3_55.png" alt="" /> | ||||
<div> | <div> | ||||
<p>张杰妈妈</p> | |||||
<span>12.18 51:13 广州</span> | |||||
<p>{{item.name}}</p> | |||||
<span>{{item.date}} {{item.address}}</span> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<p>买了好多课,这个是最值得的,真的实用,思路清晰</p> | |||||
<span>21.孩子的适应能力怎么训练?</span> | |||||
</li> | |||||
<li> | |||||
<div class="top"> | |||||
<img src="@/assets/optimize/icons/3_55.png" alt="" /> | |||||
<div> | |||||
<p>张杰妈妈</p> | |||||
<span>12.18 51:13 广州</span> | |||||
</div> | |||||
</div> | |||||
<p>买了好多课,这个是最值得的,真的实用,思路清晰</p> | |||||
<span>21.孩子的适应能力怎么训练?</span> | |||||
</li> | |||||
<li> | |||||
<div class="top"> | |||||
<img src="@/assets/optimize/icons/3_55.png" alt="" /> | |||||
<div> | |||||
<p>张杰妈妈</p> | |||||
<span>12.18 51:13 广州</span> | |||||
</div> | |||||
</div> | |||||
<p>买了好多课,这个是最值得的,真的实用,思路清晰</p> | |||||
<span>21.孩子的适应能力怎么训练?</span> | |||||
</li> | |||||
<li> | |||||
<div class="top"> | |||||
<img src="@/assets/optimize/icons/3_55.png" alt="" /> | |||||
<div> | |||||
<p>张杰妈妈</p> | |||||
<span>12.18 51:13 广州</span> | |||||
</div> | |||||
</div> | |||||
<p>买了好多课,这个是最值得的,真的实用,思路清晰</p> | |||||
<span>21.孩子的适应能力怎么训练?</span> | |||||
<p>{{item.content}}</p> | |||||
<span>{{item.videoName}}</span> | |||||
</li> | </li> | ||||
</ul> | </ul> | ||||
</div> | </div> | ||||
<div class="recommend-box" v-show="active == 'recommend'"> | <div class="recommend-box" v-show="active == 'recommend'"> | ||||
<ul> | <ul> | ||||
<li> | |||||
<h4>孩子自主学习力提升实操课</h4> | |||||
<p>入门易学</p> | |||||
<span>播放</span> | |||||
<img src="@/assets/optimize/images/3_48.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<h4>给孩子的文学课</h4> | |||||
<span>播放</span> | |||||
<img src="@/assets/optimize/images/3_48.png" alt="" /> | |||||
</li> | |||||
<li> | |||||
<h4>孩子自主学习力提升实操课</h4> | |||||
<li v-for="(item, index) in campList" :key="index"> | |||||
<h4>{{item.name}}</h4> | |||||
<p>{{item.summary}}</p> | |||||
<span>播放</span> | <span>播放</span> | ||||
<img src="@/assets/optimize/images/3_48.png" alt="" /> | <img src="@/assets/optimize/images/3_48.png" alt="" /> | ||||
</li> | </li> | ||||
@@ -126,17 +64,20 @@ | |||||
<script> | <script> | ||||
import TabBar from '@/components/TabBar'; | import TabBar from '@/components/TabBar'; | ||||
import APIOptimize from '@/api/optimize'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
TabBar | TabBar | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
active: 'brief' | |||||
active: 'brief', | |||||
campList: [], | |||||
info: {} | |||||
}; | }; | ||||
}, | }, | ||||
created() { | created() { | ||||
console.log(this.$route.query); | |||||
this.init(this.$route.query.id); | |||||
}, | }, | ||||
mounted() {}, | mounted() {}, | ||||
methods: { | methods: { | ||||
@@ -149,11 +90,45 @@ export default { | |||||
// 切换 | // 切换 | ||||
switchNav(e) { | switchNav(e) { | ||||
this.active = e; | this.active = e; | ||||
}, | |||||
// 初始化 | |||||
init(id) { | |||||
// 训练营详情 | |||||
APIOptimize.getCampList(id) | |||||
.then(res => { | |||||
if ( res.data.data.length != 0 ) { | |||||
this.info = res.data.data[0] | |||||
if ( this.info.evaluate.length != 0 ) { | |||||
this.info.evaluate.forEach(element => { | |||||
if ( this.info.videoList.length != 0 ) { | |||||
this.info.videoList.forEach(e => { | |||||
if ( element['videoId'] == e['id'] ) { | |||||
element['videoName'] = e['title']; | |||||
} | |||||
}) | |||||
} else { | |||||
element['videoName'] = "暂无消息"; | |||||
} | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
.catch(e => { | |||||
console.log(e); | |||||
}) | |||||
// 训练营推荐列表 | |||||
APIOptimize.getCampRecommendList() | |||||
.then(res => { | |||||
this.campList = res.data.data | |||||
}) | |||||
.catch(e => { | |||||
console.log(e); | |||||
}) | |||||
} | } | ||||
} | } | ||||
}; | }; | ||||
</script> | </script> | ||||
" | |||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
@import './scss/trainingcamp.scss'; | |||||
@import './scss/trainingcamp.scss'; | |||||
</style> | </style> |