}
.cartcontrol .cart-count {
display: inline-block;
width: 25px;
text-align: center;
font-size: 12px;
line-height: 26px;
vertical-align: top;
}
.cartcontrol .cart-add {
display: inline-block;
width: 26px;
height: 26px;
font-size: 26px;
color: #ffd161;
position: relative;
}
.cartcontrol .cart-add .bg {
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
position: absolute;
left: 3px;
top: 3px;
z-index: -1;
}
.move-enter-active,
.move-leave-active {
transition: all 0.5s linear;
}
.move-enter,
.move-leave-to {
transform: translateX(20px) rotate(180deg);
}
</style>
购物车组件
我们现在创建shopcart购物车组件。
<template>
<div class="shopcart" :class="{'highligh':totalCount>0}">
<div class="shopcart-wrapper">
<div class="content-left">
<div class="logo-wrapper" :class="{'highligh':totalCount>0}">
<span class="icon-shopping_cart logo" :class="{'highligh':totalCount>0}"></span>
<i class="num" v-show="totalCount">{{totalCount}}</i>
</div>
<div class="desc-wrapper">
<p class="total-price" v-show="totalPrice">￥{{totalPrice}}</p>
<p class="tip" :class="{'highligh':totalCount>0}">另需{{shipping_fee_tip}}</p>
</div>
</div> <div class="content-right" :class="{'highligh':totalCount>0}">{{payStr}}</div>
</div>
</div>
</template>
<script>
// 导入BScroll
import BScroll from "better-scroll";
export default {
props: {
min_price_tip: {
type: String,
default: ""
},
shipping_fee_tip: {
type: String,
default: ""
},
selectFoods: {
type: Array,
default() {
return [
/* {
min_price: 10,
count: 3
},
{
min_price: 7,
count: 1
} */
];
}
}
},
computed: {
// 总个数 将所选商品的个数累加得到总个数。
totalCount() {
let num = 0;
this.selectFoods.forEach(food => {
num += food.count;
});
return num;
},
// 总金额
totalPrice() {
let total = 0;
this.selectFoods.forEach(food => {
total += food.min_price * food.count;
});
return total;
},
// 结算按钮显示
payStr() {
if (this.totalCount > 0) {
return "去结算";
} else {
return this.min_price_tip;
