<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>購物車</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" target="_blank" rel="external nofollow" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
[v-cloak] {
display: none;
}
.demo {
/* margin: 50px 300px; */
}
table {
width: 800px;
border-collapse: collapse;
text-align: center;
}
table th {
height: 30px;
text-align: center;
line-height: 30px!important;
}
table td {
height: 25px;
line-height: 25px!important;
}
table td:nth-of-type(2) {
color: #008080;
}
table td:nth-of-type(3) {
color: red;
}
table .zong td {
text-align: right;
padding-right: 10px;
color: red;
}
.saveGoodsArea {
width: 100%;
/* height: 400px; */
list-style: none;
margin: 30px auto;
display: flex;
justify-content: space-around;
}
.saveGoodsArea li {
width: 23%;
/* height: 100%; */
box-shadow: 0 0 3px rgba(0, 0, 0, .6);
}
.saveGoodsArea li img {
width: 100%;
display: block;
}
.saveGoodsArea li p {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
}
.saveGoodsArea li button {
width: 100%;
height: 30px;
outline: none;
border: none;
}
.saveGoodsArea li:hover button {
background-color: orange;
cursor: pointer;
}
.shangpin {
margin-right: 20px;
float: right;
margin-top: 15px;
box-sizing: border-box;
}
button{
outline: none!important;
}
.form-control{
width: 200px;
display: inline-block!important;
}
table tr:nth-of-type(1){
box-sizing: border-box!important;
padding-top: 50%!important;
}
.btn-danger{
margin-top: 15px;
}
</style>
</head>
<body>
<div class="demo" v-cloak>
<!-- 庫存 -->
<div class="container">
<ul class="saveGoodsArea col-lg-3 col-md-3 col-sm-3 col-xs-3">
<li v-for="saveGood of saveGoods">
<img :src="saveGood.imgSrc" class="img-responsive">
<p>{{saveGood.name}} {{saveGood.price}}</p>
<button @click="addGood(saveGood)">加入購物車</button>
</li>
</ul>
</div>
<!-- 購物車 -->
<!-- <button @click="paixu" class="btn btn-xs alert-info" :title="titleMoney">排序</button> -->
<!-- <button @click="shaixuan" class="butt" :title="titleChoice">篩選</button> -->
<div class="table-responsive container" style="border:none;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<table class="table table-responsive
table-hover table-bordered
text-center table-condensed">
<!-- table-hover滑鼠懸浮高亮 -->
<!-- table-bordered 帶邊框 -->
<!-- table-condensed 緊湊型表格 内邊距從8調到5 -->
<!-- table-responsive 響應式表格 -->
<!-- .table-striped表格-斑馬線表格 -->
<caption>購物車<button @click="paixu" class="btn btn-xs alert-info" :title="titleMoney">排序</button></caption>
<tbody>
<tr>
<td>
<button @click="deletaAll" class="btn btn-danger btn-sm">批量删除</button>
</td>
<td colspan="5">
<p class="shangpin form-group">
篩選:<input
type="text"
:placeholder="placeholderValue"
v-model="filterText"
@keyup.enter="filterFn"
class="form-control input-sm"/>
</p>
</td>
</tr>
<tr>
<td>
全選：<input type="checkbox" v-model="allStatus" @click="changeAllStatus">
</td>
<th>商品名稱</th>
<th>商品單價</th>
<th>商品數量</th>
<th>商品總價</th>
<th>操作</th>
</tr>
<tr v-for="good of goods">
<td class="chack">
<input
type="checkbox"
@click="checkStatus(good)"
v-model="good.status"
:value="good.name">
</td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>
<button @click="cut(good)" class="danjia btn btn-warning btn-xs">-</button>
{{good.numder}}
<button @click="add(good)" class="danjia btn btn-warning btn-xs">+</button>
</td>
<td>{{good.price*good.numder}}</td>
<td><button @click="yichu(good)" class="btn btn-warning btn-xs" :title="titleValue">{{yichuValue}}</button></td>
</tr>
<tr class="zong">
<td class="sumPrice" colspan="6"><strong>總價</strong>:{{sumMoney}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*建立根執行個體*/
var demo = new Vue({
/*挂載根執行個體到元素上*/
el: '.demo',
/* 綁定資料 */
data: {
goods: [
{name: '三星',price: 4000,numder: 1,status:false},
{name: 'vivo',price: 3300,numder: 1,status:false},
{name: 'oppo',price: 2800,numder: 1,status:false},
{name: '華為',price: 7000,numder: 1,status:false},
{name: '小米',price: 2000,numder: 1,status:false},
{name: '諾基亞',price: 300,numder: 1,status:false}
],
/*庫存*/
saveGoods: [
{name: '健身一',price: 1500,imgSrc: 'img/01.jpg'},
{name: '健身二',price: 2060,imgSrc: 'img/02.jpg'},
{name: '健身三',price: 3080,imgSrc: 'img/03.jpg'},
{name: '健身四',price: 900,imgSrc: 'img/04.jpg'}
],
titleValue: '點選删除商品',
titleMoney: '點選按價錢排序',
titleChoice: '點選篩選價格',
yichuValue: '移除',
placeholderValue: '請輸入要搜尋的商品',
filterText: '',
selectAllList:[],
allStatus:false
},
/* 方法 */
methods: {
/* 對商品的價格從低到高排序 */
paixu: function() {
this.goods = this.goods.sort(function(x, y) {
return x.price - y.price
})
},
/*
隻要大于2000的商品
shaixuan: function() {
this.goods = this.goods.filter(function(element) {
if (element.price > 2000) {
return element
}
})
}, */
yichu: function(good) {
/*删除商品*/
var confirmFn = confirm('您确定删除該商品嗎？')
if (confirmFn) {
/* 擷取商品索引 */
var index = this.goods.indexOf(good)
this.goods.splice(index, 1)
} else {
alert('好的，您在看看')
}
},
cut: function(good) {
/* 減少商品數量 */
if (good.numder <= 1) {
alert('單個商品最少一個')
} else {
return good.numder -= 1
}
},
add: function(good) {
/*增加商品數量*/
return good.numder += 1
},
/*增加購物車*/
addGood(saveGood) {
/*1、建立名稱新數組用于篩選周遊*/
var searchArray = [];
this.goods.map(function(item, index, self) {
searchArray.push(item.name)
})
/*2、周遊判斷，購物車是否包含目前商品*/
var searchIndex = searchArray.indexOf(saveGood.name);
/*3、分類判斷*/
if (searchIndex == -1) {
/*原來沒有*/
var newGood = {
name: saveGood.name,
price: saveGood.price,
numder: 1
}
this.goods.push(newGood)
} else {
/*原來有*/
this.goods[searchIndex].numder += 1;
}
},
/*篩選購物車*/
filterFn() {
/*1、建立名稱新數組用于篩選周遊*/
var filterArray = [];
this.goods.map(function(item, index, self) {
filterArray.push(item.name)
})
/*2、輸入值索引判斷，判斷是否在目前數組裡*/
var filterIndex = filterArray.indexOf(this.filterText);
/*3、分類判斷*/
if (filterIndex == -1) {
alert('抱歉，暫無此商品')
this.filterText = '';
} else {
this.goods = this.goods.filter(function(item, index, self) {
return filterIndex == index;
})
this.filterText = '';
}
},
/*全選與全不選*/
changeAllStatus(){
var _this = this;
if(!_this.allStatus){
/*全選*/
for(var i=0;i<_this.goods.length;i++){
_this.goods[i].status = true;
}
}else{
/*全不選*/
for(var i=0;i<_this.goods.length;i++){
_this.goods[i].status = false;
}
}
},
/*跟蹤定位單個選項*/
checkStatus(good){
/*1、目前按鈕狀态*/
if(!good.status){
good.status = true;
}else{
good.status = false;
}
/* 2、every全真即真、some有真即真 */
var _this = this;
var result = _this.goods.every(function(item,index,self){
return item.status;
})
if(!result){
_this.allStatus = false;
}else{
_this.allStatus = true;
}
},
/*批量删除*/
deletaAll(){
var _this = this;
_this.goods = _this.goods.filter(function(item,index,self){
return item.status == false;
})
if(_this.allStatus){
_this.allStatus = false;
}
}
},
/* 計算屬性 */
computed: {
/*商品總價*/
sumMoney() {
var sum = 0;
this.goods.forEach(function(item, index, self) {
sum += item.price * item.numder;
})
return sum;
}
}
})
</script>
</html>
![一個小小的移動web版音樂播放器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)