detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="../css/public.css">
<style>
.wrap{
background-color: #ffffff;
height: auto;
}
/*公用头部样式*/
.header{
width: 100%;
height: 1rem;
line-height: 1rem;
text-align: center;
font-size: .36rem;
background: #FFFFFF;
/*margin-bottom: .2rem;*/
display: inline-flex;
justify-content:center;
position: relative;
}
.header>a{
width: 1rem;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.header>a>i{
box-sizing: border-box;
display: inline-block;
width: 100%;
height: 100%;
padding: 0 .2rem;
text-align: left;
}
/*上方内容*/
.content-top{
width: 100%;
height: 2.41rem;
border-top: .01rem #E6E6E6 solid;
background-color: #fff;
}
.content-top .top-left, .content-top .top-right{
height: 100%;
position: relative;
float: left;
}
.top-left{
width: 3.2rem;
margin-left: .2rem;
/*background-color: #007aff;*/
}
.top-left img{
width: 100%;
height: 100%;
}
.top-right{
width: 4.1rem;
/*background-color: #F23132;*/
}
.top-right .title{
margin-top: .39rem;
margin-left: .2rem;
height: .31rem;
line-height: .31rem;
font-size: .32rem;
color: #333333;
/*background-color: #007aff;*/
}
.top-right .num{
margin-top: .49rem;
margin-left: .2rem;
height: .2rem;
line-height: .2rem;
font-size: .2rem;
color: #999999;
/*background-color: #13D8BD;*/
}
/*中间内容 -- 详情图片*/
.empty{
width: 100%;
height: .19rem;
background-color: #F7F7F7;
}
.content-mid{
/*height: 13.89rem;*/
/*width: 100%;*/
height: auto;
background: #FFFFFF;
margin-left: .2rem;
margin-right: .2rem;
}
/*.content-mid img{
width: 100%;
margin-left: .2rem;
margin-right: .2rem;
}
.content-mid p{
margin-left: .2rem;
margin-right: .2rem;
}*/
/*底部按钮*/
footer{
width: 100%;
height: .98rem;
}
.btn-apply, .btn-contact{
height: 100%;
outline: none;
border:0rem;
font-family:PingFang-SC-Medium;
font-size: .36rem;
text-align: center;
line-height: .98rem;
position: relative;
float: left;
}
.btn-apply a, .btn-contact a{
text-decoration: none;
color: #fff;
}
footer .btn-contact{
/*width: 2.9rem;*/
width: 40%;
background-color: #F23132;
}
footer .btn-apply{
/*width: 4.6rem;*/
width: 60%;
background-color: #13D8BD;
display: none;
}
</style>
<script src="../js/rem.js"></script>
<title>课程详情</title>
</head>
<body>
<div class="wrap" id="app">
<!--<div class="header">
<a href="javascript:history.back(-1)"><i class="iconfont"></i></a>
<!–系统班–>
</div>-->
<div class="content-top">
<div class="top-left">
<!-- 班型图片 -->
<!--<img src="../img/1.jpg" alt="图片">-->
</div>
<div class="top-right">
<!--<p class="title">百日速成班</p>-->
<!--<p class="num">10000人学习</p>-->
</div>
</div>
<div class="empty"></div>
<div class="content-mid">
<!-- 详情图片 -->
<!--<img src="../img/11.jpg" alt="详情图片">-->
</div>
<footer>
<button class="btn-contact">
<a href="javascript:void(0);" onclick="handleContantClick()">联系客服</a>
</button>
<button class="btn-apply">
<!--<a href="javascript:void(0);" onclick="handleApplyClick(classId)">立即报名</a>-->
</button>
</footer>
</div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/fetch.js"></script>
<script>
/* 班级详情 */
var aa = window.localStorage.getItem('getClassId');
// var classId = "xc56719940694a7c82948895de87801b";
var isShow = window.localStorage.getItem('getIsShow');
var strObj = {};
function gradeDetail() {
$.ajax({
type:"post",
dataType:'json',
url:baseURL + '/classinfo',
data:{
classId:aa,//班级ID
},
success:function (res) {
console.log(res)
if(res.status == true){
console.log(res.data);
var left = '';
var right = '';
var mid = '';
// var item = res.data[0];
var item = res.data[0];
console.log(item)
//菜单班名
var titleName =item.collegeidName;
//班级图片
var imageidPath = item.imageidPath;
//班级名
var name = item.title;
//购买量
var buynumber = item.buynumber;
//详情介绍图文
var arrange = item.arrange;
var detailImg = ''
console.log(arrange)
//classId
var id = item.classId
// $('.header').append(titleName);
left += '<img src="'+ 'http://12.34.5678:1234/crm/static/'+ imageidPath + '" alt="" />';
$('.top-left').append(left)
right += " <p class=\"title\">" + name + "</p>";
right += "<p class=\"num\">" + buynumber + "人学习</p>"
$('.top-right').append(right);
if(arrange == null || arrange == ''){
mid += ''
}else {
mid += arrange;
}
// mid += '<img src="'+'http://12.34.5678:1234/crm/static/class/sunth_20181111_024916.jpg' + '" alt="" />';
$('.content-mid').append(mid);
//立即报名按钮
// console.log(item)
// strObj.classId = id
// strObj.collegeidName =titleName
var jsonStr = JSON.stringify(item);
// var btn = '<a href="javascript:void(0);" onclick="handleApplyClick()" id=" ' + id +' ">立即报名</a>'
var btn = "<a href='javascript:void(0);' onclick='handleApplyClick()' id='"+jsonStr+"'>立即报名</a>"
$('.btn-apply').append(btn)
}
}
})
}
gradeDetail();
/* 判断立即报名按钮是否显示 */
function show(isShow) {
if(isShow == "true"){
$('.btn-apply').css('display','block');
}else if (isShow == "false") {
$('.btn-apply').css('display','none');
}
}
show(isShow);
/* 判断是Android或iOS */
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
};
/* 联系客服 */
function handleContantClick() {
if(browser.versions.ios){
window.webkit.messageHandlers.callCustomService.postMessage(null);
}else if(browser.versions.android){
window.unionCar.callCustomService();
}
}
/* 立即报名 */
// var jsonStr = JSON.stringify(strObj);
// console.log(strObj)
// console.log(Object.keys(strObj).length)
// console.log(typeof strObj)
// console.log('123456===',jsonStr);
function handleApplyClick() {
var ids = $('.btn-apply').find('a').attr('id');
console.log(ids)
console.log(typeof ids)
// var jsonStr = JSON.stringify(ids);
if(browser.versions.ios){
window.webkit.messageHandlers.signUp.postMessage({
"classId": ids
});
}else if(browser.versions.android){
window.unionCar.signUp(ids);
}
}
</script>
</html>
fetch.js
// 服务器IP
const SERVER_ADDRESS = '12.12.12'
// 服务器端口
const SERVER_PORT = 1234
// 服务器地址
const baseURL = `http://${SERVER_ADDRESS}:${SERVER_PORT}/app`;
// var userToken = "f4c63042b61448b5e23cbaa0df545a12";
// // var userToken = "48d67381c42eed4abd82696e5014ba27";
// var sku = 'x109197dded14ae9b3f42adcee8a725f';//消防安全技术实务
// // var sku = 'x109197dded14ae9b3f42adcee8a725f';//消防安全技术实务
// var classId = 'xe486dd91e46449a85d466407b0efd32';//班级id
function GetRequest() {
var url = decodeURI(location.search); //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for ( var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request=undefined;
Request=GetRequest();
// if (window.sessionStorage.getItem('getUserToken') === null || window.sessionStorage.getItem('getUserToken') === undefined || window.sessionStorage.getItem('getUserToken') == ''){
if (window.localStorage.getItem('getUserToken') === null || window.localStorage.getItem('getUserToken') === undefined || window.localStorage.getItem('getUserToken') == ''){
var sku = Request["sku"];
var userToken = Request["userToken"];
var classId = Request["classId"];
var isShow = Request["isShow"];
var newsId = Request["newsId"];
saveStorage();
console.log(111);
}else {
// var userToken = Request["userToken"];
// var sku = Request["sku"];
// console.log(userToken)
// console.log(sku)
// console.log(window.localStorage.getItem('getUserToken'))
console.log(222);
}
function saveStorage(){
localStorage.setItem("getUserToken",userToken);
localStorage.setItem("getSku",sku);
localStorage.setItem("getClassId",classId);
localStorage.setItem("getIsShow",isShow);
localStorage.setItem("getNewsId",newsId);
// sessionStorage.setItem("getUserToken",userToken);
// sessionStorage.setItem("getSku",sku);
// sessionStorage.setItem("getClassId",classId);
// sessionStorage.setItem("getIsShow",isShow);
}
// saveStorage();
// var storage = window.localStorage;
// console.log(storage)
// var getUserToken = storage["getUserToken"];
// console.log(getUserToken)
网友评论