javascript
复制代码
<!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; /* 使toast居中 */
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%; /* 距离底部30px */
font-size: 17px; /* 字体大小 */
opacity: 0; /* 透明度 */
transition: opacity 0.5s; /* 过渡效果 */
}
/* 显示Toast时的样式 */
#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">
// 显示Toast的函数
function showToast(message, duration = 2000) {
var toast = document.getElementById("toast");
toast.innerHTML = message; // 设置Toast内容
toast.className = "show"; // 添加显示类
// 在指定时间后隐藏Toast
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)
}
// 封装 ajax
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)
}
// // 如果是 get 请求, 并且有参数, 那么直接组装一下 url 信息
if (/^get$/i.test(method) && data) url += '?' + data
// // 4. 发送请求
const xhr = new XMLHttpRequest()
xhr.open(method, url, async)
xhr.onload = function () {
if (!/^2\d{2}$/.test(xhr.status)) {
// console.log(error)
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>