wangguoyu
/
uniProject


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>网络网页</title>
	<style>
		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			padding: 20px;
		}
		.form-group {
			margin-bottom: 15px;
			width: 100%;
			max-width: 300px;
		}
		.form-group label {
			display: block;
			margin-bottom: 5px;
			font-weight: bold;
		}
		.form-group input {
			width: 100%;
			padding: 8px 12px;
			border: 1px solid #ddd;
			border-radius: 4px;
			box-sizing: border-box;
		}
		.btn {
			width: 100%;
			max-width: 300px;
			padding: 10px;
			background-color: #007aff;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			margin-top: 10px;
		}
		.btn:disabled {
			background-color: #ccc;
			cursor: not-allowed;
		}
		#your-dom-id {
			margin-top: 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="form-group">
		<label for="phone">手机号</label>
		<input type="tel" id="phone" placeholder="请输入手机号" maxlength="11">
	</div>
	<div class="form-group">
		<label for="captcha">验证码</label>
		<input type="text" id="captcha" placeholder="请输入验证码">
	</div>
	<button class="btn" id="submitBtn">提交验证</button>
	<div id="your-dom-id"></div>
</div>

<!-- 引入必要的库 -->
<script src="https://cdn.jsdelivr.net/npm/ts-md5/dist/md5.js"></script>

<script type="text/javascript">
	var userAgent = navigator.userAgent;
	if (userAgent.indexOf('AlipayClient') > -1) {
		document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
	} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
		document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
	} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
		document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
	} else if (/toutiaomicroapp/i.test(userAgent)) {
		document.write('<script type="text/javascript" src="https://lf1-cdn-tos.bytegoofy.com/goofy/developer/jssdk/jssdk-1.2.0.js"><\/script>');
	} else if (/swan/i.test(userAgent)) {
		document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
	} else if (/quickapp/i.test(userAgent)) {
		document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
	}
</script>

<!-- uni 的 SDK -->
<script type="text/javascript" src="https://www.chengxiangjiaoyu.com/uni.webview.1.5.6.js"></script>

<script>
	window.AliyunCaptchaConfig = {
		region: 'cn',
		prefix: 'm9a704',
	};
</script>
<script src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>

