1 抽取头部
好多页面都有,所以抽取成一个组件 order-header
我的购物车和描述在一个div里边进行flex布局, 否则跑下边了
<template>
<div class="box">
<div class="logo">
<img src="@/assets/imgs/mi-logo.png" alt="" />
</div>
<div class="content">
<div class="title">
{{ title }}
<slot name="cart"></slot>
</div>
</div>
<div class="username"></div>
</div>
</template>
<script>
export default {
name: 'cart-param',
props: {
title: String
}
}
</script>
<style scoped lang="scss">
.box {
margin: 0 auto;
width: 1226px;
padding: 30px 0;
display: flex;
border-bottom: 2px solid orangered;
align-items: center;
.logo {
text-align: center;
width: 55px;
height: 55px;
background-color: orange;
}
.title {
display: flex;
align-items: center;
margin-left: 54px;
font-size: 28px;
color: #333333;
font-weight: 900;
}
}
</style>
使用:
<template>
<div>
<cart-param title="我的购物车">
<template v-slot:cart>
<div class="content">
温馨提示:产品是否购买成功,以最终下单为准哦,请尽快结算
</div>
</template>
</cart-param>
</div>
</template>
<script>
import CartParam from '@/components/CartParm.vue'
export default {
name: 'o-order',
components: {
CartParam
}
}
</script>
<style scoped>
.content {
font-size: 14px;
margin-left: 17px;
color: #999999;
font-weight: 200;
}
</style>
2 获取购物车列表
3 全选,全部选
后台控制
<ul class="cart-item-head">
<li class="col-1"><span class="checkbox" v-bind:class="{'checked':allChecked}" @click="toggleAll"></span>全选</li>
<li class="col-3">商品名称</li>
<li class="col-1">单价</li>
<li class="col-2">数量</li>
<li class="col-1">小计</li>
<li class="col-1">操作</li>
</ul>
// 控制全选功能
toggleAll(){
let url = this.allChecked?'/carts/unSelectAll':'/carts/selectAll';
this.axios.put(url).then((res)=>{
this.renderData(res);
})
},
// 公共赋值
renderData(res){
this.list = res.cartProductVoList || [];
this.allChecked = res.selectedAll;
this.cartTotalPrice = res.cartTotalPrice;
this.checkedNum = this.list.filter(item=>item.productSelected).length;
},
未看完