Toolbox/public/tools/rational_lock/index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>理性消费决策锁</title>
    <link rel="stylesheet" href="/common/common.css" />
    <link rel="stylesheet" href="/tools/rational_lock/rational_lock.css" />
  </head>
  <body>
    <main class="page">
      <header class="hero">
        <div class="hero-main">
          <div>
            <h1>理性消费决策锁</h1>
            <p>耐用品消费需完成全量勾选与冷静期后，才可解锁购买许可</p>
          </div>
          <div class="hero-auth">
            <div id="auth-login-box" class="auth-login-inline">
              <input id="login-username" autocomplete="off" readonly />
              <input id="login-password" type="password" autocomplete="off" readonly />
              <button id="btn-login" class="btn btn-primary" type="button">登录</button>
            </div>
            <div id="auth-logged-box" style="display:none">
              <div class="auth-row">
                <div id="auth-current-user" class="auth-current-user"></div>
                <button id="btn-logout" class="btn" type="button">退出登录</button>
              </div>
            </div>
            <div id="auth-status" class="status"></div>
          </div>
        </div>
      </header>

      <div id="app-content" style="display:none">
      <section class="card" id="warning-box" style="display:none"></section>

      <section class="card">
        <h2>想买申请</h2>
        <form id="application-form">
          <div class="grid two">
            <label>商品名称<input id="item-name" required /></label>
            <label>商品分类
              <select id="item-category" required>
                <option value="">请选择</option>
                <optgroup label="低风险类">
                  <option value="园艺绿植低风险类">园艺绿植低风险类</option>
                  <option value="家居软装小物件">家居软装小物件</option>
                  <option value="日用消耗非接触类">日用消耗非接触类</option>
                  <option value="临时/消耗/低值易耗品">临时 / 消耗 / 低值易耗品</option>
                  <option value="其他低风险">其他低风险</option>
                </optgroup>
                <optgroup label="高风险类">
                  <option value="食品&入口类">食品 & 入口类</option>
                  <option value="健康&身体接触类">健康 & 身体接触类</option>
                  <option value="安全&电器类">安全 & 电器类</option>
                  <option value="贵重&保真刚需品">贵重 & 保真刚需品</option>
                  <option value="其他高风险">其他高风险</option>
                </optgroup>
              </select>
              <div id="item-category-help" class="field-tip field-tip-rich">
                <div class="field-tip-title">分类示例说明</div>
                <div id="item-category-help-body">请选择商品分类后查看该分类对应的常见示例。</div>
              </div>
            </label>
            <label>预估价格<input id="item-price" type="number" min="0" step="0.01" required /></label>
            <label>购买原因简述<input id="item-reason" required /></label>
          </div>
          <div id="shopping-risk-group-tip" class="status"></div>
          <h3>网购风险核验</h3>
          <div class="grid two">
            <label>购物方式
              <select id="shopping-method" required>
                <option value="">请选择</option>
                <option value="offline">线下店</option>
                <option value="online">网购</option>
              </select>
            </label>
            <label id="shopping-guarantee-wrap" style="display:none">购物保障
              <select id="shopping-guarantee">
                <option value="">请选择</option>
                <option value="seven-day">有七天无理由退换</option>
                <option value="no-return">没有无理由退换</option>
                <option value="xianyu-used">闲鱼二手购买</option>
              </select>
            </label>
            <label id="shopping-platform-wrap" style="display:none">购买平台
              <select id="shopping-platform">
                <option value="">请选择</option>
                <option value="pdd">拼多多</option>
                <option value="taobao">淘宝</option>
                <option value="xianyu">闲鱼</option>
                <option value="tmall">天猫</option>
                <option value="jd">京东</option>
                <option value="other">其他平台</option>
              </select>
            </label>
          </div>
          <div id="shopping-online-extra-wrap" class="grid two" style="display:none">
            <label>店铺类型
              <select id="shopping-seller-type">
                <option value="">请选择</option>
                <option value="brand-flagship">品牌官旗</option>
                <option value="platform-premium">平台优选 / 自营</option>
                <option value="enterprise-shop">企业店</option>
                <option value="normal-shop">普通店</option>
                <option value="personal-seller">个人卖家</option>
              </select>
            </label>
            <label>品相
              <select id="shopping-condition">
                <option value="">请选择</option>
                <option value="new-sealed">全新未拆</option>
                <option value="new-opened">全新已拆</option>
                <option value="used-good">二手良品</option>
                <option value="used-flawed">二手瑕疵</option>
                <option value="unknown">品相不确定</option>
              </select>
            </label>
          </div>
          <div id="shopping-risk-tip" class="warn" style="display:none"></div>
          <div id="shopping-progress-wrap" style="display:none">
            <div id="shopping-progress-text" class="status"></div>
            <div id="shopping-progress-lights" class="risk-lights">
              <span class="risk-light" id="shopping-light-1"></span>
              <span class="risk-light" id="shopping-light-2"></span>
              <span class="risk-light" id="shopping-light-3"></span>
              <span class="risk-light" id="shopping-light-4"></span>
              <span class="risk-light" id="shopping-light-5"></span>
            </div>
          </div>
          <div id="shopping-questions-wrap" class="grid one" style="display:none">
            <label>沟通问题1
              <input id="shopping-q1" placeholder="例如：商品是否全新？是否有拆修或暗病？" />
            </label>
            <label>沟通问题2
              <input id="shopping-q2" placeholder="例如：发货时间、物流方式、到货时效？" />
            </label>
            <label>沟通问题3
              <input id="shopping-q3" placeholder="例如：不满意时是否支持退换？具体规则？" />
            </label>
            <label>沟通问题4
              <input id="shopping-q4" placeholder="例如：售后联系人和处理时效？" />
            </label>
            <label>沟通问题5
              <input id="shopping-q5" placeholder="例如：描述不符时如何处理？" />
            </label>
          </div>
          <div id="shopping-submit-tip" class="status"></div>

          <h3>冷静期设置</h3>
          <div class="grid one">
            <label>冷静期天数
              <select id="cooling-days" required>
                <option value="3" selected>3天</option>
                <option value="4">4天</option>
                <option value="5">5天</option>
                <option value="6">6天</option>
                <option value="7">7天</option>
                <option value="8">8天</option>
                <option value="9">9天</option>
                <option value="10">10天</option>
                <option value="11">11天</option>
                <option value="12">12天</option>
                <option value="13">13天</option>
                <option value="14">14天</option>
              </select>
            </label>
          </div>

          <h3>冷静期强制承诺</h3>
          <div class="check-grid" id="commit-cooling">
            <label><input type="checkbox" value="1" />我确认不是即时冲动，愿意等待<span id="cooling-days-text">3</span>天冷静期</label>
            <label><input type="checkbox" value="1" />我不是因打折、直播、促销被迫下单</label>
            <label><input type="checkbox" value="1" />我不是跟风、攀比、炫耀而购买</label>
            <label><input type="checkbox" value="1" />本次购买不属于吃喝类，需严格审核</label>
          </div>

          <h3>现有物品替代检查</h3>
          <div class="check-grid" id="commit-replacement">
            <label><input type="checkbox" value="1" data-replacement="no-similar" />家中无完全可替代的同类物品</label>
            <label><input type="checkbox" value="1" data-replacement="damaged" />现有同类物品已损坏、过时或无法使用</label>
            <label><input type="checkbox" value="1" data-replacement="unrepairable" />现有物品无法维修或改造继续使用</label>
            <label><input type="checkbox" value="1" data-replacement="unique" />该物品功能独特且无可替代</label>
          </div>

          <h3>真实使用场景验证</h3>
          <div class="grid one">
            <label>场景1：我将在<input id="scene-where" required placeholder="输入使用场景" /></label>
            <label>场景2：我预计每周/每月使用<input id="scene-frequency" required placeholder="输入次数" /></label>
            <label>场景3：该物品能解决我<input id="scene-problem" required placeholder="输入实际问题" /></label>
          </div>

          <h3>必要性评分（1-5分）</h3>
          <div class="grid two">
            <label>实用程度
              <select id="score-practical" required>
                <option value="">请选择</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
              </select>
            </label>
            <label>必需程度
              <select id="score-necessary" required>
                <option value="">请选择</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
              </select>
            </label>
            <label>预期使用率
              <select id="score-usage" required>
                <option value="">请选择</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
              </select>
            </label>
            <label>性价比合理性
              <select id="score-cost" required>
                <option value="">请选择</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
              </select>
            </label>
            <label>后悔概率（越低越好）
              <select id="score-regret" required>
                <option value="">请选择</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
              </select>
            </label>
            <div class="score-box">总分：<span id="score-total">0</span> / 25（低于14不建议购买）</div>
          </div>

          <h3>最终防冲动验证（必须全选“否”）</h3>
          <div class="radio-grid">
            <div>
              <div>是否只是觉得好看/新鲜？</div>
              <label><input type="radio" name="impulse-1" value="是" />是</label>
              <label><input type="radio" name="impulse-1" value="否" />否</label>
            </div>
            <div>
              <div>是否买后大概率闲置吃灰？</div>
              <label><input type="radio" name="impulse-2" value="是" />是</label>
              <label><input type="radio" name="impulse-2" value="否" />否</label>
            </div>
            <div>
              <div>是否为了发朋友圈/满足虚荣心？</div>
              <label><input type="radio" name="impulse-3" value="是" />是</label>
              <label><input type="radio" name="impulse-3" value="否" />否</label>
            </div>
          </div>

          <h3>反悔可能</h3>
          <div class="grid one">
            <label>任何物品都有反悔的可能，你写下哪些反悔的可能？
              <textarea id="item-regret-possibility" required placeholder="例如：使用频率可能低于预期、同类已有替代、后续维护成本偏高"></textarea>
            </label>
          </div>

          <h3>最终承诺</h3>
          <div class="check-grid" id="commit-final">
            <label><input type="checkbox" value="1" />我确认所有信息真实有效</label>
            <label><input type="checkbox" value="1" />我确认是真需要，而非单纯想要</label>
            <label><input type="checkbox" value="1" />我愿意为本次消费承担责任，不浪费</label>
          </div>

          <div class="form-actions">
            <button id="btn-save-draft" class="btn" type="button">保存草稿</button>
            <button id="btn-load-draft" class="btn" type="button">继续填写草稿</button>
            <button id="btn-clear-draft" class="btn" type="button">清空草稿</button>
            <button id="btn-open-settings" class="btn" type="button">设置</button>
          </div>
          <button id="btn-submit" class="btn btn-primary btn-soft-disabled" type="submit">提交并开始冷静期</button>
          <div id="form-status" class="status"></div>
        </form>
      </section>

      <section class="card">
        <h2>冷静期与结果</h2>
        <div id="decision-panel" class="decision"></div>
      </section>

      <section class="card">
        <h2>历史记录</h2>
        <div class="history-toolbar">
          <label>搜索
            <input id="history-search" placeholder="商品名称/分类/原因" />
          </label>
          <label>开始日期
            <input id="history-start-date" type="date" />
          </label>
          <label>结束日期
            <input id="history-end-date" type="date" />
          </label>
          <label class="history-check">
            <input id="history-show-archived" type="checkbox" />
            显示归档
          </label>
          <button id="btn-history-reset" class="btn" type="button">重置筛选</button>
        </div>
        <div id="stats" class="stats"></div>
        <div id="history-list" class="list"></div>
        <div class="history-pager">
          <button id="history-prev" class="btn" type="button">上一页</button>
          <span id="history-page-info" class="meta"></span>
          <button id="history-next" class="btn" type="button">下一页</button>
        </div>
      </section>
      </div>
    </main>
    <div id="app-modal" class="modal-mask" style="display:none">
      <div class="modal-panel">
        <div id="modal-title" class="modal-title"></div>
        <div id="modal-message" class="modal-message"></div>
        <div id="modal-actions" class="modal-actions"></div>
      </div>
    </div>
    <div id="busy-mask" class="busy-mask" style="display:none">
      <div class="busy-panel">
        <div class="busy-spinner"></div>
        <div id="busy-text" class="busy-text">正在帮你处理哦，请稍等~</div>
      </div>
    </div>
    <script src="/tools/rational_lock/rational_lock.js"></script>
  </body>
</html>