Inicio Explorar Ayuda
Iniciar sesión
fa88
/
foodie-server
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Rama: test
Ramas Etiquetas
foodie-server
/
meituan-promotion-types-demo.html

meituan-promotion-types-demo.html 30 KB
Permalink Histórico Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>美团商家促销类型解析</title>
    7. 

  7. <style>
    8. 

  8.   * { margin: 0; padding: 0; box-sizing: border-box; }
    9. 

  9.   body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: #f5f5f5; color: #333; padding: 16px; max-width: 480px; margin: 0 auto; }
    10. 

  10. 

  11.   .page-title { text-align: center; font-size: 20px; font-weight: 700; margin: 12px 0 20px; color: #333; }
    12. 

  12. 

  13.   /* Category Section */
    14. 

  14.   .category { background: #fff; border-radius: 12px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
    15. 

  15.   .category-header { padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
    16. 

  16.   .category-header .icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex-shrink: 0; }
    17. 

  17.   .category-header .info h3 { font-size: 16px; font-weight: 600; }
    18. 

  18.   .category-header .info p { font-size: 12px; color: #999; margin-top: 2px; }
    19. 

  19.   .cat-order .icon { background: linear-gradient(135deg, #ff6b35, #ff4500); }
    20. 

  20.   .cat-item .icon { background: linear-gradient(135deg, #4facfe, #2196f3); }
    21. 

  21.   .cat-delivery .icon { background: linear-gradient(135deg, #43e97b, #38b249); }
    22. 

  22.   .cat-coupon .icon { background: linear-gradient(135deg, #fa709a, #e91e63); }
    23. 

  23. 

  24.   /* Promo Card */
    25. 

  25.   .promo-card { padding: 12px 16px; border-top: 1px solid #f0f0f0; }
    26. 

  26.   .promo-card .promo-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
    27. 

  27.   .promo-card .promo-title .badge { font-size: 10px; padding: 1px 6px; border-radius: 3px; color: #fff; font-weight: 500; }
    28. 

  28.   .badge-auto { background: #ff6b35; }
    29. 

  29.   .badge-select { background: #2196f3; }
    30. 

  30.   .badge-manual { background: #e91e63; }
    31. 

  31.   .promo-card .promo-desc { font-size: 12px; color: #666; margin-bottom: 8px; line-height: 1.6; }
    32. 

  32.   .promo-card .example { background: #fff8f0; border-radius: 8px; padding: 10px 12px; font-size: 12px; }
    33. 

  33.   .cat-item .promo-card .example { background: #f0f7ff; }
    34. 

  34.   .cat-delivery .promo-card .example { background: #f0fff4; }
    35. 

  35.   .cat-coupon .promo-card .example { background: #fff0f5; }
    36. 

  36.   .example .label { color: #999; margin-bottom: 4px; }
    37. 

  37.   .example .calc { color: #333; line-height: 1.8; }
    38. 

  38.   .example .calc .price { color: #ff4500; font-weight: 600; }
    39. 

  39.   .example .calc .line-through { text-decoration: line-through; color: #999; }
    40. 

  40.   .example .calc .highlight { background: #fff3cd; padding: 0 3px; border-radius: 2px; }
    41. 

  41. 

  42.   /* Interactive Demo */
    43. 

  43.   .demo-section { background: #fff; border-radius: 12px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
    44. 

  44.   .demo-header { padding: 14px 16px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
    45. 

  45.   .demo-header h3 { font-size: 16px; font-weight: 600; }
    46. 

  46.   .demo-header p { font-size: 12px; opacity: 0.8; margin-top: 2px; }
    47. 

  47. 

  48.   /* Order Items */
    49. 

  49.   .order-items { padding: 12px 16px; }
    50. 

  50.   .order-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
    51. 

  51.   .order-item:last-child { border-bottom: none; }
    52. 

  52.   .order-item .name { flex: 1; }
    53. 

  53.   .order-item .item-price { color: #333; font-weight: 500; min-width: 60px; text-align: right; }
    54. 

  54.   .order-item .item-final { color: #ff4500; font-weight: 600; min-width: 60px; text-align: right; }
    55. 

  55.   .order-item .item-tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; color: #fff; margin-left: 6px; }
    56. 

  56.   .item-tag-discount { background: #2196f3; }
    57. 

  57.   .item-tag-normal { background: #ccc; }
    58. 

  58. 

  59.   /* Calculation Steps */
    60. 

  60.   .calc-steps { padding: 0 16px 16px; }
    61. 

  61.   .calc-step { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
    62. 

  62.   .calc-step .step-label { color: #666; display: flex; align-items: center; gap: 6px; }
    63. 

  63.   .calc-step .step-label .step-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; flex-shrink: 0; }
    64. 

  64.   .step-order { background: #ff6b35; }
    65. 

  65.   .step-item { background: #2196f3; }
    66. 

  66.   .step-delivery { background: #43e97b; }
    67. 

  67.   .step-coupon { background: #e91e63; }
    68. 

  68.   .calc-step .step-value { font-weight: 500; }
    69. 

  69.   .step-minus { color: #ff4500; }
    70. 

  70.   .step-plus { color: #333; }
    71. 

  71.   .calc-divider { border-top: 1px dashed #ddd; margin: 6px 0; }
    72. 

  72.   .calc-total { display: flex; justify-content: space-between; padding: 8px 0; font-size: 16px; font-weight: 700; }
    73. 

  73.   .calc-total .total-price { color: #ff4500; }
    74. 

  74. 

  75.   /* Toggle switches */
    76. 

  76.   .toggle-section { padding: 12px 16px; background: #fafafa; border-top: 1px solid #f0f0f0; }
    77. 

  77.   .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 13px; }
    78. 

  78.   .toggle-row .toggle-info { display: flex; align-items: center; gap: 6px; }
    79. 

  79.   .toggle-row .toggle-info .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    80. 

  80.   .toggle { width: 44px; height: 24px; border-radius: 12px; background: #ddd; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
    81. 

  81.   .toggle.active { background: #4facfe; }
    82. 

  82.   .toggle .knob { width: 20px; height: 20px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
    83. 

  83.   .toggle.active .knob { left: 22px; }
    84. 

  84. 

  85.   /* Tabs */
    86. 

  86.   .tabs { display: flex; border-bottom: 1px solid #f0f0f0; }
    87. 

  87.   .tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #999; cursor: pointer; position: relative; transition: color 0.2s; }
    88. 

  88.   .tab.active { color: #ff6b35; font-weight: 600; }
    89. 

  89.   .tab.active::after { content: ''; position: absolute; bottom: 0; left: 30%; right: 30%; height: 3px; background: #ff6b35; border-radius: 2px; }
    90. 

  90.   .tab-content { display: none; }
    91. 

  91.   .tab-content.active { display: block; }
    92. 

  92. 

  93.   /* Stack diagram */
    94. 

  94.   .stack-diagram { padding: 16px; }
    95. 

  95.   .stack-bar { display: flex; align-items: center; margin-bottom: 8px; }
    96. 

  96.   .stack-bar .bar-label { width: 80px; font-size: 11px; color: #666; text-align: right; padding-right: 10px; flex-shrink: 0; }
    97. 

  97.   .stack-bar .bar-track { flex: 1; height: 28px; background: #f5f5f5; border-radius: 6px; position: relative; overflow: hidden; }
    98. 

  98.   .stack-bar .bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 600; transition: width 0.5s ease; }
    99. 

  99.   .bar-original { background: linear-gradient(90deg, #b0b0b0, #999); }
    100. 

  100.   .bar-promo { background: linear-gradient(90deg, #ff6b35, #ff4500); }
    101. 

  101.   .bar-discount { background: linear-gradient(90deg, #4facfe, #2196f3); }
    102. 

  102.   .bar-delivery { background: linear-gradient(90deg, #43e97b, #38b249); }
    103. 

  103.   .bar-coupon { background: linear-gradient(90deg, #fa709a, #e91e63); }
    104. 

  104.   .bar-final { background: linear-gradient(90deg, #667eea, #764ba2); }
    105. 

  105. 

  106.   .note { font-size: 11px; color: #999; padding: 0 16px 12px; line-height: 1.6; }
    107. 

  107. 

  108.   /* Exclusive table */
    109. 

  109.   .mutex-table { padding: 12px 16px; }
    110. 

  110.   .mutex-table table { width: 100%; border-collapse: collapse; font-size: 11px; }
    111. 

  111.   .mutex-table th { background: #f8f8f8; padding: 6px 4px; text-align: center; border: 1px solid #eee; font-weight: 600; color: #333; }
    112. 

  112.   .mutex-table td { padding: 6px 4px; text-align: center; border: 1px solid #eee; }
    113. 

  113.   .mutex-yes { color: #43e97b; font-weight: 700; }
    114. 

  114.   .mutex-no { color: #ff4500; font-weight: 700; }
    115. 

  115.   .mutex-self { color: #ccc; }
    116. 

  116. </style>
    117. 

  117. </head>
    118. 

  118. <body>
    119. 

  119. 

  120. <div class="page-title">美团商家促销类型解析</div>
    121. 

  121. 

  122. <!-- Tabs -->
    123. 

  123. <div class="category">
    124. 

  124.   <div class="tabs">
    125. 

  125.     <div class="tab active" onclick="switchTab('overview')">类型总览</div>
    126. 

  126.     <div class="tab" onclick="switchTab('demo')">算价演示</div>
    127. 

  127.     <div class="tab" onclick="switchTab('mutex')">互斥规则</div>
    128. 

  128.   </div>
    129. 

  129. 

  130.   <!-- Tab 1: Overview -->
    131. 

  131.   <div id="tab-overview" class="tab-content active">
    132. 

  132.     <!-- Order Level -->
    133. 

  133.     <div class="category cat-order">
    134. 

  134.       <div class="category-header">
    135. 

  135.         <div class="icon">📦</div>
    136. 

  136.         <div class="info">
    137. 

  137.           <h3>订单级促销</h3>
    138. 

  138.           <p>作用在"订单总价"上</p>
    139. 

  139.         </div>
    140. 

  140.       </div>
    141. 

  141.       <div class="promo-card">
    142. 

  142.         <div class="promo-title">满减活动 <span class="badge badge-auto">自动生效</span></div>
    143. 

  143.         <div class="promo-desc">订单金额达到X元自动减免Y元，可设多档位。全场商品参与，不需要选商品。</div>
    144. 

  144.         <div class="example">
    145. 

  145.           <div class="label">📋 示例</div>
    146. 

  146.           <div class="calc">
    147. 

  147.             满减档位：满20减5 / 满40减12 / 满60减20<br>
    148. 

  148.             订单商品合计 <span class="price">¥45</span> → 命中"满40减12"<br>
    149. 

  149.             实付商品金额 = 45 - 12 = <span class="price">¥33</span>
    150. 

  150.           </div>
    151. 

  151.         </div>
    152. 

  152.       </div>
    153. 

  153.       <div class="promo-card">
    154. 

  154.         <div class="promo-title">门店新客立减 <span class="badge badge-auto">自动生效</span></div>
    155. 

  155.         <div class="promo-desc">首次在本店下单的用户，订单总价直接减X元。仅限新客。</div>
    156. 

  156.         <div class="example">
    157. 

  157.           <div class="label">📋 示例</div>
    158. 

  158.           <div class="calc">
    159. 

  159.             新客立减 <span class="price">¥3</span><br>
    160. 

  160.             新客下单 ¥45 → 实付 = 45 - 3 = <span class="price">¥42</span>
    161. 

  161.           </div>
    162. 

  162.         </div>
    163. 

  163.       </div>
    164. 

  164.     </div>
    165. 

  165. 

  166.     <!-- Item Level -->
    167. 

  167.     <div class="category cat-item">
    168. 

  168.       <div class="category-header">
    169. 

  169.         <div class="icon">🏷️</div>
    170. 

  170.         <div class="info">
    171. 

  171.           <h3>商品级促销</h3>
    172. 

  172.           <p>作用在"指定商品单价"上</p>
    173. 

  173.         </div>
    174. 

  174.       </div>
    175. 

  175.       <div class="promo-card">
    176. 

  176.         <div class="promo-title">折扣商品 <span class="badge badge-select">选商品</span></div>
    177. 

  177.         <div class="promo-desc">商家选择特定商品设折扣价。只有被选中的商品打折，其他商品原价。自动创建"折扣"专区。</div>
    178. 

  178.         <div class="example">
    179. 

  179.           <div class="label">📋 示例</div>
    180. 

  180.           <div class="calc">
    181. 

  181.             宫保鸡丁 原价 <span class="line-through">¥20</span> → 7折 = <span class="price">¥14</span><br>
    182. 

  182.             麻婆豆腐 原价 ¥18（未设折扣，原价）<br>
    183. 

  183.             订单合计 = 14 + 18 = <span class="price">¥32</span>
    184. 

  184.           </div>
    185. 

  185.         </div>
    186. 

  186.       </div>
    187. 

  187.       <div class="promo-card">
    188. 

  188.         <div class="promo-title">第二份半价 <span class="badge badge-select">选商品</span></div>
    189. 

  189.         <div class="promo-desc">选择特定商品，买2件时第2件半价。按商品单独计算。</div>
    190. 

  190.         <div class="example">
    191. 

  191.           <div class="label">📋 示例</div>
    192. 

  192.           <div class="calc">
    193. 

  193.             可乐 原价 ¥6，买2件<br>
    194. 

  194.             = 6 + 6×0.5 = <span class="price">¥9</span>（省¥3）<br>
    195. 

  195.             不是对订单总价打折，是这1件商品的价格变了
    196. 

  196.           </div>
    197. 

  197.         </div>
    198. 

  198.       </div>
    199. 

  199.       <div class="promo-card">
    200. 

  200.         <div class="promo-title">爆品特价 <span class="badge badge-select">选商品</span></div>
    201. 

  201.         <div class="promo-desc">选择特定商品设超低特价引流，可与满减/折扣同享（独特优势）。</div>
    202. 

  202.         <div class="example">
    203. 

  203.           <div class="label">📋 示例</div>
    204. 

  204.           <div class="calc">
    205. 

  205.             招牌鸡腿饭 原价 <span class="line-through">¥25</span> → 爆品价 <span class="price">¥9.9</span><br>
    206. 

  206.             爆品价 ¥9.9 仍然计入满减的订单金额
    207. 

  207.           </div>
    208. 

  208.         </div>
    209. 

  209.       </div>
    210. 

  210.     </div>
    211. 

  211. 

  212.     <!-- Delivery Level -->
    213. 

  213.     <div class="category cat-delivery">
    214. 

  214.       <div class="category-header">
    215. 

  215.         <div class="icon">🛵</div>
    216. 

  216.         <div class="info">
    217. 

  217.           <h3>配送费级促销</h3>
    218. 

  218.           <p>作用在"配送费"上</p>
    219. 

  219.         </div>
    220. 

  220.       </div>
    221. 

  221.       <div class="promo-card">
    222. 

  222.         <div class="promo-title">减配送费 <span class="badge badge-auto">自动生效</span></div>
    223. 

  223.         <div class="promo-desc">商家固定补贴X元配送费，所有用户自动享受。</div>
    224. 

  224.         <div class="example">
    225. 

  225.           <div class="label">📋 示例</div>
    226. 

  226.           <div class="calc">
    227. 

  227.             配送费 ¥5 → 商家补贴 ¥2 → 用户付 <span class="price">¥3</span><br>
    228. 

  228.             与商品价格无关，只扣配送费
    229. 

  229.           </div>
    230. 

  230.         </div>
    231. 

  231.       </div>
    232. 

  232.       <div class="promo-card">
    233. 

  233.         <div class="promo-title">满减运费 <span class="badge badge-auto">自动生效</span></div>
    234. 

  234.         <div class="promo-desc">订单金额满X元免配送费。与"减配送费"互斥二选一。</div>
    235. 

  235.         <div class="example">
    236. 

  236.           <div class="label">📋 示例</div>
    237. 

  237.           <div class="calc">
    238. 

  238.             满30元免配送费<br>
    239. 

  239.             订单 ¥35 → 配送费 <span class="price">¥0</span><br>
    240. 

  240.             订单 ¥25 → 配送费 ¥5（未达标）
    241. 

  241.           </div>
    242. 

  242.         </div>
    243. 

  243.       </div>
    244. 

  244.     </div>
    245. 

  245. 

  246.     <!-- Coupon Level -->
    247. 

  247.     <div class="category cat-coupon">
    248. 

  248.       <div class="category-header">
    249. 

  249.         <div class="icon">🎫</div>
    250. 

  250.         <div class="info">
    251. 

  251.           <h3>优惠券类（商家券）</h3>
    252. 

  252.           <p>用户需先领券，下单时手动选择使用</p>
    253. 

  253.         </div>
    254. 

  254.       </div>
    255. 

  255.       <div class="promo-card">
    256. 

  256.         <div class="promo-title">满减券 <span class="badge badge-manual">用户选券</span></div>
    257. 

  257.         <div class="promo-desc">分"同享券"（可与满减叠加）和"互斥券"（不可与满减/折扣叠加）。作用在订单总价上。</div>
    258. 

  258.         <div class="example">
    259. 

  259.           <div class="label">📋 示例</div>
    260. 

  260.           <div class="calc">
    261. 

  261.             满30减5元券（同享券）<br>
    262. 

  262.             满减后 ¥33 → 再扣券 → <span class="price">¥28</span>
    263. 

  263.           </div>
    264. 

  264.         </div>
    265. 

  265.       </div>
    266. 

  266.       <div class="promo-card">
    267. 

  267.         <div class="promo-title">商品券 <span class="badge badge-manual">用户选券</span></div>
    268. 

  268.         <div class="promo-desc">只能用于指定商品。分"折扣券"（指定商品X折）和"抵用券"（指定商品免费兑换）。</div>
    269. 

  269.         <div class="example">
    270. 

  270.           <div class="label">📋 示例</div>
    271. 

  271.           <div class="calc">
    272. 

  272.             抵用券：免费兑换1杯可乐（原价¥6）<br>
    273. 

  273.             折扣券：宫保鸡丁5折券（¥20 → <span class="price">¥10</span>）
    274. 

  274.           </div>
    275. 

  275.         </div>
    276. 

  276.       </div>
    277. 

  277.     </div>
    278. 

  278.   </div>
    279. 

  279. 

  280.   <!-- Tab 2: Demo -->
    281. 

  281.   <div id="tab-demo" class="tab-content">
    282. 

  282.     <div class="demo-section">
    283. 

  283.       <div class="demo-header">
    284. 

  284.         <h3>💰 算价演示</h3>
    285. 

  285.         <p>开启/关闭不同促销，看价格怎么变</p>
    286. 

  286.       </div>
    287. 

  287. 

  288.       <div class="toggle-section">
    289. 

  289.         <div class="toggle-row">
    290. 

  290.           <div class="toggle-info">
    291. 

  291.             <div class="dot" style="background:#ff6b35"></div>
    292. 

  292.             <span>满减（满40减12）</span>
    293. 

  293.           </div>
    294. 

  294.           <div class="toggle active" onclick="toggle(this, 'manjian')"><div class="knob"></div></div>
    295. 

  295.         </div>
    296. 

  296.         <div class="toggle-row">
    297. 

  297.           <div class="toggle-info">
    298. 

  298.             <div class="dot" style="background:#2196f3"></div>
    299. 

  299.             <span>折扣（宫保鸡丁7折）</span>
    300. 

  300.           </div>
    301. 

  301.           <div class="toggle" onclick="toggle(this, 'zhekou')"><div class="knob"></div></div>
    302. 

  302.         </div>
    303. 

  303.         <div class="toggle-row">
    304. 

  304.           <div class="toggle-info">
    305. 

  305.             <div class="dot" style="background:#43e97b"></div>
    306. 

  306.             <span>减配送费（减¥2）</span>
    307. 

  307.           </div>
    308. 

  308.           <div class="toggle active" onclick="toggle(this, 'delivery')"><div class="knob"></div></div>
    309. 

  309.         </div>
    310. 

  310.         <div class="toggle-row">
    311. 

  311.           <div class="toggle-info">
    312. 

  312.             <div class="dot" style="background:#e91e63"></div>
    313. 

  313.             <span>商家满减券（满30减5）</span>
    314. 

  314.           </div>
    315. 

  315.           <div class="toggle active" onclick="toggle(this, 'coupon')"><div class="knob"></div></div>
    316. 

  316.         </div>
    317. 

  317.       </div>
    318. 

  318. 

  319.       <div class="order-items">
    320. 

  320.         <div class="order-item">
    321. 

  321.           <span class="name">🍗 宫保鸡丁</span>
    322. 

  322.           <span class="item-price" id="item1-price">¥20</span>
    323. 

  323.           <span class="item-final" id="item1-final">¥20</span>
    324. 

  324.           <span class="item-tag item-tag-normal" id="item1-tag">原价</span>
    325. 

  325.         </div>
    326. 

  326.         <div class="order-item">
    327. 

  327.           <span class="name">🥘 麻婆豆腐</span>
    328. 

  328.           <span class="item-price">¥18</span>
    329. 

  329.           <span class="item-final">¥18</span>
    330. 

  330.         </div>
    331. 

  331.         <div class="order-item">
    332. 

  332.           <span class="name">🥤 可乐×2</span>
    333. 

  333.           <span class="item-price">¥12</span>
    334. 

  334.           <span class="item-final">¥12</span>
    335. 

  335.         </div>
    336. 

  336.         <div class="order-item">
    337. 

  337.           <span class="name">📦 餐盒费</span>
    338. 

  338.           <span class="item-price">¥3</span>
    339. 

  339.           <span class="item-final">¥3</span>
    340. 

  340.         </div>
    341. 

  341.       </div>
    342. 

  342. 

  343.       <div class="calc-steps">
    344. 

  344.         <div class="calc-step">
    345. 

  345.           <span class="step-label"><span class="step-icon step-order">📦</span> 商品原价合计</span>
    346. 

  346.           <span class="step-value" id="step-original">¥53</span>
    347. 

  347.         </div>
    348. 

  348.         <div class="calc-step" id="row-zhekou">
    349. 

  349.           <span class="step-label"><span class="step-icon step-item">🏷️</span> 折扣（宫保鸡丁7折）</span>
    350. 

  350.           <span class="step-value step-minus" id="step-zhekou">—</span>
    351. 

  351.         </div>
    352. 

  352.         <div class="calc-step" id="row-discount-subtotal">
    353. 

  353.           <span class="step-label" style="color:#999; font-size:12px;">&nbsp;&nbsp;&nbsp;折扣后小计</span>
    354. 

  354.           <span class="step-value" id="step-discount-subtotal" style="color:#999; font-size:12px;">—</span>
    355. 

  355.         </div>
    356. 

  356.         <div class="calc-step" id="row-manjian">
    357. 

  357.           <span class="step-label"><span class="step-icon step-order">📦</span> 满减（满40减12）</span>
    358. 

  358.           <span class="step-value step-minus" id="step-manjian">-¥12</span>
    359. 

  359.         </div>
    360. 

  360.         <div class="calc-step" id="row-coupon">
    361. 

  361.           <span class="step-label"><span class="step-icon step-coupon">🎫</span> 商家满减券（满30减5）</span>
    362. 

  362.           <span class="step-value step-minus" id="step-coupon">-¥5</span>
    363. 

  363.         </div>
    364. 

  364.         <div class="calc-divider"></div>
    365. 

  365.         <div class="calc-step">
    366. 

  366.           <span class="step-label">商品实付</span>
    367. 

  367.           <span class="step-value" id="step-item-total">¥36</span>
    368. 

  368.         </div>
    369. 

  369.         <div class="calc-step" id="row-delivery">
    370. 

  370.           <span class="step-label"><span class="step-icon step-delivery">🛵</span> 配送费（原¥5，减¥2）</span>
    371. 

  371.           <span class="step-value step-plus" id="step-delivery">+¥3</span>
    372. 

  372.         </div>
    373. 

  373.         <div class="calc-divider"></div>
    374. 

  374.         <div class="calc-total">
    375. 

  375.           <span>实付金额</span>
    376. 

  376.           <span class="total-price" id="step-total">¥39</span>
    377. 

  377.         </div>
    378. 

  378.       </div>
    379. 

  379.     </div>
    380. 

  380. 

  381.     <!-- Stack Diagram -->
    382. 

  382.     <div class="category">
    383. 

  383.       <div class="category-header">
    384. 

  384.         <div class="icon">📊</div>
    385. 

  385.         <div class="info">
    386. 

  386.           <h3>价格叠加图</h3>
    387. 

  387.           <p>各层级优惠怎么从原价扣到实付</p>
    388. 

  388.         </div>
    389. 

  389.       </div>
    390. 

  390.       <div class="stack-diagram">
    391. 

  391.         <div class="stack-bar">
    392. 

  392.           <span class="bar-label">商品原价</span>
    393. 

  393.           <div class="bar-track"><div class="bar-fill bar-original" id="bar-original" style="width:100%">¥53</div></div>
    394. 

  394.         </div>
    395. 

  395.         <div class="stack-bar" id="bar-zhekou-row">
    396. 

  396.           <span class="bar-label">商品折扣</span>
    397. 

  397.           <div class="bar-track"><div class="bar-fill bar-discount" id="bar-zhekou" style="width:0%"></div></div>
    398. 

  398.         </div>
    399. 

  399.         <div class="stack-bar" id="bar-manjian-row">
    400. 

  400.           <span class="bar-label">订单满减</span>
    401. 

  401.           <div class="bar-track"><div class="bar-fill bar-promo" id="bar-manjian" style="width:22%">-¥12</div></div>
    402. 

  402.         </div>
    403. 

  403.         <div class="stack-bar" id="bar-coupon-row">
    404. 

  404.           <span class="bar-label">商家券</span>
    405. 

  405.           <div class="bar-track"><div class="bar-fill bar-coupon" id="bar-coupon" style="width:9%">-¥5</div></div>
    406. 

  406.         </div>
    407. 

  407.         <div class="stack-bar" id="bar-delivery-row">
    408. 

  408.           <span class="bar-label">配送费</span>
    409. 

  409.           <div class="bar-track"><div class="bar-fill bar-delivery" id="bar-delivery" style="width:5%">+¥3</div></div>
    410. 

  410.         </div>
    411. 

  411.         <div class="stack-bar">
    412. 

  412.           <span class="bar-label" style="font-weight:700;">实付</span>
    413. 

  413.           <div class="bar-track"><div class="bar-fill bar-final" id="bar-final" style="width:73%">¥39</div></div>
    414. 

  414.         </div>
    415. 

  415.       </div>
    416. 

  416.       <div class="note">
    417. 

  417.         💡 每一层作用在不同的价格基础上：商品折扣改单价 → 满减看折后订单总额 → 券再扣 → 配送费单独加
    418. 

  418.       </div>
    419. 

  419.     </div>
    420. 

  420.   </div>
    421. 

  421. 

  422.   <!-- Tab 3: Mutex -->
    423. 

  423.   <div id="tab-mutex" class="tab-content">
    424. 

  424.     <div class="category">
    425. 

  425.       <div class="category-header">
    426. 

  426.         <div class="icon">⚠️</div>
    427. 

  427.         <div class="info">
    428. 

  428.           <h3>互斥规则</h3>
    429. 

  429.           <p>哪些促销不能同时使用</p>
    430. 

  430.         </div>
    431. 

  431.       </div>
    432. 

  432.       <div class="mutex-table">
    433. 

  433.         <table>
    434. 

  434.           <tr>
    435. 

  435.             <th></th>
    436. 

  436.             <th>满减</th>
    437. 

  437.             <th>折扣</th>
    438. 

  438.             <th>第二份<br>半价</th>
    439. 

  439.             <th>新客<br>立减</th>
    440. 

  440.             <th>减配<br>送费</th>
    441. 

  441.             <th>满减<br>运费</th>
    442. 

  442.           </tr>
    443. 

  443.           <tr>
    444. 

  444.             <th>满减</th>
    445. 

  445.             <td class="mutex-self">—</td>
    446. 

  446.             <td class="mutex-no">✗</td>
    447. 

  447.             <td class="mutex-no">✗</td>
    448. 

  448.             <td class="mutex-yes">✓</td>
    449. 

  449.             <td class="mutex-yes">✓</td>
    450. 

  450.             <td class="mutex-yes">✓</td>
    451. 

  451.           </tr>
    452. 

  452.           <tr>
    453. 

  453.             <th>折扣</th>
    454. 

  454.             <td class="mutex-no">✗</td>
    455. 

  455.             <td class="mutex-self">—</td>
    456. 

  456.             <td class="mutex-no">✗</td>
    457. 

  457.             <td class="mutex-yes">✓</td>
    458. 

  458.             <td class="mutex-yes">✓</td>
    459. 

  459.             <td class="mutex-yes">✓</td>
    460. 

  460.           </tr>
    461. 

  461.           <tr>
    462. 

  462.             <th>第二份半价</th>
    463. 

  463.             <td class="mutex-no">✗</td>
    464. 

  464.             <td class="mutex-no">✗</td>
    465. 

  465.             <td class="mutex-self">—</td>
    466. 

  466.             <td class="mutex-no">✗</td>
    467. 

  467.             <td class="mutex-yes">✓</td>
    468. 

  468.             <td class="mutex-yes">✓</td>
    469. 

  469.           </tr>
    470. 

  470.           <tr>
    471. 

  471.             <th>新客立减</th>
    472. 

  472.             <td class="mutex-yes">✓</td>
    473. 

  473.             <td class="mutex-yes">✓</td>
    474. 

  474.             <td class="mutex-no">✗</td>
    475. 

  475.             <td class="mutex-self">—</td>
    476. 

  476.             <td class="mutex-yes">✓</td>
    477. 

  477.             <td class="mutex-yes">✓</td>
    478. 

  478.           </tr>
    479. 

  479.           <tr>
    480. 

  480.             <th>减配送费</th>
    481. 

  481.             <td class="mutex-yes">✓</td>
    482. 

  482.             <td class="mutex-yes">✓</td>
    483. 

  483.             <td class="mutex-yes">✓</td>
    484. 

  484.             <td class="mutex-yes">✓</td>
    485. 

  485.             <td class="mutex-self">—</td>
    486. 

  486.             <td class="mutex-no">✗</td>
    487. 

  487.           </tr>
    488. 

  488.           <tr>
    489. 

  489.             <th>满减运费</th>
    490. 

  490.             <td class="mutex-yes">✓</td>
    491. 

  491.             <td class="mutex-yes">✓</td>
    492. 

  492.             <td class="mutex-yes">✓</td>
    493. 

  493.             <td class="mutex-yes">✓</td>
    494. 

  494.             <td class="mutex-no">✗</td>
    495. 

  495.             <td class="mutex-self">—</td>
    496. 

  496.           </tr>
    497. 

  497.         </table>
    498. 

  498.       </div>
    499. 

  499.       <div class="note">
    500. 

  500.         ✓ = 可同时使用 &nbsp;&nbsp; ✗ = 互斥不可同时使用<br><br>
    501. 

  501.         💡 核心互斥链：满减 ↔ 折扣 ↔ 第二份半价（三选一）<br>
    502. 

  502.         💡 配送费互斥：减配送费 ↔ 满减运费（二选一）<br>
    503. 

  503.         💡 满赠、售卖代金券、下单返券与所有活动同享
    504. 

  504.       </div>
    505. 

  505.     </div>
    506. 

  506.   </div>
    507. 

  507. 

  508. </div>
    509. 

  509. 

  510. <script>
    511. 

  511. // State
    512. 

  512. const state = {
    513. 

  513.   manjian: true,
    514. 

  514.   zhekou: false,
    515. 

  515.   delivery: true,
    516. 

  516.   coupon: true
    517. 

  517. };
    518. 

  518. 

  519. // Prices
    520. 

  520. const ORIGINAL_PRICE = { chicken: 20, tofu: 18, cola: 12, box: 3 }; // cola = 6*2
    521. 

  521. const DELIVERY_FEE = 5;
    522. 

  522. const MANJIAN_THRESHOLD = 40;
    523. 

  523. const MANJIAN_AMOUNT = 12;
    524. 

  524. const ZHEKOU_RATE = 0.7;
    525. 

  525. const DELIVERY_DISCOUNT = 2;
    526. 

  526. const COUPON_THRESHOLD = 30;
    527. 

  527. const COUPON_AMOUNT = 5;
    528. 

  528. 

  529. function toggle(el, key) {
    530. 

  530.   // 满减和折扣互斥
    531. 

  531.   if (key === 'manjian' && !state.manjian) {
    532. 

  532.     state.zhekou = false;
    533. 

  533.     document.querySelectorAll('.toggle')[1].classList.remove('active');
    534. 

  534.   }
    535. 

  535.   if (key === 'zhekou' && !state.zhekou) {
    536. 

  536.     state.manjian = false;
    537. 

  537.     document.querySelectorAll('.toggle')[0].classList.remove('active');
    538. 

  538.   }
    539. 

  539. 

  540.   state[key] = !state[key];
    541. 

  541.   el.classList.toggle('active');
    542. 

  542.   recalculate();
    543. 

  543. }
    544. 

  544. 

  545. function recalculate() {
    546. 

  546.   let chicken = ORIGINAL_PRICE.chicken;
    547. 

  547.   let itemDiscount = 0;
    548. 

  548. 

  549.   // 折扣
    550. 

  550.   if (state.zhekou) {
    551. 

  551.     chicken = Math.round(ORIGINAL_PRICE.chicken * ZHEKOU_RATE * 10) / 10;
    552. 

  552.     itemDiscount = ORIGINAL_PRICE.chicken - chicken;
    553. 

  553.     document.getElementById('item1-final').textContent = '¥' + chicken;
    554. 

  554.     document.getElementById('item1-tag').textContent = '7折';
    555. 

  555.     document.getElementById('item1-tag').className = 'item-tag item-tag-discount';
    556. 

  556.   } else {
    557. 

  557.     document.getElementById('item1-final').textContent = '¥' + ORIGINAL_PRICE.chicken;
    558. 

  558.     document.getElementById('item1-tag').textContent = '原价';
    559. 

  559.     document.getElementById('item1-tag').className = 'item-tag item-tag-normal';
    560. 

  560.   }
    561. 

  561. 

  562.   let subtotal = chicken + ORIGINAL_PRICE.tofu + ORIGINAL_PRICE.cola + ORIGINAL_PRICE.box;
    563. 

  563. 

  564.   // 满减
    565. 

  565.   let manjianAmount = 0;
    566. 

  566.   if (state.manjian && subtotal >= MANJIAN_THRESHOLD) {
    567. 

  567.     manjianAmount = MANJIAN_AMOUNT;
    568. 

  568.   }
    569. 

  569. 

  570.   // 券
    571. 

  571.   let couponAmount = 0;
    572. 

  572.   let afterManjian = subtotal - manjianAmount;
    573. 

  573.   if (state.coupon && afterManjian >= COUPON_THRESHOLD) {
    574. 

  574.     couponAmount = COUPON_AMOUNT;
    575. 

  575.   }
    576. 

  576. 

  577.   let itemTotal = subtotal - manjianAmount - couponAmount;
    578. 

  578. 

  579.   // 配送费
    580. 

  580.   let deliveryPay = DELIVERY_FEE;
    581. 

  581.   if (state.delivery) {
    582. 

  582.     deliveryPay = DELIVERY_FEE - DELIVERY_DISCOUNT;
    583. 

  583.   }
    584. 

  584. 

  585.   let total = itemTotal + deliveryPay;
    586. 

  586. 

  587.   // Update UI
    588. 

  588.   document.getElementById('step-original').textContent = '¥' + ORIGINAL_PRICE.chicken;
    589. 

  589. 

  590.   if (state.zhekou) {
    591. 

  591.     document.getElementById('row-zhekou').style.display = 'flex';
    592. 

  592.     document.getElementById('row-discount-subtotal').style.display = 'flex';
    593. 

  593.     document.getElementById('step-zhekou').textContent = '-¥' + itemDiscount.toFixed(1);
    594. 

  594.     document.getElementById('step-discount-subtotal').textContent = '¥' + subtotal;
    595. 

  595.     document.getElementById('step-original').textContent = '¥' + (ORIGINAL_PRICE.chicken + ORIGINAL_PRICE.tofu + ORIGINAL_PRICE.cola + ORIGINAL_PRICE.box);
    596. 

  596.   } else {
    597. 

  597.     document.getElementById('row-zhekou').style.display = 'none';
    598. 

  598.     document.getElementById('row-discount-subtotal').style.display = 'none';
    599. 

  599.   }
    600. 

  600. 

  601.   if (state.manjian && manjianAmount > 0) {
    602. 

  602.     document.getElementById('row-manjian').style.display = 'flex';
    603. 

  603.     document.getElementById('step-manjian').textContent = '-¥' + manjianAmount;
    604. 

  604.   } else {
    605. 

  605.     document.getElementById('row-manjian').style.display = state.manjian ? 'flex' : 'none';
    606. 

  606.     document.getElementById('step-manjian').textContent = state.manjian ? '未达到¥' + MANJIAN_THRESHOLD : '';
    607. 

  607.     document.getElementById('step-manjian').style.color = state.manjian && manjianAmount === 0 ? '#999' : '#ff4500';
    608. 

  608.   }
    609. 

  609. 

  610.   if (state.coupon) {
    611. 

  611.     document.getElementById('row-coupon').style.display = 'flex';
    612. 

  612.     document.getElementById('step-coupon').textContent = couponAmount > 0 ? '-¥' + couponAmount : '未达到¥' + COUPON_THRESHOLD;
    613. 

  613.     document.getElementById('step-coupon').style.color = couponAmount > 0 ? '#ff4500' : '#999';
    614. 

  614.   } else {
    615. 

  615.     document.getElementById('row-coupon').style.display = 'none';
    616. 

  616.   }
    617. 

  617. 

  618.   document.getElementById('step-item-total').textContent = '¥' + itemTotal;
    619. 

  619. 

  620.   if (state.delivery) {
    621. 

  621.     document.getElementById('row-delivery').style.display = 'flex';
    622. 

  622.     document.getElementById('step-delivery').textContent = '+¥' + deliveryPay + '（原¥' + DELIVERY_FEE + '）';
    623. 

  623.   } else {
    624. 

  624.     document.getElementById('row-delivery').style.display = 'flex';
    625. 

  625.     document.getElementById('step-delivery').textContent = '+¥' + DELIVERY_FEE;
    626. 

  626.   }
    627. 

  627. 

  628.   document.getElementById('step-total').textContent = '¥' + total;
    629. 

  629. 

  630.   // Update bars
    631. 

  631.   let maxVal = ORIGINAL_PRICE.chicken + ORIGINAL_PRICE.tofu + ORIGINAL_PRICE.cola + ORIGINAL_PRICE.box + DELIVERY_FEE;
    632. 

  632.   document.getElementById('bar-original').style.width = ((subtotal + itemDiscount) / maxVal * 100) + '%';
    633. 

  633.   document.getElementById('bar-original').textContent = '¥' + (subtotal + itemDiscount);
    634. 

  634. 

  635.   if (state.zhekou) {
    636. 

  636.     document.getElementById('bar-zhekou-row').style.display = 'flex';
    637. 

  637.     document.getElementById('bar-zhekou').style.width = (itemDiscount / maxVal * 100) + '%';
    638. 

  638.     document.getElementById('bar-zhekou').textContent = '-¥' + itemDiscount.toFixed(1);
    639. 

  639.   } else {
    640. 

  640.     document.getElementById('bar-zhekou-row').style.display = 'none';
    641. 

  641.   }
    642. 

  642. 

  643.   if (state.manjian && manjianAmount > 0) {
    644. 

  644.     document.getElementById('bar-manjian-row').style.display = 'flex';
    645. 

  645.     document.getElementById('bar-manjian').style.width = (manjianAmount / maxVal * 100) + '%';
    646. 

  646.     document.getElementById('bar-manjian').textContent = '-¥' + manjianAmount;
    647. 

  647.   } else {
    648. 

  648.     document.getElementById('bar-manjian-row').style.display = 'none';
    649. 

  649.   }
    650. 

  650. 

  651.   if (state.coupon && couponAmount > 0) {
    652. 

  652.     document.getElementById('bar-coupon-row').style.display = 'flex';
    653. 

  653.     document.getElementById('bar-coupon').style.width = (couponAmount / maxVal * 100) + '%';
    654. 

  654.     document.getElementById('bar-coupon').textContent = '-¥' + couponAmount;
    655. 

  655.   } else {
    656. 

  656.     document.getElementById('bar-coupon-row').style.display = 'none';
    657. 

  657.   }
    658. 

  658. 

  659.   document.getElementById('bar-delivery').style.width = (deliveryPay / maxVal * 100) + '%';
    660. 

  660.   document.getElementById('bar-delivery').textContent = '+¥' + deliveryPay;
    661. 

  661. 

  662.   document.getElementById('bar-final').style.width = (total / maxVal * 100) + '%';
    663. 

  663.   document.getElementById('bar-final').textContent = '¥' + total;
    664. 

  664. }
    665. 

  665. 

  666. function switchTab(name) {
    667. 

  667.   document.querySelectorAll('.tab').forEach((t, i) => {
    668. 

  668.     t.classList.toggle('active', ['overview', 'demo', 'mutex'][i] === name);
    669. 

  669.   });
    670. 

  670.   document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
    671. 

  671.   document.getElementById('tab-' + name).classList.add('active');
    672. 

  672. }
    673. 

  673. 

  674. // Init
    675. 

  675. recalculate();
    676. 

  676. </script>
    677. 

  677. 

  678. </body>
    679. 

  679. </html>
    680.