Files
niumalll/website/support.html

609 lines
31 KiB
HTML
Raw Normal View History

<!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>&copy; 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>