554 lines
25 KiB
HTML
554 lines
25 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|||
|
|
<title>北京阿罗科斯信息技术公司</title>
|
|||
|
|
<meta name="keywords" content="">
|
|||
|
|
<meta name="description" content="">
|
|||
|
|
<link rel="shortcut icon" href="/favicon.ico" />
|
|||
|
|
<link type="text/css" rel="stylesheet" href="./style/css/gobal.css" />
|
|||
|
|
<link type="text/css" rel="stylesheet" href="./style/css/style.css" />
|
|||
|
|
<link type="text/css" rel="stylesheet" href="./style/css/animate.min.css" />
|
|||
|
|
<link type="text/css" rel="stylesheet" href="./style/css/owl.carousel.css" />
|
|||
|
|
<style>
|
|||
|
|
.news-details {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.news-details img {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script type="text/javascript" src="./style/js/jquery.js"></script>
|
|||
|
|
<script type="text/javascript" src="./style/js/common.js"></script>
|
|||
|
|
<script type="text/javascript" src="./style/js/owl.carousel.js"></script>
|
|||
|
|
<script type="text/javascript" src="./style/js/wow.min.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
new WOW().init();
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="head">
|
|||
|
|
<header>
|
|||
|
|
<div class="header">
|
|||
|
|
<div class="logo"><a href="index.html"><img src="./static/images/logo.png" alt="北京阿罗科斯信息技术"></a></div>
|
|||
|
|
<div class="nav">
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="index.html">首页</a></li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="serve.html" title="">软件服务</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="on">
|
|||
|
|
<a href="caselist.html" title="">平台产品</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="newslist.html" title="">行业资讯</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="aboutus.html" title="">关于我们</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="contact.html" title="">联系我们</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="myPhone">服务热线:<b><a href="tel:13671001072">13671001072</a></b></div>
|
|||
|
|
<div class="btn-m-list"> <span></span> <span></span> <span></span> <span></span> </div>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
<div class="neirong neirong-hide">
|
|||
|
|
<div class="neirong-bd">
|
|||
|
|
<a href="index.html" class="">首页</a>
|
|||
|
|
<a href="serve.html" title="服务" class="">软件服务 </a>
|
|||
|
|
<a href="caselist.html" title="作品" class="neirong-on">平台产品 </a>
|
|||
|
|
<a href="newslist.html" title="资讯" class="">行业资讯 </a>
|
|||
|
|
<a href="aboutus.html" title="我们" class="">关于我们 </a>
|
|||
|
|
<a href="contact.html" title="联系" class="">联系我们 </a>
|
|||
|
|
</div>
|
|||
|
|
<div class="neirong-close"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div id="warpper">
|
|||
|
|
<section>
|
|||
|
|
<div class="contain">
|
|||
|
|
<div class="nybanner" style="background-image:url(./static/images/1607572407869878.jpg);">
|
|||
|
|
<div class="ny-title">
|
|||
|
|
<h2 class="wow bounceInDown"><img src="./style/images/ca1.png" /></h2>
|
|||
|
|
<h3 class="wow fadeInUp"><img src="./style/images/ca2.png" /></h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="news-warp">
|
|||
|
|
<div class="layout">
|
|||
|
|
|
|||
|
|
<div class="news-screen clearfix">
|
|||
|
|
<div class="screenleft">
|
|||
|
|
<ul>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div id="casedetails_1" class="news-details">
|
|||
|
|
<div class="news-title">
|
|||
|
|
<div class="tou">
|
|||
|
|
<h1>大屏信息可视化</h1>
|
|||
|
|
</div>
|
|||
|
|
<span class="date">发布于：2024-01-01</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="news-text">
|
|||
|
|
<img src="./static/images/case/case1.jpeg" alt="">
|
|||
|
|
作为数据可视化领域的一个重要分支，通过超大尺寸的LED屏幕作为展示载体，通过图形、图表、动画等多种形式，将复杂的数据转化为直观、易懂的信息展示方式。这种方式不仅能够在视觉上给人留下震撼印象，还能有效传达数据背后的信息和规律。随着大数据、云计算、人工智能等技术的不断发展，大屏信息可视化将更加注重数据的实时性、交互性和智能化。未来，大屏信息可视化将广泛应用于更多领域，成为企业管理和决策的重要工具。
|
|||
|
|
<br> <br>
|
|||
|
|
应用场景
|
|||
|
|
智慧医院：通过大屏展示医院运行的各种数据，帮助医院管理者快速了解医院的运行状态，提高管理效率和医疗服务水平。
|
|||
|
|
智慧景区：展示景区运行的各种数据，帮助景区管理者快速了解景区的运行状态，提高管理效率和游客满意度。
|
|||
|
|
工业大数据监控中心：呈现工业经济全貌，涵盖生产总值、利税、利润等关键指标，助力决策者快速把握市场动态。
|
|||
|
|
企业销售监控中心：实时展示销售额、销售排行等关键数据，助力企业精准决策，快速应对市场变化。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="casedetails_2" class="news-details">
|
|||
|
|
<div class="news-title">
|
|||
|
|
<div class="tou">
|
|||
|
|
<h1>统一身份登录认证</h1>
|
|||
|
|
</div>
|
|||
|
|
<span class="date">发布于：2024-01-01</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="news-text">
|
|||
|
|
<img src="./static/images/case/case2.png" alt="">
|
|||
|
|
（Unified Identity
|
|||
|
|
Authentication）是一种集中式的身份认证机制，旨在为用户提供一种便捷、安全的登录方式，同时简化对多个系统或服务的访问控制管理。它通过整合各种身份认证方式，包括基于LDAP的目录服务、基于OAuth/OIDC的开放授权协议、基于SAML的单点登录协议。如账号密码、手机验证码、二维码、第三方账号，采用多因素认证等，制定严格的数据访问控制策略，确保只有经过授权的用户才能访问特定的资源，为企业内部的各种应用系统提供统一的身份认证和授权管理服务。这种机制的主要目的是提高用户登录的便捷性、安全性和管理效率，减少用户记忆多个账号密码的负担，同时降低系统管理员的维护工作量。
|
|||
|
|
<br> <br>
|
|||
|
|
主要功能
|
|||
|
|
身份认证：用户通过统一的认证接口进行身份验证，包括账号密码验证、手机验证码验证、二维码扫描等多种方式。
|
|||
|
|
授权管理：根据用户的身份和权限，为其分配访问不同系统或服务的权限，确保用户只能访问其被授权的资源。
|
|||
|
|
单点登录（SSO）：用户只需在统一身份认证平台进行一次登录操作，即可无缝访问所有已授权的系统或服务，无需重复输入账号密码。
|
|||
|
|
账号管理：提供账号注册、激活、修改密码、找回密码、账号申诉等功能，方便用户管理自己的账号信息。
|
|||
|
|
<br><br>
|
|||
|
|
应用场景
|
|||
|
|
统一身份认证平台广泛应用于学校、企业、政府机构等各个领域的信息化建设中。例如，在学校中，它可以为教务系统、图书馆系统、财务系统等多个应用系统提供统一的身份认证服务；在企业中，它可以为OA系统、CRM系统、ERP系统等提供类似的服务。
|
|||
|
|
<br><br>
|
|||
|
|
发展趋势
|
|||
|
|
随着云计算、大数据、人工智能等技术的不断发展，统一身份认证平台也将不断演进和升级。未来，我们可以预见以下几个发展趋势：
|
|||
|
|
更加智能化的身份认证方式：例如，通过人脸识别、指纹识别等生物特征识别技术进行身份验证，提高安全性和便捷性。
|
|||
|
|
更加灵活多样的授权管理：根据用户的上下文信息（如地理位置、时间等）动态调整其访问权限，实现更加精细化的授权管理。
|
|||
|
|
更加集成化的单点登录体验：通过更加无缝的集成方式，使得用户在不同系统或服务之间的切换更加顺畅和自然。
|
|||
|
|
更加关注隐私保护和数据安全：随着隐私保护意识的不断提高，统一身份认证平台将更加注重对用户数据的保护和安全传输。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="casedetails_3" class="news-details">
|
|||
|
|
<div class="news-title">
|
|||
|
|
<div class="tou">
|
|||
|
|
<h1>数据融合业务中台</h1>
|
|||
|
|
</div>
|
|||
|
|
<span class="date">发布于：2024-01-01</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="news-text">
|
|||
|
|
<img src="./static/images/case/case3.png" alt="">
|
|||
|
|
数据融合业务中台是企业在数字化转型过程中构建的一个重要组成部分，它旨在通过整合企业内部各个业务系统的数据资源，实现数据的集中管理，数据共享、数据治理、数据服务等多个方面的平台，它通过对企业内部各个业务系统的数据进行整合、加工、存储和管理，形成一个统一的数据资源池，为企业决策和业务提供强有力的数据支持。其主要目的是打破数据孤岛，提高数据的准确性和完整性，促进数据的共享和流通。
|
|||
|
|
<br> <br>
|
|||
|
|
随着技术的不断发展和应用场景的不断拓展，数据融合业务中台将在企业的数字化转型过程中发挥越来越重要的作用。
|
|||
|
|
<br><br>
|
|||
|
|
主要功能
|
|||
|
|
数据整合：数据融合业务中台能够整合企业内部各个业务系统和数据源的数据，包括结构化数据、半结构化数据和非结构化数据，实现数据的集中管理和统一视图。
|
|||
|
|
数据清洗与加工：对整合后的数据进行清洗、转换、计算、分析等处理，确保数据的准确性、一致性和可用性，提高数据的价值和应用效果。
|
|||
|
|
<br><br>
|
|||
|
|
数据存储与管理：提供可靠的数据存储和管理能力，确保数据的安全性、可靠性和可用性。同时，支持数据的备份和恢复功能，保障数据的持久性和可追溯性。
|
|||
|
|
数据服务：通过提供数据服务接口或API，使业务系统能够方便地获取所需的数据，实现快速的数据分析和业务决策。
|
|||
|
|
技术实现
|
|||
|
|
数据融合业务中台的技术实现通常涉及以下几个方面：
|
|||
|
|
<br><br>
|
|||
|
|
数据集成技术：采用ETL（Extract, Transform, Load）工具或数据集成平台，实现数据的抽取、转换和加载过程。
|
|||
|
|
分布式存储与计算技术：利用Hadoop、Spark等分布式存储和计算框架，处理大规模数据集，提高数据处理效率和可扩展性。
|
|||
|
|
数据治理技术：通过制定数据标准、数据质量规则、数据安全策略等，确保数据的合规性、准确性和安全性。
|
|||
|
|
微服务架构：采用微服务架构，将数据融合业务中台拆分为多个独立的服务模块，提高系统的灵活性和可维护性。
|
|||
|
|
<br><br>
|
|||
|
|
应用场景
|
|||
|
|
数据融合业务中台在企业的数字化转型过程中具有广泛的应用场景，包括但不限于以下几个方面：
|
|||
|
|
<br><br>
|
|||
|
|
业务决策支持：为企业管理层提供全面的业务数据分析和报表展示，支持企业的战略规划和业务决策。
|
|||
|
|
<br><br>
|
|||
|
|
运营优化：通过对业务数据的实时监控和分析，发现运营过程中的问题和瓶颈，提出优化建议和改进措施。
|
|||
|
|
<br><br>
|
|||
|
|
产品创新：基于用户行为数据和市场需求数据，进行产品创新和迭代，提高产品的竞争力和用户满意度。
|
|||
|
|
<br><br>
|
|||
|
|
客户服务：通过数据分析，了解客户需求和偏好，提供个性化的客户服务体验，增强客户粘性和忠诚度。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="casedetails_4" class="news-details">
|
|||
|
|
<div class="news-title">
|
|||
|
|
<div class="tou">
|
|||
|
|
<h1>基础服务系统管理</h1>
|
|||
|
|
</div>
|
|||
|
|
<span class="date">发布于：2024-01-01</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="news-text">
|
|||
|
|
<img src="./static/images/case/case4.jpg" alt="">
|
|||
|
|
基础服务系统管理是企业信息化建设的重要组成部分，它涉及多个方面和环节。通过合理的组织服务、人员管理、权限管理、数据管控、业务规则与参数配置、国际化设置以及许可管理等措施，可以确保系统的高效、稳定、安全运行，并满足企业的业务需求。同时，面对不断变化的挑战和需求，企业需要不断探索和创新管理方式和技术手段，以提升基础服务系统管理的水平和效果。
|
|||
|
|
<br> <br>
|
|||
|
|
组织服务
|
|||
|
|
|
|||
|
|
组织建模是为了满足企业财务管理、业务管理、人员管理维度等不同维度的管理需求而生，**核心要素**是**组织**，**相关要素**是**人员**。
|
|||
|
|
组织服务提供**多职能组织建模视图**，满足企业在多个应用场景下的**纵向**管控和**横向**协同管理的诉求。
|
|||
|
|
<br><br>
|
|||
|
|
人员管理
|
|||
|
|
|
|||
|
|
人员管理中主要是管理人员的，可以添加普通人员，也可以添加用户。
|
|||
|
|
|
|||
|
|
<br><br>
|
|||
|
|
数据管控
|
|||
|
|
|
|||
|
|
基础数据管控是按照管控的视图，将受控基础数据按照一定的策略或者方式，指派给某个组织使用的过程。通过管控，可以明确**基础数据**在不同组织之间的**管理权**和**使用权**。
|
|||
|
|
|
|||
|
|
系统服务云提供了**逐级分配、自由分配、全局共享、管控范围内共享和私有**五种基础数据管控策略，并支持设置字段规则，来控制使用组织是否可以个性化修改创建组织的数据。
|
|||
|
|
|
|||
|
|
通过数据管控策略，可以实现集团对**主数据、业务受控基础数据**等的精细管控和调整。
|
|||
|
|
|
|||
|
|
|
|||
|
|
<br><br>
|
|||
|
|
权限管理
|
|||
|
|
|
|||
|
|
系统服务云基于角色的权限控制模型（RBAC）进行补充扩展，以用户分配角色为授权主线，满足企业将共性权限集合快速批量授权给用户的需求，并辅助用户直接授权与用户权限禁用，且支持用户个性差异的调整。
|
|||
|
|
|
|||
|
|
系统服务云提供还管理员分权控制策略、管理员分级管控、权限报表、权限日志等功能，覆盖企业全员应用、专业应用、业务协作、管理与汇报等应用场景。
|
|||
|
|
<br><br>
|
|||
|
|
系统参数
|
|||
|
|
|
|||
|
|
参数配置是控制系统状态、功能和行为的有关变量。在系统服务云中，主要提供系统参数对应用进行控制，支持集团管控。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="casedetails_5" class="news-details">
|
|||
|
|
<div class="news-title">
|
|||
|
|
<div class="tou">
|
|||
|
|
<h1>12316农业部</h1>
|
|||
|
|
</div>
|
|||
|
|
<span class="date">发布于：2025-03-01</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="news-text">
|
|||
|
|
<img src="./static/images/case/case5.png" alt="">
|
|||
|
|
<img src="./static/images/case/case5_1.png" alt="">
|
|||
|
|
<img src="./static/images/case/case5_2.png" alt="">
|
|||
|
|
<img src="./static/images/case/case5_3.png" alt="">
|
|||
|
|
<img src="./static/images/case/case5_4.png" alt="">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="gf-demand">
|
|||
|
|
<div class="layout">
|
|||
|
|
<h2 class="h2">I NEED TO BUILD WEBSITE</h2>
|
|||
|
|
<h3 class="h3">我需要建站</h3>
|
|||
|
|
<form action="" method="post">
|
|||
|
|
<div class="write">
|
|||
|
|
<input class="text1" type="text" id="contacts" name="name" placeholder="称呼姓名" value="">
|
|||
|
|
<input class="text2" type="text" id="phone" name="phone" placeholder="联系电话" value="">
|
|||
|
|
<input class="text3" type="text" id="description" name="description" placeholder="描述您的需求，如网站、微信、电商、APP等。"
|
|||
|
|
value="">
|
|||
|
|
<input class="submit" type="submit" value="获取方案及报价">
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
<i class="italic">*请认真填写需求信息，我们会在24小时内与您取得联系。</i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="foot">
|
|||
|
|
<footer>
|
|||
|
|
<div class="footer">
|
|||
|
|
<div class="layout">
|
|||
|
|
<div class="foottou">
|
|||
|
|
<div class="ftlogo"><img src="./static/images/logo.png" /></div>
|
|||
|
|
<div class="ftcont">
|
|||
|
|
<i class="i">
|
|||
|
|
<a href="serve.html">软件服务</a>
|
|||
|
|
</i>
|
|||
|
|
<i class="i">
|
|||
|
|
<a href="caselist.html">软件产品</a>
|
|||
|
|
</i>
|
|||
|
|
<i class="i">
|
|||
|
|
<a href="newslist.html">行业资讯</a>
|
|||
|
|
</i>
|
|||
|
|
<i class="i">
|
|||
|
|
<a href="aboutus.html">关于我们</a>
|
|||
|
|
</i>
|
|||
|
|
<i class="i">
|
|||
|
|
<a href="contact.html">联系我们</a>
|
|||
|
|
</i>
|
|||
|
|
<p>地址：北京市通州区杨庄路1号3号1栋2035</p>
|
|||
|
|
<p><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备2025120695号-1</a>
|
|||
|
|
<span style="margin-left: 10px;">京公网安备11011202101454号</span>
|
|||
|
|
</p>
|
|||
|
|
<p>Copyright © 2022 网络公司 All Rights Reserved.
|
|||
|
|
</p>
|
|||
|
|
<p>友情链接： <a href="http://www.yyds8848.com/">http://www.yyds8848.com/</a></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="foot-ewm">
|
|||
|
|
<ul class="clearfix">
|
|||
|
|
<li> <img src="./static/images/gongzhonghao.jpg" />
|
|||
|
|
<p>扫一扫，微信咨询</p>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
<div class="kefu">
|
|||
|
|
<ul>
|
|||
|
|
<li> <a class="weixin" href="javascript:;">微信</a>
|
|||
|
|
<div class="div-ewm">
|
|||
|
|
<ul class="clearfix">
|
|||
|
|
<li> <img src="./static/images/gongzhonghao.jpg" />
|
|||
|
|
<p>添加微信</p>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li> <a class="qq" href="https://wpa.qq.com/msgrd?v=3&uin={pboot:companyqq}&site=qq&menu=yes"
|
|||
|
|
target="_blank">QQ</a>
|
|||
|
|
<div class="div-item"><span class="h2">524140394@qq.com</span></div>
|
|||
|
|
</li>
|
|||
|
|
<li> <a class="shouhou" href="https://wpa.qq.com/msgrd?v=3&uin={pboot:companyqq}&site=qq&menu=yes"
|
|||
|
|
target="_blank">售后服务</a>
|
|||
|
|
<div class="div-item"><span class="h2">010-XXXXXXX</span></div>
|
|||
|
|
</li>
|
|||
|
|
<li> <a class="call" href="javascript:;">电话</a>
|
|||
|
|
<div class="div-item"><span class="h2">13671001072</span></div>
|
|||
|
|
</li>
|
|||
|
|
<li class="backtop"> <a class="back" href="javascript:;">返回顶部</a>
|
|||
|
|
<div class="div-item"><span class="h2">TOP</span></div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
var params = new URLSearchParams(window.location.search);
|
|||
|
|
var id = params.get('id');
|
|||
|
|
console.log(id, 'id>>>>>>>>')
|
|||
|
|
if (id == 1) {
|
|||
|
|
$('#casedetails_1').show();
|
|||
|
|
}
|
|||
|
|
if (id == 2) {
|
|||
|
|
$('#casedetails_2').show();
|
|||
|
|
}
|
|||
|
|
if (id == 3) {
|
|||
|
|
$('#casedetails_3').show();
|
|||
|
|
}
|
|||
|
|
if (id == 4) {
|
|||
|
|
$('#casedetails_4').show();
|
|||
|
|
}
|
|||
|
|
if (id == 5) {
|
|||
|
|
$('#casedetails_5').show();
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(document).ready(function () {
|
|||
|
|
// 绑定表单提交事件
|
|||
|
|
$('form').on('submit', function (e) {
|
|||
|
|
e.preventDefault(); // 阻止默认提交
|
|||
|
|
|
|||
|
|
// 获取表单值
|
|||
|
|
var name = $('#contacts').val().trim();
|
|||
|
|
var phone = $('#phone').val().trim();
|
|||
|
|
var description = $('#description').val().trim();
|
|||
|
|
var hasError = false;
|
|||
|
|
|
|||
|
|
// 清空之前的错误提示
|
|||
|
|
$('.error-message').remove();
|
|||
|
|
$('.text1, .text2, .text3').removeClass('error');
|
|||
|
|
|
|||
|
|
// 验证称呼姓名
|
|||
|
|
if (name === '') {
|
|||
|
|
showError($('#contacts'), '请输入称呼姓名');
|
|||
|
|
hasError = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证联系电话
|
|||
|
|
if (phone === '') {
|
|||
|
|
showError($('#phone'), '请输入联系电话');
|
|||
|
|
hasError = true;
|
|||
|
|
} else if (!isValidPhone(phone)) {
|
|||
|
|
showError($('#phone'), '请输入正确的手机号码');
|
|||
|
|
hasError = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证需求描述
|
|||
|
|
if (description === '') {
|
|||
|
|
showError($('#description'), '请描述您的需求');
|
|||
|
|
hasError = true;
|
|||
|
|
} else if (description.length < 5) {
|
|||
|
|
showError($('#description'), '请至少输入5个字描述您的需求');
|
|||
|
|
hasError = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果有错误，停止提交
|
|||
|
|
if (hasError) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交数据
|
|||
|
|
submitForm(name, phone, description);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 手机号验证函数
|
|||
|
|
function isValidPhone(phone) {
|
|||
|
|
// 简单的手机号验证
|
|||
|
|
var phoneRegex = /^1[3-9]\d{9}$/;
|
|||
|
|
return phoneRegex.test(phone);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示错误提示函数
|
|||
|
|
function showError($input, message) {
|
|||
|
|
// 添加错误样式
|
|||
|
|
$input.addClass('error');
|
|||
|
|
|
|||
|
|
// 创建错误消息元素
|
|||
|
|
var $error = $('<div class="error-message"></div>')
|
|||
|
|
.css({
|
|||
|
|
'color': '#ff4d4f',
|
|||
|
|
'font-size': '12px',
|
|||
|
|
'margin-top': '5px',
|
|||
|
|
'margin-bottom': '10px'
|
|||
|
|
})
|
|||
|
|
.text(message);
|
|||
|
|
|
|||
|
|
// 插入到输入框后面
|
|||
|
|
$input.after($error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交表单函数
|
|||
|
|
function submitForm(name, phone, description) {
|
|||
|
|
// 禁用提交按钮，防止重复提交
|
|||
|
|
var $submitBtn = $('.submit');
|
|||
|
|
var originalText = $submitBtn.val();
|
|||
|
|
$submitBtn.val('提交中...').prop('disabled', true);
|
|||
|
|
|
|||
|
|
// 显示加载状态（可选）
|
|||
|
|
$submitBtn.addClass('loading');
|
|||
|
|
|
|||
|
|
// 准备提交数据
|
|||
|
|
var formData = {
|
|||
|
|
name: name,
|
|||
|
|
phone: phone,
|
|||
|
|
description: description
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 使用 jQuery AJAX 提交
|
|||
|
|
$.ajax({
|
|||
|
|
url: 'https://www.yyds8848.com/office/v1/website-request',
|
|||
|
|
type: 'POST',
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
data: JSON.stringify(formData),
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function (response) {
|
|||
|
|
// 提交成功
|
|||
|
|
$submitBtn.val('提交成功！');
|
|||
|
|
|
|||
|
|
// 显示成功提示
|
|||
|
|
showSuccessMessage('提交成功！我们将尽快与您联系。');
|
|||
|
|
|
|||
|
|
// 3秒后重置表单和按钮
|
|||
|
|
setTimeout(function () {
|
|||
|
|
$submitBtn.val(originalText).prop('disabled', false);
|
|||
|
|
$submitBtn.removeClass('loading');
|
|||
|
|
$('form')[0].reset(); // 重置表单
|
|||
|
|
}, 3000);
|
|||
|
|
},
|
|||
|
|
error: function (xhr, status, error) {
|
|||
|
|
// 提交失败
|
|||
|
|
$submitBtn.val('提交失败');
|
|||
|
|
|
|||
|
|
// 显示错误信息
|
|||
|
|
var errorMsg = '提交失败，请稍后重试';
|
|||
|
|
if (xhr.responseJSON && xhr.responseJSON.message) {
|
|||
|
|
errorMsg = xhr.responseJSON.message;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
showErrorMessage(errorMsg);
|
|||
|
|
|
|||
|
|
// 2秒后恢复按钮
|
|||
|
|
setTimeout(function () {
|
|||
|
|
$submitBtn.val(originalText).prop('disabled', false);
|
|||
|
|
$submitBtn.removeClass('loading');
|
|||
|
|
}, 2000);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示成功提示函数
|
|||
|
|
function showSuccessMessage(message) {
|
|||
|
|
// 移除之前的提示
|
|||
|
|
$('.success-message, .error-message').remove();
|
|||
|
|
|
|||
|
|
// 创建成功提示
|
|||
|
|
var $success = $('<div class="success-message"></div>')
|
|||
|
|
.css({
|
|||
|
|
'color': '#52c41a',
|
|||
|
|
'background-color': '#f6ffed',
|
|||
|
|
'border': '1px solid #b7eb8f',
|
|||
|
|
'padding': '10px',
|
|||
|
|
'margin': '15px 0',
|
|||
|
|
'border-radius': '4px',
|
|||
|
|
'font-size': '14px'
|
|||
|
|
})
|
|||
|
|
.html('<i class="icon-check"></i> ' + message);
|
|||
|
|
|
|||
|
|
// 插入到表单前面
|
|||
|
|
$('form').before($success);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示错误提示函数（用于服务器返回的错误）
|
|||
|
|
function showErrorMessage(message) {
|
|||
|
|
// 移除之前的提示
|
|||
|
|
$('.error-message, .success-message').remove();
|
|||
|
|
|
|||
|
|
// 创建错误提示
|
|||
|
|
var $error = $('<div class="error-message"></div>')
|
|||
|
|
.css({
|
|||
|
|
'color': '#ff4d4f',
|
|||
|
|
'background-color': '#fff2f0',
|
|||
|
|
'border': '1px solid #ffccc7',
|
|||
|
|
'padding': '10px',
|
|||
|
|
'margin': '15px 0',
|
|||
|
|
'border-radius': '4px',
|
|||
|
|
'font-size': '14px'
|
|||
|
|
})
|
|||
|
|
.html('<i class="icon-error"></i> ' + message);
|
|||
|
|
|
|||
|
|
// 插入到表单前面
|
|||
|
|
$('form').before($error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 实时验证（可选，提供更好的用户体验）
|
|||
|
|
$('#phone').on('blur', function () {
|
|||
|
|
var phone = $(this).val().trim();
|
|||
|
|
if (phone !== '' && !isValidPhone(phone)) {
|
|||
|
|
showError($(this), '请输入正确的手机号码');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 输入时清除错误提示
|
|||
|
|
$('.text1, .text2, .text3').on('input', function () {
|
|||
|
|
$(this).removeClass('error');
|
|||
|
|
$(this).next('.error-message').remove();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</html>
|