2019-01-21 01:20:32 +08:00
|
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
|
|
<head th:include="web/index::cmsHeader">
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>Title</title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
body{
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseView {
|
|
|
|
|
|
background-size: auto auto;
|
|
|
|
|
|
padding: 50px 0;
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.wWidth1200 .page-width {
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
width: 1200px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseView .box {
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border: 1px solid #e6e6e6;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
.bd-all {
|
|
|
|
|
|
border: 1px solid #eee;
|
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.posnav {
|
|
|
|
|
|
padding: 0 30px;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
line-height: 45px;
|
|
|
|
|
|
height: 45px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseInfo {
|
|
|
|
|
|
padding: 0px 30px 30px 560px;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
min-height: 300px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseInfo .image {
|
|
|
|
|
|
width: 500px;
|
|
|
|
|
|
height: 300px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 30px;
|
|
|
|
|
|
top: 0px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseInfo-right {
|
|
|
|
|
|
padding-top: 5px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
.clear {
|
|
|
|
|
|
clear: both;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
height: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseInfo .image img {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseInfo-right .name {
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
line-height: 34px;
|
|
|
|
|
|
color: #222;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseInfo-right .price {
|
|
|
|
|
|
height: 44px;
|
|
|
|
|
|
line-height: 44px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.courseInfo-right .price span {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseInfo-right .price-info {
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
color: #e91c35;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.courseInfo-right .button {
|
|
|
|
|
|
height: 44px;
|
|
|
|
|
|
line-height: 44px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseInfo-right .hb-ui-btn, .courseInfo-right .hb-ui-btn1 {
|
|
|
|
|
|
height: 44px;
|
|
|
|
|
|
line-height: 44px;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
background: #f59121;
|
|
|
|
|
|
width: 150px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
border: 0px;
|
|
|
|
|
|
-webkit-transition: 0.3s;
|
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseInfo-right .button em {
|
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
|
color: #b1b1b1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseInfo-right .remark{
|
|
|
|
|
|
font-family: Arial,hiragino sans gb,microsoft yahei,simsun,sans-serif !important;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #888;
|
|
|
|
|
|
height: 88px;
|
|
|
|
|
|
line-height: 44px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
em {
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
}
|
|
|
|
|
|
.nav_content {
|
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
|
border-bottom: 1px solid #e5e5e5;
|
|
|
|
|
|
}
|
|
|
|
|
|
.nav_content .page-width {
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseTab {
|
|
|
|
|
|
height: 59px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.clearfix {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseTab li.active {
|
|
|
|
|
|
border-bottom: 3px solid #0288d1;
|
|
|
|
|
|
color: #0288d1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.courseTab li {
|
|
|
|
|
|
float: left;
|
|
|
|
|
|
margin: 0px 60px 0 0;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
height: 56px;
|
|
|
|
|
|
line-height: 56px;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
color: #555;
|
|
|
|
|
|
}
|
|
|
|
|
|
li {
|
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<div class="fly-header layui-bg-black" th:replace="web/index:: top">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="layui-container">
|
|
|
|
|
|
<div class="courseView">
|
|
|
|
|
|
<div class="page-width">
|
|
|
|
|
|
<form id="form1" action="https://xcx.kesion.com/cshoppingcart.html" method="post">
|
|
|
|
|
|
<div class="box bd-all">
|
|
|
|
|
|
<div class="posnav">
|
|
|
|
|
|
您现在位置：<a href="/vod/zyzg">职业资格</a><em>></em> <a href="/vod/e0ITPX">IT培训</a><em>></em> 浏览课程
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="courseInfo">
|
|
|
|
|
|
<div class="image" id="courseImage">
|
|
|
|
|
|
<div id="view_flv" style="display:none;"></div>
|
|
|
|
|
|
<div class="course-pro0"></div>
|
2019-01-25 15:03:57 +08:00
|
|
|
|
<img th:if="${#strings.isEmpty(trainCourse.cover)}" th:src="@{/web/res/images/no_img.png}" th:alt="${trainCourse.name}" class="course-cover" width="480" height="290">
|
|
|
|
|
|
<img th:if="${not #strings.isEmpty(trainCourse.cover)}" th:src="${trainCourse.cover}" th:alt="${trainCourse.name}" class="course-cover" width="480" height="290">
|
|
|
|
|
|
|
2019-01-21 01:20:32 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="courseInfo-right">
|
|
|
|
|
|
<div class="name" th:text="${trainCourse.name}">
|
|
|
|
|
|
安全测试基础课程
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="price">
|
|
|
|
|
|
<span class="price-info"><span th:text="'¥'+${trainCourse.price}"></span></span>
|
|
|
|
|
|
</div>
|
2019-01-25 17:51:56 +08:00
|
|
|
|
<div class="button" th:if="${trainCourse.price>0 && !courseAuth}">
|
2019-01-24 23:21:35 +08:00
|
|
|
|
<input type="button" onclick="shop()" class="hb-ui-btn" value="立刻购买">
|
2019-01-25 17:51:56 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="button" th:if="${trainCourse.price==0||courseAuth}">
|
|
|
|
|
|
<input type="button" onclick="goStudy()" class="hb-ui-btn" value="加入学习">
|
|
|
|
|
|
<em>有效期:
|
|
|
|
|
|
<span id="shixian" th:if="${trainCourse.price==0}" th:text="'永久'"></span>
|
|
|
|
|
|
<span id="shixian" th:if="${trainCourse.price>0}" th:text="${courseDays}"></span>
|
|
|
|
|
|
(天)</em>
|
2019-01-21 01:20:32 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="remark" th:text="${trainCourse.description}">
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="clear"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
|
|
|
|
|
<ul class="layui-tab-title">
|
|
|
|
|
|
<li class="layui-this">课程目录</li>
|
|
|
|
|
|
<li>学员评价(<span id="commentNum">1</span>)</li>
|
|
|
|
|
|
<li>相关题库</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<div class="layui-tab-content">
|
|
|
|
|
|
<div class="layui-tab-item layui-show">
|
|
|
|
|
|
<ul >
|
2019-01-25 17:51:56 +08:00
|
|
|
|
<li th:if="trainCourseSections" th:each="sections,obj:${trainCourseSections}" >
|
|
|
|
|
|
<a th:if="${courseAuth}" th:id="'section'+${obj.index+1}" th:href="@{'/web/course/courseSections.html/'+${sections.id}}">
|
2019-01-21 01:20:32 +08:00
|
|
|
|
<span th:text="${sections.name}"> </span>
|
|
|
|
|
|
</a>
|
2019-01-24 23:21:35 +08:00
|
|
|
|
<a th:if="!${courseAuth}" onclick="shop()">
|
|
|
|
|
|
<span th:text="${sections.name}"> </span>
|
|
|
|
|
|
</a>
|
2019-01-21 01:20:32 +08:00
|
|
|
|
<hr>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-tab-item">2</div>
|
|
|
|
|
|
<div class="layui-tab-item">
|
|
|
|
|
|
<ul >
|
|
|
|
|
|
<li th:each="practice,obj:${examPractices}" >
|
|
|
|
|
|
<span th:text="${obj.index+1}+'.'+${practice.name}"> </span>
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="fly-footer" th:replace="web/index::cmsBottom">
|
|
|
|
|
|
</div>
|
2019-01-24 23:21:35 +08:00
|
|
|
|
<link rel="stylesheet" th:href="@{/web/res/layui/css/layui.css}">
|
|
|
|
|
|
<script th:src="@{/js/jquery.min.js}"></script>
|
|
|
|
|
|
<script th:src="@{/web/res/layui/layui.js}"></script>
|
|
|
|
|
|
<script th:src="@{/web/res/layui/qrcode.js}"></script>
|
|
|
|
|
|
|
2019-01-21 01:20:32 +08:00
|
|
|
|
<script type="text/javascript">
|
2019-01-24 23:21:35 +08:00
|
|
|
|
layui.use(['element','layer'], function(){
|
|
|
|
|
|
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
|
2019-01-21 01:20:32 +08:00
|
|
|
|
});
|
2019-01-25 17:51:56 +08:00
|
|
|
|
function goStudy() {
|
|
|
|
|
|
$("#section1").click();
|
|
|
|
|
|
}
|
2019-01-24 23:21:35 +08:00
|
|
|
|
function shop() {
|
2019-01-25 17:51:56 +08:00
|
|
|
|
var userId="[[${user?.userId}]]";
|
2019-01-25 15:03:57 +08:00
|
|
|
|
if(userId){
|
|
|
|
|
|
var data={
|
|
|
|
|
|
"body":"[[${trainCourse.name}]]",
|
|
|
|
|
|
"outTradeNo":"12344324242342342342554",
|
|
|
|
|
|
"totalFee":[[${trainCourse.price*100}]],
|
|
|
|
|
|
"spbillCreateIp":"1.80.82.241",
|
|
|
|
|
|
"notifyUrl":"http://ceshi4.yqhl.cc/api/v1/wx/pay/notify/order",
|
|
|
|
|
|
"tradeType":"NATIVE",
|
|
|
|
|
|
"productId":"[[${trainCourse.id}]]",
|
|
|
|
|
|
"openid":userId
|
|
|
|
|
|
};
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
type: 'post',
|
|
|
|
|
|
url: "/api/v1/wx/pay/createOrder",
|
|
|
|
|
|
contentType: "application/json",
|
|
|
|
|
|
dataType : 'json',
|
|
|
|
|
|
data:JSON.stringify(data),
|
|
|
|
|
|
success: function (result) {
|
|
|
|
|
|
if(!result.code){
|
|
|
|
|
|
alertPayQrcode(result.codeUrl)
|
|
|
|
|
|
}else {
|
|
|
|
|
|
layer.msg('生成支付二维码失败',{
|
|
|
|
|
|
time: 2000, //20s后自动关闭
|
|
|
|
|
|
btn: ['明白了']
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2019-01-24 23:21:35 +08:00
|
|
|
|
}
|
2019-01-25 15:03:57 +08:00
|
|
|
|
});
|
|
|
|
|
|
}else{
|
|
|
|
|
|
location.href="/web/user/login.html"
|
|
|
|
|
|
}
|
2019-01-24 23:21:35 +08:00
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
function alertPayQrcode(codeUrl) {
|
|
|
|
|
|
//弹出购买框
|
|
|
|
|
|
layer.open({
|
|
|
|
|
|
type: 1
|
|
|
|
|
|
,title: false //不显示标题栏
|
|
|
|
|
|
,closeBtn: false
|
|
|
|
|
|
,area: '300px;'
|
|
|
|
|
|
,shade: 0.8
|
|
|
|
|
|
,id: 'LAY_layuipro' //设定一个id，防止重复弹出
|
|
|
|
|
|
,btn: ['付款成功', '不购买']
|
|
|
|
|
|
,btnAlign: 'c'
|
|
|
|
|
|
,moveType: 1 //拖拽模式，0或者1
|
|
|
|
|
|
,content: '<div style="padding: 40px; line-height: 22px; background-color: #fff;">' +
|
|
|
|
|
|
'<div id="qrcode"></div>' +
|
|
|
|
|
|
'<div style="text-align: center;margin-top:10px;">微信扫码支付<span style="color: red;">￥[[${trainCourse.price}]]</span>（元）购买</div>' +
|
|
|
|
|
|
'</div>'
|
|
|
|
|
|
,success: function(layero){
|
|
|
|
|
|
var btn = layero.find('.layui-layer-btn');
|
|
|
|
|
|
btn.click(function(){
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
var qrcode = new QRCode('qrcode', {
|
|
|
|
|
|
text: codeUrl,
|
|
|
|
|
|
width: 200,
|
|
|
|
|
|
height: 200,
|
|
|
|
|
|
colorDark: '#000000',
|
|
|
|
|
|
colorLight: '#ffffff',
|
|
|
|
|
|
correctLevel: QRCode.CorrectLevel.H
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2019-01-21 01:20:32 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
2019-01-24 23:21:35 +08:00
|
|
|
|
</html>
|
|
|
|
|
|
|
