Java 小白 vue 购物车代码

最新推荐文章于 2024-11-25 02:03:06 发布
Lin_bai_
最新推荐文章于 2024-11-25 02:03:06 发布
阅读量260
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue
本文链接：https://blog.youkuaiyun.com/Lin_bai_/article/details/112780813
本文主要介绍了一位Java新手如何使用Vue.js框架来实现一个简单的购物车功能。通过阅读，读者将了解Vue组件化开发的概念，以及如何进行状态管理和数据绑定。文章深入浅出地讲解了Vue实例、组件、计算属性和监听器的用法，并结合实际的购物车场景，演示了如何动态增删商品、计算总价等操作。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<template>
	<div class="mainCart">
		<div class="top_main_width">
			<a href="#"><i class="el-icon-caret-left">继续购物</i></a>
			<span class="car1">您的购物车(3)</span>
		</div>
		<div class="group_list_nav clear">
			<div class="child">派对必备&nbsp;欢喜加倍</div>
			<span class="child1">加购超值组合专享礼</span>
			<a href="#">点击选购</a>
		</div>
		<div class="goods_list">
			<div class="goods_list1" :key="index" v-for="(v,index) in productList">
				<div class="check1"><input type="checkbox" v-model="v.select" :value="1"></div>
				<div class="goods_list1_img"> <img :src="require('./'+v.pro_img)" /></div><!-- //图片 -->
				<div class="p_info_f_left">
					<div class="p_detail_f_left">
						<h2 class="no_wrap">{{v.pro_name}}</h2><!-- //名字 -->
						<h3 class="no_wrap1">{{v.pro_purity}}</h3><!-- //规格 -->
						<div class="bottom_wrap">
							<span class="no_wrap2"><small>￥单价{{v.pro_price.toFixed(2)}}</small></span><!-- //价格 -->
							<div class="birthday_card">
								<el-select v-model="value" class="birthday_card1" style="height:50px">
									<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<i><input type="checkbox"><span>切分25份</span></i>
						</div>
					</div>
					<div class="p_edit_f_right">
						<div class="p_edit_f_right_top">总金额{{(v.pro_price*v.pro_num).toFixed(2)}}</div>
						<div class="p_edit_f_right_bottom">
							<div class="combo">
								<input type="button" name="minus" value="-" class="combo-minus" @click="v.pro_num<2?v.pro_num=1:v.pro_num--" />
								<input type="text" name="count" v-model.number="v.pro_num" class="combo-value" />
								<input type="button" name="plus" value="+" class="combo-plus" @click="v.pro_num++" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<tfoot v-show="productList.length!=0">
				<tr>
					<td colspan="2">
						<label class="quanxuan">
							<input type="checkbox" name="all" v-model="isSelectAll" class="anniu">
							<span>全选</span>
							<a href="#" id="cart-delete" @click="del()"><span>删除</span></a>
						</label>
					</td>
					<td colspan="3">
						<span>合计：</span>
						<strong id="total-amount">￥<em id="total-amount-em">{{getTotal}}</em></strong>
						<span>已选择{{sum}}件商品</span>
						<input type="submit" value="立即结算" id="settlement">
					</td>
				</tr>
			</tfoot>
			<div v-show="productList.length===0">
				购物车还是空的哦~快来购物吧~
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				options: [{
					value: '生日快乐',
					label: '生日快乐'
				}, {
					value: '祝你每天开心',
					label: '祝你每天开心'
				}, {
					value: '不需要',
					label: ''
				}],
				value: '',
				productList: [{
						'pro_name': 'Dior 迪奥 花漾甜心小姐 女士淡香水', //产品名称
						'pro_purity': '50ml', //规格
						'pro_service': "不支持7天无理由退货", //售后
						'pro_num': 1, //数量
						'pro_img': 'cake10.jpg', //图片链接
						'pro_price': 498, //单价,
						'select': true, //选中状态
					},
					{
						'pro_name': '迪奥（dior）口红CD烈艳蓝金唇膏', //产品名称
						'pro_purity': '350g', //规格
						'pro_service': "不支持7天无理由退货", //售后
						'pro_num': 1, //数量
						'pro_img': 'cake11.jpg', //图片链接
						'pro_price': 268, //单价
						'select': true //选中状态
					},
					{
						'pro_name': 'LANCÔME 兰蔻 嫩肌活肤精华肌底液', //产品名称
						'pro_purity': '50ml', //规格
						'pro_service': "不支持7天无理由退货", //售后
						'pro_num': 1, //数量
						'pro_img': 'cake11.jpg', //图片链接
						'pro_price': 598, //单价
						'select': true //选中状态
					}
				],

			}
		},
		computed: {
			getTotal: function() {//计算总价
				var newArr = this.productList.filter(function(val) {
					return val.select === true;
				})
				var price = 0;
				var sum = 0;
				for (var i = 0; i < newArr.length; i++) {
					price += newArr[i].pro_num * newArr[i].pro_price
				}
				return price.toFixed(2)
			},
			sum: function() {//选了几个
				var newArr = this.productList.filter(function(val) {
					return val.select === true;
				})
				return newArr.length;
			},
			isSelectAll: {//全选功能
				get: function() {
					return this.productList.every(function(val) {
						return val.select === true;
					})
				},
				set: function(newValue) {
					for (var i = 0; i < this.productList.length; i++) {
						this.productList[i].select = newValue;
					}
				}
			}
		},
		methods: {
			del: function() {
				if (confirm("确定要删除吗")) {
					var newArr = [];
					for (var i = 0; i < this.productList.length; i++) {
						if (this.productList[i].select === false) {
							newArr.push(this.productList[i])
						}
					}
					this.productList = newArr;
				}

			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.top_main_width {
		width: 1200px;
		height: 60px;
		margin: 0 auto;
		line-height: 60px;
		color: #3e3e3e;
	}

	.top_main_width a {
		font-size: 10px;
		color: #3e3e3e;
	}

	.top_main_width .car1 {
		margin-left: 474px;
	}

	.group_list_nav {
		width: 1050px;
		height: 58px;
		margin: 0 auto;
	}

	.group_list_nav a {
		font-size: 12px;
		color: orangered;
		text-decoration: underline;
		margin-left: 20px;
	}

	.group_list_nav .child {
		width: 114px;
		height: 21px;
		background-color: orangered;
		color: #FFFFFF;
		line-height: 20px;
		font-size: 12px;
		text-align: center;
		float: left;
		margin-top: 20px;
		margin-left: 50px;
	}

	.group_list_nav .child1 {
		color: #3e3e3e;
		line-height: 60px;
		margin-left: 20px;
		font-size: 12px;
	}

	.goods_list1 {
		width: 1052px;
		height: 150px;
		margin: 0 auto;
		margin-top: 20px;
		border: 1px solid #e5e5e5;
	}

	.goods_list1 .check1 {
		width: 20px;
		height: 20px;
		float: left;
		margin-top: 65px;
		margin-left: 20px;
		margin-right: 20px;
	}

	.goods_list1_img {
		width: 110px;
		height: 151px;
		float: left;
		margin-right: 10px;
	}

	.goods_list1_img img {
		width: 110px;
		height: 110px;
		padding-top: 20px;

	}

	.p_detail_f_left {
		width: 625px;
		height: 151px;
		float: left;
		margin-left: 20px;
	}

	.p_edit_f_right {
		height: 151px;
		width: 220px;
		float: left;
	}

	.p_detail_f_left {
		.no_wrap {
			font-size: 11px;
			color: black;
			font-family: 宋体;
			line-height: 2px;
			margin-top: 20px;
			line-height: 15px;
		}

		.no_wrap1 {
			font-size: 12px;
			font-family: 宋体;
			color: #3E3E3E;
		}

		.bottom_wrap {
			width: 564px;
			height: 30px;

			font-size: 12px;
			color: #3E3E3E;
			margin-top: 43px;

			.no_wrap2 {
				float: left;
				line-height: 30px;
			}

			.birthday_card {
				float: left;
				width: 260px;
				height: 50px;
				margin-left: 150px;
			}

			/deep/ .el-select {
				float: left;
				height: 55px;

				.el-input {
					width: 250px;
					height: 35px;

					.el-input__inner {
						border: 1px solid #dcdfe6;
						width: 250px;
						height: 30px !important;
						color: gray;
					}
				}
			}
		}
	}

	.p_edit_f_right_top {
		width: 195px;
		height: 21px;
		text-align: center;
		color: red;
		line-height: 50px;
	}

	.p_edit_f_right_bottom {

		width: 160px;
		height: 21px;
		margin-top: 81px;
		margin-left: 55px;

	}

	.footer {
		width: 1052px;
		height: 80px;
		background-color: royalblue;
		margin: 30px auto;
	}

	.quanxuan {
		.anniu {
			margin-left: 20px;
		}

		span {
			margin-left: 10px;
			margin-right: 10px;
		}
	}


	.combo .combo-minus,
	.combo .combo-value,
	.combo .combo-plus {
		background: #FFFFFF;
		border: 1px solid #DDDDDD;
		color: #333333;
		float: left;
		font-weight: bold;
		margin: 0px;
		outline: none;
		text-align: center;
	}

	.combo .combo-minus,
	.combo .combo-plus {
		font-size: 16px;
		height: 20px;
		line-height: 26px;
		padding: 0px;
		width: 40px;

	}

	.combo .combo-value {
		border-left: none;
		border-right: none;
		height: 20px;
		line-height: 20px;
		padding: 2px;
		width: 50px;
		border: 1px solid transparent;
	}
</style>