Last time we added the Shopping Quantity Display to the Category menu. In this article, we continue to push forward the project to realize the details page of the shopping cart. Before we start, we will look at what it looks like on the page:

As shown above, this page contains a shopping list, and it is composed of the name of the product, unit price, the function of adding or subtracting goods. We have realized the function of adding or subtracting goods in the list of goods, so we can reuse it now.

Get out of the shopping cart structure

We built the bottom of the shopping cart.

<templete>
<div class="shopcart" :class="{'highligh':totalCount>0}">
        <div class="shopcart-wrapper">
            
        </div>
</div>
</templete>

As usual, complete the bottom shopping cart column in shopcart-wrapper under templet template:

1 count greater than 0. Let it open

 <!-- Left=>Contents include shopping carts icon Amount of Distribution Fee -->
            <div class="content-left">
                <div class="logo-wrapper" :class="{'highligh':totalCount>0}" @click="toggleList">
                    <span class="icon-shopping_cart logo" :class="{'highligh':totalCount>0}"></span>
                    <i class="num" v-show="totalCount">{{totalCount}}</i>
                </div>
                <div class="desc-wrapper">
                    <p class="total-price" v-show="totalPrice">￥{{totalPrice}}</p>
                    <p class="tip" :class="{'highligh':totalCount>0}">Another requirement{{poiInfo.shipping_fee_tip}}</p>
                </div>
            </div>
            <!-- Settlement -->
            <div class="content-right" :class="{'highligh':totalCount>0}">
                {{payStr}}
            </div>

Build a list of selected items

As shown in the figure, we divide the structure and then build a list of the selected items.

The list of selected items shopcart-list is hidden by default, which means that when we do not select food, clicking on the shopping cart will not expand.

1.list-hearder，Left and right structure includes No. 1 pocket and empty shopping cart

2.list-content List, store the food we choose

2.1 On the left is our food name and description; on the right is the quantity, plus or minus the components.

<div class="shopcart-list" v-show="listShow" :class="{'show':listShow}">
                <!--Full minus information at the top of the list-->
                <div class="list-top" v-if="poiInfo.discounts2">
                    {{poiInfo.discounts2[0].info}}
                </div>
                <!--1 Number pocket emptying function-->
                <div class="list-header">
                    <h3 class="title">1 Number pocket</h3>
                    <div class="empty" @click="emptyFn">
                        <img src="./ash_bin.png" />
                        <span>empty cart</span>
                    </div>
                </div>
                <!--List of selected items-->
                <div class="list-content" ref='listContent'>
                    <ul>
                        <li class="food-item" v-for="food in selectFoods">
                            <div class="desc-wrapper">
                                <!--Left-->
                                <div class="desc-left">
                                    <!--Name of selected commodity-->
                                    <p class="name">{{food.name}}</p>
                                    <!--Description of selected goods unit example des Tingfeng Spicy Chicken Leg Castle 1-->
                                    <p class="unit" v-show="!food.description">{{food.unit}}</p>
                                    <p class="description" v-show="food.description">{{food.description}}</p>
                                </div>
                                <!--item pricing-->
                                <div class="desc-right">
                                    <span class="price">￥{{food.min_price}}</span>
                                </div>
                            </div>
                            <!--Reuse Commodity Addition and Reduction Components Cartcontrol-->
                            <div class="cartcontrol-wrapper">
                                <Cartcontrol :food='food'></Cartcontrol>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="list-bottom"></div>
            </div>

Add a mask layer

        <!-- mask -->
        <div class="shopcart-mask" v-show="listShow" @click="hideMask()"></div>

Here, we'll set up the structure.

Register components, add functionality

We use props to import the required data for the shopping cart components.

Computational attributes:

The total Count is used to calculate the number of goods selected.

Total Price is used to calculate the total price of the selected goods.

Settlement through payStr control;

listShow is the key point for us to control the display of the details page of shopping cart. According to the number of goods selected by total Count, fold is true and the number of goods is 0. The details page of shopping cart is folded.

Next, we assign the state back to show, and according to show, we can control the product details page to scroll the mouse for a certain amount of time.

Method:

By clicking on the logo of the shopping cart through the toggleList, we can judge that if we don't choose the goods, then we don't do anything. If we choose goods, fold will be reversed. Because we set the fold attribute in the instance to true in the computed property listShow, all of which are folded. After we take the opposite, it will unfold.

emptyFn empty shopping cart

Finally, when we click on the mask layer, let the mask layer hide, that is fold for true.

