From 5ca5ad326a2bd828705a969637a5cc346020b38c Mon Sep 17 00:00:00 2001
From: yujiacong <1016029365@qq.com>
Date: Sat, 11 Oct 2025 17:00:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=85=E5=80=BC=E4=BB=A3=E7=90=86=E7=9A=84?=
=?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../h5Income/css/loginRechargeAgent.css | 211 ++++++++++++++
.../h5Income/css/loginRechargeAgent.scss | 249 +++++++++++++++++
.../modules/h5Income/js/loginRechargeAgent.js | 259 ++++++++++++++++++
.../modules/h5Income/loginRechargeAgent.html | 43 +++
4 files changed, 762 insertions(+)
create mode 100644 view/molistar/modules/h5Income/css/loginRechargeAgent.css
create mode 100644 view/molistar/modules/h5Income/css/loginRechargeAgent.scss
create mode 100644 view/molistar/modules/h5Income/js/loginRechargeAgent.js
create mode 100644 view/molistar/modules/h5Income/loginRechargeAgent.html
diff --git a/view/molistar/modules/h5Income/css/loginRechargeAgent.css b/view/molistar/modules/h5Income/css/loginRechargeAgent.css
new file mode 100644
index 00000000..788dd7ca
--- /dev/null
+++ b/view/molistar/modules/h5Income/css/loginRechargeAgent.css
@@ -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;
+}
\ No newline at end of file
diff --git a/view/molistar/modules/h5Income/css/loginRechargeAgent.scss b/view/molistar/modules/h5Income/css/loginRechargeAgent.scss
new file mode 100644
index 00000000..89081746
--- /dev/null
+++ b/view/molistar/modules/h5Income/css/loginRechargeAgent.scss
@@ -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;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/view/molistar/modules/h5Income/js/loginRechargeAgent.js b/view/molistar/modules/h5Income/js/loginRechargeAgent.js
new file mode 100644
index 00000000..438eaf0a
--- /dev/null
+++ b/view/molistar/modules/h5Income/js/loginRechargeAgent.js
@@ -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 += `
+
+ ${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();
+ }
+})
+
+//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();
+}
\ No newline at end of file
diff --git a/view/molistar/modules/h5Income/loginRechargeAgent.html b/view/molistar/modules/h5Income/loginRechargeAgent.html
new file mode 100644
index 00000000..f2c18a24
--- /dev/null
+++ b/view/molistar/modules/h5Income/loginRechargeAgent.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+ 登入
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file