购物车商品结算（Vue）

落日映苍穹つ 2021-09-15 11:50 421阅读 0赞

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

二、项目目录介绍

> 1、products.json 用于模拟接口；
> 
> 2、vue-resource.js 用于数据请求
> 
> 3、shoppingCart.js 用于购物车商品结算操作
> 
> ![20180525210002440][]

三、代码及分析

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

四、效果图

![2018052521144035][]

[20180525210002440]: /images/20210802/069b0234a95c4e1c8092000fb9fbb74e.png
[2018052521144035]: /images/20210802/1827a5c718da469ea4cd4fcdbfb5c967.png