diff --git a/view/molistar/modules/h5Income/css/loginRechargeAgent.css b/view/molistar/modules/h5Income/css/loginRechargeAgent.css index 788dd7ca..40c54e0d 100644 --- a/view/molistar/modules/h5Income/css/loginRechargeAgent.css +++ b/view/molistar/modules/h5Income/css/loginRechargeAgent.css @@ -1,6 +1,7 @@ html, body { width: 100%; + background: linear-gradient(181deg, #59C5FF 0%, #3571FF 100%); } .back { @@ -16,18 +17,27 @@ body { .header { width: 100%; height: 9.3066666667rem; - background: url(../images/login/bg.png) no-repeat; + background: url(../images/login/header.png) no-repeat; background-size: 100% 100%; - position: relative; margin: 0 auto -2rem; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } .header .logo { - position: absolute; - width: 5.68rem; - height: 2.2133333333rem; - left: 50%; - top: 2.6533333333rem; - transform: translateX(-50%); + width: 2.72rem; + height: 3.7333333333rem; +} +.header .ID_Login { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: 0.64rem; + color: #FFFFFF; + text-align: center; + font-style: normal; + text-transform: none; + margin-top: 1.04rem; } .box { @@ -37,7 +47,6 @@ body { margin: 0 auto; position: relative; z-index: 2; - background: #fff; overflow: hidden; } .box input { @@ -49,21 +58,23 @@ body { } .box input::placeholder { font-size: 0.3733333333rem; - color: #8A8CAB; + color: #FFFFFF; } .box .idLogin .id { width: 8.08rem; height: 1.3866666667rem; - background: #F3F5FA; - border-radius: 1.3866666667rem; + background: rgba(255, 255, 255, 0); + border-radius: 4.6133333333rem; + border: 0.0266666667rem solid #FFFFFF; margin: 1.28rem auto 0.5333333333rem; display: block; } .box .idLogin .password { width: 8.08rem; height: 1.3866666667rem; - background: #F3F5FA; - border-radius: 1.3866666667rem; + background: rgba(255, 255, 255, 0); + border-radius: 4.6133333333rem; + border: 0.0266666667rem solid #FFFFFF; margin: 0rem auto 1.0666666667rem; display: block; } @@ -139,10 +150,10 @@ body { border-radius: 1.28rem; line-height: 1.28rem; text-align: center; - color: #FFFFFF; - font-size: 0.4266666667rem; + color: #3571FF; + font-size: 0.4rem; margin: 0 auto 0.5333333333rem; - background: linear-gradient(270deg, #A5EEC8, #ABF5E3); + background: #FFFFFF; } .box .butok { background: linear-gradient(270deg, #57E193, #14D2A6); diff --git a/view/molistar/modules/h5Income/css/loginRechargeAgent.scss b/view/molistar/modules/h5Income/css/loginRechargeAgent.scss index 89081746..27777a95 100644 --- a/view/molistar/modules/h5Income/css/loginRechargeAgent.scss +++ b/view/molistar/modules/h5Income/css/loginRechargeAgent.scss @@ -5,6 +5,7 @@ html, body { width: 100%; + background: linear-gradient(181deg, #59C5FF 0%, #3571FF 100%); } .back { @@ -20,19 +21,27 @@ body { .header { width: 100%; height: px2rem(698); - background: url(../images/login/bg.png) no-repeat; + background: url(../images/login/header.png) no-repeat; background-size: 100% 100%; - position: relative; margin: 0 auto -2rem; - + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; .logo { - position: absolute; - width: px2rem(426); - height: px2rem(166); - left: 50%; - top: px2rem(199); - transform: translateX(-50%); + width: px2rem(204); + height: px2rem(280); + } + .ID_Login { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: px2rem(48); + color: #FFFFFF; + text-align: center; + font-style: normal; + text-transform: none; + margin-top: px2rem(78); } } @@ -43,7 +52,7 @@ body { margin: 0 auto; position: relative; z-index: 2; - background: #fff; + // background: #fff; overflow: hidden; input { @@ -55,7 +64,7 @@ body { &::placeholder { font-size: px2rem(28); - color: #8A8CAB; + color: #FFFFFF; } } @@ -63,17 +72,20 @@ body { .id { width: px2rem(606); height: px2rem(104); - background: #F3F5FA; - border-radius: px2rem(104); + background: rgba(255, 255, 255, 0); + border-radius: px2rem(346); + border: px2rem(2) solid #FFFFFF; margin: px2rem(96) auto px2rem(40); display: block; + } .password { width: px2rem(606); height: px2rem(104); - background: #F3F5FA; - border-radius: px2rem(104); + background: rgba(255, 255, 255, 0); + border-radius: px2rem(346); + border: px2rem(2) solid #FFFFFF; margin: px2rem(0) auto px2rem(80); display: block; } @@ -163,11 +175,11 @@ body { border-radius: px2rem(96); line-height: px2rem(96); text-align: center; - color: #FFFFFF; - font-size: px2rem(32); + color: #3571FF; + font-size: px2rem(30); margin: 0 auto px2rem(40); // background: linear-gradient(90deg, #EEDCFF 0%, #DEE4FF 50%, #CCF8F9 100%); - background: linear-gradient(270deg, #A5EEC8, #ABF5E3); + background: #FFFFFF; } .butok { diff --git a/view/molistar/modules/h5Income/images/login/header.png b/view/molistar/modules/h5Income/images/login/header.png new file mode 100644 index 00000000..e0801287 Binary files /dev/null and b/view/molistar/modules/h5Income/images/login/header.png differ diff --git a/view/molistar/modules/h5Income/images/login/top_logo.png b/view/molistar/modules/h5Income/images/login/top_logo.png new file mode 100644 index 00000000..a4540ba4 Binary files /dev/null and b/view/molistar/modules/h5Income/images/login/top_logo.png differ diff --git a/view/molistar/modules/h5Income/js/loginRechargeAgent.js b/view/molistar/modules/h5Income/js/loginRechargeAgent.js index 5fe56764..e3578a66 100644 --- a/view/molistar/modules/h5Income/js/loginRechargeAgent.js +++ b/view/molistar/modules/h5Income/js/loginRechargeAgent.js @@ -1,17 +1,18 @@ let urlPrefix = getUrlPrefix() let browser = checkVersion() let env = EnvCheck(); +const urlData = getQueryString(); if (env == 'test') { new VConsole(); } // 封裝layer消息提醒框 let layerIndex -const showLoading = (content = '加載中...') => { +const showLoading = (content = 'Loading...') => { layer.open({ type: 2, shadeClose: false, content, - success (e) { + success(e) { layerIndex = $(e).attr('index') } }) @@ -19,7 +20,7 @@ const showLoading = (content = '加載中...') => { const hideLoading = (index) => { layer.close(index) } -const toastMsg = (content = '操作完成', time = 2) => { +const toastMsg = (content = 'Operation completed', time = 2) => { layer.open({ content, time, @@ -34,13 +35,12 @@ $(function () { setTimeout(function () { getInfoFromClient() setTimeout(function () { - getAreaInfo(); + bodyScroolFun(true); }, 100) }) }) - // 獲取驗證碼接口 -function getCode () { +function getCode() { var mobileDes = encryptDes(`${$('.box .phone .phoneNumberBox .prefix b').text()}${$('.box .phone .phoneNumberBox .phoneNumber').val()}`, '1ea53d260ecf11e7b56e00163e046a26'); showLoading() networkRequest({ @@ -48,7 +48,7 @@ function getCode () { url: urlPrefix + '/sms/getCode', headers: { "pub_uid": "0" }, data: { mobile: mobileDes, phoneAreaCode: $('.box .phone .phoneNumberBox .prefix b').text(), type: 2 }, - success (res) { + success(res) { if (res.code === 200) { toastMsg(res.message); $('.box .phone .codeBox .codeBut').addClass('codeButTime') @@ -58,20 +58,20 @@ function getCode () { } hideLoading(layerIndex) }, - error (err) { + error(err) { hideLoading(layerIndex) - toastMsg('網絡錯誤,請退出重進') + toastMsg('Network error, please exit and re-enter') } }) } // ticket接口 -function ticket () { +function ticket() { showLoading() networkRequest({ type: 'POST', url: urlPrefix + '/oauth/ticket', data: { issue_type: "multi", access_token: token }, - success (res) { + success(res) { if (res.code === 200) { sessionStorage.setItem("uid", res.data.uid); sessionStorage.setItem("ticket", res.data.tickets[0].ticket); @@ -81,56 +81,55 @@ function ticket () { } hideLoading(layerIndex) }, - error (err) { + error(err) { hideLoading(layerIndex) - toastMsg('網絡錯誤,請退出重進') + toastMsg('Network error, please exit and re-enter') } }) } // 登入接口 -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(); - } +function oauthToken() { + var phone = encryptDes($('.box .idLogin .id').val(), '1ea53d260ecf11e7b56e00163e046a26'); + var password = encryptDes($('.box .idLogin .password').val(), '1ea53d260ecf11e7b56e00163e046a26'); + showLoading() networkRequest({ type: 'POST', url: urlPrefix + '/oauth/h5/token', - data: idOrPhone ? { + data: { "grant_type": "password", phone, password, - } : - { grant_type: 'verify_code', phoneAreaCode, phone:`${phoneAreaCode}${phone}`, code,}, - success (res) { + }, + success(res) { if (res.code === 200) { token = res.data.access_token; // ticket(); sessionStorage.setItem("uid", res.data.uid); sessionStorage.setItem("ticket", token); - switch(res.data.partitionId){ - case 1: - sessionStorage.setItem("language", 'en'); - break; - case 2: - sessionStorage.setItem("language", 'ar'); - break; - case 4: - sessionStorage.setItem("language", 'zh'); - break; - case 8: - sessionStorage.setItem("language", 'tr'); - break; - case 16: - sessionStorage.setItem("language", 'en'); - break; - case 32: - sessionStorage.setItem("language", 'ru'); - break; + if (urlData.lang) { + sessionStorage.setItem("language", urlData.lang); + } else { + switch (res.data.partitionId) { + case 1: + sessionStorage.setItem("language", 'en'); + break; + case 2: + sessionStorage.setItem("language", 'ar'); + break; + case 4: + sessionStorage.setItem("language", 'zh'); + break; + case 8: + sessionStorage.setItem("language", 'tr'); + break; + case 16: + sessionStorage.setItem("language", 'en'); + break; + case 32: + sessionStorage.setItem("language", 'ru'); + break; + } } + window.location.href = urlPrefix + '/molistar/modules/rechargeAgent/index.html#/myTransfer' } else { @@ -138,134 +137,16 @@ function oauthToken () { } hideLoading(layerIndex) }, - error (err) { + error(err) { hideLoading(layerIndex) - toastMsg('網絡錯誤,請退出重進') + toastMsg('Network error, please exit and re-enter') } }) } -// 區號接口 -function getAreaInfo () { - showLoading() - networkRequest({ - type: 'GEt', - url: urlPrefix + '/areaInfo/list', - success (res) { - if (res.code === 200) { - var str = ''; - res.data.forEach((res, i) => { - str += ` - ${res.name} +${res.phoneAreaCode} - ` - }); - $('.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(); - } + oauthToken(); }) //DES加密 diff --git a/view/molistar/modules/h5Income/loginRechargeAgent.html b/view/molistar/modules/h5Income/loginRechargeAgent.html index 8aa3b44f..ff0948aa 100644 --- a/view/molistar/modules/h5Income/loginRechargeAgent.html +++ b/view/molistar/modules/h5Income/loginRechargeAgent.html @@ -17,17 +17,18 @@
- + +
ID Login
- - + +
-
登錄
+
Login