609 lines
31 KiB
HTML
609 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>在线客服 - 活牛采购智能数字化系统</title>
|
||
<meta name="description" content="活牛采购智能数字化系统在线客服，提供7×24小时专业技术支持，解答产品使用、技术集成、业务合作等问题。">
|
||
<meta name="keywords" content="在线客服,技术支持,客户服务,帮助中心,问题解答,活牛采购系统">
|
||
|
||
<!-- Bootstrap 5 CSS -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Bootstrap Icons -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
|
||
<!-- Font Awesome -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
||
<!-- AOS Animation -->
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||
<!-- 自定义样式 -->
|
||
<link href="css/custom.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
||
<div class="container">
|
||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
||
<div class="logo-container me-2">
|
||
<i class="fas fa-cow text-primary fs-2"></i>
|
||
</div>
|
||
<div class="brand-text">
|
||
<div class="brand-name fw-bold">NiuMall</div>
|
||
<div class="brand-subtitle">活牛采购智能系统</div>
|
||
</div>
|
||
</a>
|
||
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav ms-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="index.html">首页</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="product.html">产品介绍</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="solutions.html">解决方案</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="cases.html">客户案例</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="about.html">关于我们</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="news.html">新闻动态</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="docs.html">开发者文档</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="partners.html">合作伙伴</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="support.html">在线客服</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="contact.html">联系我们</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="ms-3">
|
||
<a href="contact.html" class="btn btn-primary">免费试用</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 面包屑导航 -->
|
||
<nav aria-label="breadcrumb" class="pt-5 mt-5">
|
||
<div class="container">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="index.html">首页</a></li>
|
||
<li class="breadcrumb-item active" aria-current="page">在线客服</li>
|
||
</ol>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 在线客服英雄区域 -->
|
||
<section class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-6">
|
||
<h1 class="display-5 fw-bold mb-4">在线客服</h1>
|
||
<p class="lead">7×24小时专业技术支持，随时为您解答产品使用、技术集成、业务合作等问题。</p>
|
||
<div class="mt-4">
|
||
<a href="#live-chat" class="btn btn-primary btn-lg me-3">
|
||
<i class="fas fa-comments me-2"></i>在线咨询
|
||
</a>
|
||
<a href="#contact-methods" class="btn btn-outline-primary btn-lg">
|
||
<i class="fas fa-headset me-2"></i>联系客服
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<img src="images/support-banner.jpg" alt="在线客服" class="img-fluid rounded shadow img-hover-zoom" loading="lazy">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 客服服务类型 -->
|
||
<section class="py-5">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="display-6 mb-3">服务类型</h2>
|
||
<p class="text-muted">全方位的客户服务支持</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-4">
|
||
<div class="card border-0 h-100 text-center p-4">
|
||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||
<i class="fas fa-cog"></i>
|
||
</div>
|
||
<h5>技术支持</h5>
|
||
<p class="text-muted">系统使用、API集成、技术问题解答</p>
|
||
<ul class="list-unstyled text-start mt-3">
|
||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>API使用指导</li>
|
||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>系统配置帮助</li>
|
||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>故障排除支持</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="card border-0 h-100 text-center p-4">
|
||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||
<i class="fas fa-shopping-cart"></i>
|
||
</div>
|
||
<h5>业务咨询</h5>
|
||
<p class="text-muted">产品功能、业务流程、合作模式咨询</p>
|
||
<ul class="list-unstyled text-start mt-3">
|
||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>产品功能说明</li>
|
||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>业务流程指导</li>
|
||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>合作模式咨询</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="card border-0 h-100 text-center p-4">
|
||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||
<i class="fas fa-file-invoice"></i>
|
||
</div>
|
||
<h5>售后服务</h5>
|
||
<p class="text-muted">订单管理、发票申请、售后问题处理</p>
|
||
<ul class="list-unstyled text-start mt-3">
|
||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>订单查询协助</li>
|
||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>发票申请支持</li>
|
||
<li class="mb-2"><i class="fas fa-check text-success me-2"></i>售后问题处理</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 在线聊天系统 -->
|
||
<section id="live-chat" class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="display-6 mb-3">在线咨询</h2>
|
||
<p class="text-muted">实时与客服人员沟通，快速解决问题</p>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-8 mx-auto">
|
||
<div class="card border-0">
|
||
<div class="card-body">
|
||
<div class="chat-container">
|
||
<div class="chat-header bg-primary text-white p-3 rounded-top">
|
||
<div class="d-flex align-items-center">
|
||
<div class="avatar me-3">
|
||
<i class="fas fa-headset fs-4"></i>
|
||
</div>
|
||
<div>
|
||
<h6 class="mb-0">活牛采购智能系统客服</h6>
|
||
<small>在线状态：<span class="badge bg-success">在线</span></small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-messages p-3" style="height: 300px; overflow-y: auto;">
|
||
<div class="message system-message">
|
||
<div class="message-content">
|
||
<p class="mb-0">您好！欢迎使用活牛采购智能系统在线客服。请问有什么可以帮您？</p>
|
||
</div>
|
||
<div class="message-time text-muted small">系统消息 10:00</div>
|
||
</div>
|
||
|
||
<div class="message user-message">
|
||
<div class="message-content">
|
||
<p class="mb-0">我想了解一下如何创建采购订单？</p>
|
||
</div>
|
||
<div class="message-time text-muted small">您 10:01</div>
|
||
</div>
|
||
|
||
<div class="message system-message">
|
||
<div class="message-content">
|
||
<p class="mb-0">创建采购订单非常简单：<br>
|
||
1. 登录系统后进入"采购管理"<br>
|
||
2. 点击"新建订单"<br>
|
||
3. 选择供应商和产品类型<br>
|
||
4. 填写采购数量和价格<br>
|
||
5. 确认提交即可</p>
|
||
</div>
|
||
<div class="message-time text-muted small">客服 10:02</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chat-input p-3 border-top">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" placeholder="请输入您的问题..." aria-label="输入消息">
|
||
<button class="btn btn-primary" type="button">
|
||
<i class="fas fa-paper-plane"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4">
|
||
<div class="alert alert-info">
|
||
<i class="fas fa-info-circle me-2"></i>
|
||
当前为演示模式，如需真实在线客服支持，请通过下方联系方式联系我们。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 常见问题 -->
|
||
<section class="py-5">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="display-6 mb-3">常见问题</h2>
|
||
<p class="text-muted">快速找到您需要的答案</p>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-10 mx-auto">
|
||
<div class="accordion" id="faqAccordion">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
|
||
如何注册账号？
|
||
</button>
|
||
</h2>
|
||
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
<p>注册账号非常简单：</p>
|
||
<ol>
|
||
<li>访问官网首页，点击"免费试用"按钮</li>
|
||
<li>填写企业基本信息和管理员联系方式</li>
|
||
<li>提交申请后，我们的客服人员会与您联系</li>
|
||
<li>完成资质审核后即可开通账号</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
|
||
系统支持哪些支付方式？
|
||
</button>
|
||
</h2>
|
||
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
<p>我们支持多种支付方式：</p>
|
||
<ul>
|
||
<li>银行转账</li>
|
||
<li>在线支付（支付宝、微信支付）</li>
|
||
<li>信用证</li>
|
||
<li>供应链金融服务</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
|
||
如何集成API？
|
||
</button>
|
||
</h2>
|
||
<div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
<p>API集成步骤：</p>
|
||
<ol>
|
||
<li>在管理后台申请API密钥</li>
|
||
<li>下载对应语言的SDK</li>
|
||
<li>参考开发者文档进行集成</li>
|
||
<li>进行测试环境验证</li>
|
||
<li>切换至生产环境使用</li>
|
||
</ol>
|
||
<p>详细指南请查看<a href="docs.html">开发者文档</a>。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
|
||
订单状态有哪些？
|
||
</button>
|
||
</h2>
|
||
<div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
<p>订单状态包括：</p>
|
||
<ul>
|
||
<li><strong>待确认</strong> - 订单已提交，等待供应商确认</li>
|
||
<li><strong>已确认</strong> - 供应商已确认订单</li>
|
||
<li><strong>配送中</strong> - 货物正在运输途中</li>
|
||
<li><strong>已完成</strong> - 订单已完成交付</li>
|
||
<li><strong>已取消</strong> - 订单已被取消</li>
|
||
<li><strong>异常</strong> - 订单出现异常情况</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
|
||
如何申请发票？
|
||
</button>
|
||
</h2>
|
||
<div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||
<div class="accordion-body">
|
||
<p>发票申请流程：</p>
|
||
<ol>
|
||
<li>登录系统进入"财务管理"</li>
|
||
<li>选择需要开票的订单</li>
|
||
<li>点击"申请发票"</li>
|
||
<li>填写发票信息和邮寄地址</li>
|
||
<li>提交申请，财务部门会在3个工作日内处理</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-4">
|
||
<a href="help.html" class="btn btn-outline-primary">
|
||
<i class="fas fa-book me-2"></i>查看更多问题
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系方式 -->
|
||
<section id="contact-methods" class="py-5 bg-light">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="display-6 mb-3">联系我们</h2>
|
||
<p class="text-muted">多种联系方式，随时为您服务</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-4">
|
||
<div class="card border-0 h-100 text-center p-4">
|
||
<div class="feature-icon bg-primary bg-opacity-10 text-primary mb-4 mx-auto">
|
||
<i class="fas fa-phone"></i>
|
||
</div>
|
||
<h5>电话支持</h5>
|
||
<p class="text-muted">19971988959</p>
|
||
<p class="small text-muted">工作日 9:00-18:00</p>
|
||
<a href="tel:19971988959" class="btn btn-primary mt-3">
|
||
<i class="fas fa-phone me-2"></i>立即拨打
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="card border-0 h-100 text-center p-4">
|
||
<div class="feature-icon bg-success bg-opacity-10 text-success mb-4 mx-auto">
|
||
<i class="fas fa-envelope"></i>
|
||
</div>
|
||
<h5>邮件支持</h5>
|
||
<p class="text-muted">niumall@aiotagro.com</p>
|
||
<p class="small text-muted">24小时内回复</p>
|
||
<a href="mailto:niumall@aiotagro.com" class="btn btn-success mt-3">
|
||
<i class="fas fa-envelope me-2"></i>发送邮件
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="card border-0 h-100 text-center p-4">
|
||
<div class="feature-icon bg-info bg-opacity-10 text-info mb-4 mx-auto">
|
||
<i class="fab fa-weixin"></i>
|
||
</div>
|
||
<h5>微信支持</h5>
|
||
<p class="text-muted">扫描二维码添加客服微信</p>
|
||
<div class="qr-code mb-3">
|
||
<img src="images/wechat-qr.jpg" alt="客服微信" class="img-fluid" style="max-width: 120px;">
|
||
</div>
|
||
<p class="small text-muted">实时在线沟通</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-5">
|
||
<div class="col-lg-8 mx-auto">
|
||
<div class="card border-0">
|
||
<div class="card-body">
|
||
<h4 class="mb-4">服务时间</h4>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h6>电话支持</h6>
|
||
<p class="text-muted">工作日：9:00 - 18:00<br>周末：10:00 - 17:00</p>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h6>在线客服</h6>
|
||
<p class="text-muted">7×24小时智能客服<br>人工客服：9:00 - 21:00</p>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-3">
|
||
<div class="col-md-6">
|
||
<h6>邮件支持</h6>
|
||
<p class="text-muted">24小时内回复<br>紧急问题请标注"紧急"</p>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h6>现场支持</h6>
|
||
<p class="text-muted">需提前预约<br>仅限企业版客户</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 客户满意度 -->
|
||
<section class="py-5">
|
||
<div class="container">
|
||
<div class="text-center mb-5">
|
||
<h2 class="display-6 mb-3">客户满意度</h2>
|
||
<p class="text-muted">我们致力于提供最优质的客户服务</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-3 col-6 text-center">
|
||
<div class="stat-number display-6 fw-bold text-primary">98%</div>
|
||
<p class="text-muted">问题解决率</p>
|
||
</div>
|
||
|
||
<div class="col-md-3 col-6 text-center">
|
||
<div class="stat-number display-6 fw-bold text-success">15min</div>
|
||
<p class="text-muted">平均响应时间</p>
|
||
</div>
|
||
|
||
<div class="col-md-3 col-6 text-center">
|
||
<div class="stat-number display-6 fw-bold text-info">4.9/5</div>
|
||
<p class="text-muted">客户满意度</p>
|
||
</div>
|
||
|
||
<div class="col-md-3 col-6 text-center">
|
||
<div class="stat-number display-6 fw-bold text-warning">5000+</div>
|
||
<p class="text-muted">服务客户数</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-4 mb-4 mb-lg-0">
|
||
<h5 class="footer-title">活牛采购智能数字化系统</h5>
|
||
<p>专业的活牛采购全流程数字化管理解决方案，提升采购效率，降低经营风险。</p>
|
||
<div class="d-flex">
|
||
<a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
|
||
<a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
|
||
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
|
||
<h5 class="footer-title">产品</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><a href="product.html">功能介绍</a></li>
|
||
<li class="mb-2"><a href="solutions.html">解决方案</a></li>
|
||
<li class="mb-2"><a href="cases.html">客户案例</a></li>
|
||
<li class="mb-2"><a href="news.html">新闻动态</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-2 col-md-4 mb-4 mb-md-0">
|
||
<h5 class="footer-title">支持</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><a href="help.html">帮助中心</a></li>
|
||
<li class="mb-2"><a href="support.html">在线客服</a></li>
|
||
<li class="mb-2"><a href="docs.html">开发者文档</a></li>
|
||
<li class="mb-2"><a href="partners.html">合作伙伴</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-4 col-md-4">
|
||
<h5 class="footer-title">联系我们</h5>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 武汉市东湖高新区光谷软件园F2栋</li>
|
||
<li class="mb-2"><i class="fas fa-phone me-2"></i> 19971988959</li>
|
||
<li class="mb-2"><i class="fas fa-envelope me-2"></i> niumall@aiotagro.com</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="copyright text-center">
|
||
<p>© 2023 活牛采购智能数字化系统. 保留所有权利。</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<p class="text-muted small">鄂ICP备2023000000号-1</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 返回顶部按钮 -->
|
||
<button class="back-to-top" aria-label="返回顶部">
|
||
<i class="fas fa-arrow-up"></i>
|
||
</button>
|
||
|
||
<!-- Bootstrap JS -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||
<!-- AOS Animation -->
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>
|
||
<!-- 自定义脚本 -->
|
||
<script src="js/main.js"></script>
|
||
|
||
<script>
|
||
// 初始化AOS动画
|
||
AOS.init({
|
||
duration: 800,
|
||
once: true
|
||
});
|
||
|
||
// 模拟聊天功能
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const chatInput = document.querySelector('.chat-input input');
|
||
const sendButton = document.querySelector('.chat-input button');
|
||
const chatMessages = document.querySelector('.chat-messages');
|
||
|
||
sendButton.addEventListener('click', function() {
|
||
const message = chatInput.value.trim();
|
||
if (message) {
|
||
// 添加用户消息
|
||
const userMessage = document.createElement('div');
|
||
userMessage.className = 'message user-message';
|
||
userMessage.innerHTML = `
|
||
<div class="message-content">
|
||
<p class="mb-0">${message}</p>
|
||
</div>
|
||
<div class="message-time text-muted small">您 ${new Date().toLocaleTimeString()}</div>
|
||
`;
|
||
chatMessages.appendChild(userMessage);
|
||
|
||
// 清空输入框
|
||
chatInput.value = '';
|
||
|
||
// 模拟客服回复
|
||
setTimeout(() => {
|
||
const systemMessage = document.createElement('div');
|
||
systemMessage.className = 'message system-message';
|
||
systemMessage.innerHTML = `
|
||
<div class="message-content">
|
||
<p class="mb-0">感谢您的咨询！我们的客服人员会尽快回复您。如需即时帮助，请拨打19971988959。</p>
|
||
</div>
|
||
<div class="message-time text-muted small">客服 ${new Date().toLocaleTimeString()}</div>
|
||
`;
|
||
chatMessages.appendChild(systemMessage);
|
||
|
||
// 滚动到底部
|
||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||
}, 1000);
|
||
|
||
// 滚动到底部
|
||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||
}
|
||
});
|
||
|
||
// 支持回车发送
|
||
chatInput.addEventListener('keypress', function(e) {
|
||
if (e.key === 'Enter') {
|
||
sendButton.click();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |