<template>
    <div>
        <div class="gos" v-for="item in carArr" :key="item.id">
            <input type="checkbox" v-model="item.check">
            <p>
                <img :src="item.pic" alt="">
            </p>
            <div>
                <p>{{item.name}}  <span>价格 ￥{{item.minPrice}}</span></p>
            </div>
            <div>
                <button @click="jia(item.id)">+</button>
                <span>{{item.num}}</span>
                <button @click="jian(item.id)">-</button>
                <button @click="sc(item.id)">删除</button>
            </div>
            <div>
                <van-submit-bar :price="sumPrice*100" button-text="提交订单"/>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState ,mapGetters,mapMutations} from "vuex"
    export default {
        computed:{
            ...mapState(['carArr']),
            ...mapGetters(['sumPrice'])
        },
        methods:{
            ...mapMutations(['jia','jian','sc'])
        }
    }
</script>

<style scoped>
    .gos{
        display: flex;
        justify-content: space-between;
        height: 15vh;
        line-height: 15vh;
        border: 1px solid;
    }
    .gos img{
        width: 15vh;
        height: 15vh;
    }
</style>