guide.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>校园配送平台演示</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 40px;
      background-color: #f9f9f9;
    }
    h1 {
      color: #333;
    }
    h2 {
      margin-top: 20px;
      color: #444;
    }
    ul {
      margin-left: 20px;
    }
    li {
      margin-bottom: 10px;
    }
    .step {
      background: #fff;
      border: 1px solid #ddd;
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    .role {
      font-weight: bold;
      color: #555;
    }
    .expected {
      color: #006400;
      font-style: italic;
    }
    a {
      color: #007acc;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>

  <h1>校园配送平台演示</h1>

  <div class="step">
    <h2>Step 1: 查看市场所有撮合平台</h2>
    <p class="role">服务角色：任意角色</p>
    <ul>
      <li>订单发起人了解平台信誉、新平台调研竞品情况</li>
      <li>骑手了解平台分成情况</li>
    </ul>
    <p><strong>操作方式：</strong>访问 
      <a href="./p1_home_page.html">Protocol Marketplace Explorer</a>，查看市场上所有的撮合平台及其分成比例。
    </p>
  </div>

  <div class="step">
    <h2>Step 2: 创建新的撮合平台</h2>
    <p class="role">服务角色：撮合平台</p>
    <p><strong>操作方式：</strong></p>
    <ul>
      <li>访问 <a href="./p2_protocol_page.html">Create New Distribution Protocol</a></li>
      <li>右上角链接钱包</li>
      <li>设定协议名称、分成比例、平台结算地址、保险资金池地址</li>
      <li>点击 <code>Deploy</code> 部署分成协议</li>
    </ul>
    <p class="expected"><strong>预期结果：</strong>显示部署成功的协议ID，点击后跳转到区块链浏览器查看合约详情。</p>
  </div>

  <div class="step">
    <h2>Step 3: 配送需求方创建新订单（未在前端中体现）</h2>
    <p class="role">服务角色：订单发起人</p>
    <p><strong>操作方式：</strong></p>
    <ul>
      <li>在区块链浏览器中调用 <code>createOrder</code> 方法</li>
      <li>转入订单金额，指定协议ID</li>
    </ul>
    <p class="expected"><strong>预期结果：</strong>创建新的待配送订单，订单金额暂时进入协议合约托管。</p>
  </div>

  <div class="step">
    <h2>Step 4: 骑手接单并完成配送</h2>
    <p class="role">服务角色：配送骑手</p>
    <p><strong>操作方式：</strong></p>
    <ul>
      <li>访问 <a href="./p3_packup_page.html">Rider Job Hall</a>，查看所有待接单的配送订单</li>
      <li>预览订单详情，包括订单金额、协议分成比例</li>
      <li>选择一个订单，点击 <code>Accept</code> 接单</li>
      <li>点击 <code>Order Claimed</code> 按钮进入订单详情页</li>
      <li>配送完成后，点击 <code>Complete Delivery</code> 完成订单</li>
    </ul>
    <p class="expected"><strong>预期结果：</strong>订单状态更新为已完成，订单金额按照协议分成比例自动结算到平台和骑手账户。</p>
  </div>

</body>
</html>