GOUWUCHE

购物车

App.vue

<template>

  <div class="app">

    <Index />

  </div>

</template>

<script>

  import Index from "./components/Index.vue";

  export default {

    name: "App",

    components: {

      Index

    }

  };

</script>

<style>

  * {

    margin: 0;

    padding: 0;

    list-style: none;

    text-decoration: none;

    font-size: 14px;

  }

  .app {

    width: 1100px;

    border: 1px solid green;

    margin: 0 auto;

  }

  .flex{

    display: flex;

  }

  .a-c{

    align-items: center;

  }

  .j-s{

    justify-content: space-between;

  }

  .j-c{

    justify-content: center;

  }

</style>

Index.vue

<template>

    <div class="index">

        <Header />

        <table>

            <thead>

                <tr>

                    <td></td>

                    <td>商铺宝贝</td>

                    <td>积分</td>

                    <td>单价（元）</td>

                    <td>数量</td>

                </tr>

                <tr>

                    <td colspan="5">

                        <div class="line"></div>

                    </td>

                </tr>

            </thead>

            <tbody v-for="(shop,index1) in shops" :key="index1">

                <tr>

                    <td colspan="5" style="text-align:left">

                        <span>商铺：</span>

                        <span class="blue">

                            {{shop.shopName}}

                        </span> 

                        <span>卖家：</span>

                        <span  class="blue">{{shop.seller}}</span>

                        <img src="/image/taobao_relation.jpg">

                    </td>

                </tr>

                <tr v-for="(goods,index2) in shop.goodses" :key="index2">

                    <td class="td1"> 

                        <img :src="goods.img">

                    </td>

                    <td>

                        <div class="blue">{{goods.name}}</div>

                        <div>{{goods.msg}}</div>

                        <div>

                            保障：<img src="/image/taobao_icon_01.jpg">

                        </div>

                    </td>

                    <td>

                        {{goods.score}}

                    </td>

                    <td>

                        {{goods.price}}

                    </td>

                    <td>

                        <button @click="reduce(goods)">-</button>

                        <input type="text" :value="goods.count">

                        <button @click="add(goods)">+</button>

                    </td>

                </tr>

            </tbody>

        </table>

        <Footer :totalPrice="totalPrice" :totalCount="totalCount" @clear="clear"/>

    </div>

</template>

<script>

    import Header from "./Header.vue";

    import Footer from "./Footer.vue";

    export default {

        name: "Index",

        components: {

            Header,

            Footer

        },

        data() {

            return {

                shops:[

                    {

                        shopName:'纤巧百媚时尚鞋坊',

                        seller:'纤巧百媚',

                        goodses:[

                            {

                                name:'日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色',

                                img:'/image/taobao_cart_01.jpg',

                                msg:'颜色：棕色 尺码：37',

                                score:5,

                                price:100,

                                count:1,

                            },

                            {

                                name:'chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g',

                                img:'/image/taobao_cart_02.jpg',

                                msg:'',

                                score:12,

                                price:265,

                                count:1,

                            }

                        ]

                    },

                    {

                        shopName:'香港我的美丽日记',

                        seller:'taobao豆豆',

                        goodses:[

                            {

                                name:'相宜促销专供 大S推荐 最好用的LilyBell化妆棉 好用/推荐/ ',

                                img:'/image/taobao_cart_04.jpg',

                                msg:'颜色：棕色 尺码：37',

                                score:10,

                                price:100,

                                count:1,

                            }

                        ]

                    }

                ]

            }

        },

        methods: {

            add(goods){

                goods.count++

            },

            reduce(goods){

                if(--goods.count <1){

                    return alert('不能再少了')

                }

                goods.count--

            },

            clear(){

                this.shops = []

            }

        },

        computed:{

            totalPrice(){

                let sum =0

                this.shops.forEach(s => {

                    s.goodses.forEach(g=>{

                        sum += g.count*g.price

                    })

                });

                return sum

            },

            totalCount(){

                let sum = 0

                this.shops.forEach(s => {

                    s.goodses.forEach(g=>{

                        sum += g.score

                    })

                });

                return sum

            },

           

        }

    };

</script>

<style scoped> 

table{

    width: 100%;

}

tbody span{

    margin: 0 5px;

}

/* 表示不是第一行的td */

tbody tr:not(:first-child) td{

    background: #e2f2ff;

}

tbody .blue{

    color: rgb(64, 64, 252);

}

tbody td{

    padding: 2px 0;

}

tbody button{

    padding: 0 5px;

}

tbody input{

    width: 30px;

    text-align: center;

}

.line{

    height: 3px;

    background: #a7cbff;

}

.blue{

    color: rgb(58, 58, 255);

}

tbody .td1{

    width: 20%;

}

</style>

Header.vue

<template>

    <div class="">

        <div>

            <img src="/image/taobao_logo.gif" />

        </div>

        <div>

            您的位置：

            <span class="blue">首页</span>

            <span>></span>

            <span class="blue">我的淘宝</span>

            <span>></span>

            <span>我的购物车</span>

        </div>

        <ul class="list">

            <li>1.查看购物车</li>

            <li>2.确认订单信息</li>

            <li>3.付款到支付宝</li>

            <li>4.确认收到</li>

            <li>5.评价</li>

        </ul>

    </div>

</template>

<script>

    export default {

        name: "Header"

    };

</script>

<style scoped >

.header>div{

    margin: 5px 0;

}

    span {

        margin: 0 10px;

    }

    .blue {

        color: rgb(58, 58, 255);

    }

    .list {

        display: flex;

    }

    .list li {

        flex: 1;

        text-align: center;

        background: #e4e4e4 url('/image/taobao_bg.png' ) no-repeat right top;

        padding: 2px 0;

    }

    .list li:first-child{

        background-color: #f60;

        color: white;

    }

     .list li:last-child{

         background-image: none;

     }

</style>

Footer.vue

<template>

    <div class="footer flex j-s a-c">

        <div class="blue" @click="clear">清空购物车</div>

        <div>

            <div>商品总价(不含运费):</div>

            <div><span>{{totalPrice}}</span>元</div>

            <div>可获积分<span>{{totalCount}}</span>点</div>

            <div>

                <img src="/image/taobao_subtn.jpg" />

            </div>

        </div>

    </div>

</template>

<script>

    export default {

        name: "Footer",

        props:['totalPrice','totalCount'],

        methods: {

            clear(){

                // 触发自定义事件

                this.$emit('clear')

            }

        },

    };

</script>

<style scoped >

    .blue {

        color: rgb(58, 58, 255);

    }

    span {

        color: orangered;

        font-weight: bold;

        font-size: 20px;

    }

</style>