介绍 & lt; template>
& lt; div类=癱art"祝辞
& lt; div类=皊t-spacing-main"v代表=癱artInfoList"(项);:关键=癷tem.id"比;
& lt; div类=皊t-item product-item"比;
& lt; div类=皊t-border-bottom store-title"比;
& lt; p @click=癱heckShop(项目)“比;
& lt; van-checkbox v模型=癷tem.checked"祝辞
& lt; span>
{{item.shopTitle}}
& lt; van-icon name=癮rrow"/比;
& lt;/span>
& lt;/van-checkbox>
& lt;/p>
& lt;/div>
& lt; ul类=癱ommodity-list"v代表=癷tem.productList"(优点、价值);:关键=皏alue"比;
& lt;李@click=癷scheck(项目,优点)“比;
& lt; van-checkbox v模型=皃ros.isChecked"祝辞& lt;/van-checkbox>
& lt;/li>
& lt; li>//这是商品组件
& lt; product-cart大?癿ini"类型=皀umber":选项=?“祝辞& lt;/product-cart>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt; van-submit-bar类=皊ettlement":价格=?0060”;按钮文字=叭ソ崴恪癅submit=皁nSubmit"比;
& lt; van-checkbox v模型=癷sCheckAll"@click=癱heckAll()“在全选& lt;/van-checkbox>
& lt;跨类=癱art-freight"槽=癲efault"在不含运费& lt;/span>
& lt;/van-submit-bar>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
cartInfoList:(
{
id: 1、
shopTitle: & # 39;苹果旗舰店& # 39;,//商店名
检查:假的,//商店选择的状态
checkedCount: 0,//此商店被选择的商品数量
productList:(
{
完成:假的,//商品选择状态
productTitle: & # 39; 2019款macbook/苹果/MF893/国航笔记本& # 39;,//产品名
类别:& # 39;15寸/2.3/8 g/256/土豪金/标准套餐& # 39;,
价格:10200//价格
数:1//数量
}
]
},
{
id: 2
shopTitle: & # 39;锤子科技旗舰店& # 39;,
检查:假的,
checkedCount: 0,
productList:(
{
完成:假的,
productTitle: & # 39;锤子手机手感保护膜& # 39;,
类别:& # 39;登陆月球& # 39;,
价格:9.9,
数:1
},
{
完成:假的,
productTitle: & # 39;锤子手机pro割手版& # 39;,
类别:& # 39;128 g/割手版& # 39;,
价格:1790年,
数:1
}
]
}
),
isCheckAll:假的,//是否全选
allPrice: 0,//所有价格
allShops: 0,//被选中的商店数量
allCount: 0//被选中的产品数量
}
},
方法:{//选中单个商品
ischeck(项目、职业){//为未选中的时候改变为false,反之为真
! pro。完成,# 63;这一点。箴_checkTrue(项):这个。箴_checkFalse(项目)
},//修改单个商品的真实
_checkTrue(项目、职业){
箴。完成=true//将商品选中状态改为真实的//这里执行了两部,选中商品数量先+ 1,再与该店铺商品数量比较,如果相等就更改店铺选中状态为真实的
如果(+ +项目。checkedCount===item.productList.length) {
项。检查=true
其他}{
返回& # 39;& # 39;
}//+ +项目。checkedCount===item.productList。长度和# 63;项。检查=true: & # 39; & # 39;//如果店铺选中状态改为真的,选中店铺数量先+ 1,再与店铺数量比较,如果相等就更改全选选中状态为真实的////当商店全选状态,每全选一个商店,被选中商店数加一,数值等于所有商店数,全选状态为真实的
如果(item.checked) {
如果(+ +。allShops===this.cartInfoList.length) {
这一点。isCheckAll=true
其他}{
这一点。isCheckAll=false
}
其他}{
返回& # 39;& # 39;
}//项目。检查及# 63;+ +。allShops===this.cartInfoList。长度和# 63;这一点。isCheckAll=true:这个。isCheckAll=false: & # 39; & # 39;
},//修改单个商品的假的
_checkFalse(项目、职业){
箴。完成=false//将商品选中状态改为假
——项目。checkedCount//被选中的商品数减一
如果(item.checked) {//如果店铺是被选中的,更改店铺选中状态
项。检查=false//当商店状态为选中时改变假
——这一点。allShops//商店数减一
}
这一点。isCheckAll=false//全选状态为假
},//选择整个商店的商品
checkShop(项){
!项。检查及# 63;this._shopTrue(项):this._shopFalse(项)
},//遍历商店每个商品,状态为错误的改变为真,又在_checkTrue()方法中将商店状态改为真实的
_shopTrue(项){
item.productList。forEach(箴=比;{
如果(pro。完成===false) {
这一点。箴_checkTrue(项目)
其他}{
返回& # 39;& # 39;
}//pro。完成===false, # 63;这一点。箴_checkTrue(项):& # 39;& # 39;
})
},
_shopFalse(项){
item.productList。forEach(箴=比;{//同上
如果(pro。完成===true) {
这一点。箴_checkFalse(项目)
其他}{
返回& # 39;& # 39;
}//pro。完成===true, # 63;这一点。箴_checkFalse(项):& # 39;& # 39;
})
},//选择全部商店的商品,已经计算总价和总数量的函数
checkAll () {//方法内调用方法
这一点。isCheckAll=! this.isCheckAll
this.isCheckAll
,# 63;this.cartInfoList。forEach(项=比;{
this._shopTrue(项)
})
:this.cartInfoList。forEach(项=比;{
this._shopFalse(项)
})
},
_totalPeice () {//每次调用此方法,将初始值为0,遍历价格并累加
这一点。allPrice=0
this.cartInfoList。forEach(项=比;{
让产品=item.productList
产品。forEach(优点=比;{
如果(pros.isChecked) {
这一点。allPrice +=优点。价格* pros.count
}
})
})
},
_totalCount () {//同上
这一点。allCount=0
this.cartInfoList。forEach(项=比;{
这一点。allCount +=item.checkedCount
})
},> @spacing-size: .29rem;
.cart-main {
.st-item-header {
填充:@spacing-size;
justify-content: flex-start;
.theme-checkbox {
margin-right: @spacing-size;
}
}
.item-list {
padding-left: .77rem;
位置:相对;
.theme-checkbox {
margin-top: -.24rem;
位置:绝对的;
左:0;
上图:50%;
}
}
}
这篇文章给大家介绍在vue项目中使用vant实现一个购物车功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
具体内容如下
这是效果图:
话不多少,直接上代码:
