一、在商城系统中，购物车结算是必备的一个环节。以下代码（参考17素材网）用于模拟购物车商品结算，仅供参考。

二、项目目录介绍

1、products.json 用于模拟接口；

2、vue-resource.js 用于数据请求

3、shoppingCart.js 用于购物车商品结算操作

三、代码及分析

index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>购物车订单结算</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app" class="container">
			<h2 class="title">购物车详情</h2>
			<table class="table" width="100%" border="0" cellspacing="0" cellpadding="0">
				<thead>
					<tr>
						<th colspan="2">商品信息</th>
						<th width="15%">商品单价</th>
						<th width="15%">商品数量</th>
						<th width="15%">商品总价</th>
						<th width="15%">编辑</th>
					</tr>
				</thead>

				<tbody>
					<tr v-for="item in productList">
						<td style="width: 5%;"><input type="checkbox" :checked="item.check" @click="checkBox(item)" /></td>
						<td class="goods">
							<img :src="item.productImage" class="goods-left" />
							<div class="goods-right">
								<p class="name">{{item.productName}}</p>
								<p class="gifts">赠送：<span style="margin-right: 5px;" v-for="part in item.parts" v-text="part.partsName"></span></p>
							</div>
						</td>
						<td>{{item.productPrice | formatMoney}}</td>
						<td class="goodsNumber">
							<span @click="changeMoney(item,-1)">-</span>
							<input type="text" v-model="item.productQuentity" disabled />
							<span @click="changeMoney(item,1)">+</span>
						</td>
						<td style="color: red;">{{item.productPrice*item.productQuentity | formatMoney}}</td>
						<td class="delete" @click="del(item)" style="border-right: 1px solid #ddd;"><span>删除</span></td>
					</tr>
				</tbody>

				<tfoot>
					<tr class="footer">
						<td><input type="checkbox" :checked="checkAllFlag" @click="checkAll" /></td>
						<td class="footer-left">
							<span style="color: red;">全选</span>
						</td>
						<td colspan="4" class="footer-right" style="border-right: 1px solid #ddd;">
							总计：<span style="color: red;">{{totalMoney | formatMoney}}</span>元
							<button type="button" class="pay">结账</button>
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</body>

<script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script src="js/shoppingCart.js" type="text/javascript" charset="utf-8"></script>
</html>

index.css

* {
	padding: 0;
	margin: 0;
}


/*外层容器样式*/

.container {
	padding: 10px;
	margin: 0 auto;
	width: 1200px;
	text-align: center;
}


/*标题样式*/

.title {
	margin-bottom: 20px;
	color: #666;
}


/*表格样式*/

.table {
	margin: auto;
	border-top: 1px solid #ddd;
}

.table thead {
	background-color: grey;
	color: #fff;
}

.table thead th {
	padding: 10px 0;
}

.table td {
	text-align: center;
	padding: 10px 0;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
}
.table td:nth-last-child{
	border-right: 1px solid #ddd;
}

/*商品信息*/

.goods {
	width: 30%;
}

.goods-left {
	width: 20%;
	float: left;
}

.goods-right {
	width: 75%;
	float: right;
	text-align: left;
}

.goods-right .name {
	margin-bottom: 35px;
}

.goods-right .gifts {
	color: #999;
	font-size: 12px;
	vertical-align: bottom;
}


/*商品数量*/

.goodsNumber input {
	width: 50px;
	text-align: center;
	margin: 0 10px;
	height: 28px;
	vertical-align: middle;
	border-radius: 5px;
	border: none;
}

