<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div id="app" style="width: 1000px;margin: 0 auto;">
<form style="margin-bottom: 100px;">
<div class="form-group">
<label for="exampleInputEmail1">商品名称：</label>
<input type="text" class="form-control" placeholder="请输入商品名称(任意字符2-16位)" style="width: 500px;" v-model="goods_name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">商品单价：</label>
<input type="text" class="form-control" placeholder="请输入商品单价(保留两位小数)" style="width: 500px;" v-model="goods_price">
</div>
<button type="button" class="btn btn-primary" @click="add">立即添加</button>
<p v-for="(v,k) in errors">
{{v}}
</p>
</form>
<input type="text" class="form-control" style="margin: 10px 0;width: 500px;" placeholder="请输入商品名称进行搜索" v-model="word">
<table class="table table-striped">
<thead class="thead-light">
<tr>
<th scope="col"></th>
<th scope="col">商品ID</th>
<th scope="col">商品名称</th>
<th scope="col">商品单价</th>
<th scope="col">商品数量</th>
<th scope="col">商品小计</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,k) in result">
<th scope="row">
<input type="checkbox" v-model="v.is_check">
</th>
<td>{{v.id}}</td>
<td>{{v.name}}</td>
<td>{{v.price.toFixed(2)}}</td>
<td>
<button type="button" class="btn btn-primary" @click="jia(k)">+</button>
{{v.num}}
<button type="button" class="btn btn-primary" @click="jian(k)">-</button>
</td>
<td>{{v.sum_price.toFixed(2)}}</td>
<td>
<button type="button" class="btn btn-danger" @click="del(k)">删除</button>
</td>
</tr>
</tbody>
</table>
<p>
<button type="button" class="btn btn-primary" @click="allCheck">全选</button>
<button type="button" class="btn btn-primary" @click="noCheck">全不选</button>
<button type="button" class="btn btn-primary" @click="unCheck">反选</button>
<button type="button" class="btn btn-danger" @click="allDel">批量删除</button>
当前选中商品数为：<span style="color: red;">{{goods_count}}</span>
总价：<span style="color: red;">{{goods_sum}}</span>
</p>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
computed: {
result() {
if (this.word == '') {
return this.list
} else {
var obj = this
var arr = []
this.list.map(function(v) {
if (v.name.indexOf(obj.word) > -1) {
arr.push(v)
}
})
return arr
}
},
goods_count() {
var num = 0; //默认数量为0
this.list.map(function(v) {
if (v.is_check) {
num += 1
}
})
return num
},
goods_sum() {
var price = 0;
this.list.map(function(v) {
if (v.is_check) {
price += v.sum_price
}
})
return price.toFixed(2)
}
},
methods: {
add() {
if (this.validate() == 0) {
var obj = {
id: this.list.length+1,
name: this.goods_name,
price: Number(this.goods_price),
num: 1,
sum_price: Number(this.goods_price),
is_check: false
}
this.list.push(obj)
}
},
validate() {
this.errors = []
if (this.goods_name == '') {
this.errors.push('商品名称必须填写')
} else {
var reg = /^[\u4e00-\u9fa5\w]{2,16}$/i
if (!reg.test(this.goods_name)) {
this.errors.push('商品名称为2-16位任意字符')
}
}
if (this.goods_price == '') {
this.errors.push('商品价格必须填写')
} else {
var reg = /^\d+\.\d{2}$/
if (!reg.test(this.goods_price)) {
this.errors.push('商品价格保留两位小数')
}
}
return this.errors.length
},
jia(k) {
//最终的数量等于原来的数量+1
var last_num = this.list[k].num + 1 >= 5 ? 5 : this.list[k].num + 1
//计算小计
this.list[k].sum_price = last_num * this.list[k].price
//将数量替换一下
this.list[k].num = last_num
},
jian(k) {
//最终的数量等于原来的数量-1
var last_num = this.list[k].num - 1 <= 1 ? 1 : this.list[k].num - 1
//计算小计
this.list[k].sum_price = last_num * this.list[k].price
//将数量替换一下
this.list[k].num = last_num
},
del(k) {
var res = confirm('您确定要删除吗？')
if (res) {
this.list.splice(k, 1)
}
},
allCheck() {
this.list.map(function(v) {
if (v.is_check == false) {
v.is_check = true
}
})
},
noCheck() {
this.list.map(function(v) {
if (v.is_check) {
v.is_check = false
}
})
},
unCheck() {
this.list.map(function(v) {
if (v.is_check) {
v.is_check = false
} else {
v.is_check = true
}
})
},
allDel() {
var new_arr = []
this.list.map(function(v) {
if (v.is_check == false) {
new_arr.push(v)
}
})
this.list = new_arr
}
},
data: {
errors: [],
goods_name: '',
goods_price: '',
word: '',
list: [{
id: 1,
name: '充气达达',
price: 20.01,
num: 1,
sum_price: 20.01,
is_check: false
},
{
id: 2,
name: '充气鹏鹏',
price: 99.99,
num: 1,
sum_price: 99.99,
is_check: false
},
{
id: 3,
name: '充气安韩',
price: 33.33,
num: 1,
sum_price: 33.33,
is_check: false
},
{
id: 4,
name: '洁鹏洗面奶',
price: 9.9,
num: 1,
sum_price: 9.9,
is_check: false
},
{
id: 5,
name: '洁鹏床上用品/套',
price: 500,
num: 1,
sum_price: 500,
is_check: false
}
]
}
})
</script>