Files
chaozhanggui/pluss-wap-page/src/main/resources/templates/th_account_bind.html

379 lines
20 KiB
HTML

<!DOCTYPE html>
<html lang="en" style="font-size: 16px;" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta data-n-head="true" data-hid="description" name="description" content="商户公众号">
<meta data-n-head="true" http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta data-n-head="true" http-equiv="Pragma" content="no-cache">
<meta data-n-head="true" http-equiv="Expires" content="0">
<title data-n-head="true">账号绑定</title>
<script src="/wap/resources/js/jquery.min.js"></script>
<title>账号绑定</title>
<style>
*{-webkit-tap-highlight-color:transparent;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box}*,blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;vertical-align:baseline}html{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;word-spacing:.03125rem;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-box-sizing:border-box;box-sizing:border-box}img{border:0 none;vertical-align:top}em,i{font-style:normal}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}html{-webkit-tap-highlight-color:rgba(0,0,0,0)}#__layout,#__nuxt,body,html{min-height:100%;width:100%;background-color:#f6f6f6;color:#333}input{border:none;outline:none;color:#666;caret-color:#f04144}::-moz-input-placeholder{color:#ccc}:-ms-input-placeholder{color:#ccc}::-webkit-input-placeholder{color:#ccc}::-ms-input-placeholder{color:#ccc}::placeholder{color:#ccc}input:disabled{color:#666;background:none;opacity:1;filter:alpha(opacity=100);-webkit-text-fill-color:#666}input:disabled::-moz-input-placeholder{color:#ccc;-webkit-text-fill-color:#ccc}input:disabled:-ms-input-placeholder{color:#ccc;-webkit-text-fill-color:#ccc}input:disabled::-webkit-input-placeholder{color:#ccc;-webkit-text-fill-color:#ccc}input:disabled::-ms-input-placeholder{color:#ccc;-webkit-text-fill-color:#ccc}input:disabled::placeholder{color:#ccc;-webkit-text-fill-color:#ccc}.absolute-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.absolute-center,.vertical-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.horizontal-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.active-color{color:#f04144}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-jurisdiction{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding-top:10.3125rem}.no-jurisdiction .no-jurisdiction-img{width:6.65625rem}.no-jurisdiction .no-jurisdiction-img img{width:100%;height:auto}.no-jurisdiction .no-jurisdiction-text{margin-top:1.5625rem;font-size:.875rem;text-align:center;color:#999}.forbid-root-scroll{position:fixed;overflow:hidden;height:100%}.thin-border,.thin-border-bottom,.thin-border-left,.thin-border-right,.thin-border-top{position:relative}.thin-border-top:before{top:0;left:0;border-bottom:.0625rem solid #e5e5e5}.thin-border-bottom:before,.thin-border-top:before{content:"";position:absolute;width:200%;height:.0625rem;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5)}.thin-border-bottom:before{bottom:0;border-bottom:.0625rem solid #e6e6e6}.thin-border-right:before{right:0;height:200%;border-right:.0625rem solid #ccc}.thin-border-left:before,.thin-border-right:before{content:"";position:absolute;top:0;width:.0625rem;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(.5);transform:scale(.5)}.thin-border-left:before{left:0;height:1.5625rem;border-left:.0625rem solid #ccc}.thin-border:before{content:"";position:absolute;top:0;left:0;width:200%;height:200%;border:.0625rem solid #ccc;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:.125rem;-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 0;transform-origin:0 0;pointer-events:none}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-block{display:block}.vertical-align-m{vertical-align:middle}.vertical-align-t{vertical-align:top}.float-r{float:right}.float-l{float:left}.slide-in-down-enter-active,.slide-in-down-leave-active{-webkit-transition:all .2s;transition:all .2s;-webkit-transform:translateY(0);transform:translateY(0)}.slide-in-down-enter,.slide-in-down-leave-to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.slide-in-up-enter-active,.slide-in-up-leave-active{-webkit-transition:.2s;transition:.2s;-webkit-transform:translate(0);transform:translate(0)}.slide-in-up-enter,.slide-in-up-leave-to{-webkit-transform:translateY(100%);transform:translateY(100%)}.zoom-in-enter-active,.zoom-leave-active{-webkit-transition:.2s;transition:.2s;-webkit-transform:scale(1);transform:scale(1)}.zoom-in-enter,.zoom-leave-to{-webkit-transform:scale(0);transform:scale(0)}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .2s;transition:opacity .2s}.fade-enter,.fade-leave-to{opacity:0}.slide-left-enter,.slide-right-leave-active{opacity:0;-webkit-transform:translate(100%);transform:translate(100%);-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.slide-left-leave-active,.slide-right-enter{opacity:0;-webkit-transform:translate(-100%);transform:translate(-100%);-webkit-transition:all .5s cubic-bezier(.55,0,.1,1);transition:all .5s cubic-bezier(.55,0,.1,1)}
</style>
<style>
*{
margin: 0;
padding: 0;
vertical-align: baseline;
}
html{
font-family: Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
word-spacing: .03125rem;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0);
word-spacing: .03125rem;
}
body{
min-height: 100%;
width: 100%;
background-color: #f6f6f6;
color: #333;
display: block;
}
/*.nuxt-progress{*/
/* width: 0%;*/
/* height: 2px;*/
/* background-color: #f04144;*/
/* opacity: 0;*/
/* position: fixed;*/
/* top: 0;*/
/* left: 0;*/
/* right: 0;*/
/* !*height: .0625rem;*!*/
/* !*width: 0;*!*/
/* !*-webkit-transition: width .2s,opacity .4s;*!*/
/* transition: width .2s,opacity .4s;*/
/* !*opacity: 1;*!*/
/* !*background-color: #efc14e;*!*/
/* z-index: 999999;*/
/*}*/
.account-binding{
width: 19.0625rem;
height: 20.25rem;
margin: 2.5rem auto 0;
}
.account-binding .account-binding-logo{
height: 8.71875rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.absolute-center, .vertical-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.account-binding .account-binding-form{
overflow: hidden;
width: 100%;
height: 5.625rem;
padding: 0 .625rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
-webkit-box-shadow: 0 0.09375rem 0.3125rem 0 rgb(0 0 0 / 5%);
box-shadow: 0 0.09375rem 0.3125rem 0 rgb(0 0 0 / 5%);
border-radius: .25rem;
}
.f-input{
height: 2.8125rem;
padding: .03125rem .8125rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
}
.absolute-center, .vertical-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.absolute-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.absolute-center, .vertical-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.f-input .f-input-title{
height: 100%;
margin-right: 1.125rem;
}
.f-input .f-input-value{
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 100%;
}
.f-input .f-input-icon{
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 1.34375rem;
height: .8125rem;
}
img {
border: 0 none;
vertical-align: top;
}
.account-binding .account-binding-form #account-icon, .account-binding .account-binding-form #pwd-icon{
width: 1.125rem;
height: 1.125rem;
}
.f-input .f-input-title .f-input-title-icon{
width: 1.125rem;
height: 1.125rem;
}
.f-input .f-input-value input{
display: block;
width: 100%;
height: 100%;
font-size: 1rem;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
input {
border: none;
outline: none;
color: #666;
caret-color: #FD7663;
}
.account-binding .account-binding-btn{
position: relative;
height: 5.90625rem;
}
.f-button{
width: 100%;
height: 2.75rem;
border-radius: .25rem;
font-size: 1.0625rem;
background-color: #FD7663;
color: #fff;
}
.account-binding .account-binding-btn .acb-button{
position: absolute;
bottom: 0;
}
.account-binding .account-binding-logo{
height: 8.71875rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.account-binding .account-binding-logo .abl-img{
height: 4.375rem;
margin-bottom: 1.46875rem;
}
.account-binding .account-binding-logo .abl-img img{
height: 100%;
width: auto;
border-radius: 5px;
}
.account-binding .account-binding-form #account-icon, .account-binding .account-binding-form #pwd-icon{
width: 1.125rem;
height: 1.125rem;
}
.account-binding .account-binding-form .h-line{
width: 100%;
height: .063125rem;
background-color: #e5e5e5;
}
.f-input .f-input-icon img{
width: auto;
height: 100%;
}
.f-toast{
z-index: 99;
position: fixed;
top: 48%;
left: 50%;
max-width: 80%;
min-width: 10.375rem;
padding: .78125rem .625rem .625rem;
border-radius: .3125rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
background: rgba(51,51,51,.7);
color: #fff;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.f-toast .f-toast-icon{
height: .96875rem;
margin-bottom: .71875rem;
}
.f-toast .f-toast-icon img{
width: auto;
height: 100%;
}
.f-popup{
z-index: 0;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
}
.f-loading{
position: fixed;
z-index: 1;
top: 40%;
left: 37%;
padding: 1rem 1rem;
display: none;
border-radius: 5px;
background-color: #fff;
}
.loading-icon{
margin: 0 0 0 .8rem;
}
.loading-txt{
margin-top: .5rem;
}
</style>
</head>
<body>
<div class="container">
<!-- <div class="nuxt-progress"></div>-->
<input type="hidden" name="openid" id="openid" th:value="${openid}">
<div class="content">
<div class="account-binding">
<div class="account-binding-logo vertical-center">
<div class="abl-img">
<img src="https://www.shouyinbei.net/resources/images/logo.png"/>
</div>
<div class="abl-text">
绑定您的银收客账户
</div>
</div>
<div class="account-binding-form">
<div class="f-input vertical-center">
<div class="f-input-title absolute-center">
<div class="f-input-title-icon absolute-center">
<img src="/wap/resources/images/account_icon.2635004.png" id="account-icon" />
</div>
</div>
<div class="f-input-value vertical-center">
<input placeholder="请输入账号" id="loginName" class="vertical-center ellipsis">
</div>
<div class="f-input-icon vertical-center" style="display: none" data-id="loginName">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAADLklEQVRIia2WTWhdVRSFv7XPRaEFBy0tOir+oQit1RKNREEdGSpYaP2F6kSROlDxZyg6cNTiUMGKiAoiNQWtoogTxSpIrBnYSrGKbaJpNVXU1qB5757l4J2H6c19Mdau0WOfdfd39zn77XM1MTGBJHLOdLtdIgJJ2KZouaTrbQ8DFwLnlviM7SPA58CHtn+SdMqzKSUiAttUDNZK4AngLtur2gyS+j9ngTeAp21/0+aNAZCtwFfAQ0ArpKFlku6RdEDSY0sFbbf9CrB6CYCmzgJ2SHq9H+hXHf19LYEdwOOnAWjqdkljADlnbBOdToe5uTlyzneklFrLPk1truv6yU6nQ13XvYqAVTnnF+d1Wl+HgR+XkPRXYEETSHpK0nrbRGnB7ZKWNXz7JZ0PXAR8uwjkZ+Ay4GLg45b1520TdV2fY3tri6FT1zW2T0bEOuDLFs8ksBY4Wnam0zRExFW2Lw3bo0BqSXIF8E5d1+ScZyNimF7L9zUNDANHAWy/DNzYTGKbqqq2hKSRFggAKaWNKaWxbrfbh10J/AYYWN+HAC8Adw/KI+maAC6Z9w9f8DYRsTmltKvA/oqIoVLtTLE9B9w7CFLyXFABa1q6rQm71fZeSXdKOlSWVgKvAqOLQYpWBCw67+bDRiJiuW1yzgBnAwO3vSEF8P0SjMckrc45HyxbSM552vZ5wMElPH8iJH33L6ZJYIPtmW63i6T3Ukp7y2iZtT0E7B9YSu/8pwL4YhHILwUyXdc1EfGspJsiYiSltKvATtoesr3YC08EsGfA4mFJ64DjOWciYqekB+CfBkkpjZXz+jMiLpd0oJnENrbfjJzzEeDTFtCU7R9K0pck3ddMUFr/7RI6YfvrljzHIuKjqly1D9K7kufrOuC1MgNvaSvZNpJuBj6wPQ1sanokPSwJjY+P9wPPAI+0JTxdSXo3pbQRIKqqoqoqIuJR25+cQc5kRNxWzmjBVX4t8NkZgExFxAbgj36g7ZthGNj5PyBvAWslHZ8fbP0KknQ/sAXY9x8Ah4BttjfRm/CnaOCcs73b9m5JNwCjkq4G1gAriuV3euNrH/C+7T2DbgGAvwHNP28e196upwAAAABJRU5ErkJggg==" />
</div>
</div>
<div class="h-line"></div>
<div class="f-input vertical-center">
<div class="f-input-title absolute-center">
<div class="f-input-title-icon absolute-center">
<img src="/wap/resources/images/pwd_icon.6459233.png" id="pwd-icon" />
</div>
</div>
<div class="f-input-value vertical-center" >
<input type="password" id="password" placeholder="请输入密码" class="vertical-center ellipsis">
</div>
<div class="f-input-icon vertical-center" data-id="password" style="display: none">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAADLklEQVRIia2WTWhdVRSFv7XPRaEFBy0tOir+oQit1RKNREEdGSpYaP2F6kSROlDxZyg6cNTiUMGKiAoiNQWtoogTxSpIrBnYSrGKbaJpNVXU1qB5757l4J2H6c19Mdau0WOfdfd39zn77XM1MTGBJHLOdLtdIgJJ2KZouaTrbQ8DFwLnlviM7SPA58CHtn+SdMqzKSUiAttUDNZK4AngLtur2gyS+j9ngTeAp21/0+aNAZCtwFfAQ0ArpKFlku6RdEDSY0sFbbf9CrB6CYCmzgJ2SHq9H+hXHf19LYEdwOOnAWjqdkljADlnbBOdToe5uTlyzneklFrLPk1truv6yU6nQ13XvYqAVTnnF+d1Wl+HgR+XkPRXYEETSHpK0nrbRGnB7ZKWNXz7JZ0PXAR8uwjkZ+Ay4GLg45b1520TdV2fY3tri6FT1zW2T0bEOuDLFs8ksBY4Wnam0zRExFW2Lw3bo0BqSXIF8E5d1+ScZyNimF7L9zUNDANHAWy/DNzYTGKbqqq2hKSRFggAKaWNKaWxbrfbh10J/AYYWN+HAC8Adw/KI+maAC6Z9w9f8DYRsTmltKvA/oqIoVLtTLE9B9w7CFLyXFABa1q6rQm71fZeSXdKOlSWVgKvAqOLQYpWBCw67+bDRiJiuW1yzgBnAwO3vSEF8P0SjMckrc45HyxbSM552vZ5wMElPH8iJH33L6ZJYIPtmW63i6T3Ukp7y2iZtT0E7B9YSu/8pwL4YhHILwUyXdc1EfGspJsiYiSltKvATtoesr3YC08EsGfA4mFJ64DjOWciYqekB+CfBkkpjZXz+jMiLpd0oJnENrbfjJzzEeDTFtCU7R9K0pck3ddMUFr/7RI6YfvrljzHIuKjqly1D9K7kufrOuC1MgNvaSvZNpJuBj6wPQ1sanokPSwJjY+P9wPPAI+0JTxdSXo3pbQRIKqqoqoqIuJR25+cQc5kRNxWzmjBVX4t8NkZgExFxAbgj36g7ZthGNj5PyBvAWslHZ8fbP0KknQ/sAXY9x8Ah4BttjfRm/CnaOCcs73b9m5JNwCjkq4G1gAriuV3euNrH/C+7T2DbgGAvwHNP28e196upwAAAABJRU5ErkJggg==" />
</div>
</div>
</div>
<div class="account-binding-btn">
<div class="f-button absolute-center acb-button" onclick="bind()">绑定</div>
</div>
</div>
</div>
<div class="f-toast ellipsis" style="display: none">
<div class="f-toast-text"></div>
</div>
<div class="f-popup jsPop" style="display: none"></div>
<div class="f-loading">
<img src="/wap/resources/images/loading-2.gif" class="loading-icon" />
<div class="loading-txt">加载中...</div>
</div>
</div>
<script>
function bind(){
let $loginName = $("#loginName").val();
if(!$loginName){
$(".f-toast").show().html("账号不能为空!");
hideMsg();
return;
}
let $password = $("#password").val();
if(!$password){
$(".f-toast").show().html("密码不能为空!");
hideMsg();
return;
}
let $openid = $("#openid").val();
if(!$openid || $openid == "null"){
$(".f-toast").show().html("缺失参数!");
hideMsg();
return;
}
$(".jsPop").show();
$(".f-loading").show();
let $url = "/wap/merchant/account/toBind"
$.ajax({
url:$url,
type:"post",
data:{"loginName":$loginName,"password":$password,"openid":$openid},
dataType:"json",
success:function (res){
$(".jsPop").hide();
$(".f-loading").hide();
$(".f-toast").show().html(res.message);
hideMsg();
if(res.code == 200){
setTimeout("toLocation("+res.data+")",500);
}
},error:function (error){
$(".jsPop").hide();
$(".f-loading").hide();
$(".f-toast").show().html("系统异常");
}
})
}
$(document).keydown(function (event){
$(event.target).parent("div").next().show();
})
$(".f-input-icon").click(function (event){
let $data = $(event.currentTarget).data();
$("#"+$data.id).val("");
$(event.currentTarget).hide();
})
function toLocation(id){
window.location.href = `/wap/merchant/account/list/` + id;
}
function hideMsg(){
setTimeout(function (){
$(".f-toast").hide();
},1000)
}
</script>
</body>
</html>