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.
1228 lines
62 KiB
1228 lines
62 KiB
{extend name="public/container"}
|
|
{block name="title"}课程详情{/block}
|
|
{block name="style"}
|
|
<style>
|
|
.problem {
|
|
padding: 28px 0 0 27px;
|
|
margin: -30px;
|
|
}
|
|
|
|
.problem .list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.problem .item {
|
|
width: 390px;
|
|
height: 180px;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 0 26px 26px 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 .progress {
|
|
margin-top: 12px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: #2C8EFF;
|
|
}
|
|
|
|
.problem .progress-bar {
|
|
display: inline-block;
|
|
width: 158px;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
margin-right: 10px;
|
|
background-color: #EEEEEE;
|
|
}
|
|
|
|
.problem .progress-inner {
|
|
width: 50%;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
background-color: #2C8EFF;
|
|
}
|
|
|
|
.problem .progress-text {
|
|
display: inline-block;
|
|
}
|
|
|
|
.problem .wrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 25px;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
}
|
|
|
|
.problem button {
|
|
height: 30px;
|
|
padding: 0 17px;
|
|
border: none;
|
|
border-radius: 15px;
|
|
background-color: #2C8EFF;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.question {
|
|
padding: 30px 0 0 30px;
|
|
margin: -30px;
|
|
}
|
|
|
|
.question .list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.question .item {
|
|
width: 246px;
|
|
height: 240px;
|
|
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: 246px;
|
|
height: 138px;
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.question .title {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
padding: 15px 20px 0;
|
|
font-size: 16px;
|
|
line-height: 21px;
|
|
color: #282828;
|
|
}
|
|
|
|
.question .wrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 20px 0;
|
|
font-size: 14px;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.question button {
|
|
height: 26px;
|
|
padding: 0 11px;
|
|
border: none;
|
|
border-radius: 13px;
|
|
background-color: #2C8EFF;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.question button .iconfont {
|
|
margin-right: 6px;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|
|
<script>
|
|
Object.assign(window, {
|
|
__MSN_TYPE: 5,
|
|
__MSN_ID: '{$id}',
|
|
__MSN_ATTACH_TYPE: 1
|
|
});
|
|
</script>
|
|
{/block}
|
|
{block name="app"}
|
|
<div v-cloak id="app">
|
|
<base-header :public-data="publicData" :user-info="userInfo"></base-header>
|
|
<div class="layout">
|
|
<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 v-if="from == 'live'"><a :href="$router.special_live">直播课</a></el-breadcrumb-item>
|
|
<el-breadcrumb-item v-else-if="from == 'special_cate'"><a :href="$router.special_cate">所有课程</a></el-breadcrumb-item>
|
|
<el-breadcrumb-item v-else><a :href="$router.more_list + '?type=' + type + '&recommend_id=' + recommend_id">精品课程</a></el-breadcrumb-item>
|
|
<el-breadcrumb-item>课程详情</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<div class="container_content">
|
|
<div class="container_content_imagelist">
|
|
<el-carousel :autoplay="false" height="336px">
|
|
<el-carousel-item v-for="(item, index) in special.banner" :key="index">
|
|
<el-image :src="item" fit="cover"></el-image>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
<div class="container_content_message">
|
|
<div class="content_message_title">{{ special.title }}</div>
|
|
<div class="content_message_dis">{{ special.abstract }}</div>
|
|
<div class="content_message_tap">
|
|
<div class="message_tap_list">
|
|
<span v-for="label in special.label">{{ label }}</span>
|
|
</div>
|
|
<div v-if="special.type != 4" class="message_tap_number">
|
|
<span>共{{ courses }}节</span>
|
|
</div>
|
|
</div>
|
|
<div class="content_message_validity">
|
|
<div v-if="validity == -1" class="message_validity_item">
|
|
<template v-if="special.validity">课程有效期为{{ special.validity }}天，过期后需重新购买哦！</template>
|
|
<template v-else>课程永久有效哦！</template>
|
|
</div>
|
|
<div v-else-if="validity == 0" class="message_validity_item">课程永久有效哦！</div>
|
|
<div v-else-if="validity > 0" class="message_validity_item">课程有效期剩余{{ validity | validityFormat }}，过期后需重新购买哦！</div>
|
|
<div class="content_message_priceBox">
|
|
<div class="message_priceBox_item">
|
|
<div class="message_priceBox_item_label">
|
|
<span>价格：</span>
|
|
</div>
|
|
<div v-if="special.pay_type === 1" class="message_priceBox_item_value">
|
|
<div>￥<span>{{ special.money }}</span></div>
|
|
<div><span>￥{{ special.member_money }}</span></div>
|
|
</div>
|
|
<div v-else class="message_priceBox_item_value">
|
|
<span class="free">免费</span>
|
|
</div>
|
|
</div>
|
|
<div class="message_priceBox_number">
|
|
<span>{{ recordCoujnt }}人已学</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="handle">
|
|
<div class="container_handle">
|
|
<div @click="collect">
|
|
<template v-if="special.collect">
|
|
<i class="iconfont iconshoucang2"></i>已收藏
|
|
</template>
|
|
<template v-else>
|
|
<i class="iconfont iconshoucang11"></i>收藏
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div v-if="!special.pay_type || special.pay_type == 2 || isPay || (!special.member_pay_type && isMember)">
|
|
<div v-if="special.type == 4" class="handle_button" @click="goLiveRoom">进入直播间</div>
|
|
<div v-else class="handle_button" @click="learn">{{ special.pay_type ? '去学习' : '免费学习' }}</div>
|
|
</div>
|
|
<div v-else class="handle_button" @click="goPayment">立即购买</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ref="container" class="container">
|
|
<div class="container_detils">
|
|
<div class="container_detils_con">
|
|
<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>
|
|
<el-popover v-if="mobileUrl" trigger="hover" width="140" popper-class="phone-popper">
|
|
<div ref="qrcode" class="qrcode"></div>
|
|
<div class="tip">扫一扫，手机继续学</div>
|
|
<el-button slot="reference" type="text"><i class="iconfont iconshouji"></i>手机端访问</el-button>
|
|
</el-popover>
|
|
</div>
|
|
<div class="container_content_detils">
|
|
<div v-if="selectValue == 1" class="container_content_detils_content" v-html="special.content"></div>
|
|
<!-- 课程目录开始 -->
|
|
<div class="course_catalogue" v-if="selectValue == 2">
|
|
<!-- 回放目录 -->
|
|
<template v-if="special.type == 4">
|
|
<div v-for="(item, index) in courseList" :key="item.id" style="padding: 15px 0;border-bottom: 1px dashed #eee;" class="course_catalogue_item_child"
|
|
@click="goLive(item)">
|
|
<div class="course_catalogue_item_child_value">
|
|
<div class="playback-tag">回放</div>
|
|
<div class="course_catalogue_item_child_value_title">
|
|
<span>{{ index > 8 ? index + 1 : '0' + (index + 1) }} | {{ item.playback_name || special.title }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- 专栏课程目录 -->
|
|
<template v-else-if="special.type == 5">
|
|
<div v-for="item in courseList" :key="item.id" :class="{ isShowList: item.flag }" class="course_catalogue_item">
|
|
<div class="course_catalogue_item_value" @click="selectCourse(item)">
|
|
<div class="course_catalogue_item_value_message">
|
|
<span>{{ item.title }}</span>
|
|
</div>
|
|
<div class="course_catalogue_item_value_status">
|
|
<i class="el-icon-arrow-down"></i>
|
|
</div>
|
|
</div>
|
|
<div class="panel" :style="{ height: item.flag ? item.special_task.length * 90 + 'px' : 0 }">
|
|
<div v-for="task in item.special_task" :key="task.id" class="course_catalogue_item_wrap" @click="goTask(task)">
|
|
<div class="course_catalogue_item_child">
|
|
<div class="course_catalogue_item_child_value">
|
|
<div class="course_catalogue_item_child_value_type">
|
|
<img v-if="task.type == 1" src="{__PUBLIC_WEB_PATH}pc/images/course1.png" alt="图文">
|
|
<img v-else-if="task.type == 2" src="{__PUBLIC_WEB_PATH}pc/images/course2.png" alt="音频">
|
|
<img v-else src="{__PUBLIC_WEB_PATH}pc/images/course3.png" alt="视频">
|
|
</div>
|
|
<div class="course_catalogue_item_child_value_title">
|
|
<div class="course_catalogue_item_child_value_title_content">
|
|
<span>{{task.title}}</span>
|
|
<span v-if="!isPay && (special.member_pay_type || !isMember) && item.is_free && item.is_try" class="try">免费试看</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="course_catalogue_item_child_type">
|
|
<span v-if="!task.is_free" class="type_free">免费</span>
|
|
<img v-else-if="task.pay_status" src="{__PUBLIC_WEB_PATH}pc/images/lock1.png" alt="关锁">
|
|
<img v-else src="{__PUBLIC_WEB_PATH}pc/images/lock2.png" alt="开锁">
|
|
</div>
|
|
</div>
|
|
<div v-if="isLogin && (isPay || (!special.member_pay_type && isMember))" class="course_catalogue_item_progress">
|
|
<div class="course_catalogue_item_progress_label">学习进度：</div>
|
|
<template v-if="task.watch && task.watch.percentage">
|
|
<div class="course_catalogue_item_progress_inner">
|
|
<div :style="{ width: task.watch.percentage + '%' }" class="course_catalogue_item_progress_bar"></div>
|
|
</div>
|
|
<div class="course_catalogue_item_progress_value">{{ task.watch.percentage }}%</div>
|
|
</template>
|
|
<div v-else class="course_catalogue_item_progress_value" style="margin-left: 0;">未学习</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- 专题课程目录 -->
|
|
<template v-else>
|
|
<div v-if="special.sum" class="special-tip">已更新至{{ special.quantity }}节/共{{ special.sum }}节</div>
|
|
<div v-for="item in courseList" :key="item.id" class="course_catalogue_item_wrap" @click="goTask(item)">
|
|
<div class="course_catalogue_item_child">
|
|
<div class="course_catalogue_item_child_value">
|
|
<div class="course_catalogue_item_child_value_type">
|
|
<img v-if="item.type == 1" src="{__PUBLIC_WEB_PATH}pc/images/course1.png" alt="图文">
|
|
<img v-else-if="item.type == 2" src="{__PUBLIC_WEB_PATH}pc/images/course2.png" alt="音频">
|
|
<img v-else src="{__PUBLIC_WEB_PATH}pc/images/course3.png" alt="视频">
|
|
</div>
|
|
<div class="course_catalogue_item_child_value_title">
|
|
<div class="course_catalogue_item_child_value_title_content">
|
|
<span class="title">{{ item.title }}</span>
|
|
<span v-if="!isPay && (special.member_pay_type || !isMember) && item.is_free && item.is_try" class="try">免费试看</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="course_catalogue_item_child_type">
|
|
<span v-if="!item.is_free" class="type_free">免费</span>
|
|
<img v-else-if="item.pay_status" src="{__PUBLIC_WEB_PATH}pc/images/lock1.png" alt="关锁">
|
|
<img v-else src="{__PUBLIC_WEB_PATH}pc/images/lock2.png" alt="开锁">
|
|
</div>
|
|
</div>
|
|
<div v-if="isLogin && (isPay || (!special.member_pay_type && isMember))" class="course_catalogue_item_progress">
|
|
<div class="course_catalogue_item_progress_label">学习进度：</div>
|
|
<template v-if="item.watch && item.watch.percentage">
|
|
<div class="course_catalogue_item_progress_inner">
|
|
<div :style="{ width: item.watch.percentage + '%' }" class="course_catalogue_item_progress_bar"></div>
|
|
</div>
|
|
<div class="course_catalogue_item_progress_value">{{ item.watch.percentage }}%</div>
|
|
</template>
|
|
<div v-else class="course_catalogue_item_progress_value" style="margin-left: 0;">未学习</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<el-empty v-if="special.type == 4 && !courseList.length" image="{__PUBLIC_WEB_PATH}pc/images/empty2.png" description=" "></el-empty>
|
|
<el-pagination :page-size="limit" :total="courseTotal" :current-page="coursePage" layout="prev, pager, next" prev-text="上一页" next-text="下一页"
|
|
hide-on-single-page @current-change="currentChange"></el-pagination>
|
|
</div>
|
|
<!-- 课程目录结束 -->
|
|
<!-- 套餐课程开始 -->
|
|
<div class="package_course" v-if="selectValue == 3">
|
|
<div class="container_curriculum_list_con">
|
|
<div v-for="item in courseItems" :key="item.id" class="container_curriculum_list_item" @click="goSpecial(item)">
|
|
<div class="container_curriculum_list_item_image">
|
|
<img :src="item.image" :alt="item.title" class="image">
|
|
<img v-if="item.is_light && item.light_type == 1 || item.type == 1" src="{__PUBLIC_WEB_PATH}pc/images/course1.png" alt=""
|
|
class="container_curriculum_list_item_image_type">
|
|
<img v-else-if="item.is_light && item.light_type == 2 || item.type == 2" src="{__PUBLIC_WEB_PATH}pc/images/course2.png" alt=""
|
|
class="container_curriculum_list_item_image_type">
|
|
<img v-else src="{__PUBLIC_WEB_PATH}pc/images/course3.png" alt="" class="container_curriculum_list_item_image_type">
|
|
</div>
|
|
<div class="course">
|
|
<div class="course_title">
|
|
<span>{{item.title}}</span>
|
|
</div>
|
|
<div class="course_tip">
|
|
<span v-for="(label, i) in item.label" :key="i">{{label}}</span>
|
|
</div>
|
|
<div class="course_price">
|
|
<span>{{item.browse_count}}人已学</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-pagination v-if="courseItems.length" :current-page.sync="cloumnPage" :page-size="limit" :total="cloumnTotal" :hide-on-single-page="true"
|
|
layout="prev, pager, next" prev-text="上一页" next-text="下一页" @current-change="get_cloumn_task"></el-pagination>
|
|
</div>
|
|
<!-- 套餐课程结束 -->
|
|
<!-- 评价开始 -->
|
|
<div class="evaluate" v-if="selectValue == 4">
|
|
<div class="submit_evaluate">
|
|
<div class="submit_evaluate_title">
|
|
<el-rate v-model="rateValue" void-color="#CCCCCC" text-color="#AAAAAA" show-text></el-rate>
|
|
</div>
|
|
<div class="submit_evaluate_textarea">
|
|
<el-form>
|
|
<el-input v-model.trim="comment" class="textarea" rows="5" type="textarea" placeholder="课程满足你的期待吗？说说你的想法，分享给想学习得他们把~"></el-input>
|
|
</el-form>
|
|
</div>
|
|
<div class="submit_evaluate_handle">
|
|
<el-popover width="312" :title="'图片上传（最多' + uploadLimit + '张）'" placement="bottom-start" trigger="manual" popper-class="upload-popover"
|
|
v-model="fileList.length">
|
|
<ul v-if="fileList.length">
|
|
<li v-for="(item, index) in fileList" :key="index">
|
|
<img :src="item" :alt="item">
|
|
<div>
|
|
<i class="el-icon-delete" @click="removeUpload(index)"></i>
|
|
</div>
|
|
</li>
|
|
<li v-if="fileList.length < uploadLimit">
|
|
<i class="el-icon-plus avatar-uploader-icon" @click="popoverUpload"></i>
|
|
</li>
|
|
</ul>
|
|
<el-upload slot="reference" ref="upload" action="" accept="image/png, image/jpeg" :show-file-list="false" :limit="uploadLimit"
|
|
:http-request="uploadRequest" :on-exceed="uploadExceed">
|
|
<el-button type="text" icon="el-icon-upload">上传图片</el-button>
|
|
</el-upload>
|
|
</el-popover>
|
|
<el-button type="primary" @click="user_comment_special">发表评论</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="user_evaluate">
|
|
<div class="user_evaluate_total_score">
|
|
<span>课程评分：</span>
|
|
<span>{{ replyData.score }}</span>
|
|
<span>分</span>
|
|
</div>
|
|
<div v-if="replyList.length" class="user_evaluate_list">
|
|
<div class="user_evaluate_list_item" v-for="(item, index) in replyList" :key="index">
|
|
<div class="user_evaluate_list_item_user">
|
|
<div class="user_evaluate_list_item_user_nick">
|
|
<div class="user_evaluate_list_item_user_nick_avator">
|
|
<img :src="item.avatar" :alt="item.nickname">
|
|
</div>
|
|
<div>
|
|
<span>{{item.nickname}}</span>
|
|
</div>
|
|
<div>
|
|
<span class="el-icon-star-on" v-for="(val, i) in 5" :key="i" :class="{ 'select_evaluate': i < item.star}"></span>
|
|
</div>
|
|
</div>
|
|
<div class="user_evaluate_list_item_user_time">
|
|
<span>{{item.add_time}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="user_evaluate_list_item_value">
|
|
<div class="user_evaluate_list_item_value_message">
|
|
<span>{{item.comment}}</span>
|
|
</div>
|
|
<div class="user_evaluate_list_item_value_imageList">
|
|
<div class="item_value_imageList_item" v-for="(val, i) in item.pics" :key="i">
|
|
<el-image :src="val" :preview-src-list="item.pics"></el-image>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.merchant_reply_content" class="user_evaluate_list_item_value_reply">
|
|
<div class="user_evaluate_list_item_value_reply_item">
|
|
<div class="value_reply_item_label">
|
|
<span>官方回复：</span>
|
|
</div>
|
|
<div class="value_reply_item_con">
|
|
<span>{{item.merchant_reply_content}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-empty v-else image="{__PUBLIC_WEB_PATH}pc/images/empty4.png" description=" "></el-empty>
|
|
<el-pagination v-if="replyList.length" :current-page.sync="replyPage" :page-size="limit" :total="replyTotal" :hide-on-single-page="true"
|
|
layout="prev, pager, next" prev-text="上一页" next-text="下一页" @current-change="special_reply_list"></el-pagination>
|
|
</div>
|
|
</div>
|
|
<!-- 评价结束 -->
|
|
<!-- 练习 -->
|
|
<div v-if="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="progress">
|
|
<div class="progress-bar">
|
|
<div :style="{ width: item.progress + '%' }" class="progress-inner"></div>
|
|
</div>
|
|
<div class="progress-text">{{ item.progress }}%</div>
|
|
</div>
|
|
<div class="wrap">
|
|
<div>{{ item.fake_sales + item.answer }}人已答题</div>
|
|
<button @click="goProblem(item)">开始答题</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 考试 -->
|
|
<div v-if="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="wrap">
|
|
<div>共{{ item.item_number }}题</div>
|
|
<button @click="goQuestion(item)"><i class="iconfont icon-19-lianxi"></i>答题</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container_detils_propaganda">
|
|
<!-- 讲师 -->
|
|
<div v-if="lecturerDetails.lecturer_name" class="propaganda_teacher" @click="goLecturer">
|
|
<div class="propaganda_teacher_title">
|
|
<div class="teacher_title_image">
|
|
<img :src="lecturerDetails.lecturer_head" :alt="lecturerDetails.lecturer_name">
|
|
</div>
|
|
<div class="teacher_title_message">
|
|
<div class="title_message_name">{{ lecturerDetails.lecturer_name }}</div>
|
|
<div class="title_message_tap">
|
|
<span v-for="(label, index) in lecturerDetails.label" :key="index">{{ label }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="propaganda_teacher_dic">{{ lecturerDetails.explain }}</div>
|
|
</div>
|
|
<!-- 关联资料 -->
|
|
<div v-if="dataDownload.length" class="propaganda_course">
|
|
<div v-for="item in dataDownload" :key="item.id" class="propaganda_course_con" @click="goMaterialDetail(item.id)">
|
|
<div class="propaganda_course_con_image">
|
|
<img :src="item.image" :alt="item.title">
|
|
</div>
|
|
<div class="propaganda_course_con_dic">
|
|
<div class="propaganda_course_con_dic_tit">{{ item.title }}</div>
|
|
<div class="propaganda_course_con_dic_num">{{ item.ficti + item.sales }}人已下载</div>
|
|
<div class="propaganda_course_handle">
|
|
<div v-if="item.pay_type" class="propaganda_course_handle_price">￥<span>{{ item.money }}</span></div>
|
|
<div v-else class="propaganda_course_handle_price free">免费</div>
|
|
<div class="propaganda_course_handle_button">去下载</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 推荐课程 -->
|
|
<div v-if="recommendedCourses.length" class="propaganda_recommend">
|
|
<div class="propaganda_recommend_more">
|
|
<div class="propaganda_recommend_more_title">推荐课程</div>
|
|
<div class="propaganda_recommend_more_icon" @click="goSpecialCate">更多<i class="el-icon-arrow-right"></i></div>
|
|
</div>
|
|
<div v-for="item in recommendedCourses" :key="item.id" class="propaganda_course_con" @click="goSpecial(item)">
|
|
<div class="propaganda_course_con_image">
|
|
<img :src="item.image" alt="">
|
|
</div>
|
|
<div class="propaganda_course_con_dic">
|
|
<div class="propaganda_course_con_dic_tit">{{ item.title }}</div>
|
|
<div class="propaganda_course_con_dic_tag">
|
|
<div class="tag-group">
|
|
<div v-for="(label, index) in item.label" :key="index" class="tag">{{ label }}</div>
|
|
</div>
|
|
<div v-if="item.type !== 4 && !item.is_light">共{{ item.count }}节</div>
|
|
</div>
|
|
<div class="propaganda_course_con_dic_num">
|
|
<div>{{ item.browse_count }}人已学</div>
|
|
<div v-if="item.pay_type" class="money">￥<span>{{ item.money }}</span></div>
|
|
<div v-else class="money free">免费</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button v-if="isBatch && !isPay" :style="{bottom: 'calc(50% + '+(sidebarHeight / 2)+'px)'}" class="exchange-button" type="button" @click="exchange">
|
|
<img src="{__PUBLIC_WEB_PATH}pc/images/exchange.png" alt="兑换码">
|
|
</button>
|
|
<base-footer :user-info="userInfo" :public-data="publicData" @action="baseFooterAction"></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/auth',
|
|
'api/home',
|
|
'api/special',
|
|
'api/topic',
|
|
'scripts/util',
|
|
'api/live',
|
|
'router/index',
|
|
'store/index',
|
|
'qrcode',
|
|
'css!styles/courseListDetils.css'
|
|
], function (Vue, ELEMENT, BaseHeader, BaseFooter, BaseLogin, BaseAgree, baseMixin, authApi, homeApi, specialApi, topicApi, util, liveApi, router, store) {
|
|
var id = {$id};
|
|
var isBatch = '{$isBatch}';
|
|
var isPay = '{$isPay}';
|
|
var validity = {$validity};
|
|
var isMember = {$is_member};
|
|
var mobileUrl = '{$mobile_url}';
|
|
var recordCoujnt = '{$recordCoujnt}';
|
|
var commentSwitch = {$comment_switch};
|
|
var liveInfo = {$liveInfo};
|
|
var special = {$special};
|
|
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
|
|
},
|
|
filters: {
|
|
validityFormat: function (value) {
|
|
var result = '';
|
|
var days = Math.floor(value / 60 / 60 / 24);
|
|
var hours = Math.floor(value / 60 / 60 % 24);
|
|
var minutes = Math.floor(value / 60 % 60);
|
|
if (days) {
|
|
result += days + '天';
|
|
}
|
|
if (hours) {
|
|
result += hours + '小时';
|
|
}
|
|
return result + minutes + '分钟';
|
|
}
|
|
},
|
|
mixins: [baseMixin],
|
|
data: {
|
|
id: id,
|
|
isBatch: isBatch,
|
|
isPay: isPay,
|
|
isMember: isMember,
|
|
recordCoujnt: recordCoujnt,
|
|
liveInfo: liveInfo,
|
|
special: special.special,
|
|
courses: 0,
|
|
lecturerDetails: {},
|
|
dataDownload: [],
|
|
recommendedCourses: [],
|
|
tipList: [
|
|
{
|
|
title: '详情',
|
|
value: 1
|
|
},
|
|
{
|
|
title: '目录',
|
|
value: 2
|
|
},
|
|
{
|
|
title: '套餐',
|
|
value: 3
|
|
},
|
|
{
|
|
title: '评论(0条)',
|
|
value: 4
|
|
}
|
|
],
|
|
tipLeft: 0,
|
|
selectValue: 1,
|
|
page: 1,
|
|
limit: 15,
|
|
courseList: [],
|
|
replyData: {},
|
|
replyList: [],
|
|
replyFinished: false,
|
|
rateValue: 5,
|
|
comment: '',
|
|
uploadLimit: 6,
|
|
courseItems: [],
|
|
cloumnPage: 1,
|
|
cloumnFinished: false,
|
|
cloumnTotal: 0,
|
|
coursePage: 1,
|
|
courseFinished: false,
|
|
courseTotal: 0,
|
|
replyPage: 1,
|
|
replyTotal: 0,
|
|
fileList: [],
|
|
from: '',
|
|
type: '',
|
|
recommend_id: '',
|
|
isLogin: false,
|
|
validity: validity,
|
|
isReload: true,
|
|
mobileUrl: mobileUrl,
|
|
sidebarHeight: 0,
|
|
problemList: [],
|
|
questionList: []
|
|
},
|
|
watch: {
|
|
selectValue: {
|
|
handler: function (val) {
|
|
this.$nextTick(function () {
|
|
this.tipLeft = this.$refs['react' + val][0].offsetLeft + 'px';
|
|
});
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
created: function () {
|
|
document.title = this.special.title;
|
|
this.from = util.getParmas('from');
|
|
this.type = util.getParmas('type');
|
|
this.recommend_id = util.getParmas('recommend_id');
|
|
this.lecturer_details();
|
|
this.special_data_download();
|
|
this.recommended_courses();
|
|
this.addLearningRecords();
|
|
this.getProblemList();
|
|
this.get_site_service_phone(this.special.mer_id);
|
|
this.get_kefu_id(this.special.mer_id);
|
|
if (commentSwitch) {
|
|
this.special_reply_data();
|
|
this.special_reply_list();
|
|
} else {
|
|
for (var j = this.tipList.length; j--;) {
|
|
if (this.tipList[j].value == 4) {
|
|
this.tipList.splice(j, 1);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (this.special.type == 4) {
|
|
this.get_live_record_list();
|
|
for (var i = this.tipList.length; i--;) {
|
|
if (this.tipList[i].value == 2) {
|
|
this.tipList[i].title = '回放目录';
|
|
} else if (this.tipList[i].value == 3 || this.tipList[i].value == 4) {
|
|
this.tipList.splice(i, 1);
|
|
}
|
|
}
|
|
} else {
|
|
this.numberCourses();
|
|
this.get_course_list();
|
|
if (this.special.type == 5) {
|
|
this.get_cloumn_task();
|
|
} else {
|
|
for (var i = this.tipList.length; i--;) {
|
|
if (this.tipList[i].value == 3) {
|
|
this.tipList.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.$nextTick(function () {
|
|
if (this.mobileUrl) {
|
|
new QRCode(this.$refs.qrcode, this.mobileUrl);
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
baseFooterAction: function (value) {
|
|
this.sidebarHeight = value;
|
|
},
|
|
// 专题详情
|
|
get_special_details: function () {
|
|
specialApi.get_special_details({
|
|
id: this.id
|
|
}).then(function (res) {
|
|
var data = res.data;
|
|
vm.comment_switch = data.comment_switch;
|
|
vm.isBatch = data.isBatch;
|
|
vm.isPay = data.isPay;
|
|
vm.isMember = data.is_member;
|
|
vm.recordCoujnt = data.recordCoujnt;
|
|
vm.special = data.special;
|
|
vm.validity = data.validity;
|
|
document.title = data.title;
|
|
vm.lecturer_details();
|
|
if (vm.special.type == 4) {
|
|
vm.liveInfo = data.liveInfo;
|
|
vm.get_live_record_list();
|
|
for (var i = vm.tipList.length; i--;) {
|
|
if (vm.tipList[i].value == 2) {
|
|
vm.tipList[i].title = '回放目录';
|
|
} else if (vm.tipList[i].value == 3 || vm.tipList[i].value == 4) {
|
|
vm.tipList.splice(i, 1);
|
|
}
|
|
}
|
|
} else {
|
|
vm.numberCourses();
|
|
vm.get_course_list();
|
|
if (vm.special.type == 5) {
|
|
vm.get_cloumn_task();
|
|
} else {
|
|
for (var i = vm.tipList.length; i--;) {
|
|
if (vm.tipList[i].value == 3) {
|
|
vm.tipList.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 专题课程节数
|
|
numberCourses: function () {
|
|
specialApi.numberCourses({
|
|
id: this.id
|
|
}).then(function (res) {
|
|
vm.courses = res.data;
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 讲师信息
|
|
lecturer_details: function () {
|
|
authApi.lecturer_details({
|
|
id: this.special.lecturer_id
|
|
}).then(function (res) {
|
|
vm.lecturerDetails = res.data || {};
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 关联的资料
|
|
special_data_download: function () {
|
|
specialApi.special_data_download({
|
|
special_id: this.id
|
|
}).then(function (res) {
|
|
vm.dataDownload = res.data;
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 推荐的专题
|
|
recommended_courses: function () {
|
|
specialApi.recommended_courses({
|
|
id: this.id
|
|
}).then(function (res) {
|
|
vm.recommendedCourses = res.data;
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 课程目录
|
|
get_course_list: function () {
|
|
var vm = this;
|
|
specialApi.get_course_list({
|
|
page: this.coursePage,
|
|
limit: this.limit,
|
|
special_id: this.id
|
|
}).then(function (res) {
|
|
if (Array.isArray(res.data)) {
|
|
return;
|
|
}
|
|
var list = res.data.list;
|
|
list.forEach(function (item) {
|
|
item.flag = false;
|
|
});
|
|
vm.courseList = list;
|
|
vm.courseTotal = res.data.count;
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 套餐课程
|
|
get_cloumn_task: function () {
|
|
specialApi.get_cloumn_task({
|
|
page: this.cloumnPage,
|
|
limit: this.limit,
|
|
special_id: this.id
|
|
}).then(function (res) {
|
|
if (Array.isArray(res.data)) {
|
|
return;
|
|
}
|
|
vm.courseItems = res.data.list;
|
|
vm.cloumnTotal = res.data.count;
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 回放目录
|
|
get_live_record_list: function () {
|
|
liveApi.get_live_record_list({
|
|
special_id: this.id,
|
|
page: this.coursePage,
|
|
limit: this.limit
|
|
}).then(function (res) {
|
|
vm.courseList = res.data.data;
|
|
vm.courseTotal = res.data.count;
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 评价概况
|
|
special_reply_data: function () {
|
|
specialApi.special_reply_data({
|
|
special_id: this.id
|
|
}).then(function (res) {
|
|
vm.replyData = res.data;
|
|
var tip = vm.tipList.find(function (tipItem) {
|
|
return tipItem.value === 4;
|
|
});
|
|
if (tip) {
|
|
tip.title = '评论(' + vm.replyData.whole + '条)';
|
|
}
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 评价列表
|
|
special_reply_list: function () {
|
|
specialApi.special_reply_list({
|
|
page: this.replyPage,
|
|
limit: this.limit,
|
|
special_id: this.id
|
|
}).then(function (res) {
|
|
vm.replyList = res.data.list;
|
|
vm.replyTotal = res.data.count;
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 发表评论
|
|
user_comment_special: function () {
|
|
if (!(this.isPay || (!this.special.member_pay_type && this.isMember))) {
|
|
this.$message('购买学习后既可进行评价');
|
|
return;
|
|
}
|
|
specialApi.user_comment_special(this.id, {
|
|
comment: this.comment,
|
|
pics: this.fileList,
|
|
satisfied_score: this.rateValue
|
|
}).then(function (res) {
|
|
vm.$message.success(res.msg);
|
|
vm.comment = '';
|
|
vm.fileList = [];
|
|
vm.rateValue = 5;
|
|
vm.replyPage = 1;
|
|
vm.replyList = [];
|
|
vm.replyFinished = false;
|
|
vm.special_reply_data();
|
|
vm.special_reply_list();
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
},
|
|
// 点击图片弹窗的上传
|
|
popoverUpload: function () {
|
|
this.$refs.upload.$refs['upload-inner'].$refs.input.click();
|
|
},
|
|
// 上传图片
|
|
uploadRequest: function (elUpload) {
|
|
var formData = new FormData();
|
|
formData.append('file', elUpload.file)
|
|
authApi.upload(formData).then(function (res) {
|
|
vm.$message.success(res.msg);
|
|
vm.fileList.push(res.data.url);
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
vm.$refs.upload.uploadFiles.pop();
|
|
});
|
|
},
|
|
// 超出上传图片个数限制
|
|
uploadExceed: function () {
|
|
this.$message.warning('最多上传' + this.uploadLimit + '张图');
|
|
},
|
|
// 删除上传图片
|
|
removeUpload: function (index) {
|
|
this.fileList.splice(index, 1);
|
|
this.$refs.upload.uploadFiles.splice(index, 1);
|
|
},
|
|
// 点击立即购买
|
|
goPayment: function () {
|
|
homeApi.user_login().then(function () {
|
|
window.location.assign(vm.$router.payment + '?type=1&id=' + vm.id);
|
|
}).catch(function (err) {
|
|
store.setLoginAction(true);
|
|
});
|
|
},
|
|
// 点击免费学习、去学习
|
|
learn: function () {
|
|
var vm = this;
|
|
homeApi.user_login().then(function () {
|
|
if (vm.special.type == 5) {
|
|
vm.$message('请在课程目录中选择您将要学习的专题课程');
|
|
window.scrollTo({
|
|
top: vm.$refs.container.offsetTop / 2,
|
|
left: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
vm.selectValue = 2;
|
|
if (vm.courseList.length) {
|
|
vm.courseList[0].flag = true;
|
|
}
|
|
return;
|
|
}
|
|
window.location.assign(vm.$router.task_info + '?specialId=' + vm.id + '&task_id=' + vm.courseList[0].id + '&special_title=' + vm.special.title);
|
|
}).catch(function (err) {
|
|
store.setLoginAction(true);
|
|
});
|
|
},
|
|
// 点击进入直播间
|
|
goLiveRoom: function () {
|
|
homeApi.user_login().then(function () {
|
|
if (vm.special.pay_type == 2) {
|
|
vm.$prompt('请输入直播间密码', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
inputPattern: new RegExp(vm.liveInfo.studio_pwd),
|
|
inputErrorMessage: '密码错误'
|
|
}).then(function () {
|
|
document.cookie = vm.liveInfo.stream_name + 'studio_pwd=' + vm.liveInfo.studio_pwd + ';expires=7200;path=/';
|
|
window.location.assign(vm.$router.live + '?stream_name=' + vm.liveInfo.stream_name);
|
|
});
|
|
return;
|
|
}
|
|
window.location.assign(vm.$router.live + '?stream_name=' + vm.liveInfo.stream_name);
|
|
}).catch(function (err) {
|
|
store.setLoginAction(true);
|
|
});
|
|
},
|
|
// 切换详情、目录、套餐、评价
|
|
selectTip: function (item) {
|
|
this.selectValue = item.value
|
|
},
|
|
// 点击专栏课程目录
|
|
selectCourse: function (item) {
|
|
item.flag = !item.flag
|
|
},
|
|
// 点击收藏
|
|
collect: function () {
|
|
homeApi.user_login().then(function () {
|
|
specialApi.collect({
|
|
id: vm.id
|
|
}).then(function (res) {
|
|
vm.special.collect = !vm.special.collect;
|
|
vm.$message.success(vm.special.collect ? '收藏成功' : '取消收藏成功');
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
}).catch(function (err) {
|
|
store.setLoginAction(true);
|
|
});
|
|
},
|
|
// 点击课程目录
|
|
goTask: function (task) {
|
|
var vm = this;
|
|
homeApi.user_login().then(function () {
|
|
if (!vm.isPay && (vm.special.member_pay_type || !vm.isMember) && task.is_free && task.is_try) {
|
|
if (task.is_light) {
|
|
window.location.assign(vm.$router.task_info + '?task_id=0' + '&specialId=' + task.id + '&special_title=' + vm.special.title + '&viewing_time=' + (task.watch && task.watch.viewing_time || 0));
|
|
} else {
|
|
window.location.assign(vm.$router.task_info + '?task_id=' + task.id + '&specialId=' + task.special_id + '&special_title=' + vm.special.title + '&viewing_time=' + (task.watch && task.watch.viewing_time || 0));
|
|
}
|
|
} else {
|
|
if (task.pay_status && !vm.isPay) {
|
|
vm.$message('请先去购买');
|
|
return;
|
|
}
|
|
if (task.is_light) {
|
|
window.location.assign(vm.$router.task_info + '?task_id=0' + '&specialId=' + task.id + '&special_title=' + vm.special.title + '&viewing_time=' + (task.watch && task.watch.viewing_time || 0));
|
|
return;
|
|
}
|
|
specialApi.get_task_link({
|
|
task_id: task.id,
|
|
special_id: task.special_id
|
|
}).then(function () {
|
|
specialApi.play_num({
|
|
task_id: task.id,
|
|
special_id: task.special_id
|
|
}).then(function () {
|
|
window.location.assign(vm.$router.task_info + '?task_id=' + task.id + '&specialId=' + task.special_id + '&special_title=' + vm.special.title + '&viewing_time=' + (task.watch && task.watch.viewing_time || 0));
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
}
|
|
}).catch(function (err) {
|
|
store.setLoginAction(true);
|
|
});
|
|
},
|
|
// 点击讲师
|
|
goLecturer: function () {
|
|
window.location.href = this.$router.teacher_detail + '?id=' + this.special.lecturer_id;
|
|
},
|
|
// 点击关联的资料
|
|
goMaterialDetail: function (id) {
|
|
window.location.href = this.$router.material_detail + '?id=' + id;
|
|
},
|
|
// 点击推荐课程的更多
|
|
goSpecialCate: function () {
|
|
window.location.href = this.$router.special_cate;
|
|
},
|
|
// 点击套餐课程、推荐课程
|
|
goSpecial: function (special) {
|
|
window.location.href = (special.is_light ? this.$router.single_detail : this.$router.special_detail) + '?id=' + special.id;
|
|
},
|
|
// 增加浏览记录
|
|
addLearningRecords: function () {
|
|
specialApi.addLearningRecords({
|
|
id: this.id
|
|
}).catch(function (err) {
|
|
console.error(err.msg);
|
|
});
|
|
},
|
|
// 点击回放目录
|
|
goLive: function (live) {
|
|
homeApi.user_login().then(function () {
|
|
if (vm.special.pay_type == 0) {
|
|
document.cookie = vm.liveInfo.stream_name + 'studio_pwd=' + vm.liveInfo.studio_pwd + ';expires=7200;path=/';
|
|
window.location.href = vm.$router.live + '?stream_name=' + vm.liveInfo.stream_name + '&record_id=' + live.RecordId;
|
|
|
|
} else if (vm.special.pay_type == 1) {
|
|
if (vm.isPay) {
|
|
document.cookie = vm.liveInfo.stream_name + 'studio_pwd=' + vm.liveInfo.studio_pwd + ';expires=7200;path=/';
|
|
window.location.href = vm.$router.live + '?stream_name=' + vm.liveInfo.stream_name + '&record_id=' + live.RecordId;
|
|
} else {
|
|
vm.$message('请先购买');
|
|
}
|
|
} else {
|
|
vm.$prompt('请输入直播间密码', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
inputPattern: new RegExp(vm.liveInfo.studio_pwd),
|
|
inputErrorMessage: '密码错误'
|
|
}).then(function () {
|
|
document.cookie = vm.liveInfo.stream_name + 'studio_pwd=' + vm.liveInfo.studio_pwd + ';expires=7200;path=/';
|
|
window.location.href = vm.$router.live + '?stream_name=' + vm.liveInfo.stream_name + '&record_id=' + live.RecordId;
|
|
});
|
|
}
|
|
}).catch(function (err) {
|
|
store.setLoginAction(true);
|
|
});
|
|
},
|
|
// 兑换码
|
|
exchange: function () {
|
|
homeApi.user_login().then(function () {
|
|
vm.$prompt('', '课程兑换', {
|
|
customClass: 'exchange-msgbox',
|
|
showCancelButton: false,
|
|
confirmButtonText: '立即兑换',
|
|
inputPlaceholder: '请输入兑换码',
|
|
inputPattern: /^\d{1,}$/,
|
|
inputErrorMessage: '请输入兑换码',
|
|
center: true
|
|
}).then(function (data) {
|
|
specialApi.exchange_submit({
|
|
special_id: vm.id,
|
|
code: data.value
|
|
}).then(function () {
|
|
vm.$message.success('兑换成功！');
|
|
window.location.reload();
|
|
}).catch(function (err) {
|
|
vm.$message.error(err.msg);
|
|
});
|
|
}).catch(function () { });
|
|
}).catch(function (err) {
|
|
store.setLoginAction(true);
|
|
});
|
|
},
|
|
currentChange: function (val) {
|
|
this.coursePage = val;
|
|
if (this.special.type == 4) {
|
|
this.get_live_record_list();
|
|
} else {
|
|
this.get_course_list();
|
|
}
|
|
},
|
|
getProblemList: function () {
|
|
var vm = this;
|
|
topicApi.specialTestPaper({
|
|
special_id: this.id,
|
|
type: 1
|
|
}).then(function (res) {
|
|
var problemList = res.data;
|
|
if (problemList.length) {
|
|
vm.tipList.splice(vm.tipList.length - 1, 0, {
|
|
title: '练习',
|
|
value: 5
|
|
});
|
|
problemList.forEach(function (problem) {
|
|
problem.progress = Math.floor(problem.done / problem.item_number * 100);
|
|
});
|
|
vm.problemList = problemList;
|
|
}
|
|
vm.getQuestionList();
|
|
}).catch(function () {
|
|
vm.getQuestionList();
|
|
});
|
|
},
|
|
getQuestionList: function () {
|
|
var vm = this;
|
|
topicApi.specialTestPaper({
|
|
special_id: this.id,
|
|
type: 2
|
|
}).then(function (res) {
|
|
var questionList = res.data;
|
|
if (questionList.length) {
|
|
vm.tipList.splice(vm.tipList.length - 1, 0, {
|
|
title: '考试',
|
|
value: 6
|
|
});
|
|
vm.questionList = questionList;
|
|
}
|
|
});
|
|
},
|
|
goProblem: function (problem) {
|
|
homeApi.user_login().then(function (res) {
|
|
if (vm.isPay) {
|
|
window.location.assign(vm.$router.problem_index + '?id=' + problem.id);
|
|
} else {
|
|
vm.$message('购买课程后可进行练习答题');
|
|
}
|
|
}).catch(function () {
|
|
store.setLoginAction(true);
|
|
});
|
|
},
|
|
goQuestion: function (question) {
|
|
homeApi.user_login().then(function (res) {
|
|
if (question.is_pay || vm.isPay) {
|
|
window.location.assign(vm.$router.question_index + '?id=' + question.id);
|
|
} else {
|
|
vm.$message('购买课程后可进行考试答题');
|
|
}
|
|
}).catch(function () {
|
|
store.setLoginAction(true);
|
|
});
|
|
},
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{/block} |