sujianhua
7465ed7eb3
- 合并 01-04 章节文件到 README.md - 调整截图引用：补充登录弹窗截图，移除无对应截图的引用 - 更新截图素材清单，标注待补充章节 - 同步更新 HTML 演示页面
438 lines
19 KiB
HTML
438 lines
19 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>
|
|
<style>
|
|
:root {
|
|
--primary-color: #6366f1; /* 阿尼坊主题色（紫色系示例） */
|
|
--primary-hover: #4f46e5;
|
|
--text-main: #1f2937;
|
|
--text-muted: #6b7280;
|
|
--bg-color: #f3f4f6;
|
|
--bg-content: #ffffff;
|
|
--border-color: #e5e7eb;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
color: var(--text-main);
|
|
background-color: var(--bg-color);
|
|
display: flex;
|
|
min-height: 100vh;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 侧边栏样式 */
|
|
.sidebar {
|
|
width: 280px;
|
|
background-color: var(--bg-content);
|
|
border-right: 1px solid var(--border-color);
|
|
position: fixed;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
padding: 2rem 0;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 0 2rem 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.sidebar-header h2 {
|
|
font-size: 1.25rem;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.nav-links {
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-links li a {
|
|
display: block;
|
|
padding: 0.75rem 2rem;
|
|
text-decoration: none;
|
|
color: var(--text-main);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-links li a:hover, .nav-links li a.active {
|
|
background-color: #eef2ff;
|
|
color: var(--primary-color);
|
|
border-right: 3px solid var(--primary-color);
|
|
}
|
|
|
|
/* 主内容区样式 */
|
|
.main-content {
|
|
flex: 1;
|
|
margin-left: 280px;
|
|
padding: 2rem 4rem;
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.section {
|
|
background-color: var(--bg-content);
|
|
padding: 2.5rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 2rem;
|
|
scroll-margin-top: 2rem;
|
|
}
|
|
|
|
/* 排版样式 */
|
|
h1 { font-size: 2rem; margin-bottom: 1.5rem; color: var(--text-main); border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; }
|
|
h2 { font-size: 1.5rem; margin: 2rem 0 1rem; color: var(--text-main); }
|
|
h3 { font-size: 1.2rem; margin: 1.5rem 0 0.8rem; color: var(--text-main); }
|
|
p { margin-bottom: 1rem; color: var(--text-muted); }
|
|
ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; color: var(--text-muted); }
|
|
li { margin-bottom: 0.5rem; }
|
|
|
|
/* 截图占位符样式 */
|
|
.img-placeholder {
|
|
background-color: #f8fafc;
|
|
border: 2px dashed #cbd5e1;
|
|
border-radius: 8px;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
color: #64748b;
|
|
margin: 1.5rem 0;
|
|
font-weight: 500;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.img-placeholder i { font-size: 2rem; margin-bottom: 0.5rem; }
|
|
|
|
/* 实际截图样式 */
|
|
.actual-img {
|
|
width: 100%;
|
|
max-width: 375px;
|
|
border-radius: 8px;
|
|
margin: 1.5rem 0;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 表格样式 */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1.5rem 0;
|
|
background-color: white;
|
|
}
|
|
th, td {
|
|
border: 1px solid var(--border-color);
|
|
padding: 0.75rem 1rem;
|
|
text-align: left;
|
|
}
|
|
th { background-color: #f8fafc; font-weight: 600; color: var(--text-main); }
|
|
|
|
/* 提示框样式 */
|
|
.alert {
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 8px;
|
|
margin: 1.5rem 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.alert.warning { background-color: #fffbeb; border-left: 4px solid #f59e0b; color: #92400e; }
|
|
.alert.info { background-color: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }
|
|
.alert strong { margin-bottom: 0.5rem; display: block; }
|
|
|
|
/* 代码块样式 */
|
|
pre { background-color: #1e293b; color: #e2e8f0; padding: 1.5rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; }
|
|
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9em; }
|
|
p code, li code { background-color: #f1f5f9; color: #ef4444; padding: 0.2rem 0.4rem; border-radius: 4px; }
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 768px) {
|
|
.sidebar { transform: translateX(-100%); }
|
|
.main-content { margin-left: 0; padding: 1rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 侧边栏导航 -->
|
|
<nav class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>🦊 阿尼坊指南</h2>
|
|
</div>
|
|
<ul class="nav-links">
|
|
<li><a href="#readme">首页：用户指南</a></li>
|
|
<li><a href="#login">01 - 登录流程</a></li>
|
|
<li><a href="#auth">02 - 实名认证</a></li>
|
|
<li><a href="#booth">03 - 申摊流程</a></li>
|
|
<li><a href="#reservation">04 - 预约详情</a></li>
|
|
<li><a href="#screenshots">05 - 截图素材清单</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="main-content">
|
|
|
|
<!-- README -->
|
|
<section id="readme" class="section">
|
|
<h1>阿尼坊小程序用户指南</h1>
|
|
<p>欢迎使用阿尼坊小程序！本指南将帮助您快速上手。</p>
|
|
<h2>目录</h2>
|
|
<ol>
|
|
<li><a href="#login" style="color:var(--primary-color)">登录流程</a> - 微信授权登录</li>
|
|
<li><a href="#auth" style="color:var(--primary-color)">实名认证</a> - 完成身份验证</li>
|
|
<li><a href="#booth" style="color:var(--primary-color)">申摊流程</a> - 申请摊位参展</li>
|
|
<li><a href="#reservation" style="color:var(--primary-color)">预约详情</a> - 查看申请状态</li>
|
|
</ol>
|
|
<h2>快速开始</h2>
|
|
<p>如果您是新用户，建议按顺序阅读以上文档。如有问题，请通过「我的」-「意见反馈」联系客服。</p>
|
|
</section>
|
|
|
|
<!-- 01 登录流程 -->
|
|
<section id="login" class="section">
|
|
<h1>登录流程</h1>
|
|
<p>首次打开阿尼坊小程序时，系统会引导您完成微信登录。</p>
|
|
|
|
<h2>步骤说明</h2>
|
|
<h3>1. 打开小程序</h3>
|
|
<p>通过微信搜索"阿尼坊"或扫描二维码进入小程序。</p>
|
|
|
|
<h3>2. 触发登录</h3>
|
|
<p>当使用需要登录的功能时（如申摊），系统弹出登录提示。</p>
|
|
<img src="screenshots/1_市集界面_右上角申摊.png" alt="市集界面申摊入口" class="actual-img">
|
|
<p>点击「申摊」按钮，若未登录将弹出登录提示。</p>
|
|
<img src="screenshots/2_前往登录弹窗.jpg" alt="登录提示弹窗" class="actual-img">
|
|
<p>点击「去登录」按钮进入登录流程。
|
|
|
|
<h3>3. 填写个人信息</h3>
|
|
<p>登录表单包含头像选择、昵称填写和用户协议勾选。</p>
|
|
<img src="screenshots/3_填写昵称_头像信息.png" alt="登录表单" class="actual-img">
|
|
|
|
<h3>4. 手机号授权</h3>
|
|
<p>系统申请获取微信绑定手机号，用于验证码接收和客服联系。</p>
|
|
<img src="screenshots/4_登录后授权手机号弹窗.png" alt="手机号授权" class="actual-img">
|
|
|
|
<h3>5. 完成登录</h3>
|
|
<p>登录成功后，头像和昵称显示在「我的」页面。</p>
|
|
|
|
<div class="alert warning">
|
|
<strong>⚠️ 游客用户限制</strong>
|
|
<p>未登录的游客用户仅可浏览：活动公告、商铺卡片详情、摊位卡片详情。</p>
|
|
<p>需要登录后才能使用：设施预约、摊位申请、评论点赞、收藏功能。</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 02 实名认证 -->
|
|
<section id="auth" class="section">
|
|
<h1>实名认证</h1>
|
|
<p>实名认证是使用设施预约和摊位申请功能的前置条件。</p>
|
|
|
|
<h2>认证入口</h2>
|
|
<p>进入「我的」页面，点击「前往实名认证」按钮。</p>
|
|
<img src="screenshots/5_我的界面_前往实名认证.png" alt="实名认证入口" class="actual-img">
|
|
|
|
<h2>认证信息填写</h2>
|
|
<h3>必填内容</h3>
|
|
<table>
|
|
<thead>
|
|
<tr><th>字段</th><th>说明</th><th>要求</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>真实姓名</td><td>与身份证一致</td><td>2-20个汉字</td></tr>
|
|
<tr><td>身份证号码</td><td>18位身份证号</td><td>正确格式验证</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>1. 填写姓名和身份证号</h3>
|
|
<img src="screenshots/6_填写实名认证信息.png" alt="实名认证表单" class="actual-img">
|
|
|
|
<h3>2. 提交认证</h3>
|
|
<p>填写完成后点击「提交」按钮，系统进行身份验证并显示「已实名」标签。</p>
|
|
|
|
<div class="alert warning">
|
|
<strong>⚠️ 认证后不可修改</strong>
|
|
<p>实名认证完成后，姓名和身份证号不可更改。如需修改请联系客服。</p>
|
|
</div>
|
|
|
|
<h2>解锁功能</h2>
|
|
<p>实名认证后可使用：✅ 设施预约 ✅ 摊位申请 ✅ 商铺卡片发布</p>
|
|
</section>
|
|
|
|
<!-- 03 申摊流程 -->
|
|
<section id="booth" class="section">
|
|
<h1>申摊流程</h1>
|
|
<p>本指南帮助您完成摊位申请，参加阿尼坊动漫市集。</p>
|
|
|
|
<div class="alert info">
|
|
<strong>💡 前置条件</strong>
|
|
<p>申请摊位前请确保：✅ 已完成微信登录 ✅ 已完成实名认证</p>
|
|
</div>
|
|
|
|
<h2>申请入口</h2>
|
|
<p>进入「市集」页面，点击右上角「申摊」按钮。</p>
|
|
|
|
<h2>填写申请信息</h2>
|
|
<table>
|
|
<thead>
|
|
<tr><th>字段</th><th>限制</th><th>说明</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>标题</td><td>50字以内</td><td>卡片标题</td></tr>
|
|
<tr><td>正文</td><td>500字以内</td><td>内容描述，可用 #标签</td></tr>
|
|
<tr><td>图片</td><td>1张，≤5MB</td><td>卡片封面图</td></tr>
|
|
<tr><td>预约场次</td><td>下拉选择</td><td>日期+区域</td></tr>
|
|
<tr><td>动漫IP标签</td><td>1-10个</td><td>必选至少1个</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="alert info">
|
|
<strong>💡 表单填写提示</strong>
|
|
<p>申摊表单包含：标题（50字以内）、正文（500字以内）、封面图（≤5MB）、预约场次选择、动漫IP标签（1-10个）。系统自动保存上次填写内容（存稿机制），30天后自动清理。</p>
|
|
</div>
|
|
|
|
<h2>申请状态流转</h2>
|
|
<table>
|
|
<thead>
|
|
<tr><th>状态</th><th>说明</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>待抽签</td><td>申请已提交，等待抽签</td></tr>
|
|
<tr><td>审核中</td><td>抽签中签，等待审核</td></tr>
|
|
<tr><td>待缴费</td><td>审核通过，等待支付</td></tr>
|
|
<tr><td>未中签 / 审核驳回</td><td>抽签未中 / 审核未通过</td></tr>
|
|
<tr><td>成功</td><td>已公布摊位号</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="alert warning">
|
|
<strong>⚠️ 注意事项</strong>
|
|
<p>1. 场次限制：每天仅能申请一个场次。<br>2. 存稿机制：系统自动保存上次填写内容，30天后自动清理。</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 04 预约详情 -->
|
|
<section id="reservation" class="section">
|
|
<h1>预约详情</h1>
|
|
<p>本页面展示您的摊位申请和设施预约记录。</p>
|
|
|
|
<h2>入口位置</h2>
|
|
<p>进入「我的」页面，点击「预约详情」入口。</p>
|
|
|
|
<h2>页面结构</h2>
|
|
<p>页面分为两个栏目：</p>
|
|
<ul>
|
|
<li><strong>摊位栏目</strong> - 摊位申请记录</li>
|
|
<li><strong>设施栏目</strong> - 设施预约记录</li>
|
|
</ul>
|
|
|
|
<h2>摊位申请状态</h2>
|
|
<table>
|
|
<thead>
|
|
<tr><th>状态</th><th>显示内容</th><th>操作</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>待抽签</td><td>场次信息、备注</td><td>无</td></tr>
|
|
<tr><td>待缴费</td><td>场次信息、订单号、金额、截止时间</td><td>「支付」「取消」按钮</td></tr>
|
|
<tr><td>未中签</td><td>场次信息</td><td>无</td></tr>
|
|
<tr><td>审核驳回</td><td>场次信息、驳回原因</td><td>无</td></tr>
|
|
<tr><td>待公布</td><td>场次信息、订单号、备注、退款提示</td><td>「申请退款」按钮</td></tr>
|
|
<tr><td>成功</td><td>场次信息、摊位号、订单号、备注</td><td>无</td></tr>
|
|
<tr><td>已失效</td><td>场次信息、订单号、备注</td><td>无</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="alert info">
|
|
<strong>💡 摊位号格式</strong>
|
|
<p>公布后的摊位号格式：<code>月.日 + 区域 + 编号</code>，示例：<code>2.1 A区13</code></p>
|
|
</div>
|
|
|
|
<h2>设施预约状态</h2>
|
|
<table>
|
|
<thead>
|
|
<tr><th>状态</th><th>显示内容</th><th>操作</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>待缴费</td><td>设施名称、时间段、时长、金额、截止时间</td><td>「支付」「取消」按钮</td></tr>
|
|
<tr><td>成功</td><td>设施名称、时间段、订单号、退款提示</td><td>「申请退款」按钮</td></tr>
|
|
<tr><td>已失效</td><td>设施名称、时间段、订单号</td><td>无</td></tr>
|
|
<tr><td>已退款</td><td>设施名称、时间段、订单号</td><td>无</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>支付操作</h2>
|
|
<h3>待缴费状态</h3>
|
|
<p>点击「支付」按钮进入微信支付流程，请在截止时间前完成支付，超时将自动取消订单。</p>
|
|
<h3>退款申请</h3>
|
|
<p>符合退款条件时点击「申请退款」按钮，系统处理退款请求，退款成功后状态变更为「已退款」。</p>
|
|
|
|
<div class="alert warning">
|
|
<strong>⚠️ 重要提示</strong>
|
|
<p>支付时限：请在截止时间前完成支付，超时订单自动取消。</p>
|
|
<p>退款截止时间：各场次有退款截止时间，请留意提示。</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 05 截图素材清单 -->
|
|
<section id="screenshots" class="section">
|
|
<h1>截图素材清单</h1>
|
|
<p>以下是本指南中使用的截图素材列表。</p>
|
|
|
|
<h2>已有截图</h2>
|
|
<table>
|
|
<thead>
|
|
<tr><th>文件名</th><th>截图内容说明</th><th>对应章节</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>1_市集界面_右上角申摊.png</code></td><td>市集页面整体界面，右上角申摊按钮位置</td><td>01-登录流程</td></tr>
|
|
<tr><td><code>2_前往登录弹窗.jpg</code></td><td>未登录时点击申摊弹出的登录提示弹窗</td><td>01-登录流程</td></tr>
|
|
<tr><td><code>3_填写昵称_头像信息.png</code></td><td>登录表单界面，填写头像、昵称，勾选用户协议</td><td>01-登录流程</td></tr>
|
|
<tr><td><code>4_登录后授权手机号弹窗.png</code></td><td>手机号授权弹窗，申请获取微信绑定号码</td><td>01-登录流程</td></tr>
|
|
<tr><td><code>5_我的界面_前往实名认证.png</code></td><td>登录后「我的」页面，实名认证入口按钮</td><td>02-实名认证</td></tr>
|
|
<tr><td><code>6_填写实名认证信息.png</code></td><td>实名认证表单，填写姓名和身份证号码</td><td>02-实名认证</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<p>截图存放于 <code>screenshots/</code> 目录。</p>
|
|
|
|
<h2>待补充截图</h2>
|
|
<p>以下章节目前缺少对应截图，待后续补充：</p>
|
|
<ul>
|
|
<li>03-申摊流程</li>
|
|
<li>04-预约详情</li>
|
|
</ul>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- 简单的滚动监听脚本，用于侧边栏高亮 -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const sections = document.querySelectorAll('.section');
|
|
const navLinks = document.querySelectorAll('.nav-links a');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
let current = '';
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop;
|
|
const sectionHeight = section.clientHeight;
|
|
if (scrollY >= (sectionTop - 100)) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('href').includes(current)) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |