OPC/Demo/market.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPC橙果商城 · OPC 公共服务平台 Demo</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body data-page="market">
<header class="topnav" id="topnav"></header>

<div class="container">
  <div class="page-title">OPC橙果商城</div>
  <div class="page-sub">OPC 上架可复用成果，客户直接购买授权 · 标准化授权与版权管理（REQ-113~115）
    <span style="float:right" id="mk-actions"></span>
  </div>

  <!-- REQ-113 成果商品 -->
  <div class="grid grid-4" id="mk-grid"></div>

  <!-- 我的购买（买方角色） -->
  <div class="section">
    <h2>我的购买 <span class="req">REQ-115 · 授权书随单生成</span></h2>
    <div class="card"><table id="mk-orders"></table></div>
  </div>

  <div class="section">
    <div class="notice">REQ-114：成果须经运营商审核并明示授权类型（个人授权/企业授权/买断）与版权归属；交付含版权来源记录，超范围使用或二次销售进入争议仲裁（REQ-060）。</div>
  </div>
</div>

<div class="footer">OPC 公共服务平台 Demo · OPC橙果商城</div>
<script src="assets/app.js"></script>
<script src="assets/store.js"></script>
<script>
let workSeq = 61;

function renderPage(DB) {
  const M = DB.market;
  const role = currentRole();
  const canSell = ['opc', 'operator'].includes(role);
  const canBuy = ['opc', 'enterprise', 'personal', 'learner'].includes(role);

  document.getElementById('mk-actions').innerHTML =
    (canSell ? `<button class="btn sm" onclick="sellWork()">＋ 上架成果</button>` : '');

  document.getElementById('mk-grid').innerHTML = M.items.map(w => `
    <div class="card">
      <h3>${w.name}</h3>
      <div class="sub">${w.code} · ${w.cat}</div>
      <p class="muted">出品 ${w.seller} · 销量 ${w.sales} · ★${w.rating}</p>
      <div class="num" style="font-size:18px">${w.price}</div>
      <p style="margin:6px 0">${B(w.status)}</p>
      <button class="btn sm" onclick="detail('${w.code}')">查看详情</button>
      ${canBuy && w.action === 'buy' ? `<button class="btn sm ghost" onclick="buyWork('${w.code}')">直接购买</button>` : ''}
      ${role === 'operator' && w.action === 'audit' ? `<button class="btn sm ghost" onclick="auditWork('${w.code}')">审核</button>` : ''}
    </div>`).join('');

  document.getElementById('mk-orders').innerHTML =
    `<tr><th>订单号</th><th>成果</th><th>授权类型</th><th>金额</th><th>状态</th></tr>` +
    M.purchases.map(p => `<tr><td>${p.order}</td><td>${p.item}</td><td>${p.license}</td><td>${p.amount}</td><td>${B(p.status)} <button class="btn sm ghost" onclick="toast('授权书 LICENSE_${p.order.slice(6)}.pdf 已下载（演示）')">授权书</button></td></tr>`).join('');
}

function detail(code) {
  const w = DB.market.items.find(x => x.code === code);
  openModal({
    title: w.name,
    body: `<table>
      <tr><th>成果编码</th><td>${w.code}</td></tr>
      <tr><th>出品方</th><td>${w.seller}</td></tr>
      <tr><th>授权类型</th><td>${w.licenses.map(l => `${l[0]} ${l[1]}`).join(' · ')}</td></tr>
      <tr><th>版权归属</th><td>著作权归出品 OPC 所有；按授权类型授予使用权，买断转移全部财产权</td></tr>
      <tr><th>来源记录</th><td><span class="badge ok">素材来源已备案 · 无侵权风险</span></td></tr>
      <tr><th>交付内容</th><td>源文件 + 授权书 + 使用说明</td></tr>
    </table>`,
    actions: [
      { label: '关闭', cls: 'ghost' },
      { label: '购买', onClick: m => { m.remove(); buyWork(code); } },
    ],
  });
}
function buyWork(code) {
  const w = DB.market.items.find(x => x.code === code);
  openModal({
    title: '购买成果 · ' + w.name,
    body: `
      <div class="field"><label>授权类型</label><select id="bw-l">${w.licenses.map(l => `<option>${l[0]}（${l[1]}）</option>`).join('')}</select></div>
      <div class="checks"><label><input type="checkbox" id="bw-a" checked> 同意授权协议（授权范围、禁止事项、违约责任）</label></div>
      <p class="muted">支付经第三方通道完成，授权书随订单自动生成（REQ-114）。</p>`,
    actions: [
      { label: '取消', cls: 'ghost' },
      { label: '支付并下单', onClick: m => {
        if (!document.getElementById('bw-a').checked) { toast('请先同意授权协议', 'warn'); return; }
        m.remove();
        const lic = document.getElementById('bw-l').value.split('（')[0];
        const order = 'ORDER_2026091401';
        DB.market.purchases.unshift({ order, item: `${w.code} ${w.name}`, license: lic, amount: w.licenses.find(l => l[0] === lic)[1], status: ['已交付 · 授权书已生成', 'ok'] });
        w.sales++;
        renderPage(DB);
        toast(`购买成功：订单 ${order} 已生成，授权书与源文件已交付`);
      } },
    ],
  });
}
function sellWork() {
  openModal({
    title: '上架成果（OPC 角色 · REQ-113）',
    body: `
      <div class="field"><label>成果名称</label><input id="sw-n" placeholder="如：双 11  Banner 模板包"></div>
      <div class="field-row">
        <div class="field"><label>类目</label><select><option>电商视觉模板</option><option>素材包</option><option>AI 漫剧</option><option>企业智能体</option></select></div>
        <div class="field"><label>个人授权价</label><input placeholder="¥"></div>
      </div>
      <div class="checks"><label><input type="checkbox" checked> 声明原创或已获完整授权，版权来源记录随件提交（REQ-114）</label></div>`,
    actions: [
      { label: '取消', cls: 'ghost' },
      { label: '提交审核', onClick: m => {
        const n = document.getElementById('sw-n').value.trim();
        if (!n) { toast('请填写成果名称', 'warn'); return; }
        m.remove();
        DB.market.items.push({ code: 'WORK_00' + workSeq++, name: n, seller: 'OPC_00017 张设计', cat: '电商视觉模板', price: '待定价', licenses: [['个人授权', '待定价']], sales: 0, rating: '—', status: ['审核中', 'info'], action: 'audit' });
        renderPage(DB);
        toast('成果已提交运营商审核，审核通过后自动上架并公示授权类型');
      } },
    ],
  });
}
function auditWork(code) {
  const w = DB.market.items.find(x => x.code === code);
  confirmDlg('上架审核', `审核「${w.name}」：原创声明 ✓ 版权来源记录 ✓ 授权类型明示 ✓。确认通过上架？`, '通过上架', () => {
    w.status = ['已上架', 'ok']; w.action = 'buy';
    renderPage(DB);
    toast('审核通过，成果已上架');
  });
}
</script>
</body>
</html>