123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- <!doctype html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <title>选择城市</title>
- <style type="text/css">
- * { font-size: .12rem;color: #444;padding: 0; }
- body{background:#F3F3F3;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);max-width: 600px;margin: 0 auto;
- font-family: "PingFang SC,Microsoft YaHei,SourceHanSansCN-Normal,HiraginoSansGB,HiraginoSans-W3,Helvetica Neue,Helvetica,STHeiTi,sans-serif";}
- html{overflow-x:hidden;-webkit-text-size-adjust:none;}
- ul,li,dl,dt,dd{display:block;list-style:none;}
- img{border:0;max-width:100%;height: auto;}
- .clear{background:none;border:0;clear:both;display:block;float:none;font-size:0;overflow:hidden;visibility:hidden;width:0;height:0;}
- a{text-decoration:none;outline:none;}
- /*城市弹层*/
- .container{width:100%;margin-top: .5rem;}
- .letter{width:.1rem;overflow:hidden;position:fixed;bottom:15%;right:.05rem;text-align:center;}
- .letter ul li a{text-decoration:none;color: #5D7DFF;font-size: .1rem;}
- .city{overflow:hidden;padding:.1rem;background: #fff;}
- .city-list{width:100%;overflow:hidden;position: relative;}
- .city-list:after {content: "";display: inline-block;width: 95%;height: .01rem;margin: auto;background: #D8D8D8;opacity: .3;position: absolute;bottom: 0;left: 50%;transform: translate(-50%,0);}
- .city-list .city-letter{color:#222;font-size:.16rem;display:inline-block;padding-top:15px;padding-bottom:5px;width:100%;}
- .city-list p{color:#222;width:95%;height: .2rem;line-height:.2rem;font-size: .14rem;margin:.1rem 0;cursor:pointer;}
- .top {width: 100%;height: .5rem;position: fixed;top: 0;left: 0;background: #f7f7f7;z-index: 999;}
- .top img {width: .2rem;height: .2rem;position: absolute;left: .1rem;top: 50%;transform: translate(0,-50%);}
- .top h1 {font-size: .14rem;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);margin: 0;}
- .title {height: .37rem;line-height: .37rem;padding-left: .1rem;background: #F3F3F3;color: #444;font-size: .12rem;}
- .hot {margin-bottom: .1rem;background: #fff;}
- .list {margin-top: -.04rem;padding-bottom: .1rem;padding-left: .28rem;display: flex;flex-wrap: wrap;}
- .list li {display: inline-block;width: .8rem;height: .3rem;margin-right: .3rem;border-radius: .04rem;line-height: .3rem;text-align: center;background: #F3F3F3;color: #222;font-size: .12rem;margin-top: .14rem;overflow: scroll;}
- </style>
- <script>
- document.documentElement.style.fontSize=document.documentElement.clientWidth/375*100+"px";
- window.onresize=function(){
- document.documentElement.style.fontSize=document.documentElement.clientWidth/375*100+"px";
- }
- </script>
- </head>
- <body>
- <div class="top">
- <img src="./img/back1.png" alt="">
- <h1>贷款信息</h1>
- </div>
- <div class="container">
- <div class="hot">
- <div class="title">热门城市</div>
- <div class="list">
- </div>
- </div>
- <div class="city">
- </div>
- </div>
- <div class="letter">
- <ul>
- <li><a href="javascript:;">A</a></li>
- <li><a href="javascript:;">B</a></li>
- <li><a href="javascript:;">C</a></li>
- <li><a href="javascript:;">D</a></li>
- <li><a href="javascript:;">E</a></li>
- <li><a href="javascript:;">F</a></li>
- <li><a href="javascript:;">G</a></li>
- <li><a href="javascript:;">H</a></li>
- <li><a href="javascript:;">J</a></li>
- <li><a href="javascript:;">K</a></li>
- <li><a href="javascript:;">L</a></li>
- <li><a href="javascript:;">M</a></li>
- <li><a href="javascript:;">N</a></li>
- <li><a href="javascript:;">P</a></li>
- <li><a href="javascript:;">Q</a></li>
- <li><a href="javascript:;">R</a></li>
- <li><a href="javascript:;">S</a></li>
- <li><a href="javascript:;">T</a></li>
- <li><a href="javascript:;">W</a></li>
- <li><a href="javascript:;">X</a></li>
- <li><a href="javascript:;">Y</a></li>
- <li><a href="javascript:;">Z</a></li>
- </ul>
- </div>
- <script src="./common/jquery-2.1.0.js" type="text/javascript"></script>
- <script type="text/javascript">
- var hotList=[],hotHtml='',cityhtml='',firstCity=''
- $().ready(function(){
- getHotList();
- getCityList();
- })
- var params=parseQueryString(window.location.href)
- // 选择城市
- $('body').on('click', '.city-list p', function () {
- $(this).attr("style","color:#5D7DFF");
- if(params.typeId) {
- window.location="index.html?source="+params.source+"&phone="+params.phone+"&uid="+params.uid+"&token="+params.token+"&city="+$(this).text()+"&typeId="+params.typeId
- }else {
- window.location="index.html?source="+params.source+"&phone="+params.phone+"&uid="+params.uid+"&token="+params.token+"&city="+$(this).text()
- }
- });
- function check(obj) {
- obj.style.color="#5D7DFF";
- if(params.typeId) {
- window.location="index.html?source="+params.source+"&phone="+params.phone+"&uid="+params.uid+"&token="+params.token+"&city="+$(obj).text()+"&typeId="+params.typeId
- }else {
- window.location="index.html?source="+params.source+"&phone="+params.phone+"&uid="+params.uid+"&token="+params.token+"&city="+$(obj).text()
- }
- }
- // 单词点击滚动
- $('body').on('click', '.letter a', function () {
- var s = $(this).html();
- $(window).scrollTop($('#' + s + '1').offset().top-50);
- });
- //获取地址栏参数
- function parseQueryString(url) {
- var urlObj = {};
- var reg = /([^?=&]+)=([^?=&]+)/g;
- url.replace(reg, function($0, $1, $2) {
- urlObj[$1] = decodeURIComponent($2);
- })
- return urlObj;
- }
- // 热门城市
- function getHotList(){
- $.ajax({
- url:'/user/cityList',
- type:"get",
- success:function(res){
- if(res.errno==0&&res.rst) {
- hotList=res.rst
- for(var i in hotList) {
- hotHtml+='<li onclick="check(this)">'+hotList[i]+'</li>'
- }
- $(".list").html(hotHtml)
- }else {
- $(".hot").hide();
- }
- }
- })
- }
- // 城市列表
- function getCityList(){
- $.ajax({
- url:'/user/userCity',
- type:"post",
- success:function(res){
- if(res.errno==0&&res.rst) {
- var cityList=res.rst
- for(var i in cityList) {
- if(cityList[i].date.length!=0) {
- cityhtml=""
- for(var j in cityList[i].date) {
- cityhtml+='<p>'+cityList[i].date[j]+'</p>'
- }
- firstCity+='<div class="city-list"><span class="city-letter" id="'+(cityList[i].no).toUpperCase()+'1">'+cityList[i].no.toUpperCase()+'</span>'+cityhtml+'</div>'
- }
- }
- $(".city").html(firstCity)
- }else {
- $(".hot").hide();
- }
- }
- })
- }
- $(".top img").on("click",function(){
- window.history.back(-1);
- })
- </script>
- </div>
- </body>
- </html>
|