居然是作业吗

最新推荐文章于 2025-05-18 03:42:29 发布

墨圆1

最新推荐文章于 2025-05-18 03:42:29 发布

阅读量68

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/vwo50chakanshili/article/details/134989212

版权

本文详细描述了一个使用Vue.js构建的购物车功能，包括商品列表、数量调整、全选/取消选中以及结算按钮。展示了如何在HTML中实现商品展示、选择和操作管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="css/cart.css" />
	</head>
	<body>
		<div class="page-shopping-cart" id="shopping-cart">
			<h4 class="cart-title">购物清单</h4>
			<div class="cart-product-title clearfix">
				<div class="td-check fl"><span class="check-span fl check-all" :class="{'check-true':isSelectAll}"
						@click="selectProduct(isSelectAll)"></span>全选</div>
				<div class="td-product fl">商品</div>
				<div class="td-num fl">数量</div>
				<div class="td-price fl">单价(元)</div>
				<div class="td-total fl">金额(元)</div>
				<div class="td-do fl">操作</div>
			</div>
			<div class="cart-product clearfix">
				<table>
					<tbody>
						<tr v-for="product in productList">
							<td class="td-check"><span class="check-span" @click="product.select=!product.select"
									:class="{'check-true':product.select}"></span></td>
							<td class="td-product"><img src="./img/huangyou.png" width="98" height="98">
								<div class="product-info">
									<h6>{{product.pro_name}}</h6>
									<p>品牌：{{product.pro_brand}}</p>
									<p>产地：{{product.pro_place}}</p>
									<p>规格/纯度:{{product.pro_purity}}</p>
									<p>起定量：{{product.pro_min}}</p>
									<p>配送仓储：{{product.pro_depot}}</p>
								</div>
								<div class="clearfix"></div>
							</td>
							<td class="td-num">
								<div class="product-num">
									<a href="javascript:;" class="num-reduce num-do fl">
										<span @click="product.pro_num--">-</span>
									</a>
									<input type="text" class="num-input" v-model="product.pro_num">
									<a href="javascript:;" class="num-add num-do fr">
										<span @click="product.pro_num++">+</span>
									</a>
								</div>
							</td>
							<td class="td-price">
								<p class="red-text">￥<span class="price-text">{{product.pro_price}}</span>.00</p>
							</td>
							<td class="td-total">
								<p class="red-text">￥<span
										class="total-text">{{product.pro_price * product.pro_num}}</span>.00</p>
							</td>
							<td class="td-do"><a href="javascript:;" class="product-delect"
									@click="btnClose(index)">删除</a></td>
						</tr>

					</tbody>
				</table>
			</div>
			<div class="cart-product-info">
				<a class="delect-product" href="javascript:;" @click="closeSelect"><span></span>删除所选商品</a>
				<a class="keep-shopping" href="#"><span></span>继续购物</a>
				<a class="btn-buy fr" href="javascript:;">去结算</a>
				<p class="fr product-total">￥<span>1600</span></p>
				<p class="fr check-num"><span>2</span>件商品总计（不含运费）：</p>
			</div>
			<div class="cart-worder clearfix">
				<a href="javascript:;" class="choose-worder fl"><span></span>绑定跟单员</a>
				<div class="worker-info fl">
				</div>
			</div>
		</div>
	</body>

	<script>
		new Vue({
			el: '#shopping-cart',
			data: {
				productList: [{
						'pro_name': '【全自动晴雨两用伞|三折8骨】', //产品名称
						'pro_brand': '尚美德', //品牌名称
						'pro_place': '中国', //产地
						'pro_purity': '全自动', //规格
						'pro_min': "1把", //最小起订量
						'pro_depot': '上海港潮仓储', //所在仓库
						'pro_num': 3, //数量
						'pro_img': './img/yusan.png', //图片链接
						'pro_price': 80, //单价
						'select': true //是否选中
					},
					{
						'pro_name': '熊猫玩偶|毛绒玩具', //产品名称
						'pro_brand': '沃之', //品牌名称
						'pro_place': '中国', //产地
						'pro_purity': '布艺', //规格
						'pro_min': "10只", //最小起订量
						'pro_depot': '海口三只羊仓储', //所在仓库
						'pro_num': 3, //数量
						'pro_img': './img/xiongmao.png', //图片链接
						'pro_price': 110, //单价
						'select': false //是否选中
					},
					{
						'pro_name': '黄油 | 无盐', //产品名称
						'pro_brand': '品优', //品牌名称
						'pro_place': '中国', //产地
						'pro_purity': '99.7%', //规格
						'pro_min': "1千克", //最小起订量
						'pro_depot': '福州菜鸟仓储', //所在仓库
						'pro_num': 10, //数量
						'pro_img': './img/huangyou.png', //图片链接
						'pro_price': 30, //单价
						'select': true //是否选中
					}
				]
			},
			computed: {
				isSelectAll: function() {
					if (this.productList.length === 0) {
						return false;
					}
					return this.productList.every(function(val) {
						return val.select
					})
				}
			},


			methods: {
				btnClose(index) {
					this.productList.splice(index, 1)
				},
				closeSelect() {
					this.productList = this.productList.filter(function(product) {
						return !product.select
					})
				},
				selectProduct: function(isSelect) {
					for (var i = 0, len = this.productList.length; i < len; i++) {
						this.productList[i].select = !isSelect;
					}
				}
			}
		})
	</script>
</html>