vue2 购物车21

main:
import Vue from 'vue'
import App from './App.vue'


// vant 
import Vant from 'vant';
import 'vant/lib/index.css';
import { NavBar,SubmitBar,Card,Checkbox, CheckboxGroup} from 'vant'
Vue.use(Vant,NavBar,SubmitBar,Card,Checkbox, CheckboxGroup );

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

　　

app.js:
<template>
  <div id="app">
    <Title header="购物车"></Title>
    <Goods v-for="item in list" :key="item.id" :id="item.id" :img="item.goods_img" :title="item.goods_name"
      :count="item.goods_count" :state="item.goods_state" :price="item.goods_price" @add-change="getadd(item, $event)"
      @reduce-change="getreDuce(item, $event)">
    </Goods>

    <Footer ></Footer>
    <!-- :Total="price" -->
  </div>
</template>

<script>
// 导入 axios 请求库
import axios from 'axios'
import Title from './components/Title.vue'
import Footer from './components/Footer.vue'
import Goods from './components/Goods.vue'
export default {
  name: 'App',
  components: {
    Title, Footer, Goods
  },
  data() {
    return {
      list: [],
      aaaaaaaaaaaa: 1111111111
    }
  },
  created() {
    this.dataList()
  },
  computed:{
    // price(){
    //   return this.list.fliter(item =>item.goods_state)
    // },
  },
  methods: {
    async dataList() {
      const { data: res } = await axios.get('https://www.escook.cn/api/cart')
      if (res.status === 200) {
        this.list = res.list
      }
      console.log(res);
    },
    getadd(item, e) {
      item.goods_count = e
    },
    getreDuce(item, e) {
      item.goods_count = e
    }
  },

}
</script>

<style lang="less">
#app {
  background: #f7f8fa;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

　　

title:
<template>
    <div>
        <van-nav-bar :title="header"/>
    </div>
</template>

<script>
export default {
    props: {
        header: {
            default: '',
            type: String
        }
    }
}
</script>
<style lang="less" scoped>

</style>

　　

Goods:
<template>
    <div>
        <van-checkbox v-model="checked"></van-checkbox>
        <van-card :num="count" :price="price" :title="title" :thumb="img">
            <template #footer>
                <van-button size="mini" @click="add">+</van-button>
                <van-button size="mini" @click="reduce">-</van-button>
            </template>
        </van-card>
    </div>
</template>

<script>
export default {
    props: {
        id: {
            required: true,
            type: Number
        },
        img: {
            default: '',
            type: String,
        },
        title: {
            default: '',
            type: String,
        },
        count: {
            default: 0,
            type: Number,
        },
        state: {
            default: true,
            type: Boolean
        },
        price: {
            default: '',
            type: Number
        }
    },
    data() {
        return {
            checked: this.state
        }
    },
    methods: {
        add() {
            this.$emit('add-change', this.count + 1)
        },
        reduce() {
            if (this.count === 0) return
            this.$emit('reduce-change', this.count - 1)
        }
    },
}
</script>

<style lang="less" scoped>

</style>

　　

footer:
<template>
    <div class="footer">
        <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
            <van-checkbox>全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script>
export default {
    methods: {
        onSubmit() {
            console.log('提交按钮');
        }
    },
}
</script>

<style lang="less" scoped>
.footer {
    font-size: 12px;
    height: 50px;
    width: 96%;
    border-top: 1px solid #efefef;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}
</style>