About the display of the shopping cart module in the project

1. What components are included in the shopping cart module

nav-bar (display "shopping cart"), CartList component (including shopping cart list), where subcomponents include scroll component and CartListItem component. In the CartList component, the cartlist variable is traversed through v-for, and each product object Item is passed to the child component CartListItem through props. Each CartListItem component includes a lot of div boxes, displaying CheckButton, product pictures, product price, description, price and quantity, etc.

2. The display of the shopping cart interface

1. Display of shopping cart navigation bar: adopt nav-bar component and get cartList.length
2. Display of shopping cart products: through the CartList and CartListItem components
3. Switch between selected and unselected commodities: By monitoring the click event of the CheckButton component, the commodity model object can be modified to change the selected and unselected states. That is, add the .checked attribute to each product model object
4. Summary of the bottom toolbar
   • Select all button: The idea is that if one or more are not selected, then all are selected, if all are selected, then all are unselected
   • Calculate the total price: The idea is to use the filter method to find the selected product for the cartList, and use reduce to calculate the sum of the number of selected products x