<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.cart div{
padding: 0;
}
.cart .btn{
padding:1px 5px;
}
.cart .row{
border: 1px solid #aaa;
text-align: center;
}
.cart .totalrow{
text-align: right;
}
.cart .totalrow div{
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>商品列表</h1>
<input type="text" v-model='search'>
<button v-on:click='sortit("name")'>按我篩選商品項目</button>
<div class="row" v-for='product in products | filterBy search in "name" | orderBy accordingTo ascendOrDescend '>
<div class="col-sm-12">{{product.name}}</div>
<div class="col-sm-12">
<ul>
<li v-for='opt in product.options'>
{{opt.details}} {{opt.price|currency}}
<button v-on:click='addToCart(product,opt)' class="btn btn-success btn-xs">+</button>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 cart">
<h1>購物車</h1>
<div class="row">
<div class="col-sm-1">商品編號</div>
<div class="col-sm-3">名稱</div>
<div class="col-sm-3">價格</div>
<div class="col-sm-2">數量</div>
<div class="col-sm-2">小計</div>
</div>
<div class="row" v-for='cartItem in incart'>
<div class="col-sm-1">{{cartItem.id}}</div>
<div class="col-sm-3">{{cartItem.name}}</div>
<div class="col-sm-3">{{cartItem.price | currency}}</div>
<div class="col-sm-2">{{cartItem.quantity}}
<div class="btn btn-danger btn-xs" @click='addOne(cartItem)'>+</div>
<div class="btn btn-danger btn-xs" @click='removeOne(cartItem)'>-</div>
</div>
<div class="col-sm-2">
{{cartItem | subtotal | currency}}
<div class="btn btn-danger btn-xs" @click='removeElement(cartItem)'>x</div>
</div>
</div>
<div class="row totalrow">
<div class="col-sm-12">
<p>購買總數量：{{countQuantity}} 總價：{{countTotal | currency}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var inventory=[
{
name:'Usb stick',
options:[{
id:1,
details:'16GB',
price:6.95
},{
id:2,
details:'32GB',
price:12.95
},{
id:3,
details:'64GB',
price:25.95
}]
},{
name:'Usb plug',
options:[{
id:4,
details:'3ft cable',
price:4.35
}]
},{
name:'small phone',
options:[{
id:5,
details:'nokia phone',
price:4.35
}]
},{
name:'camera',
options:[{
id:6,
details:'blue camaera',
price:76.50
},{
id:7,
details:'red camaera',
price:76.50
},{
id:8,
details:'yellow camaera',
price:76.50
},{
id:9,
details:'purple camaera',
price:76.50
}]
}
];
var incart=[];
Vue.filter('subtotal',function(cartItem){
return cartItem.price*cartItem.quantity;
});
var vm = new Vue({
el: "#app",
data:{
products:inventory,
search:'',
ascendOrDescend:1,
accordingTo:'',
incart:incart
},
methods:{
sortit:function(name){
this.ascendOrDescend*=-1;
this.accordingTo=name;
},
addToCart:function(product,opt){
var newCartItem={};
newCartItem.name=product.name+' '+opt.details;
newCartItem.price=opt.price;
newCartItem.id=opt.id;
var newQua=1;
/*整個購物車都倒出來檢查*/
for (var i in this.incart) {
/*如果商品編號相同*/
if(this.incart[i].id===opt.id){
/*新的數量就要加一*/
newQua=parseInt(this.incart[i].quantity)+1;
/*找到重複的這個商品物件在陣列中的位置*/
var theDoubleOneIndex=this.incart.indexOf(this.incart[i]);
/*把這個陣列從這個位置開始刪掉一個*/
this.incart.splice(theDoubleOneIndex,1);
}
}
newCartItem.quantity=newQua;
this.incart.push(newCartItem);
},
addOne:function(cartItem){
cartItem.quantity++;
},
removeOne:function(cartItem){
cartItem.quantity--;
if(cartItem.quantity<=0){
/*用編號找會比較麻煩，直接用物件找*/
this.incart.splice(cartItem,1);
}
},
removeElement:function(cartItem){
/*跟上面的splice效果相同*/
this.incart.$remove(cartItem);
}
},
computed:{
countQuantity:function(){
var countQuantity=0;
for (var i in this.incart) {
countQuantity += parseInt(this.incart[i].quantity);
}
return countQuantity;
},
countTotal:function(){
var countTotal=0;
for (var i in this.incart) {
countTotal += parseInt(this.incart[i].quantity*this.incart[i].price);
}
return countTotal;
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
伺服器架設 (1)