wcheng81
/
LSQZrzyAPP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
							<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置服务器的IP地址和端口号</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 引入mui样式 -->
		<link href="css/mui.min.css" rel="stylesheet" />
		<!-- 引入app样式 -->
		<link href="css/app.css" rel="stylesheet" />
		<!-- 引入App增样式 -->
		<link rel="stylesheet" href="css/app.new.css">
		<!-- 引入字体 -->
		<link rel="stylesheet" href="fonts/font-jt.css">
		<style type="text/css">
			body {
				background-image: url(./img/back/sys_set.png);
				height: 100%;
				background-size: 100% 100%;
			}

			/* 提示标签样式 */
			.mui-content p {
				font-size: 14px;
				font-weight: bold;
				margin: 20px;
				color: rgb(203, 203, 203);
			}

			/* 追加行样式 */
			.mui-content-padded {
				height: 120px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			/* 追加航按钮样式 */
			.mui-content-padded>button {
				width: 200px;
				height: 44px;
			}

			/* 设置行样式 */
			.cr-set-row {
				height: 40px;
				line-height: 40px;
				display: flex;
				flex-direction: row;
				margin-left: 20px;
				margin-right: 20px;
				margin-top: 20px;
				color: rgb(203, 203, 203);
				align-items: center;
			}

			/* 设置行所有子元素文字大小 */
			.cr-set-row * {
				font-size: 13px;
			}

			/* 设置行标题 */
			.cr-set-row>div {
				width: 100px;
				background-color: rgb(57, 85, 187);
				font-size: 13px !important;
				text-align: center;
				border-left: solid 1px rgb(96, 126, 226);
				border-bottom: solid 1px rgb(96, 126, 226);
				border-top: solid 1px rgb(96, 126, 226);
				height: 100%;
			}

			/* 设置行输入框 */
			.cr-set-row input {
				height: 32px;
				line-height: 32px;
				margin: 0px;
				background-color: rgba(255, 255, 255, 0);
				border: solid 1px rgb(96, 126, 226);
				font-size: 14px !important;
				border-radius: 0px;
				height: 100%;
			}

			/* 修正内容样式 */
			.mui-content {
				background-color: rgba(255, 255, 255, 0);
			}

			/* 按钮样式 */
			.mui-content-padded .mui-btn {
				margin-right: 5px;
				width: 140px !important;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="cr-set-content">
				<div class="mui-input-row cr-set-row">
					<div><span class="app-icon app-icon-ip"><span>服务地址</span></div>
					<input id="ip" type="text" class="mui-input-clear mui-input f-color jt-font-number"
						placeholder="请输入IP地址">
				</div>
				<div class="mui-input-row cr-set-row">
					<div><span class="app-icon app-icon-com"><span>服务端口</span></div>
					<input id="com" type="text" class="mui-input-clear mui-input f-color jt-font-number"
						placeholder="请输入端口号">
				</div>
			</div>
			<p>如无特殊情况，请勿修改IP地址和端口，否则将导致APP无法使用。</p>
			<div class="mui-content-padded">
				<button type="button" class="mui-btn mui-btn-primary" onclick="saveIpAndCom()">设置</button>
				<!-- <button type="button" class="mui-btn mui-btn-royal" onclick="selectIpAndCom()">选择</button> -->
			</div>
		</div>
	</body>
</html>
<!-- 引入mui脚本 -->
<script src="js/mui.js"></script>
<!-- 引入存储脚本 -->
<script src="js/save.js"></script>
<!-- 引入通用脚本 -->
<script src="js/common.js"></script>
<!-- 引入webview脚本 -->
<script src="js/webview.js" type="text/javascript" charset="utf-8"></script>
<!-- 本页通用脚本 -->
<script type="text/javascript">
	mui.init();
	var cIP = document.getElementById("ip");
	var cCOM = document.getElementById("com");
	/* 等待MUI Plus 加载完成 */
	mui.plusReady(function() {
		plus.navigator.setFullscreen(false);
	});

	/**
	 * 页面初次显示
	 */
	function pageShow() {
		//获取存储的IP地址及COM端口
		getIpAndCom(function(ip, com) {
			cIP.value = ip;
			cCOM.value = com;
		});
	}

	/**
	 * 保存设置的Ip地址和端口号
	 */
	function saveIpAndCom() {
		var sIP = cIP.value.trim();
		var sCOM = cCOM.value.trim();
		if (!isValidIP(sIP)) {
			muiAlert("输入的Ip地址不符合要求，格式为abb.abb.abb.abb,其a代表0~2,b代表0~5", "提示");
		} else if (!isValidCom(sCOM)) {
			muiAlert("输入的com端口号不符合要求，格式为4位数字！", "提示");
		} else {
			setIpAndCom({
				ip: sIP,
				com: sCOM,
				success: function() {
					muiAlert("IP和端口号设置成功！", "提示", function() {
						/* 此处不能使用mui.back() 否则由于使用了div样式 会导致卡死 */
						plus.webview.currentWebview().close();
					});
				},
				error: function(err) {
					muiAlertError(err);
				}
			})
		}
	}
</script>