From 2f56c970cc3e5b36ce67cd83825d3398b7f12599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E4=BF=8A=E6=B4=81=28=E5=B0=8F=E7=8C=AB=E4=B8=BB?=
 =?UTF-8?q?=E4=BA=BA=29?= <17759877219@163.com>
Date: Thu, 5 Dec 2024 07:29:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\350\275\246\346\241\210\345\210\227.html" | 201 ++++++++++++++++++
 1 file changed, 201 insertions(+)
 create mode 100644 "47 \351\273\204\344\277\212\346\264\201/JavaScript\346\241\210\344\276\213/20241203/\350\264\255\347\211\251\350\275\246\346\241\210\345\210\227.html"
diff --git "a/47 \351\273\204\344\277\212\346\264\201/JavaScript\346\241\210\344\276\213/20241203/\350\264\255\347\211\251\350\275\246\346\241\210\345\210\227.html" "b/47 \351\273\204\344\277\212\346\264\201/JavaScript\346\241\210\344\276\213/20241203/\350\264\255\347\211\251\350\275\246\346\241\210\345\210\227.html"
new file mode 100644
index 0000000..6693c63
--- /dev/null
+++ "b/47 \351\273\204\344\277\212\346\264\201/JavaScript\346\241\210\344\276\213/20241203/\350\264\255\347\211\251\350\275\246\346\241\210\345\210\227.html"	
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      .list {
+        width: 990px;
+        margin: 100px auto 0;
+      }
+
+      .item {
+        padding: 15px;
+        transition: all 0.5s;
+        display: flex;
+        border-top: 1px solid #e4e4e4;
+      }
+
+      .item:nth-child(4n) {
+        margin-left: 0;
+      }
+
+      .item:hover {
+        cursor: pointer;
+        background-color: #f5f5f5;
+      }
+
+      .item img {
+        width: 80px;
+        height: 80px;
+        margin-right: 10px;
+      }
+
+      .item .name {
+        font-size: 18px;
+        margin-right: 10px;
+        color: #333;
+        flex: 2;
+      }
+
+      .item .name .tag {
+        display: block;
+        padding: 2px;
+        font-size: 12px;
+        color: #999;
+      }
+
+      .item .price,
+      .item .sub-total {
+        font-size: 18px;
+        color: firebrick;
+        flex: 1;
+      }
+
+      .item .price::before,
+      .item .sub-total::before,
+      .amount::before {
+        content: "¥";
+        font-size: 12px;
+      }
+
+      .item .spec {
+        flex: 2;
+        color: #888;
+        font-size: 14px;
+      }
+
+      .item .count {
+        flex: 1;
+        color: #aaa;
+      }
+
+      .total {
+        width: 990px;
+        margin: 0 auto;
+        display: flex;
+        justify-content: flex-end;
+        border-top: 1px solid #e4e4e4;
+        padding: 20px;
+      }
+
+      .total .amount {
+        font-size: 18px;
+        color: firebrick;
+        font-weight: bold;
+        margin-right: 50px;
+      }
+
+      
+    </style>
+  </head>
+  <body>
+    <div class="list">
+      <!-- <div class="item">
+        <img
+          src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg"
+          alt=""
+        />
+        <p class="name">
+          称心如意手摇咖啡磨豆机咖啡豆研磨机
+          <span class="tag">【赠品】10优惠券</span>
+        </p>
+        <p class="spec">白色/10寸</p>
+        <p class="price">289.90</p>
+        <p class="count">x2</p>
+        <p class="sub-total">579.80</p>
+      </div> -->
+    </div>
+    <div class="total">
+      <div>合计：<span class="amount">1000.00</span></div>
+    </div>
+    <script>
+      // 数据
+      const goodsList = [
+        {
+          id: "4001172",
+          name: "称心如意手摇咖啡磨豆机咖啡豆研磨机",
+          price: 289.9,
+          picture:
+            "https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg",
+          count: 2,
+          spec: { color: "白色" },
+        },
+        {
+          id: "4001009",
+          name: "竹制干泡茶盘正方形沥水茶台品茶盘",
+          price: 109.8,
+          picture:
+            "https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png",
+          count: 3,
+          spec: { size: "40cm*40cm", color: "黑色" },
+        },
+        {
+          id: "4001874",
+          name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
+          price: 488,
+          picture:
+            "https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
+          count: 1,
+          spec: { color: "青色", sum: "一大四小" },
+        },
+        {
+          id: "4001649",
+          name: "大师监制龙泉青瓷茶叶罐",
+          price: 139,
+          picture:
+            "https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png",
+          count: 8,
+          spec: { size: "小号", color: "紫色" },
+          gift: "50g茶叶,清洗球,礼盒",
+        },
+      ];
+
+      // 获取数据
+      const list = document.querySelector('.list')
+      // map遍历
+      list.innerHTML = goodsList.map(function(goods){
+        // 解构对象
+        const {name,price,picture,count,spec,gift} = goods;
+        // 处理规格模块，把他们拼接成文本
+        const text = Object.values(spec).join('/');
+        // 处理奖品模块
+        const giftText = gift ? gift.split(',').map(function(item){
+          return `<span class = "tag'>[赠品]${item}</span>`
+        }).join('') : ''; 
+        // 返回已经处理好的格式
+        return `
+        <div class = "item">
+          <img 
+            src = "${picture}"
+            alt = ""
+          />
+          <p class = "name">
+            ${name}
+            ${giftText}
+          </p>
+          <p class = "spec">${text}</p>
+          <p class = "price">${price.toFixed(2)}</p>
+          <p class = "count">${count}</p>
+          <p class = "sub-total">${(count * price).toFixed(2)}</p>
+        </div>
+        `     
+      }).join('')
+      
+      // 计算总价格
+      const amount = document.querySelector('.amount')
+      amount.innerHTML = goodsList.reduce(function(prev,item){
+        return prev + item.price * item.count
+      },0).toFixed(2)
+      
+    </script>
+  </body>
+</html>
\ No newline at end of file
-- 
Gitee

