moliparty/molistar-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

充值代理的登录页

Browse Source
This commit is contained in:
yujiacong
2025-10-11 17:00:29 +08:00
parent 2e37405c0c
commit 5ca5ad326a
4 changed files with 762 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
view/molistar/modules/h5Income/css/loginRechargeAgent.css Normal file
View File

@@ -0,0 +1,211 @@
html,
body {
width: 100%;
}
.back {
position: fixed;
z-index: 9;
width: 0.7466666667rem;
height: 0.7466666667rem;
left: 0.5333333333rem;
top: 0.6666666667rem;
display: none;
}
.header {
width: 100%;
height: 9.3066666667rem;
background: url(../images/login/bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto -2rem;
}
.header .logo {
position: absolute;
width: 5.68rem;
height: 2.2133333333rem;
left: 50%;
top: 2.6533333333rem;
transform: translateX(-50%);
}
.box {
width: 10rem;
height: 14.6133333333rem;
border-radius: 0.6666666667rem 0.6666666667rem 0px 0px;
margin: 0 auto;
position: relative;
z-index: 2;
background: #fff;
overflow: hidden;
}
.box input {
background: transparent;
border: none;
outline: none;
box-sizing: border-box;
padding: 0 0.64rem;
}
.box input::placeholder {
font-size: 0.3733333333rem;
color: #8A8CAB;
}
.box .idLogin .id {
width: 8.08rem;
height: 1.3866666667rem;
background: #F3F5FA;
border-radius: 1.3866666667rem;
margin: 1.28rem auto 0.5333333333rem;
display: block;
}
.box .idLogin .password {
width: 8.08rem;
height: 1.3866666667rem;
background: #F3F5FA;
border-radius: 1.3866666667rem;
margin: 0rem auto 1.0666666667rem;
display: block;
}
.box .phone {
display: none;
}
.box .phone .phoneNumberBox {
width: 8.08rem;
height: 1.3866666667rem;
background: #F3F5FA;
border-radius: 1.3866666667rem;
margin: 1.28rem auto 0.5333333333rem;
box-sizing: border-box;
padding-left: 0.64rem;
}
.box .phone .phoneNumberBox .prefix {
float: left;
font-size: 0.4266666667rem;
color: #1F1B4F;
font-weight: bold;
height: 100%;
line-height: 1.3866666667rem;
}
.box .phone .phoneNumberBox .prefix b {
font-size: 0.4266666667rem;
color: #1F1B4F;
font-weight: bold;
margin-right: 0.1066666667rem;
}
.box .phone .phoneNumberBox .prefix img {
display: inline-block;
width: 0.32rem;
height: 0.2133333333rem;
vertical-align: middle;
}
.box .phone .phoneNumberBox .phoneNumber {
float: right;
height: 100%;
padding: 0;
width: 5.5rem;
}
.box .phone .codeBox {
width: 8.08rem;
height: 1.3866666667rem;
background: #F3F5FA;
border-radius: 1.3866666667rem;
margin: 0rem auto 1.0666666667rem;
}
.box .phone .codeBox .code {
float: left;
width: 5rem;
height: 100%;
}
.box .phone .codeBox .codeBut {
text-align: center;
color: #FFFFFF;
font-size: 0.3733333333rem;
border-radius: 1.0133333333rem;
width: 2.72rem;
height: 1.0133333333rem;
line-height: 1.0133333333rem;
float: right;
margin-top: 0.1866666667rem;
margin-right: 0.2133333333rem;
background: #14D2A6 100%;
}
.box .phone .codeBox .codeButTime {
background: #DED1FD;
}
.box .but {
width: 8.08rem;
height: 1.28rem;
border-radius: 1.28rem;
line-height: 1.28rem;
text-align: center;
color: #FFFFFF;
font-size: 0.4266666667rem;
margin: 0 auto 0.5333333333rem;
background: linear-gradient(270deg, #A5EEC8, #ABF5E3);
}
.box .butok {
background: linear-gradient(270deg, #57E193, #14D2A6);
}
.box .hone {
width: 8.08rem;
height: 1.28rem;
border-radius: 1.28rem;
line-height: 1.28rem;
text-align: center;
color: #fff;
font-size: 0.4266666667rem;
margin: 0 auto 0.5333333333rem;
background: linear-gradient(270deg, #57E193, #14D2A6);
}
.area {
position: fixed;
z-index: 99;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
display: none;
}
.area .box {
width: 100%;
height: 8.88rem;
border-radius: 0.7466666667rem 0.7466666667rem 0 0;
background: #fff;
position: absolute;
bottom: 0;
left: 0;
}
.area .box p {
width: 100%;
text-align: center;
height: 1.8133333333rem;
line-height: 1.8133333333rem;
border-bottom: 0.0133333333rem solid #EBEEF5;
font-size: 0.48rem;
font-weight: bold;
color: #1F1B4F;
}
.area .box .list {
position: absolute;
left: 0;
top: 1.8133333333rem;
overflow-y: scroll;
width: 100%;
height: 7rem;
}
.area .box .list span {
display: block;
width: 100%;
height: 1.36rem;
line-height: 1.36rem;
font-size: 0.4266666667rem;
border-bottom: 0.0133333333rem solid #EBEEF5;
text-align: center;
color: #1F1B4F;
}
.area .box .list .active {
background: #F3F5FA;
}

249
view/molistar/modules/h5Income/css/loginRechargeAgent.scss Normal file
View File

@@ -0,0 +1,249 @@
@function px2rem($px) {
@return $px / 75+rem;
}
html,
body {
width: 100%;
}
.back {
position: fixed;
z-index: 9;
width: px2rem(56);
height: px2rem(56);
left: px2rem(40);
top: px2rem(50);
display: none;
}
.header {
width: 100%;
height: px2rem(698);
background: url(../images/login/bg.png) no-repeat;
background-size: 100% 100%;
position: relative;
margin: 0 auto -2rem;
.logo {
position: absolute;
width: px2rem(426);
height: px2rem(166);
left: 50%;
top: px2rem(199);
transform: translateX(-50%);
}
}
.box {
width: px2rem(750);
height: px2rem(1096);
border-radius: px2rem(50) px2rem(50) 0px 0px;
margin: 0 auto;
position: relative;
z-index: 2;
background: #fff;
overflow: hidden;
input {
background: transparent;
border: none;
outline: none;
box-sizing: border-box;
padding: 0 px2rem(48);
&::placeholder {
font-size: px2rem(28);
color: #8A8CAB;
}
}
.idLogin {
.id {
width: px2rem(606);
height: px2rem(104);
background: #F3F5FA;
border-radius: px2rem(104);
margin: px2rem(96) auto px2rem(40);
display: block;
}
.password {
width: px2rem(606);
height: px2rem(104);
background: #F3F5FA;
border-radius: px2rem(104);
margin: px2rem(0) auto px2rem(80);
display: block;
}
}
.phone {
display: none;
.phoneNumberBox {
width: px2rem(606);
height: px2rem(104);
background: #F3F5FA;
border-radius: px2rem(104);
margin: px2rem(96) auto px2rem(40);
box-sizing: border-box;
padding-left: px2rem(48);
.prefix {
float: left;
font-size: px2rem(32);
color: #1F1B4F;
font-weight: bold;
height: 100%;
line-height: px2rem(104);
b {
font-size: px2rem(32);
color: #1F1B4F;
font-weight: bold;
margin-right: px2rem(8);
}
img {
display: inline-block;
width: px2rem(24);
height: px2rem(16);
vertical-align: middle;
}
}
.phoneNumber {
float: right;
height: 100%;
padding: 0;
width: 5.5rem;
}
}
.codeBox {
width: px2rem(606);
height: px2rem(104);
background: #F3F5FA;
border-radius: px2rem(104);
margin: px2rem(0) auto px2rem(80);
.code {
float: left;
width: 5rem;
height: 100%;
}
.codeBut {
text-align: center;
color: #FFFFFF;
font-size: px2rem(28);
border-radius: px2rem(76);
width: px2rem(204);
height: px2rem(76);
line-height: px2rem(76);
float: right;
margin-top: px2rem(14);
margin-right: px2rem(16);
background: #14D2A6 100%;
}
.codeButTime {
background: #DED1FD;
}
}
}
.but {
width: px2rem(606);
height: px2rem(96);
border-radius: px2rem(96);
line-height: px2rem(96);
text-align: center;
color: #FFFFFF;
font-size: px2rem(32);
margin: 0 auto px2rem(40);
// background: linear-gradient(90deg, #EEDCFF 0%, #DEE4FF 50%, #CCF8F9 100%);
background: linear-gradient(270deg, #A5EEC8, #ABF5E3);
}
.butok {
background: linear-gradient(270deg, #57E193, #14D2A6);
// background: url(../images/login/butBg.png) no-repeat;
// background-size: 100% 100%;
}
.hone {
width: px2rem(606);
height: px2rem(96);
border-radius: px2rem(96);
line-height: px2rem(96);
text-align: center;
color: #fff;
font-size: px2rem(32);
margin: 0 auto px2rem(40);
background: linear-gradient(270deg, #57E193, #14D2A6);
// border: 1px solid #D480FF;
// background: url(../images/login/butBg.png) no-repeat;
// background-size: 100% 100%;
}
}
.area {
position: fixed;
z-index: 99;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, .6);
display: none;
.box {
width: 100%;
height: px2rem(666);
border-radius: px2rem(56) px2rem(56) 0 0;
background: #fff;
position: absolute;
bottom: 0;
left: 0;
p {
width: 100%;
text-align: center;
height: px2rem(136);
line-height: px2rem(136);
border-bottom: px2rem(1) solid #EBEEF5;
font-size: px2rem(36);
font-weight: bold;
color: #1F1B4F;
}
.list {
position: absolute;
left: 0;
top: px2rem(136);
overflow-y: scroll;
width: 100%;
height: 7rem;
span {
display: block;
width: 100%;
height: px2rem(102);
line-height: px2rem(102);
font-size: px2rem(32);
border-bottom: px2rem(1) solid #EBEEF5;
text-align: center;
color: #1F1B4F;
}
.active {
background: #F3F5FA;
}
}
}
}

259
view/molistar/modules/h5Income/js/loginRechargeAgent.js Normal file
View File

@@ -0,0 +1,259 @@
let urlPrefix = getUrlPrefix()
let browser = checkVersion()
let env = EnvCheck();
if (env == 'test') {
new VConsole();
}
// 封裝layer消息提醒框
let layerIndex
const showLoading = (content = '加載中...') => {
layer.open({
type: 2,
shadeClose: false,
content,
success (e) {
layerIndex = $(e).attr('index')
}
})
}
const hideLoading = (index) => {
layer.close(index)
}
const toastMsg = (content = '操作完成', time = 2) => {
layer.open({
content,
time,
skin: 'msg'
})
}
var idOrPhone = true;//判斷id登入或手機號登入
var times = 0;//倒計時計時器
var isClick = true;//判斷是否再次獲取驗證碼
var token;
$(function () {
setTimeout(function () {
getInfoFromClient()
setTimeout(function () {
getAreaInfo();
}, 100)
})
})
// 獲取驗證碼接口
function getCode () {
var mobileDes = encryptDes(`${$('.box .phone .phoneNumberBox .prefix b').text()}${$('.box .phone .phoneNumberBox .phoneNumber').val()}`, '1ea53d260ecf11e7b56e00163e046a26');
showLoading()
networkRequest({
type: 'POST',
url: urlPrefix + '/sms/getCode',
headers: { "pub_uid": "0" },
data: { mobile: mobileDes, phoneAreaCode: $('.box .phone .phoneNumberBox .prefix b').text(), type: 2 },
success (res) {
if (res.code === 200) {
toastMsg(res.message);
$('.box .phone .codeBox .codeBut').addClass('codeButTime')
timerFun()
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤，請退出重進')
}
})
}
// ticket接口
function ticket () {
showLoading()
networkRequest({
type: 'POST',
url: urlPrefix + '/oauth/ticket',
data: { issue_type: "multi", access_token: token },
success (res) {
if (res.code === 200) {
sessionStorage.setItem("uid", res.data.uid);
sessionStorage.setItem("ticket", res.data.tickets[0].ticket);
window.location.href = './index.html'
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤，請退出重進')
}
})
}
// 登入接口
function oauthToken () {
if (idOrPhone) {
var phone = encryptDes($('.box .idLogin .id').val(), '1ea53d260ecf11e7b56e00163e046a26');
var password = encryptDes($('.box .idLogin .password').val(), '1ea53d260ecf11e7b56e00163e046a26');
} else {
var phone = $('.box .phone .phoneNumberBox .phoneNumber').val();
var code = $('.box .phone .codeBox .code').val();
var phoneAreaCode = $('.box .phone .phoneNumberBox .prefix b').text();
}
showLoading()
networkRequest({
type: 'POST',
url: urlPrefix + '/oauth/h5/token',
data: idOrPhone ? {
"grant_type": "password", phone, password,
} :
{ grant_type: 'verify_code', phoneAreaCode, phone:`${phoneAreaCode}${phone}`, code,},
success (res) {
if (res.code === 200) {
token = res.data.access_token;
// ticket();
sessionStorage.setItem("uid", res.data.uid);
sessionStorage.setItem("ticket", token);
window.location.href = urlPrefix + '/molistar/modules/rechargeAgent/index.html#/myTransfer'
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤，請退出重進')
}
})
}
// 區號接口
function getAreaInfo () {
showLoading()
networkRequest({
type: 'GEt',
url: urlPrefix + '/areaInfo/list',
success (res) {
if (res.code === 200) {
var str = '';
res.data.forEach((res, i) => {
str += `
<span>${res.name} +${res.phoneAreaCode}</span>
`
});
$('.area .box .list').append(str);
$('.area .box .list span').click(function () {
$('.box .phone .phoneNumberBox .prefix b').text($(this).text().replace(/[^0-9]/gi, ''));
$(this).addClass('active').siblings().removeClass('active');
})
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤，請退出重進')
}
})
}
// 點擊獲取驗證碼
$('.box .phone .codeBox .codeBut').click(function () {
var val = $('.box .phone .phoneNumberBox .phoneNumber').val();
if (val == '') {
toastMsg('請輸入手機號')
return
}
if (isClick) {
getCode()
}
})
// 倒計時
function timerFun () {
isClick = false;
times = 59;
// 開啟定時器
var timer = setInterval(function () {
// 判斷剩余秒數
if (times == 0) {
// 清除定時器和復原按鈕
clearInterval(timer);
$('.box .phone .codeBox .codeBut').text('獲取驗證碼');
$('.box .phone .codeBox .codeBut').removeClass('codeButTime')
isClick = true;
} else {
$('.box .phone .codeBox .codeBut').text(`${times}秒`);
times--;
}
}, 1000);
}
// 切換登入方式按鈕
$('.box .hone').click(function () {
idOrPhone = !idOrPhone;
$('.box .phone .phoneNumberBox .phoneNumber,.box .phone .codeBox .code,.box .idLogin .id,.box .idLogin .password').val('');
$('.box .but').removeClass('butok');
if (idOrPhone) {
$('.idLogin').show();
$('.phone').hide();
$('.box .hone').text('MoliStar手機號登錄');
} else {
$('.phone').show();
$('.idLogin').hide();
$('.box .hone').text('MoliStar賬號登錄');
}
})
// 打開選擇區號
$('.box .phone .phoneNumberBox .prefix').click(function () {
$('.area').show();
return false;
})
// 關閉選擇區號
$('.area').click(function () {
$('.area').hide();
return false;
})
//監聽是否可以登入函數
function phoneFun () {
var num1 = $(".box .idLogin .id").val();
var num2 = $(".box .idLogin .password").val();
var num3 = $(".box .phone .phoneNumberBox .phoneNumber").val();
var num4 = $(".box .phone .codeBox .code").val();
if (num1 != '' && num2 != '' || num3 != '' && num4 != '') {
$('.box .but').addClass('butok');
return true;
} else {
$('.box .but').removeClass('butok');
return false;
}
}
// 監聽賬號輸入
$(".box .idLogin .id").on("keyup", function () {
phoneFun()
});
// 監聽密碼輸入
$(".box .idLogin .password").on("keyup", function () {
phoneFun()
});
// 監聽手機號輸入
$(".box .phone .phoneNumberBox .phoneNumber").on("keyup", function () {
phoneFun()
});
// 監聽驗證碼輸入
$(".box .phone .codeBox .code").on("keyup", function () {
phoneFun()
});
// 登入按鈕
$('.box .but').click(function () {
if (phoneFun()) {
oauthToken();
}
})
//DES加密
const encryptDes = (message, key) => {
var keyHex = CryptoJS.enc.Utf8.parse(key);
var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
}

43
view/molistar/modules/h5Income/loginRechargeAgent.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; 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">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>登入</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="./css/login.css?v=1.0">
</head>
<body>
<!-- 返回 -->
<img src="./images/back.png" alt="" class="back">
<!-- 頭部 -->
<div class="header">
<!-- <img src="./images/login/logo.png" alt="" class="logo"> -->
</div>
<!-- 底部登入 -->
<div class="box">
<!-- 賬號登入 -->
<div class="idLogin">
<input type="number" class="id" placeholder="請輸入MoliStar賬號">
<input type="password" class="password" placeholder="請輸入密碼">
</div>
<!-- 登入按鈕 -->
<div class="but">登錄</div>
</div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
<script src="../../common/js/jquery-3.2.1.min.js"></script>
<script src="../../common/js/common2.js"></script>
<script src="../../common/js/layer.js"></script>
<script src="../../common/js/vconsole.min.js"></script>
<script src="../../common/js/route-constant.js"></script>
<script src="../../common/js/svga.min.js"></script>
<script src="../../common/js/crypto-js.js"></script>
<script src="./js/login.js?v=1.1"></script>