main.js
import 'bootstrap/dist/css/bootstrap.css'
//全局axios
import axios from 'axios'
//配置基础地质
axios.defaults.baseURL="https://www.escook.cn"
//axios方法添加到vue原型链上
Vue.prototype.$axios=axios
app
<template>
<div>
<my-header1 title="购物车" background="red"></my-header1>
<div class="main">
<my-list1 v-for="obj in list" :key="obj.id" :gObj="obj"></my-list1>
</div>
<my-footer1 @changAll="allFn" :arr="list"></my-footer1>
</div>
</template>
<script>
import MyHeader1 from './components/MyHeader1.vue'
import MyList1 from './components/MyList1.vue'
import MyFooter1 from './components/MyFooter1.vue'
export default {
data(){
return{
list:[],
}
},
components:{
MyHeader1,
MyList1,
MyFooter1
},
created(){
this.$axios({
url:'/api/cart'
}).then((res)=>{
console.log(res);
this.list=res.data.list
})
},
methods:{
allFn(bool){
this.list.forEach((obj)=>obj.goods_state=bool)
}
}
}
</script>
<style>
.main{
margin-top: 40px;
margin-bottom: 50px;
}
</style>
header
<template>
<div class="my-header" :style="{backgroundColor:background,color,}"
>{{title}}</div>
</template>
<script>
export default {
props:{
background:String,
color:{
type:String,//约束类型
required:true,//必穿
default:"fff",//默认值颜色
},
title:{
type:String,
required:true,
}
}
}
</script>
<style lang="less" scoped>
.my-header {
height: 45px;
line-height: 45px;
text-align: center;
background-color: #1d7bff;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
</style>
list
<template>
<div class="my-goods-item">
<div class="left">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" :id="gObj.id"
v-model="gObj.goods_state"
>
<label class="custom-control-label" :for="gObj.id">
<img
:src="gObj.goods_img">
</label>
</div>
</div>
<div class="right">
<div class="top">{{gObj.goods_name}}</div>
<div class="bottom">
<span class="price">¥ {{gObj.goods_price}}</span>
<span>
<myount1 :obj="gObj"></myount1>
</span>
</div>
</div>
</div>
</template>
<script>
import Myount1 from './MyCount1.vue'
export default {
props:{
gObj:Object,
},
components:{
Myount1
}
}
</script>
<style lang="less" scoped>
.my-goods-item {
display: flex;
padding: 10px;
border-bottom: 1px solid #ccc;
.left {
img {
width: 120px;
height: 120px;
margin-right: 8px;
border-radius: 10px;
}
.custom-control-label::before,
.custom-control-label::after {
top: 50px;
}
}
.right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.top{
font-size: 14px;
font-weight: 700;
}
.bottom {
display: flex;
justify-content: space-between;
padding: 5px 0;
align-items: center;
.price {
color: red;
font-weight: bold;
}
}
}
}
</style>
footer
<template>
<!-- 底部 -->
<div class="my-footer">
<!-- 全选 -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="footerCheck" v-model="isAll">
<label class="custom-control-label" for="footerCheck">全选</label>
</div>
<!-- 合计 -->
<div>
<span>合计:</span>
<span class="price">¥ {{allPrice}}</span>
</div>
<!-- 按钮 -->
<button type="button" class="footer-btn btn btn-primary">结算 ( {{allCount}} )</button>
</div>
</template>
<script>
export default {
props:{
arr:Array,
},
//计算属性
computed:{
isAll:{
//取值
set(val){
//val是把val付给goods_status
this.$emit("changAll",val)
},
get (){
return this.arr.every(obj=>obj.goods_state===true)
}
},
//结算
allCount(){
return this.arr.reduce((sum,obj)=>{
if(obj.goods_state===true){
sum+=obj.goods_count;
}
return sum;
},0)
},
//合计
allPrice(){
return this.arr.reduce((sum,obj)=>{
if(obj.goods_state){
sum+=obj.goods_count*obj.goods_price
}
return sum;
},0)
}
}
}
</script>
<style lang="less" scoped>
.my-footer {
position: fixed;
z-index: 2;
bottom: 0;
width: 100%;
height: 50px;
border-top: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
background: #fff;
.price {
color: red;
font-weight: bold;
font-size: 15px;
}
.footer-btn {
min-width: 80px;
height: 30px;
line-height: 30px;
border-radius: 25px;
padding: 0;
}
}
</style>
count
<template>
<!-- 禁用按钮属性 :disabled="obj.goods_count===1" -->
<div class="my-counter">
<button type="button"
class="btn btn-light"
@click="obj.goods_count--"
:disabled="obj.goods_count===1"
>-</button>
<input type="number" class="form-control inp" v-model="obj.goods_count">
<button type="button" class="btn btn-light" @click="obj.goods_count++">+</button>
</div>
</template>
<script>
export default {
//父传子
props:{
obj:Object,
},
//侦听器
watch:{
obj:{
deep:true,
handler(){
if(this.obj.goods_count<1){
this.obj.goods_count=1
}
}
}
}
}
</script>
<style lang="less" scoped>
.my-counter {
display: flex;
.inp {
width: 45px;
text-align: center;
margin: 0 10px;
}
.btn, .inp{
transform: scale(0.9);
width: 80px;
}
}
</style>