vue.js的购物车项目
以下是代码
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车</title>
<link rel="stylesheet" href="css/shopping.css">
</head>
<body>
<div id="main">
<div>
<img src="img/1.gif" alt="购物车">
<a href="#">全场免运费活动中</a>
</div>
<div class="shoppmend">
<div class="shoppmend-left"> 根据您挑选的商品，当当为您推荐</div>
<div class="shoppmend-right" @click='hiden'>
<img style="margin-right: 10px;" src="img/3.gif">
</div>
</div>
<div class="shoppbody" v-show='isshow'>
<div class="shoppbody-left">
<ul v-for='shap in shappmain[0]'>
<li class="shoppbody-left_1">
<a href="#">{{shap.priceName}}</a>
</li>
<li class="shoppbody-left_2">￥{{shap.oldPrice}}</li>
<li class="shoppbody-left_3">￥{{shap.newPrice}}</li>
<li class="shoppbody-left_4">
<a href="#" @click='addshops(shap)'>购买</a>
</li>
</ul>
</div>
<div class="shoppbody-center"></div>
<div class="shoppbody-left">
<ul v-for='shap in shappmain[1]'>
<li class="shoppbody-left_1">
<a href="#">{{shap.priceName}}</a>
</li>
<li class="shoppbody-left_2">￥{{shap.oldPrice}}</li>
<li class="shoppbody-left_3">￥{{shap.newPrice}}</li>
<li class="shoppbody-left_4">
<a href="#" @click='addshops(shap)'>购买</a>
</li>
</ul>
</div>
</div>
<p class="tit">您已选购以下商品</p>
<div class="table-list">
<table style="background-color: #D8E4C6;" class="table-list-title" cellspacing='0' border="0" cellpadding='0'>
<tbody>
<tr>
<th class="table-list-title_1">商品名</th>
<th class="table-list-title_2">单品积分</th>
<th class="table-list-title_3">市场价</th>
<th class="table-list-title_4">当当价</th>
<th class="table-list-title_5">数量</th>
<th class="table-list-title_6">删除</th>
</tr>
</tbody>
</table>
<table class="table-list-body" cellspacing='0' border="0" cellpadding='0'>
<tbody>
<tr id="list" v-for='(buyshops,index) in shappmain[2]'>
<td class="table-list-body_1">
<a href="#" class="blue">{{buyshops.priceName}}</a>{{buyshops.cu}}
</td>
<td class="table-list-body_2">{{buyshops.integral}}</td>
<td class="table-list-body_3">￥{{buyshops.oldPrice}}</td>
<td class="table-list-body_4">￥{{buyshops.newPrice}}
<span>({{buyshops.discount}}折)</span>
</td>
<td class="table-list-body_5">
<input type="text" v-model="buyshops.num">
</td>
<td class="table-list-body_6">
<a href="JavaScript:void(0);" class="blue" @click='remov(index)'>删除</a>
</td>
</tr>
</tbody>
</table>
<div class="bottom-list">
<ul>
<li class="bottom-input">
<input type="image" src="img/2.gif">
</li>
<li class="bottom-price">￥
<span id="sumprice">{{moneyall.toFixed(2)}}</span>
</li>
<li class="bottom-center">商品金额总计：</li>
<li class="bottom-left">
您共节省：
<label>￥
<span id="sumDis">{{dismoneyall.toFixed(2)}}</span>
</label>
<br> 可获取商品积分：
<label>￥
<span id="sumScore">{{scoreall}}</span>
</label>
</li>
</ul>
</div>
</div>
</div>
<script src="js/vue.js"></script>
<script src="js/shopping.js"></script>
</body>
</html>
css代码
*{
padding: 0;
margin: 0;
list-style: none;
font-size: 15px
}
#main{
width: 960px;
height: auto;
margin: auto;
}
a{
color: #000;
font-size: 12px;
text-decoration: none;
}
a:hover{
text-decoration:underline;
}
/* 商品推荐 */
.shoppmend{
border: 1px solid #999999;
width: 99.8%;
height: 22px;
background-color: #FEFCF0;
}
.shoppmend div{
line-height: 23px;
font-size: 12px
}
.shoppmend-left{
float: left;
}
.shoppmend-right{
float: right;
margin-top: 3px
}
/* 商品推荐内容 */
.shoppbody{
height: 120px;
padding: 5px 20px;
border: 1px solid #999999;
border-top:none;
}
.shoppbody-left{
float: left;
}
.shoppbody-center{
float: left;
width: 15px;
height: 120px;
border-left:1px dashed #999999;
}
.shoppbody-left,{
width: 450px;
height: 100%;
}
/* 购物车内容 */
.tit{
font-weight: bold;
font-size: 14px;
margin-top: 20px;
}
.table-list{
border: 1px solid #999999;
}
.table-list table{
width: 100%;
}
.table-list-title{
height: 25px;
}
.table-list-title tbody tr th{
font-size: 12px;
color: #464646;
line-height: 20px;
}
/* 购物车导航头 */
.table-list-title_2,.table-list-title_3,.table-list-title_4{
width: 120px;
text-align: center;
}
.table-list-title_5,.table-list-title_6{
width: 70px;
text-align: center;
}
/* 购物车内容 */
.table-list-body_2,.table-list-body_3,.table-list-body_4{
width: 120px;
text-align: center;
color:#464646 ;
font-size: 13px;
}
.table-list-body_4 span{
font-size: 12px;
}
.table-list-body_5,.table-list-body_6{
width: 70px;
text-align: center;
color: #464646;
font-size: 13px;
}
.table-list-body_5 input{
width:32px;
height: 19px;
border: 1px solid #666666;
text-align: center;
}
.table-list-body{
background-color: #FFF9EB;
}
.table-list-body tbody tr{
height: 40px;
}
#list td{
line-height:35px;
border-bottom:dashed 1px #CCC;
}
.table-list-body_1{
font-size: 13px;
}
.table-list-body_1 a{
font-size: 12px;
color: #1965B3;
}
.table-list-body_1,.table-list-title_1{
width: 420px;
padding-left: 30px;
text-align:left;
}
.blue{
color:#1965B3;
}
/* 购物车结算部分 */
.bottom-list{
height: 60px;
width: 100%;
background-color: #D8E4C6;
}
.bottom-list ul li{
float: right;
}
.bottom-left{
border-right:1px solid #666666;
margin-top: 10px;
padding-right: 10px;
font-size: 10px;
}
.bottom-left label{
color: #BD3E00;
}
.bottom-center{
margin-top: 15px;
margin-left: 15px;
font-weight: bold;
font-size: 14px;
}
#sumScore,#sumDis{
font-size: 10px;
}
.bottom-price{
margin-top: 15px;
margin-right: 10px;
color: #BD3E00;
font-size: 14px;
font-weight: bold;
}
.bottom-input{
margin: 10px 10px 0 10px;
}
/* vue v-for渲染推荐商品内容 */
.shoppbody-left_1,.shoppbody-left_2,.shoppbody-left_3,.shoppbody-left_4{
float: left;
height: 30px;
line-height: 30px;
font-size: 10px;
}
.shoppbody-left_1{
width: 240px;
text-align: left;
}
.shoppbody-left_2,.shoppbody-left_3{
width: 70px;
text-align: center
}
.shoppbody-left_4{
width: 65px;
text-align: center
}
.shoppbody-left_4 a{
color: #ED610C;
}
.shoppbody-left_2{
text-decoration: line-through;
color: #999999;
}
.shoppbody-left_1 a{
color: #1965B3;
}
js代码
var vm = new Vue({
el:"#main",
data:{
// 数组渲染推荐商品
shappmain:[
[{
priceName:'·JavaScript DOM编程艺术',
oldPrice:'39.00',
newPrice:'29.30',
},
{
priceName:'·解禁（当当网独家首发）',
oldPrice:'39.00',
newPrice:'29.30',
},
{
priceName:'·地王之王（金融危机下房地产行...',
oldPrice:'39.00',
newPrice:'29.30',
},
{
priceName:'·逃庄',
oldPrice:'39.00',
newPrice:'29.30',
}],
[
{
priceName:'·深入浅出MySQL数据库开发、优...',
oldPrice:'59.00',
newPrice:'47.20',
},
{
priceName:'·大玩家（马未都、王刚推荐!央...',
oldPrice:'34.80',
newPrice:'20.60',
},
{
priceName:'·都市风水师--官场风水小说：一...',
oldPrice:'39.80',
newPrice:'30.50',
},
{
priceName:'·国戏（以麻将术语解读宦海沉浮...',
oldPrice:'25.00',
newPrice:'17.30',
}
],
// 数据渲染购物车内容
[
{
priceName:'私募（首部披露资本博弈秘密的金融...',
integral :'183',
oldPrice:'32.00',
newPrice:'18.90',
discount :'59',
num:1,
},
{
priceName:'小团圆（张爱玲最神秘小说遗稿）',
integral :'173',
oldPrice:'28.00',
newPrice:'17.30',
discount :'62',
num:1,
},
{
priceName:'不抱怨的世界(畅销全球80国的世界...',
integral :'154',
oldPrice:'24.80',
newPrice:'15.40',
discount :'62',
num:2,
},
{
priceName:'福玛特双桶洗衣机XPB20-07S',
integral :'358',
oldPrice:'458.00',
newPrice:'358.00',
discount :'78',
num:1,
},
{
priceName:'PHP和MySQL Web开发 （原书第4版）',
integral :'712',
oldPrice:'95.00',
newPrice:'71.20',
discount :'75',
num:1,
},
{
priceName:'法布尔昆虫记',
cu:'（再买￥68.30即可参加“满199元减10元现金”活动）',
integral :'10',
oldPrice:'198.00',
newPrice:'130.70',
discount :'66',
num:1,
}
],
],
isshow:true,
},
computed:{
//计算总金额
moneyall:function(){
var totalPrice=0;
for(var i=0;i<this.shappmain[2].length;i++){
totalPrice+=this.shappmain[2][i].newPrice*this.shappmain[2][i].num;
}
return totalPrice;
},
// 获取的商品总积分
scoreall:function(){
var totalscore=0;
for(var i=0;i<this.shappmain[2].length;i++){
totalscore+=this.shappmain[2][i].integral*this.shappmain[2][i].num;
}
return totalscore;
},
//节省金额
dismoneyall:function(){
var totaldisscore=0;
for(var i=0;i<this.shappmain[2].length;i++){
totaldisscore+=(this.shappmain[2][i].oldPrice*this.shappmain[2][i].num)-(this.shappmain[2][i].newPrice*this.shappmain[2][i].num);
}
return totaldisscore;
}
},
methods:{
// 根据下标删除
remov:function(index){
if(confirm('是否删除')){
this.shappmain[2].splice(index,1);
}
},
//添加方法
addshops(item){
var bool=true;
for(var i of this.shappmain[2]){
if(item.priceName==i.priceName){
i.num++;
bool=false;
break;
}
}
if(bool){
this.shappmain[2].push({
priceName:item.priceName,
integral :(item.newPrice)*10,
oldPrice:item.oldPrice,
newPrice:item.newPrice,
discount :parseInt((item.newPrice/item.oldPrice)*100),
num:1,
})
}
},
//推荐商品隐藏显示
hiden(){
if(this.isshow==true){
this.isshow=false;
}else{
this.isshow=true;
}
},
},
});
