close
<!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 .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-1">數量</div>
<div class="col-sm-4">小計</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-1">{{cartItem.quantity}}</div>
<div class="col-sm-4">{{cartItem | subtotal | currency}}</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);
}
},
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><!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Title Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<style type="text/css">
.chartlist .row{
border: 1px solid #aaa;
}
.chartlist .total{
background-color: #999;
color:#fff;
}
.showcode{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6 produclist">
<h1>products</h1>
<input type="text" v-model="search">
<button v-on:click='sortit("name")'>name</button>
<div v-for='product in products | filterBy search in "name" | orderBy para order' class="col-md-12">{{product.name | capitalize}}
<ul>
<li v-for='opts in product.options'>
{{opts.details}}{{opts.price | currency}}
<button class="btn btn-success btn-xs" v-on:click='addItem(product,opts)'>+</button>
</li>
</ul>
</div>
</div>
<div class="col-sm-6 chartlist">
<h1>shopping cart</h1>
<div class="row">
<div class="col-xs-12 col-sm-4">
數量價格
</div>
<div class="col-xs-12 col-sm-5">
名稱
</div>
<div class="col-xs-12 col-sm-3 text-right">
小計
</div>
</div>
<div class="row" v-for='product in shopping_cart'>
<div class="col-xs-12 col-sm-4">
{{product.quantity}} @ {{product.price | currency}}
</div>
<div class="col-xs-12 col-sm-5">
{{product.listitem}}
</div>
<div class="col-xs-12 col-sm-3 text-right">
<small>{{product | subvalue | currency}}</small>
</div>
</div>
<div class="row total">
<div class="col-xs-12 col-sm-4">count:{{count}}</div>
<div class="col-xs-12 col-sm-8">total:{{total | currency}}</div>
</div>
</div>
</div>
</div>
<div v-for='opt in shopping_cart' class="col-sm-12 showcode">{{opt | json}}</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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('subvalue',function(value){
return value.price * value.quantity;
});
var vm=new Vue({
el:'#app',
data:{
products:inventory,
shopping_cart:incart,
subtotal:0,
search:'',
order:1,
para:''
},
methods:{
sortit:function(i){
this.order=this.order*-1;
this.para=i;
},
/*當+按鈕按下時，傳入資料product和opt（由v-for時定義）*/
/*product是產品大項，opt是產品細項*/
addItem:function(product,opt){
var newPrice=opt.price;/*細項價錢*/
var newName=product.name+opt.details;/*大項+細項*/
var newQua=1;
/*this代表上方的data*/
/*所有在購物車的項目都跑一次*/
for (var i in this.shopping_cart) {
var attr=this.shopping_cart[i];
/*如果細項的產編與購物車的購編相同*/
if(opt.id === attr.id){
newQua=parseInt(attr.quantity)+1;
/*這個購編的數量屬性就+1*/
var a =this.shopping_cart.indexOf(attr);
/*購物車內這個購編的第一次出現的位置*/
this.shopping_cart.splice(a,1);
/*這個陣列的這個位置，刪掉一個*/
}
}
var newValue={
price:newPrice,
listitem:newName,
quantity:newQua,
id:opt.id
}
console.log(newValue);
this.shopping_cart.push(newValue);
}
},
computed:{
count:function(){
var iteminCart=0;
for (var i in this.shopping_cart) {
iteminCart += parseInt(this.shopping_cart[i].quantity);
}
return iteminCart;
},
total:function(){
var totalinCart=0;
for (var i in this.shopping_cart) {
var attr = this.shopping_cart[i];
totalinCart += parseInt(attr.quantity*attr.price);
}
return totalinCart;
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
