<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
<script src
="./vue.js"></script
>
<style
>
* {
margin
: 0;
padding
: 0
}
table
{
width
: 1000px
;
border
-collapse
: collapse
;
text
-align
: center
;
}
tr
{
height
: 140px
;
}
.title
{
height
: 70px
;
border
: 1px solid #
333
}
.good
-desc
{
display
: flex
;
}
ul
,
li
{
list
-style
: none
;
text
-align
: left
;
font
-size
: 14px
;
}
img
{
width
: 100px
;
height
: 100px
;
}
.num input
{
width
: 30px
;
height
: 30px
;
text
-align
: center
;
border
: 0
}
.num button
{
width
: 25px
;
}
.footer
{
width
: 1000px
;
display
: flex
;
justify
-content
: space
-between
;
}
.left span
{
color
: #aaa
;
font
-size
: 14px
;
margin
-left
: 30px
}
.right
{
color
: #
333;
}
.right b
{
color
: red
}
.right button
{
border
: 0;
width
: 60px
;
height
: 40px
;
background
: orangered
;
color
: #fff
}
</style
>
</head
>
<body
>
<div id
="app">
<h2
>购物清单
</h2
>
<table
>
<tr
class="title">
<th
><input type
="checkbox" v
-model
='statusAll' @change
='chooseAll'>全选
</th
>
<th v
-for='item in title'>{{item
}}</th
>
</tr
>
<tr v
-for='item,index in datalist'>
<td
><input type
="checkbox" @change
='chooseHandle()' v
-model
='item.status'></td
>
<td
class="good-desc">
<img
:src
="item.img" alt
="">
<ul
>
<li
>{{item
.title
}}</li
>
<li
>品牌
:{{item
.brand
}}</li
>
<li
>产地
:{{item
.place
}}</li
>
<li
>规格
:{{item
.norms
}}</li
>
<li
>起定量
:{{item
.startnum
}}</li
>
<li
>配送仓库
:{{item
.store
}}</li
>
</ul
>
</td
>
<td
class="num">
<button @click
='changeNum("-",item)'>-</button
>
<input type
="text" v
-model
='item.num'>
<button @click
='changeNum("+",item)'>+</button
>
</td
>
<td
>{{item
.price
}}</td
>
<td
>{{item
.total
}}</td
>
<td
>
<button @click
='delHandle(index)'>删除
</button
>
</td
>
</tr
>
</table
>
<div
class="footer">
<div
class="left">
<span @click
='delAll'>删除所选商品
</span
>
<span
>继续购物
</span
>
</div
>
<div
class="right">
<span
><b
>{{num
}}</b
>件商品总计(不含运费
):<b
>{{priceAll
}}</b
></span
>
<button
>去结算
</button
>
</div
>
</div
>
</div
>
<script
>
let vm
= new Vue({
el
: "#app",
data
: {
title
: ['商品', '数量', '单价', '金额(元)', '操作'],
datalist
: [
{title
: "11111",brand
: "哈哈",place
: "中国",norms
: "大",startnum
: "216千克",store
: "上海沧海仓库",num
: 4,price
: 200,total
: 800,img
: "./goods.png",status
: false},
{title
: "22222",brand
: "哈哈",place
: "中国",norms
: "大",startnum
: "216千克",store
: "上海沧海仓库",num
: 4,price
: 200,total
: 800,img
: "./goods.png",status
: false},
{title
: "33333",brand
: "哈哈",place
: "中国",norms
: "大",startnum
: "216千克",store
: "上海沧海仓库",num
: 4,price
: 200,total
: 800,img
: "./goods.png",status
: false}
],
statusAll
: false,
indexList
: []
},
computed
: {
priceAll() {
var totalprice
= 0;
this.datalist
.forEach((item
) => {
if (item
.status
=== true) {
totalprice
+= item
.total
}
})
return totalprice
},
num() {
var list
= this.datalist
.filter((item
, index
, arr
) => {
return item
.status
=== true
})
return list
.length
}
},
methods
: {
chooseHandle() {
this.statusAll
= this.datalist
.every(item
=> {
return item
.status
=== true
})
},
chooseAll() {
console
.log(this.statusAll
)
this.datalist
.forEach((item
) => {
item
.status
= this.statusAll
})
},
changeNum(type
, item
) {
if (type
=== '+') {
item
.num
++
} else {
item
.num
--
}
if(item
.num
<=0){
item
.num
=0
}
item
.total
= item
.num
* item
.price
this.chooseHandle()
},
delHandle(index
) {
this.datalist
.splice(index
, 1)
},
delAll() {
this.datalist
= this.datalist
.filter((item
) => {
return item
.status
!== true
})
}
}
})
</script
>
</body
>
</html
>
Processed:
0.016, SQL:
12
