<script type="module">
// 商品信息
const items = [
{ id: 286, name: "酸奶", units: "箱", price: 50, num: 1 },
{ id: 870, name: "苹果", units: "千克", price: 10, num: 1 },
{ id: 633, name: "外套", units: "件", price: 300, num: 1 },
{ id: 153, name: "皮鞋", units: "双", price: 400, num: 1 },
{ id: 109, name: "手机", units: "台", price: 5000, num: 1 },
];
// 导入购物车模块
import Cart from "./modules/cart.js";
// 实例化购物车类
const cart = new Cart(items);
// 获取购物车
const table = document.querySelector("table");
// 将商品渲染到购物车元素中tbody
// 创建tbody：商品容器
const tbody = table.createTBody();
// 创建tbody的内容，商品列表
items.forEach(function (item, key) {
// 创建商品模板字符串
const tr = `
<tr>
<td><input type="checkbox" name="" class="check" checked/>td>
<td>${item.id}td>
<td>${item.name}td>
<td>${item.units}td>
<td>${item.price}td>
<td>
<input type="number" name="" value="${item.num}" min='1'/>
td>
<td class='money'>${cart.money[key]}td>
tr>`;
// 将内容填充到tbody
tbody.insertAdjacentHTML("beforeend", tr);
});
// 将相关统计数据(总数量,总金额),填充到tfoot中
const tfoot = table.createTFoot();
let tr = `
<td colspan='5'>总计:td>
<td class='total'>${cart.total}td>
<td class='total-money'>${cart.totalMoney}td>
tr>
`;
tfoot.insertAdjacentHTML("beforeend", tr);
// 更新数据,实时计算出结果并显示出来
// 拿到所有的数量控件
const nums = table.querySelectorAll("input[type=number]");
// 为每一个数量控件添加事件监听:input
nums.forEach(function (num, key) {
num.oninput = function () {
// 计算总数量
items[key].num = num.value * 1;
cart.total = cart.getTotal(items);
// 计算每个商品金额
// cart.money[key] = num.value * 1 * items[key].price;
cart.money[key] = cart.getMoney(items)[key];
// 计算商品总金额
cart.totalMoney = cart.getTotalMoney();
// 将数据渲染到指定元素上
table.querySelector(".total").textContent = cart.total;
table.querySelectorAll(".money")[key].textContent = cart.money[key];
table.querySelector(".total-money").textContent = cart.totalMoney;
};
// 选项按钮
const checkAll = document.querySelector(".check-all");
const tbodyCheck = document.querySelectorAll(".check");
checkAll.onclick = function () {
for (var i = 0; i < tbodyCheck.length; i++) {
tbodyCheck[i].checked = checkAll.checked;
}
tbodyCheck[i].onclick = function () {
let num = 0;
if (tbodyCheck[i].checked) num++;
if (num === tbodyCheck.length) {
checkAll.checked = true;
} else {
checkAll.checked = false;
script>
// 默认导出
// 购物车模块
export default class {
// 构造器
constructor(items) {
// 1. 商品总数量
this.total = this.getTotal(items);
// 2. 每个商品金额(数组)
this.money = this.getMoney(items);
// 3. 商品总金额
this.totalMoney = this.getTotalMoney();
// (一) 计算商品总数量
getTotal(items) {
// 1. 数量数组: 每个商品的数量num字段组成的数组
let numArr = items.map(function (item) {
return item.num;
// 2. 计算总数量
return numArr.reduce(function (acc, cur) {
return acc + cur;
// (二) 计算每个商品的金额
getMoney(items) {
// 金额 = 数量 * 单价
return items.map(function (item) {
return item.num * item.price;
// (三) 计算商品总金额
getTotalMoney() {
return this.money.reduce(function (acc, cur) {
京公网安备 11010802041100号