<script>
    // Import BScroll
    import BScroll from 'better-scroll'
    // Import Cartcontrol
    import Cartcontrol from 'components/Cartcontrol/Cartcontrol'

    export default {
        data() {
            return {
                fold: true
            }
        },
        props: {
            poiInfo: {
                type: Object,
                default: {}
            },
            selectFoods: {
                type: Array,
                default() {
                    return [
                        //                        {
                        //                            min_price: 10,
                        //                            count: 3
                        //                        },
                        //                        {
                        //                            min_price: 7,
                        //                            count: 1
                        //                        }
                    ];
                }
            }
        },
        computed: {
            // Total number
            totalCount() {
                let num = 0;
                this.selectFoods.forEach((food) => {
                    num += food.count;
                });

                return num;
            },
            // Total amount
            totalPrice() {
                let total = 0;
                this.selectFoods.forEach((food) => {
                    total += food.min_price * food.count;
                });

                return total;
            },
            payStr() {
                if(this.totalCount > 0) {
                    return "Settlement";
                } else {
                    return this.poiInfo.min_price_tip;
                }
            },
            listShow() {
                if(!this.totalCount) { // Number 0
                    this.fold = true;

                    return false;
                }

                let show = !this.fold;

                // BScoll correlation
                if(show) {
                    this.$nextTick(() => {
                        if(!this.shopScroll) {
                            this.shopScroll = new BScroll(this.$refs.listContent, {
                                click: true
                            });
                        } else {
                            this.shopScroll.refresh();
                        }
                    });
                }

                return show;
            }
        },
        methods: {
            toggleList() {
                if(!this.totalCount) { // Number 0
                    return;
                }
                this.fold = !this.fold;
            },
            emptyFn() {
                this.selectFoods.forEach((food) => {
                    food.count = 0;
                });
            },
            hideMask() {
                this.fold = true;
            }
        },
        components: {
            Cartcontrol,
            BScroll
        }
    }
</script>

style

<style>
.shopcart-wrapper{
    width: 100%;
    height: 51px;
    background: #514f4f;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    z-index: 99;
}
.shopcart-wrapper.highligh{
    background: #2d2b2a;
}


.shopcart-wrapper .content-left{
    flex: 1;
}
.shopcart-wrapper .content-left .logo-wrapper{
    width: 50px;
    height: 50px;
    background: #666666;
    border-radius: 50%;
    position: relative;
    top: -14px;
    left: 10px;
    text-align: center;
    float: left;
}
.shopcart-wrapper .content-left .logo-wrapper.highligh{
    background: #ffd161;
}
.shopcart-wrapper .content-left .logo-wrapper .logo{
    font-size: 28px;
    color: #c4c4c4;
    line-height: 50px;
}
.shopcart-wrapper .content-left .logo-wrapper .logo.highligh{
    color: #2D2B2A;
}
.shopcart-wrapper .content-left .logo-wrapper .num{
    width: 15px;
    height: 15px;
    line-height: 15px;
    border-radius: 50%;
    font-size: 9px;
    color: white;
    background: red;
    position: absolute;
    right: 0;
    top: 0;
}
.shopcart-wrapper .content-left .desc-wrapper{
    float: left;
    margin-left: 13px;
}
.shopcart-wrapper .content-left .desc-wrapper .total-price{
    font-size: 18px;
    line-height: 33px;
    color: white;
}
.shopcart-wrapper .content-left .desc-wrapper .tip{
    font-size: 12px;
    color: #bab9b9;
    line-height: 51px;
}
.shopcart-wrapper .content-left .desc-wrapper .tip.highligh{
    line-height: 12px;
}


.shopcart-wrapper .content-right{
    flex: 0 0 110px;
    font-size: 15px;
    color: #BAB9B9;
    line-height: 51px;
    text-align: center;
    font-weight: bold;
}
.shopcart-wrapper .content-right.highligh{
    background: #FFD161;
    color: #2D2B2A;
}




.shopcart-wrapper .shopcart-list{
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
}
.shopcart-wrapper .shopcart-list.show{
    transform: translateY(-100%);
}

.shopcart-wrapper .shopcart-list .list-top{
    height: 30px;
    text-align: center;
    font-size: 11px;
    background: #f3e6c6;
    line-height: 30px;
    color: #646158;
}

.shopcart-wrapper .shopcart-list .list-header{
    height: 30px;
    background: #F4F4F4;
}
.shopcart-wrapper .shopcart-list .list-header .title{
    float: left;
    border-left: 4px solid #53c123;
    padding-left: 6px;
    line-height: 30px;
    font-size: 12px;
}
.shopcart-wrapper .shopcart-list .list-header .empty{
    float: right;
    line-height: 30px;
    margin-right: 10px;
    font-size: 0;
}
.shopcart-wrapper .shopcart-list .list-header .empty img{
    height: 14px;
    margin-right: 9px;
    vertical-align: middle;
}
.shopcart-wrapper .shopcart-list .list-header .empty span{
    font-size: 12px;
    vertical-align: middle;
}

.shopcart-wrapper .shopcart-list .list-content{
    max-height: 360px;
    overflow: hidden;
    background: white;
}
.shopcart-wrapper .shopcart-list .list-content .food-item{
    height: 38px;
    padding: 12px 12px 10px 12px;
    border-bottom: 1px solid #F4F4F4;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper{
    float: left;
    width: 240px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left{
    float: left;
    width: 170px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .name{
    font-size: 16px;
    margin-bottom: 8px;
    
    /* Beyond Partial Hiding*/
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 16px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .unit{
    font-size: 12px;
    color: #B4B4B4;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .description{
    font-size: 12px;
    color: #B4B4B4;
        
    /* Beyond Partial Hiding*/
    overflow: hidden;
    height: 12px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-right{
    float: right;
    width: 70px;
    text-align: right;    
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-right .price{
    font-size: 12px;
    line-height: 38px;
}

.shopcart-wrapper .shopcart-list .list-content .food-item .cartcontrol-wrapper{
    float: right;
    margin-top: 6px;
}


.shopcart .shopcart-mask{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 98;
    background: rgba(7,17,27,0.6);
}
    
</style>

summary

From the shopping cart structure to the detailed list of selected items, here we reuse the components of adding and subtracting items, and then add the mask layer. By calculating attributes and methods, the details page of shopping cart is completed by adding control logic.
Next page, we'll see you next week.