shopcart-item.vue

<template>
      <div class="mealOrder-list" >
            <div class="left-border">
                <div class="inner-box food-box">
                    <flexbox>
                        <flexbox-item :span="3" class="money">
                            <div class="img_box">
                                <img :src="good.url[0]" alt="">
                            </div>
                        </flexbox-item>
                        <flexbox-item :span="8">
                            <div class="food-info">
                                <div class="meal-detial">
                                    <span>{{good.date}}</span>
                                    <span class="separation">|</span>
                                    <span>{{good.sellTimeType}}</span>
                                </div>
                                <div class="foodNameBox">
                                    <span class="food_color">{{good.name}}</span>
                                </div>
                                <div class="priceCount">
                                    <span class="food-font_color">¥</span>
                                    <span class="food-font food-font_color">{{good.price}}</span>
                                    <span class="food_unit">/份</span>
                                </div>
                            </div>
                        </flexbox-item>
                        <flexbox-item :span="2" class="pay-number" style="margin-left: 0">
                            <div class="controlCount">
                                <div class="deleteFood">
                                    <span @click="deletefoods(good)"><icon name="delete" scale="3"></icon></span>
                                </div>
                                <div class="mealNumber" >
                                    <span @click="minusCart(good)" class="changeButton leftButton">-</span>
                                    <span class="changeNumber">{{good.num}}</span>
                                    <span @click="addShopCart(good)" class="changeButton rightButton">+</span>
                                </div>
                            </div>
                        </flexbox-item>
                    </flexbox>
                </div>
            </div>
     </div>


</template>

<script>
    import {Flexbox, FlexboxItem } from 'vux'
export default {
  props: {
      good: Object
  },
    components:{
        Flexbox, FlexboxItem
    },
    data(){
      return{
      }
    },
    created(){

    },
    methods: {
        deletefoods(item){
            this.$store.dispatch("deleteCart", item)
        },
        minusCart(item){
            this.$store.dispatch("minusCart", item)
        },
        addShopCart(item){
            this.$store.dispatch("addCart", item)
        },
    },
}

</script>

<style lang="less" scoped>
    .mealOrder-list{
        .order-date{
            padding-bottom:10px;
            border-bottom:2px solid #666;
        }
        .left-border{
            margin-bottom: 20px;
            .food-box{
                padding: 10px;
                .img_box{
                   width:80px;
                    height: 80px;
                    .foodNameBox{
                        .food_color{
                            color: #c0c0c0;
                        }
                    }
                    .separation{
                        padding:0 5px;
                    }
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .food-info{
                    padding:0 5px;
                    box-sizing: border-box;
                    .priceCount{
                        .food_unit{
                            color:#c0c0c0;
                            position: relative;
                            top:-1px;
                        }
                        .food-font_color{
                            color:red;
                        }
                        .food-font{
                            font-size: 20px;
                        }
                    }
                    .foodNameBox{
                        height: 30px;
                        line-height: 30px;
                    }
                    .meal-detial{
                        font-weight: 600;
                    }
                    .money{
                        color: orangered;
                    }
                }
            }
            .controlCount{
                position: relative;
                .deleteFood{
                    cursor: pointer;
                    position: absolute;
                    bottom: 7px;
                    right: 77px;
                }
                .mealNumber{
                    border:1px solid #a9a8a8bd;
                    position: absolute;
                    right: 35px;
                    bottom: -40px;
                    width: 112px;
                    height: 30px;
                    span{
                        display: inline-block;
                    }
                    .changeButton{
                        width: 30px;
                        line-height:30px;
                        text-align: center;
                    }
                    .leftButton{
                        border-right: 1px solid #cccccc;
                        color: #292727;
                        font-size: 22px;
                        font-weight: bold;
                    }
                    .rightButton{
                        border-left: 1px solid #cccccc;
                        color: #292727;
                        font-size: 22px;
                        font-weight: bold;
                    }
                    .changeNumber{
                        text-align: center;
                        line-height: 30px;
                        width: 40px;
                    }
                }
            }

        }
    }
</style>