<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/xichen/pen/gmvNvp?depth=everything&order=popularity&page=34&q=vue&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">* {
outline: none;
}
body {
background: #eee;
letter-spacing: 0.05em;
color: #465768;
font-family: sans-serif;
}
#app {
width: 600px;
padding: 15px;
margin: 0 auto;
margin-top: 15px;
background: #fcfcfc;
box-shadow: 1px 2px 3px #ccc, 1px 2px 25px #ddd;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.table {
width: 100%;
}
.table th, .table td {
padding: 0.5em;
}
.table thead th {
border-bottom: 2px solid #abc;
}
.table td {
border-bottom: 1px solid #abc;
}
.table tbody tr:last-of-type td {
border-bottom-width: 2px;
}
.table .cart_item_img {
width: 80px;
}
.table .cart_item_qty {
text-align: center;
min-width: 140px;
width: 140px;
}
.table .cart_item_qty::after {
content: "";
display: block;
clear: both;
}
.table .cart_item_qty a, .table .cart_item_qty input {
float: left;
height: 27px;
}
.table .cart_item_qty a {
min-width: 27px;
border: 1px solid #ccc;
text-align: center;
border-radius: 3px;
padding-left: 3px;
background: #fafafa;
text-decoration: none;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.table .cart_item_qty a:hover {
box-shadow: 1px 2px 3px #ccc;
}
.table .cart_item_qty input {
width: calc( 100% - 54px - 10px);
text-align: center;
margin-left: 5px;
margin-right: 5px;
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1px 3px #ddd;
}
.table .cart_item_price, .table .cart_item_tprice {
text-align: right;
}
.page-btn {
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
text-align: right;
}
.page-btn .btn:focus {
box-shadow: none;
}
</style></head><body>
<div id="app">
<h2>Cart</h2>
<div class="cart_content">
<table class="table">
<thead>
<th colspan="2">Porduct</th>
<th class="cart_item_qty">Quantity</th>
<th class="cart_item_price">Unit price</th>
<th class="cart_item_tprice">Subtotal</th>
<th> </th>
</thead>
<tbody>
<tr v-for="(item, index) in cartData">
<td class="cart_item_img"><img src="https://placehold.it/50x50" /></td>
<td>{{ item.title }}</td>
<td class="cart_item_qty"><a class="num_minus" href="#" @click.prevent="countQty(index, -1)">-</a>
<input type="text" @blur="checkQty($event.target.value, index)" onkeypress="return event.charCode >= 48 && event.charCode <= 57" @focus="setTmpQty(index)" maxlength="3" v-model="item.qty"/><a class="num_plus" href="#" @click.prevent="countQty(index, 1)">+</a>
</td>
<td class="cart_item_price">NT${{ item.price }}</td>
<td class="cart_item_tprice">NT${{ item.price * item.qty }}</td>
<td><a class="list_item_del" href="#" @click.prevent="delCartItem($event.currentTarget, index)"><i class="fa fa-trash-o"></i></a></td>
</tr>
</tbody>
<tfoot>
<tr v-if="cartData.length > 0">
<td colspan="4">Total</td>
<td class="cart_item_tprice">NT${{ totalMoney }}</td>
<td> </td>
</tr>
<tr v-else="v-else">
<td colspan="6">Empty shopping cart :'(</td>
</tr>
</tfoot>
</table>
</div>
<p class="page-btn"><a class="btn" href="#" onclick="return false;">Checkout</a>
<button class="btn btn-primary btn-sm" @click.prevent="resetData()" :disabled="cartData.length > 0"><i class="fa fa-refresh"></i></button>
</p>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script >(function() {
var vm;
window.initData = function() {
return {
cartData: [
{
title: "HamBuger",
price: 90,
qty: 1,
stock: 2
}, {
title: "French Freies",
price: 60,
qty: 2,
stock: 10
}, {
title: "Coca Cola",
price: 65,
qty: 3,
stock: 3
}, {
title: "Spaghetti",
price: 120,
qty: 2,
stock: 7
}, {
title: "Pudding",
price: 70,
qty: 2,
stock: 12
}
],
totalMoney: 0,
tmpQty: 0
};
};
vm = new Vue({
el: "#app",
methods: {
setTmpQty: function(index) {
return this.tmpQty = this.cartData[index].qty;
},
checkQty: function(value, index) {
if (value < 1 || (value = "" || value > this.cartData[index].stock)) {
return this.cartData[index].qty = this.tmpQty;
}
},
countQty: function(index, qtyNum) {
if (qtyNum === -1 && this.cartData[index].qty <= 1) {
return;
}
if (qtyNum === 1 && this.cartData[index].qty >= this.cartData[index].stock) {
return;
}
this.cartData[index].qty = parseInt(this.cartData[index].qty) + qtyNum;
this.setTmpQty(index);
return this.countTotal();
},
countTotal: function() {
var me;
me = this;
me.totalMoney = 0;
return $.each(this.cartData, function(index, item) {
return me.totalMoney += item.price * item.qty;
});
},
delCartItem: function(target, index) {
/* 方法A: fadeOut Effect */
var me;
me = this;
$(target).parents('tr').fadeOut(300, function() {
$(this).fadeIn();
me.cartData.splice(index, 1);
return me.countTotal();
});
/* 方法B: 直接移除，總額會正常更新 */
},
resetData: function() {
Object.assign(this.$data, initData());
return this.countTotal();
}
},
mounted: function() {
return this.countTotal();
},
data: function() {
return initData();
}
});
}).call(this);
//# sourceURL=pen.js
</script>
</body></html>
