You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

408 lines
13 KiB
HTML

<div id="login_box">
<link href="__CSS__/unlr.css" rel="stylesheet" >
<if condition="ACTION_NAME eq 'publish2'">
<link href="__CSS__/iconfont.css" rel="stylesheet" >
<style>
body{min-height: 100%;}
input, select, button, textarea {
outline: none;
font-family: inherit;
-webkit-appearance: none;
border: none;
color: #18b1ea;
}
.trunker {}
.trunker .xg-back {display: block;
position: absolute;
top: 0px;
left: 0px;
width: .8rem;
height: .8rem;
}
.trunker .xg-back img{width:100%;height:100%;}
.banner {
background: url(__IMG__/user_bg.png) center 0 no-repeat;
background-size: 100% 100%;
text-align: center;
color: #FFF;
padding-top: 1rem;
}
.login-banner .imgbox {
padding: .62rem 0;
}
.login-banner .imgbox img {
width: 1.8rem;
height: 1.8rem;
border-radius: 100%;
background: #FFF;
display: block;
margin: 2.8vw auto 0rem;
box-shadow: 0 0 0 4px rgba(255,255,255,.6);
}
.t-form .login-box {
margin: .6rem .5rem;
font-size: .34rem;
color: #777;
}
.login-form .input-group {
padding: .1rem 11% .1rem 10%;
}
.t-form .input-group .input-prefix {
width: 10%;
}
.t-form .input-group .input-suffix {
width: 11%;
}
.t-form .input-group .txt, .t-form .input-group .getcode, .register-box .input-group .getcode2, .t-form .input-mark {
font-size: .39rem;
}
.username_record_list {
position: absolute;
top: 1rem;
left: 0;right:0;
z-index: 100;
background: #FFF;
width: 100%;
border: 1px solid #cdcdcd;
border-radius: 3px;
padding: 0.1rem 0;
}
.username_record_list li {
padding: 0.1rem 0.25rem;
position: relative;
}
.username_record_list li .name {font-size:0.34rem;display:inline-block;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.username_record_list li .delete_btn {float:right;background:url(__IMG__/trade1/icon_normal_shan.png) center center no-repeat;background-size:100% 100%;width:.4rem;height:.4rem;}
#mobile:focus~.username_record_list {display:block;}
.t-form .btn-group .submit {
background: #18B1EA;
color: #FFF;
font-size: .42rem;
width: 100%;
border: none;
border-radius: 2rem;
padding: 1.5vw 0;
}
.t-form .agree {
margin: .3rem 0 .6rem;
}
.t-form .link-group {
padding: .1rem 0;
}
.t-form .input-group .input-fix {
position: absolute;
top: .4rem;
text-align: center;
}
.t-form .input-group .input-fix .iconfont {
font-size: .48rem;
color: #999;
height: 100%;
line-height: 1.4;
}
.login-form .input-group .txt::-webkit-input-placeholder {
color: #999;
}
.login-form .input-group .txt:-moz-placeholder {
color: #999;
}
.login-form .input-group .txt::-moz-placeholder {
color: #999;
}
.login-form .input-group .txt:-ms-input-placeholder {
color: #999;
}
@media screen and (max-width:500px) {
.t-form .login-box {font-size:.32rem;}
.t-form .input-group .txt,.t-form .input-group .getcode,.register-box .input-group .getcode2,.t-form .input-mark {font-size:.38rem;}
}
@media screen and (max-width:400px) {
.t-form .login-box {font-size:.30rem;}
}
@media screen and (max-width:350px) {
.t-form .login-box {font-size:.28rem;}
.t-form .input-group .txt,.t-form .input-group .getcode,.register-box .input-group .getcode2,.t-form .input-mark {font-size:.36rem;}
}
</style>
<else />
<style>
.username_record_list {position:absolute;top:100%;left:0;right:0;z-index:100;background:#FFF;width:100%;border:1px solid #cdcdcd;border-radius:3px;padding:0.6rem 0;}
.username_record_list li {padding:0.6rem 0.9rem 0.6rem 5.5%;position:relative;}
.username_record_list li .name {display:inline-block;width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.username_record_list li .delete_btn {float:right;background:url(__IMG__/trade1/icon_normal_shan.png) center center no-repeat;background-size:100% 100%;width:2rem;height:2rem;}
#mobile:focus~.username_record_list {display:block;}
.trunker .xg-back {display: block;
position: absolute;
top: 0px;
left: 0px;
width: 4.1rem;
height: 4.1rem;
}
.login-form .input-group .txt {border:none;padding:.4rem 1% .4rem 6%;}
.login-form .input-group .txt::-webkit-input-placeholder {
color: #999;
}
.login-form .input-group .txt:-moz-placeholder {
color: #999;
}
.login-form .input-group .txt::-moz-placeholder {
color: #999;
}
.login-form .input-group .txt:-ms-input-placeholder {
color: #999;
}
.trunker .container .hbtn {
width: 6rem;
height: 5rem;
position: absolute;
top: 0;
display: block;
text-align: center;
}
.trunker .container .caption {
position:absolute;top:0;left:0;right:0;margin:0 6rem;text-align:center;color:#FFF;
font-weight: normal;
height: 3rem;
font-size: 2.5rem;
padding: 1rem 1rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.trunker .container .hbtn .iconfont {
font-size: 3.6rem;
color: #FFF;
margin: .8rem 0;
display: block;
}
@media screen and (max-width: 450px){
.trunker .container .caption {
font-size: 2.2rem;
height: 2.8rem;
margin: 0 4rem;
}
.trunker .container .hbtn {
font-size: 1.4rem;
}
.trunker .container .hbtn .iconfont {
font-size: 3.2rem;
margin: 1rem 0;
}
}
@media screen and (max-width: 350px){
.trunker .container .caption {
font-size: 2rem;
height: 2.2rem;
margin: 0 4rem;
}
.trunker .container .hbtn {
width: 4rem;
}
.trunker .container .hbtn .iconfont {
font-size: 3rem;
margin: .7rem 0;
}
}
</style>
</if>
<section class="trunker" style="min-height:auto;margin-bottom:0;">
<section class="container" style="position:relative;height:100vh;">
<if condition="ACTION_NAME eq 'publish' or ACTION_NAME eq 'record' ">
<a href="{:U('Trade/index')}" class="hbtn back"><i class="iconfont icon-drop-left"></i></a>
<else />
<!--<a id="close_login" href="javascript:;" class="hbtn back"><i class="iconfont icon-drop-left"></i></a>-->
</if>
<h1 class="caption">用户登录</h1>
<div class="banner login-banner">
<div class="wrap">
<div class="imgbox">
<img src="__IMG__/portrait_not.png">
</div>
</div>
</div>
<div class="t-form login-form">
<form class="login-box" id="login_form" url="{$url}">
<div class="form-group clearfix">
<div class="input-group clearfix" id="url_list">
<span class="input-fix input-prefix"><i class="iconfont icon-mobile"></i></span>
<!-- <span class="input-fix input-suffix jsdel" style="right:8.5%;"><i class="iconfont icon-error3"></i></span>
-->
<span class="input-fix input-suffix jsdrop"><i class="iconfont icon-drop-down"></i></span>
<input type="text" name="" id="mobile" class="txt" placeholder="请输入账号/手机号">
</div>
<div class="input-group clearfix">
<span class="input-fix input-prefix"><i class="iconfont icon-lock"></i></span>
<input type="password" name="" id="password" class="txt" placeholder="请输入密码">
</div>
</div>
<p class="agree"><!-- 注册账号表示您同意<a href="">最终用户协议</a> --></p>
<div class="btn-group">
<input type="button" class="submit" value="登录">
</div>
<div class="link-group clearfix">
<a href="{:U('User/step1')}" class="register-btn">账号注册 | </a><a href="{:U('User/step')}" class="register-btn">&nbsp;手机注册</a>
<a href="{:U('User/forget')}" class="forget-btn" style="color: #999">忘记密码</a>
</div>
</form>
</div>
<footer class="footer">
<div class="foot-nav">
<div class="foot-nav-list">
<a href="{:U('Index/index')}" class="">
<i class="iconfont icon-home"></i>
<p>首页</p>
</a>
<a href="{:U('Trade/index')}" class="">
<i class="iconfont icon-trade"></i>
<p>交易</p>
</a>
<a href="{:U('Shop/index')}" class="">
<i class="iconfont icon-shop"></i>
<p>商城</p>
</a>
<a href="{:U('Gift/index')}" class="">
<i class="iconfont icon-gift"></i>
<p>礼包</p>
</a>
<a href="{:U('User/index')}" class="on">
<i class="iconfont icon-user"></i>
<p>我的</p>
</a>
</div>
</div>
</footer>
</section>
</section>
<div class="pop pop-window">
<div class="pop-box pop-sign">
<div class="pop-wrap"></div>
</div>
</div>
<div class="popmsg pop-dialog"></div>
<script src="__JS__/pop.lwx.min.js"></script>
<script>
$(document).keyup(function(event){
if(event.keyCode == 13){
$('.submit').click();
}
});
$('#close_login').click(function() {
var p = $('.popwin').fadeOut(200);
setTimeout(function(){p.find('#login_box').remove();},210);
return false;
});
function delete_url(e,str,i) {
var arr = str.split(',');
var index = arr.indexOf(i);
if(index>-1)
arr.splice(index,1);
lwx.setItem('username',arr.join(','));
$(e).closest('li').remove();
if($('#url_list #username_record_list li').length<1) {
$('#url_list #username_record_list').remove();
}
}
function input_name(e,i) {
$('#mobile').val(i);
$(e).closest('#username_record_list').hide();
}
var username = lwx.getItem('username');
if(username) {
var uname = username.split(',');
var html = '<ul class="username_record_list" id="username_record_list" style="display:none;">';
for(var i=0,len=uname.length;i<len;i++) {
html += '<li><span class="name" onclick="input_name(this,&#39;'+uname[i]+'&#39;)">'+uname[i]+'</span><a class="delete_btn" onclick="delete_url(this,&#39;'+username+'&#39;,&#39;'+uname[i]+'&#39;)" href="javascript:;"></a></li>';
}
html += '</ul>';
$('#url_list').append(html);
}
$('#mobile').focus(function() {
if($('#url_list #username_record_list').length>0) {
$('#url_list #username_record_list').show();
}
return false;
});
$('.jsdrop').on('click',function() {
var url = $('#url_list #username_record_list');
if(url.is(':visible')) {
url.hide();$(this).find('i').removeClass('icon-drop-up').addClass('icon-drop-down');
} else {
url.show();$(this).find('i').removeClass('icon-drop-down').addClass('icon-drop-up');
}
return false;
});
$('body').click(function(event) {
var e = event || window.event;
var target = $(e.target);
if(target.closest('#url_list').length<1 && target.attr('id')!='url_list') {
$('#url_list #username_record_list').hide();
}
});
var pmsg = $('.popmsg').pop();
$('.submit').click(function(event) {
var mobile = $.trim($('#mobile').val());
var password = $.trim($('#password').val());
if (mobile) {
if (password) {
$.ajax({
type:'POST',
url:'{:U("User/login")}',
data:{'phone':mobile,'password':password},
dataType:"Json",
success:function(data){
if(data.status == 1){
pmsg.msg(data.msg);
var username = lwx.getItem('username');
if(username) {
var arr = username.split(',');
if(arr.length>=5) {arr = arr.splice(0,4);}
for(var i=0,len=arr.length;i<len;i++) {
if((!arr[i] && typeof(arr[i]) != 0) || arr[i] == mobile) {arr.splice(i,1);}
}
arr.unshift(mobile);
mobile = arr.join(',');
}
lwx.setItem('username',mobile);
var url = $('#login_form').attr('url');
setTimeout(function(){
if(url) {
window.location.href = url;
} else
window.location.href = "{:U('Trade/detail',array('id'=>$_POST['id']))}";
},1500);
}else{
pmsg.msg(data.msg);
return false;
}
}
});
} else{
pmsg.msg('请输入密码');event.preventDefault();
}
} else {
pmsg.msg('请输入手机号码');event.preventDefault();
}
});
$(".jsdel").click(function(){
$('#mobile').val("");
})
</script>
</div>