<script type="text/javascript">
	// 配置
	const baseUrl = 'https://你的API域名'; // 请替换为实际的API域名
	const timeout = 10000;

	// 工具函数
	function toast(message) {
		// 在HTML环境中模拟toast，你可以根据实际需求调整
		alert(message);
	}

	function showConfirm(message) {
		return new Promise((resolve) => {
			if (confirm(message)) {
				resolve({ confirm: true });
			} else {
				resolve({ confirm: false });
			}
		});
	}

	// 从localStorage获取auth信息
	function getAuth() {
		try {
			const authStr = localStorage.getItem('auth');
			return authStr ? JSON.parse(authStr) : null;
		} catch (e) {
			console.error('获取auth信息失败:', e);
			return null;
		}
	}

	// 保存auth信息到localStorage
	function saveAuth(auth) {
		try {
			localStorage.setItem('auth', JSON.stringify(auth));
		} catch (e) {
			console.error('保存auth信息失败:', e);
		}
	}

	// 请求函数 - 模拟你项目中的request函数
	function request(config) {
		return new Promise((resolve, reject) => {
			// 显示loading
			if (config.isLoading) {
				// 在HTML环境中可以显示自定义loading或使用uni的loading
				console.log('显示loading...');
			}

			// 准备headers
			const headers = config.headers || {};
			const auth = getAuth();

			// 添加签名和token
			if (auth) {
				headers['X-AUTH-SIGN'] = Md5.hashStr(JSON.stringify(config.data || {}) + auth.secret);
				headers['X-AUTH-TOKEN'] = auth.token;
			}

			// 使用uni.request发送请求
			uni.request({
				method: config.method || 'get',
				timeout: config.timeout || timeout,
				url: config.baseUrl || baseUrl + config.url,
				data: config.data,
				header: headers,
				dataType: 'json',
				success: (response) => {
					if (config.isLoading) {
						console.log('隐藏loading...');
					}

					const res = response.data;
					const code = res.code;
					const msg = res.msg;

					// 错误处理
					if (code === 401) {
						showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
							if (res.confirm) {
								// 跳转到登录页面
								uni.reLaunch({
									url: '/pages/Login/index'
								});
							}
						});
						reject('无效的会话，或者会话已过期，请重新登录。');
					} else if (code === 405) {
						showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
							if (res.confirm) {
								// 跳转到登录页面
								uni.reLaunch({
									url: '/pages/Login/index'
								});
							}
						});
						reject('无效的会话，或者会话已过期，请重新登录。');
					} else if (code === 500) {
						toast("数据异常-500");
						reject('500');
					} else if (code === 400) {
						toast("数据异常-400");
						reject('400');
					} else if (code !== 0) {
						toast(msg);
						reject(code);
					} else {
						resolve(res);
					}
				},
				fail: (error) => {
					if (config.isLoading) {
						console.log('隐藏loading...');
					}

					let message = error.errMsg || '请求失败';
					if (message === 'request:fail') {
						message = '后端接口连接异常';
					} else if (message.includes('timeout')) {
						message = '系统接口请求超时';
					}
					toast(message);
					reject(error);
				}
			});
		});
	}

	// 示例：发送验证请求
	function submitVerification(phone, captcha, captchaVerifyParam) {
		const requestData = {
			phone: phone,
			captcha: captcha,
			captchaVerifyParam: captchaVerifyParam
			// 其他需要的参数...
		};

		return request({
			url: '/your-api-endpoint', // 替换为实际的API路径
			method: 'post',
			data: requestData,
			isLoading: true
		});
	}

	// 主逻辑
	document.addEventListener('UniAppJSBridgeReady', function() {
		const submitBtn = document.getElementById('submitBtn');
		const phoneInput = document.getElementById('phone');
		const captchaInput = document.getElementById('captcha');

		let captchaVerifyParam = null;

		// 初始化验证码
		setTimeout(initCaptcha, 500);

		function initCaptcha() {
			try {
				window.initAliyunCaptcha({
					SceneId: '1xp14eyl',
					mode: "embed",
					element: "#your-dom-id",
					success: function(verifyParam) {
						console.log('验证码验证成功:', verifyParam);
						captchaVerifyParam = verifyParam;

						// 自动提交（可选）
						// autoSubmit();
					},
					fail: function(err) {
						console.error('验证失败:', err);
						toast('验证码验证失败，请重试');
					},
					slideStyle: {
						width: 320,
						height: 40
					},
					language: 'cn',
					timeout: 5000,
				});
			} catch (error) {
				console.error('初始化验证码失败:', error);
			}
		}

		// 提交按钮点击事件
		submitBtn.addEventListener('click', function() {
			const phone = phoneInput.value.trim();
			const captcha = captchaInput.value.trim();

			if (!phone) {
				toast('请输入手机号');
				return;
			}

			if (!captcha) {
				toast('请输入验证码');
				return;
			}

			if (!captchaVerifyParam) {
				toast('请先完成验证码验证');
				return;
			}

			// 禁用按钮防止重复提交
			submitBtn.disabled = true;
			submitBtn.textContent = '提交中...';

			// 发送请求
			submitVerification(phone, captcha, captchaVerifyParam)
					.then(response => {
						toast('验证成功');
						console.log('接口返回:', response);

						// 传递多个参数给uniapp
						uni.postMessage({
							data: {
								captchaResult: captchaVerifyParam,
								phone: phone,
								apiResponse: response,
								status: "success",
								timestamp: new Date().getTime()
							}
						});

						// 延迟返回
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					})
					.catch(error => {
						console.error('验证失败:', error);
						// 失败时也传递信息
						uni.postMessage({
							data: {
								status: "fail",
								error: error,
								phone: phone,
								timestamp: new Date().getTime()
							}
						});
					})
					.finally(() => {
						// 恢复按钮状态
						submitBtn.disabled = false;
						submitBtn.textContent = '提交验证';
					});
		});

		// 自动提交函数（如果需要）
		function autoSubmit() {
			const phone = phoneInput.value.trim();
			const captcha = captchaInput.value.trim();

			if (phone && captcha && captchaVerifyParam) {
				submitBtn.click();
			}
		}
	});
</script>
</body>
</html>