1 Star 0 Fork 2

panwan1483/畅行吉林_hzs

forked from celticsv5/畅行吉林_hzs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
collection.html 13.96 KB
一键复制 编辑 原始数据 按行查看 历史
13601014569 提交于 2018-08-28 22:56 . 上传项目hzs就是我
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>目的地收藏</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="misapplication-tap-highlight" content="no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
<link rel="stylesheet" type="text/css" href="css/all_css.css" />
<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
<link rel="stylesheet" type="text/css" href="lib/weui.css" />
<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
<link rel="stylesheet" type="text/css" href="css/KGbtn.css" />
<style type="text/css">
#collect_main {
max-width: 640px;
min-width: 320px;
width: 100%;
margin: 0px auto;
}
.index_head {
/*层级在弹出框 和遮罩层之下*/
z-index: 8 !important;
}
.app_head_left {
float: left;
width: 10%;
padding-left: 6px;
padding-top: 6px;
}
.app_head_left a {
color: #FFFFFF;
font-size: 1.5em;
font-weight: bold;
}
.app_head_mid {
float: left;
width: 55%;
padding-top: 5px;
}
.app_head_right {
float: right;
width: 35%;
text-align: right;
padding-right: 10px;
padding-top: 10px;
height: 100%;
line-height: 25px;
}
.app_head_right a {
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
font-family: "黑体";
margin-left: 10px;
height: 100%;
position: relative;
left: 15px;
}
#app_head_title {
text-align: right;
color: #FFFFFF;
font-size: 1.6em;
font-family: "宋体";
font-weight: bold;
}
#nullDataImg_collect {
width: 50%;
margin-top: 100px;
margin-left: 25%;
margin-right: 25%;
}
.collect_mid {
padding-top: 70px;
}
#collect_mid_mainUl {
padding: 10px 15px;
}
#collect_mid_mainUl li {
border-bottom: 1px dashed;
height: 53px;
line-height: 52px;
}
#collect_mid_mainUl li span {
float: left;
display: block;
width: 90%;
white-space: nowrap;
/* 不换行 */
overflow: hidden;
/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow: ellipsis;
/* 当对象内文本溢出时显示省略标记*/
}
.collectDelBtn {
float: right;
width: 6%;
margin-top: 12px;
margin-right: 5px;
}
/* 删除完成按钮 */
#delFinishBtn {
font-size: 1.3em;
position: relative;
top: -4px;
}
/*---遮罩层---*/
.opacity {
opacity: 0.7;
filter: alpha(opacity=30);
background-color: #000;
}
.mask {
position: fixed;
top: 0;
height: 100%;
width: 100%;
/*层级在弹出框之下*/
z-index: 9;
}
html,
body {
height: 100%;
}
/*目的地收藏的隐藏框*/
#addCollectAlert {
/*display: none;*/
width: 80%;
height: 240px;
background-color: #F9F9F9;
position: absolute;
top: 30%;
left: 10%;
/*层级在遮罩层之上*/
z-index: 10;
border-radius: 15px;
}
#addCollectAlert h2 {
height: 30%;
padding-top: 8%;
font-size: 1.4em;
color: #00A1CB;
font-family: "宋体";
text-align: center;
width: 80%;
margin-left: 10%;
border-bottom: 1px solid #DEDEDE;
}
#addCollectAlert p {
position: absolute;
bottom: 5%;
right: 1%;
text-align: right;
padding-right: 1em;
color: #666666;
}
#addCollectAlert p a {
color: #0070B4;
border-bottom: 1px solid;
}
.addMid_left {
margin-top: 10%;
width: 60%;
margin-left: 8%;
height: 40px;
float: left;
border-radius: 5px;
}
.addMid_left input {
width: 100%;
height: 100%;
border: none;
outline: none;
border-radius: 5px;
padding-left: 1em;
}
.addMid_right {
margin-top: 10%;
width: 30%;
float: left;
text-align: center;
}
.addMid_right a {
width: 80%;
margin-top: 2px;
height: 35px;
line-height: 34px !important;
}
#collect_btn {
background-color: #FF8C80;
}
#tangram-suggestion--TANGRAM__1d-main {
z-index: 9999 !important;
}
.tangram-suggestion-main {
z-index: 9999 !important;
}
</style>
<!--地图及密钥-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MMh4H9m5FLBpizlht86GnGynuaM0oGKz"></script>
</head>
<body ontouchstart>
<div id="collect_main">
<div class="index_head">
<div class="app_head_left">
<a href="my.html" class="iconfont">&#xe6d4;</a>
</div>
<div class="app_head_mid">
<p id="app_head_title">目的地收藏</p>
</div>
<div class="app_head_right">
<a onclick="alertAddCollect()" class="iconfont">&#xe604;</a>
<a href="javascript:;" id="delBtnTitle" class="iconfont" style="display: none;">&#xe6e2;</a>
<a href="javascript:;" id="delFinishBtn" style="display: none;">完成</a>
</div>
</div>
<div class="collect_mid">
<!--暂无收藏的情况下的图片-->
<img src="img/my/shoucangNull.png" id="nullDataImg_collect" />
<ul id="collect_mid_mainUl">
</ul>
</div>
</div>
<div id="addCollectAlert" style="display: none;">
<h2>添加目的地</h2>
<div class="addMid_left">
<input type="text" name="" id="collectInput" placeholder="请输入地点" />
</div>
<div class="addMid_right">
<a href="javascript:;" class="weui_btn_disabled weui_btn weui_btn_mini weui_btn_primary" id="collect_btn">收藏</a>
</div>
<p>您也可以从
<a href="cxgh.html">出行规划</a>收藏目的地哦</p>
<div id="l-map" style="display: none;"></div>
</div>
<div class="mask opacity" id="opacityDiv" style="display: none;">
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/crypto-js.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/aes.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/pad-zeropadding.min.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/encryption.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="UTF-8">
$(function() {
var userName = JSON.parse(localStorage.userJson)[0].username;
$.ajax({
type: "post",
url: Url,
data: {
"type": "end_collections_info",
"USERNAME": userName
},
async: false,
cache: false,
dataType: "jsonp", //数据类型为jsonp
jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
jsonpCallback: "jsonpCallback1",
success: function(data) {
if(data.DATA == "[]") {
//当收藏的条数为0时
$("#nullDataImg_collect").show();
} else {
var d = data.DATA;
var m = data.MDATA;
if(isEncrypt(d, m)) {
var d = eval(d);
$("#nullDataImg_collect").hide(); //隐藏暂无目的地收藏图片
$("#delBtnTitle").show(); //显示右上角删除图标
for(var i = 0; i < d.length; i++) {
var li = $('<li name="' + i + '"></li>');
$("#collect_mid_mainUl").append(li);
var span = $('<span onclick="toCxgh_search(this)">' + eval(data.DATA)[i].ENDSTATION + '</span>');
var btn = $('<img src="img/my/delBtnCollect.png" class="collectDelBtn" onclick="delThisCollect(this)" style="display: none;"/>');
$(li).append(span, btn);
}
} else {
errMD();
}
// console.log(eval(data.DATA));
// if(data.DATA == "[]") {
// $("#nullDataImg").show();
// } else {
// $("#nullDataImg").hide();
// }
}
},
error: function(data) {
$.alert("连接超时,请稍后再试", "提示");
}
});
});
//点击添加右上角按钮
function alertAddCollect() {
$("#opacityDiv").show();
$("#addCollectAlert").show(200);
}
//点击到遮罩层即隐藏弹出框
$("#opacityDiv").click(function() {
$("#opacityDiv").hide();
$("#addCollectAlert").hide(200);
});
//点击右上角删除按钮
$("#delBtnTitle").click(function() {
$("#delBtnTitle").hide();
$("#delFinishBtn").show();
$("#collect_mid_mainUl li img").show();
});
//点击完成按钮 完成删除操作
$("#delFinishBtn").click(function() {
$("#delFinishBtn").hide();
$("#delBtnTitle").show();
$("#collect_mid_mainUl li img").hide();
});
function delThisCollect(t) {
// console.log($(t).parents());
var thisLi = t.parentNode;
$.confirm("是否要删除这个目的地", function() {
//点击确认后的回调函数
var thisR = thisLi.children[0].innerHTML;
// console.log(thisR);
document.getElementById("collect_mid_mainUl").removeChild(thisLi);
delAjax(thisR);
}, function() {
//点击取消后的回调函数
});
}
//后台删除选中的收藏路线方法
function delAjax(r) {
var userName = JSON.parse(localStorage.userJson)[0].username;
//更改数据库内容 加密
var n1 = r;
var allData = "USERNAME:" + userName + ",RECID:" + n1;
allData = encrypt(allData);
$.ajax({
type: "post",
url: Url,
data: {
"type": "end_collections",
"DATA": ""+allData+""
},
async: false,
cache: false,
dataType: "jsonp", //数据类型为jsonp
jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
jsonpCallback: "jsonpCallback1",
success: function(data) {
// console.log(data);
},
error: function(data) {
$.alert("连接超时,请稍后再试", "提示");
}
});
}
//点击每条目的地问题跳转至出行规划 查询我的位置到该目的地的出行方案
function toCxgh_search(t_content) {
//设置出行规划也的重点为点击的已存目的地
var indexP = t_content.innerHTML;
// var indexP = "你好";
var url = "cxgh.html?dz=" + indexP;
url = encodeURI(url);
location.href = url;
// console.log(url);
};
// 百度地图API功能
var map = new BMap.Map("l-map");
map.centerAndZoom("长春", 12);
var ac = new BMap.Autocomplete;
//当用户在输入框输入时 按钮为禁用状态
$("#collectInput").keyup(function() {
$("#collect_btn").addClass("weui_btn_disabled");
});
//起点框输入事件
ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "collectInput",
"location": "吉林省"
});
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if(e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if(e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
$("#collect_btn").removeClass("weui_btn_disabled");
// $("#searchResultPanel").innerHTML = str;
});
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
$("#suggestId_start").blur();
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
$("#collect_btn").removeClass("weui_btn_disabled");
// $("#searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
});
//点击从此页收藏目的地 这个按钮只有未禁用状态下才起作用
$("#collect_btn").click(function() {
var userName = JSON.parse(localStorage.userJson)[0].username;
//操作数据库 加密
var n1 = $("#collectInput").val();
var allData = "USERNAME:" + userName + ",ENDSTATION:" + n1;
allData = encrypt(allData);
if(!$(this).hasClass("weui_btn_disabled")) {
$.ajax({
type: "post",
url: Url,
data: {
"type": "end_collections",
"DATA": "" + allData + ""
},
async: false,
cache: false,
dataType: "jsonp", //数据类型为jsonp
jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
jsonpCallback: "jsonpCallback1",
success: function(data) {
if(data.CODE == 1) {
if(data.MSG == "已存在") { //判断目的地已收藏过
$.alert("该目的地已收藏过啦", "提示");
} else {
$.alert("收藏成功", "提示", function() {
window.location.reload(); //收藏成功后刷新本页面
});
}
}
},
error: function(data) {
$.alert("连接超时请检查网络设置", "提示");
}
});
}
});
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/panwan1483/jilin__hzs.git
git@gitee.com:panwan1483/jilin__hzs.git
panwan1483
jilin__hzs
畅行吉林_hzs
master

搜索帮助