73 lines
4.2 KiB
HTML
73 lines
4.2 KiB
HTML
<h2>设计第一部分：页面流与组件边界</h2>
|
|
<p class="subtitle">一个 uni-app 路由承载完整游客端，以页面状态切换保持连续体验；每个复杂页面拆成同目录子组件。</p>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">src/pages-service/tickets/index.vue · 页面壳层</div>
|
|
<div class="mockup-body" style="background:#f8fafc">
|
|
<div style="display:grid;grid-template-columns:1.15fr .85fr;gap:18px">
|
|
<div>
|
|
<div class="label">浏览与购买主链路</div>
|
|
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px">
|
|
<div style="padding:11px 13px;border-radius:12px;background:#064e3b;color:white;font-weight:800">首页<br><small style="font-weight:500;opacity:.75">分类联动列表</small></div>
|
|
<span>→</span>
|
|
<div style="padding:11px 13px;border-radius:12px;background:white;border:1px solid #cbd5e1;font-weight:800">商品详情</div>
|
|
<span>→</span>
|
|
<div style="padding:11px 13px;border-radius:12px;background:white;border:1px solid #cbd5e1;font-weight:800">预订选择</div>
|
|
<span>→</span>
|
|
<div style="padding:11px 13px;border-radius:12px;background:white;border:1px solid #cbd5e1;font-weight:800">填写游客</div>
|
|
<span>→</span>
|
|
<div style="padding:11px 13px;border-radius:12px;background:#f97316;color:white;font-weight:800">支付成功</div>
|
|
</div>
|
|
|
|
<div class="label" style="margin-top:24px">订单与售后支线</div>
|
|
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px">
|
|
<div style="padding:11px 13px;border-radius:12px;background:#1e3a8a;color:white;font-weight:800">我的订单</div>
|
|
<span>→</span>
|
|
<div style="padding:11px 13px;border-radius:12px;background:white;border:1px solid #cbd5e1;font-weight:800">订单详情</div>
|
|
<span>→</span>
|
|
<div style="padding:11px 13px;border-radius:12px;background:#ede9fe;color:#5b21b6;font-weight:800">我的凭证</div>
|
|
<span style="color:#94a3b8">或</span>
|
|
<div style="padding:11px 13px;border-radius:12px;background:#fff7ed;color:#c2410c;font-weight:800">申请退款 → 结果</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="border-left:1px dashed #cbd5e1;padding-left:18px">
|
|
<div class="label">同目录模块</div>
|
|
<div style="display:grid;gap:8px;margin-top:10px;font-size:13px">
|
|
<div style="padding:10px 12px;background:white;border-radius:10px;border:1px solid #e2e8f0"><strong>components/</strong> 各页面视图与商品卡片</div>
|
|
<div style="padding:10px 12px;background:white;border-radius:10px;border:1px solid #e2e8f0"><strong>data.js</strong> 商品、分组、游客、订单默认结构</div>
|
|
<div style="padding:10px 12px;background:white;border-radius:10px;border:1px solid #e2e8f0"><strong>model.mjs</strong> 页面跳转、价格、订单与退款纯逻辑</div>
|
|
<div style="padding:10px 12px;background:white;border-radius:10px;border:1px solid #e2e8f0"><strong>index.vue</strong> 状态编排、返回规则和共享数据</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" style="margin-top:22px">
|
|
<h3>交互约定</h3>
|
|
<ul>
|
|
<li>点击商品图片或标题进入详情；点击“选购”直接进入预订选择。</li>
|
|
<li>首页头图和左侧分类固定，右侧商品列表独立滚动；分类点击与滚动高亮双向联动。</li>
|
|
<li>页面内返回按来源状态回退；首页左上角使用 <code>uni.navigateBack</code>。</li>
|
|
<li>右上角用户按钮进入常用出行人，订单按钮进入我的订单。</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="options">
|
|
<div class="option" data-choice="architecture-approved" onclick="toggleSelect(this)">
|
|
<div class="letter">✓</div>
|
|
<div class="content">
|
|
<h3>确认此结构</h3>
|
|
<p>按上面的页面流、组件边界和返回规则继续。</p>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-choice="architecture-adjust" onclick="toggleSelect(this)">
|
|
<div class="letter">✎</div>
|
|
<div class="content">
|
|
<h3>需要调整</h3>
|
|
<p>选中后在终端告诉我希望修改的页面或交互。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|