316 lines
9.7 KiB
HTML
316 lines
9.7 KiB
HTML
<!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>
|
||
<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">
|
||
|
||
</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>
|
||
<div class="button" th:if="${trainCourse.price>0}">
|
||
<input type="button" onclick="shop()" class="hb-ui-btn" value="立刻购买">
|
||
<em>有效期:<span id="shixian" th:text="${courseDays}"></span>(天)</em>
|
||
</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 >
|
||
<li th:each="sections:${trainCourseSections}" >
|
||
<a th:if="${courseAuth}" th:href="@{'/web/course/courseSections.html/'+${sections.id}}">
|
||
<span th:text="${sections.name}"> </span>
|
||
</a>
|
||
<a th:if="!${courseAuth}" onclick="shop()">
|
||
<span th:text="${sections.name}"> </span>
|
||
</a>
|
||
<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>
|
||
<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>
|
||
|
||
<script type="text/javascript">
|
||
layui.use(['element','layer'], function(){
|
||
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
|
||
|
||
|
||
});
|
||
function shop() {
|
||
var userId="[[${user.userId}]]";
|
||
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: ['明白了']
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}else{
|
||
location.href="/web/user/login.html"
|
||
}
|
||
|
||
}
|
||
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
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|