new Vue({
el:"#app",
data:{
shopListArr:[],
isSelectAll:false,
totalPrice:0,
isHidePanel:true,
currentShop:{}
},
//组件已经加载完毕，请求网络数据和业务处理
mounted(){
//请求本地数据
this.getLocalData();
},
filters:{
formatPrice(money){
return "￥"+(money).toFixed(2);
}
},
methods:{
//请求本地数据
getLocalData(){
//使用箭头函数解决this指向问题
/*axios({
method:'get',
url:'data/shop.json',
}).then((response)=>{
this.shopListArr=response.data.allShops.shopList;
console.log(this.shopListArr);
}).catch((error)=>{
console.log(error);
});*/
var _this=this;
axios({
method:'get',
url:'data/shop.json',
}).then(function(response){
_this.shopListArr=response.data.allShops.shopList;
console.log(this.shopListArr);
}).catch(function(error){
console.log(error);
});
},
singlePrice(shop,flag){
if(flag){
shop.shopNumber+=1;
}else{
if(shop.shopNumber<=1) {
shop.shopNumber=1;
return;
}
shop.shopNumber-=1;
}
this.comTotalPrice();
},
selectAll(flag){
var _this=this;
this.isSelectAll=!flag;
this.shopListArr.forEach(function(value,index){
if(typeof value.checked=="undefined"){
_this.$set(value,'checked',!flag);
}else{
value.checked=!flag;
}
});
this.comTotalPrice();
},
comTotalPrice(){
var total=0;
this.shopListArr.forEach(function(value,index){
if(value.checked){
total+=value.shopPrice*value.shopNumber;
}
});
this.totalPrice=total;
},
singleChecked(shop){
if(typeof shop.checked=="undefined"){
this.$set(shop,'checked',true);
}else{
shop.checked=!shop.checked;
}
this.comTotalPrice();
this.hasSelectedAll();
},
hasSelectedAll(){
var flag=true;
this.shopListArr.forEach(function(value,index){
if(!value.checked){
flag=false;
}
});
this.isSelectAll=flag;
},
trash(shop){
this.isHidePanel=false;
this.currentShop=shop;
},
delshop(){
var index=this.shopListArr.indexOf(this.currentShop);
this.shopListArr.splice(index,1);
this.comTotalPrice();
}
}
});
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<title>购物车title>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<link rel="stylesheet" href="css/01.css">
head>
<body>
<div id="app">
<div class="header">
<span>购物车span>
div>
<div class="safe_tip">
<span>您正在安全购物环境中，请放心购物span>
div>
<main class="shopCart_list">
<section v-for="(shop,index) in shopListArr">
<div class="shopCart_list_title">
<span class="cart_logo">span>
<span class="cart_title">京东自营span>
<span class="cart_sale">您享受满100元免运费服务span>
div>
<div class="shopCart_list_con">
<div class="list_con_left">
<a href="javascript:;" ><input type="checkbox" :checked="shop.checked" @click="singleChecked(shop)">a>
div>
<div class="list_con_right">
<div class="shop_img">
<img width="100" height="100" alt="shop.shopName" :src="shop.shopImage">
div>
<div class="shop_con">
<a href="" v-text="shop.shopName">a>
div>
<div class="shop_price">
<div class="singer">{{shop.shopPrice|formatPrice(shop.shopPrice)}}div>
<div class="total">{{shop.shopPrice*shop.shopNumber| formatPrice(shop.shopPrice*shop.Number)}}div>
div>
<div class="shop_deal">
<div class="shop_deal_left">
<span @click="singlePrice(shop,false)">-span>
<input type="tel" v-model="shop.shopNumber" value="shop.shopNumber">
<span @click="singlePrice(shop,true)">+span>
div>
<div class="shop_deal_right" @click="trash(shop)"
data-toggle="modal" data-target="#myModal">
<a>
删除
a>
div>
div>
div>
div>
section>
main>
<div class="tab_bar">
<div class="tab_bar_left">
<a href="javascript:;" ><input type="checkbox" :checked="isSelectAll" @click="selectAll(isSelectAll)"> a>
<span >全选span>
<div class="select_all">
合计：<span class="total_price">{{totalPrice|formatPrice(totalPrice)}}span>
div>
div>
<div class="tab_bar_right">
<button class="btn btn-info">去结算button>
div>
<div :class="{'panel':isHidePanel}">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid at debitis dolor dolore enim error est labore laboriosam libero molestias, nam neque non perferendis porro sed sunt tempore ullam!
div>
div>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×span>button>
<h4 class="modal-title">h4>
div>
<div class="modal-body">
<p>您确认删除这个商品吗？p>
div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消button>
<button type="button" class="btn btn-info" data-dismiss="modal" @click="delshop()">确定button>
div>
div>
div>
div>
div>
body>
<script src="lib/jquery.min.js">script>
<script src="lib/vue.js">script>
<script src="lib/vue-resource.js">script>
<script src="lib/axios.min.js">script>
<script src="lib/bootstrap.min.js">script>
<script src="js/shopCartLoop1.js">script>
html>
{
"allShops":{
"totalMoney":0,
"shopList":[
{
"shopId":"1001",
"shopName":"360智能摄像机云台版 全景监控 360全景云台1080P",
"shopPrice":299.00,
"shopNumber":1,
"shopImage":"img/1.png"
},
{
"shopId":"1002",
"shopName":"尼康（Nikon) D610 单反机身",
"shopPrice":7199.00,
"shopNumber":2,
"shopImage":"img/2.png"
},
{
"shopId":"1003",
"shopName":"舒肤佳 长效护肤抑菌",
"shopPrice":29.00,
"shopNumber":1,
"shopImage":"img/3.jpg"
}
]
}
}
body {
font-size: 16px;
background-color: #f8f8f8;
}
a:hover {
cursor: pointer;
}
.header {
height: 40px;
background-color: #ffffff;
text-align: center;
line-height: 40px;
font-size: 24px;
letter-spacing: 5px;
}
.safe_tip {
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
}
main {
background-color: #ffffff;
line-height: 30px;
}
.shopCart_list_title {
padding: 5px 10px;
background-color: #f4f4f4;
}
.shopCart_list_title .cart_title {
font-weight: bold;
}
.shopCart_list_title .cart_sale {
color: #ff3300;
float: right;
font-size: 12px;
}
.shopCart_list_con {
padding: 10px;
}
.shopCart_list_con .list_con_left {
float: left;
}
.shopCart_list_con .list_con_left input {
height: 20px;
width: 20px;
}
.shopCart_list_con .shop_img {
float: left;
margin-left: 0;
}
.shopCart_list_con .shop_con {
margin-left: 140px ;
}
.shopCart_list_con .shop_con a {
color: #5e5e5e;
}
.shopCart_list_con .shop_price {
height: 30px;
}
.shopCart_list_con .shop_price .singer {
float: left;
margin-left: 20px ;
}
.shopCart_list_con .shop_price .total {
color: #ff3300;
float: right;
}
.shopCart_list_con .shop_deal {
margin-left: 140px ;
height: 30px;
}
.shopCart_list_con .shop_deal input {
width: 60px;
height: 23px;
text-align: center;
}
.shopCart_list_con .shop_deal .shop_deal_left {
float: left;
}
.shopCart_list_con .shop_deal .shop_deal_left span:hover {
cursor: pointer;
}
.shopCart_list_con .shop_deal .shop_deal_right {
float: right;
}
.shopCart_list_con .shop_deal .shop_deal_right a {
color: #2e2e2e;
}
.tab_bar {
background-color: #ffffff;
height: 40px;
line-height: 40px;
position: fixed;
width: 100%;
padding: 5px 10px;
left: 0;
right: 0;
bottom: 0;
}
.tab_bar .tab_bar_left {
float: left;
}
.tab_bar .tab_bar_left .select_all {
float: right;
margin-left: 10px;
}
.tab_bar .tab_bar_left input {
height: 20px;
width: 20px;
margin-top: 10px;
}
.tab_bar .tab_bar_right {
float: right;
}
.panel {
display: none;
}
