购物车
选择
编号
商品名称
单价
数量
操作
您的购物车内暂无商品,快去选购吧
全选
总价:¥{{total}}元
里面存放的是我们需要传输给购物车的内容,运用父子组件传值(props,$emit)完成传输。
{{goods.name}}
{{goods.price}}
简单实现页面效果。
商品名称:{{i.name}}
商品价格:{{i.price}}元
购物车
选择
编号
商品名称
单价
数量
操作
您的购物车内暂无商品,快去选购吧
全选
总价:¥{{total}}元
(此处与页面布局依照自己喜好即可)。
body {
font-size: 18px;
}
.find {
width: 604px;
height: 90px;
margin: 0 auto;
}
.find input {
margin-top: 10px;
width: 600px;
height: 40px;
border: 2px solid #eebbbb;
border-radius: 25px;
}
#BOX {
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-size: 12px;
}
#boxs {
width: 185px;
border: 1px solid #eac2c2;
border-radius: 6px;
}
#boxs p {
padding-left: 10px;
}
#boxs img {
width: 167px;
height: 150px;
margin: 4% 5%;
border-radius: 7px;
}
#boxs button {
margin: 0 18% 4%;
background-color: #eac2c2;
border: none;
height: 35px;
width: 120px;
border-radius: 5px;
font-family: '宋体';
color: aliceblue;
}
.form-content {
width: 1200px;
margin: 0 auto;
}
.content {
width: 1200px;
margin: 0 auto;
margin-bottom: 70px;
}
.goods-content {
line-height: 60px;
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.goods-content div {
display: inline-block;
margin-bottom: 1px;
font-size: 15px;
}
.goods-select {
width: 3%;
text-align: center;
}
.goods-id {
width: 20%;
text-align: center;
}
.goods-id img {
width: 100px;
margin-top: 18px;
}
.goods-name {
width: 37%;
}
.goods-price {
width: 10%;
text-align: center;
}
.goods-number {
width: 20%;
text-align: center;
}
.goods-opt {
width: 10%;
text-align: center;
}
.goods-opt button {
width: 60px;
height: 30px;
}
.goods-content input {
height: 20px;
width: 16px;
}
.total {
background: #eac2c2;
width: 1200px;
text-align: right;
margin: 0 auto;
margin-top: 30px;
position: fixed;
bottom: 0;
}
#bl {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 30px;
font-family: '宋体';
color: #ccc;
}
#AllSelect {
background: #eac2c2;
width: 1200px;
margin: 0 auto;
height: 50px;
position: fixed;
bottom: 20px;
}
使用监听属性对购物车数组进行监听,当数组长度为0时,display设置为block,也就是显示样式,当数组长度不为0时,display设置为none,不显示样式。
watch: {
goodsList ()
{
if ( this.goodsList.length !== 0 )
{
document.getElementById( 'bl' ).style.display = 'none';
} else
{
document.getElementById( 'bl' ).style.display = 'block';
}
}
}
使用push()进行对数组元素的添加。
insert ( i )
{
if ( this.goodsList == '' )
{
this.goodsList.push( i )
} else
{
if ( this.goodsList.includes( i ) )
{
var index = this.goodsList.indexOf( i )
this.goodsList[ index ].number++
} else
{
this.goodsList.push( i )
}
}
}
使用splice()进行对数组元素的删除。
del ( index )
{
this.goodsList.splice( index, 1 );
}
用every()(用于遍历数组中所有元素,只要有一项不符合要求,便返回false,全符合要求则返回true)实现其他按钮全部被选中时,全选按钮也被选中,用forEach()(用于调用数组的每个元素,并将元素传递给回调函数)实现点击全选按钮其他按钮全部被选中效果。
computed: {
allCheck: {
get ()
{
if ( this.goodsList.length == 0 )
{
select = false;
} else
{
return this.goodsList.every( i => i.select )
}
},
set ( val )
{
this.goodsList.forEach( Element =>
{
Element.select = val;
} );
}
}
}
对数组进行遍历,如果是选中状态则用数量乘上价格进行相加,未被选中的不参与计算。
computed: {
total ()
{
var money = 0;
for ( var i = 0; i < this.goodsList.length; i++ )
{
if ( this.goodsList[ i ].select == true )
{
money += ( parseFloat( this.goodsList[ i ].price ) *
parseFloat( this.goodsList[ i ].number ) );
}
}
return money;
}
}
使用filter()方法过滤数组中元素,indexOf()方法返回指定字符串。
computed: {
finishs ()
{
return this.BoxImg.filter( ( item ) =>
{
return item.name.indexOf( this.find ) !== -1
} )
}
}
商品名称:{{i.name}}
商品价格:{{i.price}}元
购物车
选择
编号
商品名称
单价
数量
操作
您的购物车内暂无商品,快去选购吧
全选
总价:¥{{total}}元
{{goods.name}}
{{goods.price}}