You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
560 lines
22 KiB
560 lines
22 KiB
{extend name="public/container"}
|
|
{block name="title"}讲师详情{/block}
|
|
{block name="style"}
|
|
<style>
|
|
.problem {
|
|
padding: 30px 0 0 30px;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.problem .list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.problem .item {
|
|
width: 370px;
|
|
padding: 20px 20px 29px;
|
|
border-radius: 8px;
|
|
margin: 0 15px 15px 0;
|
|
box-shadow: 0 2px 15px 1px rgba(79, 109, 143, 0.15);
|
|
}
|
|
|
|
.problem .title {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
height: 54px;
|
|
font-size: 18px;
|
|
line-height: 27px;
|
|
color: #282828;
|
|
}
|
|
|
|
.problem .attribute {
|
|
padding: 18px 0 30px;
|
|
font-size: 0;
|
|
}
|
|
|
|
.problem .attribute span {
|
|
margin-left: 13px;
|
|
font-size: 14px;
|
|
line-height: 19px;
|
|
color: #999999;
|
|
}
|
|
|
|
.problem .attribute span:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.problem .attribute .em {
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.problem .button {
|
|
height: 30px;
|
|
padding: 0 23px;
|
|
border: none;
|
|
border-radius: 15px;
|
|
background-color: #2C8EFF;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.problem .iconfont {
|
|
margin-right: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.question {
|
|
padding: 30px 0 0 30px;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.question .list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start
|
|
}
|
|
|
|
.question .item {
|
|
width: 262px;
|
|
border-radius: 8px;
|
|
margin: 0 30px 30px 0;
|
|
box-shadow: 0 2px 15px 1px rgba(79, 109, 143, 0.15);
|
|
}
|
|
|
|
.question .item img {
|
|
display: block;
|
|
width: 263px;
|
|
height: 148px;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.question .title {
|
|
padding: 14px 20px 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 16px;
|
|
line-height: 21px;
|
|
color: #282828;
|
|
}
|
|
|
|
.question .money {
|
|
padding: 12px 20px 0;
|
|
font-size: 12px;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.question .money span {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.question .attribute {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px 20px 13px;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
}
|
|
|
|
.question button {
|
|
height: 26px;
|
|
padding: 0 11px;
|
|
border: none;
|
|
border-radius: 13px;
|
|
background-color: #2C8EFF;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.question .iconfont {
|
|
margin-right: 6px;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
{/block}
|
|
{block name="app"}
|
|
<div v-cloak id="app">
|
|
<base-header :public-data="publicData" :user-info="userInfo"></base-header>
|
|
<div class="container">
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
<el-breadcrumb-item><a :href="$router.home">首页</a></el-breadcrumb-item>
|
|
<el-breadcrumb-item><a :href="$router.teacher_list">讲师列表</a></el-breadcrumb-item>
|
|
<el-breadcrumb-item>讲师详情</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<div class="container_content">
|
|
<div class="container_content_message">
|
|
<div class="container_content_message_image">
|
|
<img :src="lecturerDetails.lecturer_head" :alt="lecturerDetails.lecturer_name">
|
|
</div>
|
|
<div class="container_content_message_value">
|
|
<div class="container_content_message_value_name">
|
|
<span>{{ lecturerDetails.lecturer_name }}</span>
|
|
<button :class="{ followed: !isFollow}" @click="follow">
|
|
<i v-if="!isFollow" class="iconfont icontianjia"></i>
|
|
{{ isFollow ? '已关注' : '关注' }}
|
|
</button>
|
|
</div>
|
|
<div class="container_content_message_value_tap">
|
|
<span v-for="(label, index) in lecturerDetails.label" :key="index">{{ label }}</span>
|
|
</div>
|
|
<div class="container_content_message_value_detils">
|
|
<span>
|
|
{{ lecturerDetails.explain }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container_selectTap">
|
|
<div class="container_selectTap_tip" :style="{ left: tipLeft}">
|
|
<img src="{__PUBLIC_WEB_PATH}pc/images/select.png" alt="">
|
|
</div>
|
|
<div class="container_selectTap_item">
|
|
<div class="container_selectTap_item_value" :class="{'selectEd': selectValue == item.value}" v-for="(item, index) in tipList" :key="index" :ref=`react${item.value}`
|
|
@click="selectTip(item, index)">
|
|
<span>{{item.title}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-main">
|
|
<!-- 讲师详情 -->
|
|
<div v-show="selectValue === 1" class="detail" v-html="lecturerDetails.introduction"></div>
|
|
<!-- 专题课程 -->
|
|
<div v-show="selectValue === 2" class="special">
|
|
<div class="list">
|
|
<a v-for="item in listArr" :key="item.id" :href="item.href + '?id=' + item.id" class="item">
|
|
<div class="item-header">
|
|
<img :src="item.image" :alt="item.title">
|
|
<img v-if="item.type === 1" src="{__PUBLIC_WEB_PATH}pc/images/course3.png" alt="">
|
|
<img v-else-if="item.type === 2" src="{__PUBLIC_WEB_PATH}pc/images/course2.png" alt="">
|
|
<img v-else-if="item.type === 3" src="{__PUBLIC_WEB_PATH}pc/images/course1.png" alt="">
|
|
</div>
|
|
<div class="item-main">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="tags"><span v-for="(label, index) in item.label" :key="index" class="tag">{{ label }}</span></div>
|
|
<div class="wrap">
|
|
<div class="money-wrap">
|
|
<div v-if="item.pay_type" class="money">￥<span>{{ item.money }}</span></div>
|
|
<div class="vip">￥{{ item.member_money }}</div>
|
|
</div>
|
|
<div v-if="item.type !== 4 && !item.is_light" class="number">共{{ item.count }}节</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- 资料 -->
|
|
<div v-show="selectValue === 3" class="material">
|
|
<div class="list">
|
|
<a v-for="item in listArr" :key="item.id" :href="item.href + '?id=' + item.id" class="item">
|
|
<img :src="item.image" alt="">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="money">￥<span>{{ item.money }}</span></div>
|
|
<div class="number">{{ item.ficti }}次下载</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- 活动 -->
|
|
<div v-show="selectValue === 4" class="activity">
|
|
<div class="list">
|
|
<a v-for="item in listArr" :key="item.id" :href="item.href + '?id=' + item.id" class="item">
|
|
<div><img :src="item.image" alt=""></div>
|
|
<div class="item-main">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="time"><i class="iconfont"></i>活动时间：{{ item.time }}</div>
|
|
<div class="address"><i class="iconfont"></i>活动地址：{{ item.province + item.city + item.district + item.detail }}</div>
|
|
</div>
|
|
<div class="money">￥<span>{{ item.price }}</span></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- 练习 -->
|
|
<div v-show="selectValue === 5" class="problem">
|
|
<ul class="list">
|
|
<li v-for="item in problemList" :key="item.id" class="item">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="attribute">
|
|
<span class="light">共{{ item.item_number }}题</span>
|
|
<span>{{ item.fake_sales + item.answer }}人已答题</span>
|
|
</div>
|
|
<button class="button" @click="goProblem(item)"><i class="iconfont icon-19-lianxi"></i>练习</button>
|
|
</li>
|
|
</ul>
|
|
<el-pagination :page-size="limit" :total="problemTotal" :current-page.sync="problemPage" layout="prev, pager, next" prev-text="上一页" next-text="下一页"
|
|
hide-on-single-page @current-change="getProblemList">
|
|
</el-pagination>
|
|
<el-empty v-if="!problemList.length && problemFinished"></el-empty>
|
|
</div>
|
|
<!-- 考试 -->
|
|
<div v-show="selectValue === 6" class="question">
|
|
<ul class="list">
|
|
<li v-for="item in questionList" :key="item.id" class="item">
|
|
<img :src="item.image" alt="">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="money">￥<span>{{ item.money }}</span></div>
|
|
<div class="attribute">
|
|
<div>{{ item.fake_sales + item.answer }}人已答题</div>
|
|
<button @click="goQuestion(item)"><i class="iconfont icon-19-lianxi"></i>答题</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<el-pagination :page-size="limit" :total="questionTotal" :current-page.sync="questionPage" layout="prev, pager, next" prev-text="上一页" next-text="下一页"
|
|
hide-on-single-page @current-change="getQuestionList">
|
|
</el-pagination>
|
|
<el-empty v-if="!questionList.length && questionFinished"></el-empty>
|
|
</div>
|
|
<el-empty v-if="finished" :image-size="200"></el-empty>
|
|
<el-pagination v-if="selectValue !== 1 && !finished" :page-size="pageSize" :total="total" :current-page.sync="currentPage" layout="prev, pager, next" prev-text="上一页"
|
|
next-text="下一页" hide-on-single-page @current-change="handleCurrentPage">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<base-footer :user-info="userInfo" :public-data="publicData"></base-footer>
|
|
<base-login :public-data="publicData" :agree-content="agreeContent"></base-login>
|
|
<base-agree :agree-content="agreeContent"></base-agree>
|
|
</div>
|
|
{/block}
|
|
{block name="vm"}
|
|
<script>
|
|
require([
|
|
'vue',
|
|
'ELEMENT',
|
|
'components/base-header/index',
|
|
'components/base-footer/index',
|
|
'components/base-login/index',
|
|
'components/base-agree/index',
|
|
'mixins/base',
|
|
'api/home',
|
|
'api/auth',
|
|
'api/merchant',
|
|
'scripts/util',
|
|
'router/index',
|
|
'store/index',
|
|
'css!styles/instructorListDetils.css'
|
|
], function (Vue, ELEMENT, BaseHeader, BaseFooter, BaseLogin, BaseAgree, baseMixin, homeApi, authApi, merchantApi, util, router, store) {
|
|
Vue.use(ELEMENT);
|
|
Vue.use(router);
|
|
var vm = new Vue({
|
|
el: '#app',
|
|
components: {
|
|
'base-header': BaseHeader,
|
|
'base-footer': BaseFooter,
|
|
'base-login': BaseLogin,
|
|
'base-agree': BaseAgree
|
|
},
|
|
mixins: [baseMixin],
|
|
data: {
|
|
lecturerDetails: {},
|
|
tipList: [
|
|
{
|
|
title: '简介',
|
|
value: 1
|
|
},
|
|
{
|
|
title: '专题',
|
|
value: 2
|
|
},
|
|
{
|
|
title: '资料',
|
|
value: 3
|
|
},
|
|
{
|
|
title: '活动',
|
|
value: 4
|
|
},
|
|
{
|
|
title: '练习',
|
|
value: 5
|
|
},
|
|
{
|
|
title: '考试',
|
|
value: 6
|
|
}
|
|
],
|
|
tipLeft: 0,
|
|
selectValue: 1,
|
|
pageSize: 12,
|
|
total: 0,
|
|
currentPage: 1,
|
|
list: [],
|
|
finished: false,
|
|
isFollow: false,
|
|
problemList: [],
|
|
problemTotal: 0,
|
|
problemPage: 1,
|
|
problemFinished: false,
|
|
questionList: [],
|
|
questionTotal: 0,
|
|
questionPage: 1,
|
|
questionFinished: false,
|
|
limit: 16
|
|
},
|
|
computed: {
|
|
listArr: function () {
|
|
var href = this.$router.special_detail;
|
|
switch (this.selectValue) {
|
|
case 3:
|
|
href = this.$router.material_detail;
|
|
break;
|
|
case 4:
|
|
href = this.$router.activity_detail;
|
|
break;
|
|
}
|
|
return this.list.map(function (item) {
|
|
if (vm.selectValue === 2) {
|
|
switch (item.type) {
|
|
case 4:
|
|
href = vm.$router.special_detail;
|
|
break;
|
|
case 6:
|
|
href = vm.$router.single_detail;
|
|
break;
|
|
}
|
|
}
|
|
item.href = href;
|
|
return item;
|
|
});
|
|
},
|
|
canIsFollow: function () {
|
|
return this.userInfo && this.lecturerDetails.mer_id;
|
|
}
|
|
},
|
|
watch: {
|
|
selectValue: {
|
|
handler: function (value) {
|
|
this.list = [];
|
|
this.total = 0;
|
|
this.finished = false;
|
|
this.currentPage = 1;
|
|
switch (value) {
|
|
case 1:
|
|
this.lecturer_details();
|
|
break;
|
|
case 2:
|
|
this.lecturer_special_list();
|
|
break;
|
|
case 3:
|
|
this.lecturer_download_list();
|
|
break;
|
|
case 4:
|
|
this.lecturer_event_list();
|
|
break;
|
|
case 5:
|
|
this.getProblemList();
|
|
break;
|
|
case 6:
|
|
this.getQuestionList();
|
|
break;
|
|
}
|
|
this.$nextTick(function () {
|
|
this.tipLeft = this.$refs['react' + value][0].offsetLeft + 'px';
|
|
});
|
|
},
|
|
immediate: true
|
|
},
|
|
canIsFollow: function (value) {
|
|
if (value) {
|
|
this.getIsFollow();
|
|
}
|
|
}
|
|
},
|
|
created: function () {
|
|
|
|
},
|
|
methods: {
|
|
handleCurrentPage: function () {
|
|
switch (this.selectValue) {
|
|
case 2:
|
|
this.lecturer_special_list();
|
|
break;
|
|
case 3:
|
|
this.lecturer_download_list();
|
|
break;
|
|
case 4:
|
|
this.lecturer_event_list();
|
|
break;
|
|
}
|
|
},
|
|
// 选项卡
|
|
selectTip(item) {
|
|
this.selectValue = item.value;
|
|
},
|
|
// 详情
|
|
lecturer_details: function () {
|
|
var vm = this;
|
|
authApi.lecturer_details({
|
|
id: util.getParmas('id')
|
|
}).then(function (res) {
|
|
vm.lecturerDetails = res.data;
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 讲师名下课程
|
|
lecturer_special_list: function () {
|
|
var vm = this;
|
|
merchantApi.lecturer_special_list({
|
|
mer_id: this.lecturerDetails.mer_id,
|
|
page: this.currentPage,
|
|
limit: this.pageSize
|
|
}).then(function (res) {
|
|
vm.list = res.data.data;
|
|
vm.total = res.data.count;
|
|
vm.finished = !vm.total;
|
|
});
|
|
},
|
|
// 讲师名下资料
|
|
lecturer_download_list: function () {
|
|
var vm = this;
|
|
merchantApi.lecturer_download_list({
|
|
mer_id: this.lecturerDetails.mer_id,
|
|
page: this.currentPage,
|
|
limit: this.pageSize
|
|
}).then(function (res) {
|
|
vm.list = res.data.data;
|
|
vm.total = res.data.count;
|
|
vm.finished = !vm.total;
|
|
});
|
|
},
|
|
// 讲师名下活动
|
|
lecturer_event_list: function () {
|
|
var vm = this;
|
|
merchantApi.lecturer_event_list({
|
|
mer_id: this.lecturerDetails.mer_id,
|
|
page: this.currentPage,
|
|
limit: this.pageSize
|
|
}).then(function (res) {
|
|
vm.list = res.data.data;
|
|
vm.total = res.data.count;
|
|
vm.finished = !vm.total;
|
|
});
|
|
},
|
|
// 是否关注
|
|
getIsFollow: function () {
|
|
var vm = this;
|
|
merchantApi.is_follow({
|
|
mer_id: this.lecturerDetails.mer_id
|
|
}).then(function (res) {
|
|
vm.isFollow = res.data;
|
|
});
|
|
},
|
|
follow: function () {
|
|
var vm = this;
|
|
homeApi.user_login().then(function () {
|
|
merchantApi.user_follow({
|
|
mer_id: vm.lecturerDetails.mer_id,
|
|
is_follow: Number(!vm.isFollow)
|
|
}).then(function (res) {
|
|
vm.isFollow = !vm.isFollow;
|
|
vm.$message.success(vm.isFollow ? '关注成功' : '取消关注成功');
|
|
});
|
|
}).catch(function (err) {
|
|
store.setLoginAction(true);
|
|
});
|
|
},
|
|
getProblemList: function () {
|
|
var vm = this;
|
|
merchantApi.lecturer_test_list({
|
|
mer_id: this.lecturerDetails.mer_id,
|
|
page: this.problemPage,
|
|
limit: this.limit,
|
|
type: 1
|
|
}).then(function (res) {
|
|
vm.problemList = res.data.data;
|
|
vm.problemTotal = res.data.count;
|
|
vm.problemFinished = vm.limit > vm.problemList.length;
|
|
}).catch(function () {
|
|
|
|
});
|
|
},
|
|
getQuestionList: function () {
|
|
var vm = this;
|
|
merchantApi.lecturer_test_list({
|
|
mer_id: this.lecturerDetails.mer_id,
|
|
page: this.questionPage,
|
|
limit: this.limit,
|
|
type: 2
|
|
}).then(function (res) {
|
|
vm.questionList = res.data.data;
|
|
vm.questionTotal = res.data.count;
|
|
vm.questionFinished = vm.limit > vm.questionList.length;
|
|
}).catch(function () {
|
|
|
|
});
|
|
},
|
|
goProblem: function (problem) {
|
|
window.location.assign(vm.$router.problem_index + '?id=' + problem.id);
|
|
},
|
|
goQuestion: function (question) {
|
|
window.location.assign(vm.$router.question_index + '?id=' + question.id);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{/block} |