< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0,user-scalable=no" >
< title> 本地模式网络切换< / title>
< style>
. pay- container{
position : relative;
overflow : auto;
background- size: cover;
}
. cardBody{
margin- top: 0 ;
padding : 1rem . 75rem;
}
. main{
width : 100 % ;
background : #FFFFFF ;
padding : . 5rem 0 1rem;
border- radius: 1rem;
}
. pay- container . cardBody . main . buyPackageBtn{
width : 100 % ;
height : 2 . 75rem;
background : #467EFD;
border- radius: 1 . 375rem;
margin : 1rem auto 0 ;
font- size: 1 . 125rem;
font- family: PingFangSC;
border : none;
cursor : pointer;
color : #FFFFFF ;
}
. main . item{
display : flex;
align- items: center;
justify- content: space- between;
padding : 0 1rem;
font- size: 1rem;
font- family: PingFangSC;
color : #333333 ;
height : 3 . 5rem;
border- bottom: 1px solid #F0F0F0 ;
}
#toast {
visibility : hidden;
min- width: 250px;
margin- left: - 125px;
background- color: rgba ( 51 , 51 , 51 , 0.6 ) ;
color : #fff;
text- align: center;
border- radius: 5px;
padding : 16px;
position : fixed;
z- index: 1 ;
left : 50 % ;
bottom : 50 % ;
font- size: 17px;
opacity : 0 ;
transition : opacity 0 . 5s;
}
#toast. show {
visibility : visible;
opacity : 1 ;
}
. disabled {
pointer- events: none;
opacity : 0.6 ;
}
< / style>
< / head>
< body>
< div id= "toast" > < / div>
< div class = "pay-container" id= "pay-container" >
< div class = "cardBody" >
< div class = "main" >
< div class = "item" >
< span> 名称:< / span>
< span id= "name" > < / span>
< / div>
< div class = "item" >
< span> 年龄:< / span>
< span id= "age" > < / span>
< / div>
< div class = "item" >
< span> 性别:< / span>
< span id= "sex" > < / span>
< / div>
< div class = "item" >
< span> 电话:< / span>
< span id= "phone" > < / span>
< / div>
< button type= "button" class = "buyPackageBtn" id= "dxBtn" onclick= "handleChangeNet('0')" > 姓名一< / button>
< button type= "button" class = "buyPackageBtn" id= "ltBtn" onclick= "handleChangeNet('1')" > 姓名二< / button>
< / div>
< / div>
< / div>
< script type= "text/javascript" >
function showToast ( message, duration = 2000 ) {
var toast = document. getElementById ( "toast" ) ;
toast. innerHTML = message;
toast. className = "show" ;
setTimeout ( function ( ) {
toast. className = toast. className. replace ( "show" , "" ) ;
} , duration) ;
}
function queryStringify ( obj ) {
let str = ''
for ( let k in obj) str += ` ${ k} = ${ obj[ k] } & `
return str. slice ( 0 , - 1 )
}
function ajax ( options ) {
let defaultoptions = {
url : "" ,
method : "GET" ,
async : true ,
data : { } ,
headers : { } ,
success : function ( ) { } ,
error : function ( ) { }
}
let { url, method, async, data, headers, success, error } = {
... defaultoptions,
... options
}
if ( typeof data === 'object' && headers[ "content-type" ] ?. indexOf ( "json" ) > - 1 ) {
data = JSON . stringify ( data)
} else {
data = queryStringify ( data)
}
if ( / ^get$ / i . test ( method) && data) url += '?' + data
const xhr = new XMLHttpRequest ( )
xhr. open ( method, url, async)
xhr. onload = function ( ) {
if ( ! / ^2\d{2}$ / . test ( xhr. status) ) {
error ( ` 错误状态码: ${ xhr. status} ` )
return
}
try {
let result = JSON . parse ( xhr. responseText)
success ( result)
} catch ( err) {
error ( '解析失败 ! 因为后端返回的结果不是 json 格式字符串' )
}
}
for ( let k in headers) xhr. setRequestHeader ( k, headers[ k] )
if ( / ^get$ / i . test ( method) ) {
xhr. send ( )
} else {
xhr. send ( data)
}
}
function handleChangeNet ( num ) {
ajax ( {
url : "xxx" ,
method : "POST" ,
data : {
} ,
headers : {
"content-type" : "application/json;charset=utf-8"
} ,
success : function ( res ) {
if ( res. error_code== '0' ) {
showToast ( "操作成功" ) ;
getDeviceInfo ( )
} else {
showToast ( "操作失败" ) ;
}
} ,
error : function ( err ) {
console. log ( "error" , err)
}
} )
}
function getDeviceInfo ( ) {
ajax ( {
url : "***" ,
method : "POST" ,
data : {
action : "101" ,
} ,
headers : {
"content-type" : "application/json;charset=utf-8"
} ,
success : function ( res ) {
if ( res. error_code== '0' ) {
var imeiEl = document. getElementById ( "imei" ) ;
var nameEl = document. getElementById ( "wifiName" ) ;
var passWordEl = document. getElementById ( "wifiPassword" ) ;
var curNetEl = document. getElementById ( "curNet" ) ;
var dxEl = document. getElementById ( "dxBtn" ) ;
var ltEl = document. getElementById ( "ltBtn" ) ;
imeiEl. innerHTML = res. device_info. imei;
nameEl. innerHTML = res. device_info. ssid;
passWordEl. innerHTML = res. device_info. password;
if ( res. device_info. operator== '中国电信' ) {
curNetEl. innerHTML = '中国电信' ;
ltEl. style. backgroundColor = '#467EFD' ;
ltEl. classList. remove ( 'disabled' ) ;
dxEl. style. backgroundColor = '#ccc' ;
dxEl. classList. add ( 'disabled' ) ;
} else {
curNetEl. innerHTML = '中国联通' ;
dxEl. style. backgroundColor = '#467EFD' ;
dxEl. classList. remove ( 'disabled' ) ;
ltEl. style. backgroundColor = '#ccc' ;
ltEl. classList. add ( 'disabled' ) ;
}
} else {
showToast ( "***" ) ;
}
} ,
error : function ( err ) {
console. log ( "error" , err)
}
} )
}
getDeviceInfo ( )
< / script>
< / body>
< / html>