鸿蒙开发写一个购物车页面,代码写出来
时间: 2024-06-26 21:00:40 浏览: 8
编写一个简单的购物车页面的代码示例,通常会涉及到HTML、CSS和JavaScript(可能还会用到一些前端框架如Vue或React)。这里我会提供一个基本的静态HTML/CSS示例,没有实际的后端交互:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易购物车</title>
<style>
.cart-container {
display: flex;
justify-content: space-between;
padding: 1rem;
}
.product {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.product img {
width: 50px;
height: 50px;
}
.product-info {
flex: 1;
}
.product-name {
font-weight: bold;
}
.cart-item-count {
color: #888;
}
</style>
</head>
<body>
<div class="cart-container">
<h2>购物车</h2>
<div id="cartItems">
<!-- 使用JavaScript动态生成购物车项 -->
</div>
<button id="addToCartBtn">添加到购物车</button>
</div>
<script>
// 假设有个商品列表
const productList = [
{ id: 1, name: '商品A', image: 'product-a.png', price: 10 },
{ id: 2, name: '商品B', image: 'product-b.png', price: 20 },
// 更多商品...
];
const addToCartBtn = document.getElementById('addToCartBtn');
const cartItemsDiv = document.getElementById('cartItems');
function addItemToCart(itemId) {
// 这里只是一个示例,实际应用中需要连接到服务器或数据库
let cartItem = `<div class="product">
<img src="${productList[itemId].image}" alt="${productList[itemId].name}">
<div class="product-info">
<p class="product-name">${productList[itemId].name}</p>
<p class="cart-item-count">数量: 1</p>
</div>
<button onclick="removeFromCart(${itemId})">移除</button>
</div>`;
cartItemsDiv.innerHTML += cartItem;
}
function removeFromCart(itemId) {
// 从HTML结构中删除对应的商品项
const cartItemToRemove = cartItemsDiv.querySelector(`#item-${itemId}`);
if (cartItemToRemove) {
cartItemToRemove.remove();
}
}
// 初始化购物车,显示默认商品
for (const item of productList) {
addItemToCart(item.id);
}
addToCartBtn.addEventListener('click', function() {
const selectedProduct = productList; // 假设点击的是第一个商品
addItemToCart(selectedProduct.id);
});
</script>
</body>
</html>
```