|
|
@@ -0,0 +1,363 @@
|
|
|
+<!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>
|
wangguoyu