充值代理登录页 - 更换样式及登录时多语言判断

2025-10-14 14:44:04 +08:00
parent 74a0c4bea7
commit 3a4d9f2e81
6 changed files with 110 additions and 205 deletions
--- 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);
--- 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 {
--- a/view/molistar/modules/h5Income/images/login/header.png
+++ b/view/molistar/modules/h5Income/images/login/header.png
--- a/view/molistar/modules/h5Income/images/login/top_logo.png
+++ b/view/molistar/modules/h5Income/images/login/top_logo.png
--- 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 += `

-                        <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();
-    }
+    oauthToken();
 })

 //DES加密
--- a/view/molistar/modules/h5Income/loginRechargeAgent.html
+++ b/view/molistar/modules/h5Income/loginRechargeAgent.html
@@ -17,17 +17,18 @@
    <img src="./images/back.png" alt="" class="back">
    <!-- 頭部 -->
    <div class="header">
-        <!-- <img src="./images/login/logo.png" alt="" class="logo"> -->
+        <img src="./images/login/top_logo.png" alt="" class="logo">
+        <div class="ID_Login">ID Login</div>
    </div>
    <!-- 底部登入 -->
    <div class="box">
        <!-- 賬號登入 -->
        <div class="idLogin">
-            <input type="number" class="id" placeholder="請輸入MoliStar賬號">
-            <input type="password" class="password" placeholder="請輸入密碼">
+            <input type="number" class="id" placeholder="Please enter the account">
+            <input type="password" class="password" placeholder="Please enter the password">
        </div>
        <!-- 登入按鈕 -->
-        <div class="but">登錄</div>
+        <div class="but">Login</div>
    </div>
 </body>