.goodsNumber span {
	display: inline-block;
	color: #333;
	text-decoration: none;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border: 1px solid black;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.delete {
	cursor: pointer;
}

.delete>span {
	padding: 10px 20px;
	background: deepskyblue;
	border-radius: 5px;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
.delete>span:hover{
	background: blue;
	color: red;
}
.footer td {
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.footer .footer-left {
	text-align: left;
}

.footer .footer-right {
	text-align: right;
}

.footer .pay {
	background-color: red;
	color: #fff;
	padding: 10px 25px;
	margin: 0 55px 0 20px;
	border: 0;
	border-radius: 5px;
}
.footer .pay:hover{
	background-color: darkred;
}

products.json

字段分析：

1、totalMoney---商品总价

2、productId---商品ID

3、productName---商品名称

4、productPrice---商品单价

5、productQuentity---商品数目

6、productImage---商品图片

{
	"status":1,
	"result":{
		"totalMoney":143,
		"list":[
			{
				"productId":"20001",
				"productName":"前端入门指导",
				"productPrice":87,
				"productQuentity":1,
				"productImage":"http://placehold.it/100x100",
				"parts":[
					{
						"partsId":"10001",
						"partsName":"笔记"
					},
					{
						"partsId":"10002",
						"partsName":"光盘"
					}
				]
			},
			{
				"productId":"20002",
				"productName":"后台入门指导",
				"productPrice":56,
				"productQuentity":1,
				"productImage":"http://placehold.it/100x100",
				"parts":[
					{
						"partsId":"10003",
						"partsName":"面试题"
					}
				]
			}
		]
	},
	"message":""
}

shoppingCart.js

var vm = new Vue({
	el: "#app",
	data: {
		// 商品总价
		totalMoney: 0,
		// 商品列表
		productList: [],
		// 全选标志
		checkAllFlag: false
	},
	// 过滤器→对商品金额取两位小数
	filters: {
		formatMoney: function (value) {
			return "￥ " + value.toFixed(2);
		}
	},
	mounted: function () {
		this.cartView();
	},
	methods: {
		// 显示购物车界面
		cartView: function () {
			var _this = this;
			// 获取商品数据信息
			this.$http.get("data/products.json").then(function (res) {
				_this.productList = res.body.result.list;
				console.log(res);
				console.log(_this.productList);
			})
		},
		//点击增加或减少商品数量按钮后修改对应金额
		// 对加减按钮绑定同一函数，而后根据传入的参数num是+1或-1，实现自增或自减
		changeMoney: function (product, num) {
			if (num > 0) {
				product.productQuentity++;
			} else {
				product.productQuentity--;
				if (product.productQuentity < 1) {
					product.productQuentity = 1;
				}
			}
			// 每次修改商品数量之后，均重新计算商品总价
			this.getTotalMoney();
		},
		//复选框设置
		checkBox: function (item) {
			var _this = this;
			// 记录选中的商品种类个数
			var num = 0;
			// 注意对比前后两次输出的结果
			console.log(item.check);
			if (typeof item.check == "undefined") {
				this.$set(item, "check", true);
				// 注意对比前后两次输出的结果
				console.log(item.check);
			} else {
				item.check = !item.check;
			}
			this.productList.forEach(function (item, value) {
				if (item.check) {
					num++;
				}
			})
			// 如果选中的商品种类个数等于商品列表（数组）的长度，修改全选框的全选标志；
			if (num == _this.productList.length) {
				this.checkAllFlag = true;
			} else {
				this.checkAllFlag = false;
			}
			// 计算总价
			this.getTotalMoney();
		},
		//全选按钮设置
		checkAll: function () {
			var _this = this;
			_this.checkAllFlag = !_this.checkAllFlag;
			this.productList.forEach(function (item, index) {
				if (typeof item.check == "undefined") {
					// 设置item的check属性
					_this.$set(item, "check", _this.checkAllFlag);
				} else {
					item.check = _this.checkAllFlag;
				}
			})
			// 计算总价
			this.getTotalMoney();
		},
		//总金额计算
		getTotalMoney: function () {
			var _this = this;
			// 商品总价首先置0，判断选中后，再计入总价
			this.totalMoney = 0;
			this.productList.forEach(function (item, index) {
				// 如果商品被选中，则计算到总价之中，运算符使用+=
				if (item.check) {
					_this.totalMoney += item.productQuentity * item.productPrice;
				}
			})
		},
		//删除商品
		del: function (item) {
			// 根据商品的下标删除商品步骤：1.确定商品下标；2.从当前下标开始，向后删除一个元素；
			var index = this.productList.indexOf(item);
			this.productList.splice(index, 1);
			// 计算总价
			this.getTotalMoney();
		}
	}
})

四、效果图


Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue