Shopping cart dynamic display data
But the format of this data is not perfect
layer by layer
Re-store vuex
The interface is wrong here
For this piece, we process it by computing attributes and re-render it on the page
Here we consider a problem, that is to calculate the calculated total value on the page
There is another problem here, which is to select all the check boxes
Here we need to use this every method Array.prototype.every() - JavaScript | MDN (mozilla.org)
Return false as long as one of them is false
The effect is like this, but there is a bug. If we cancel a function, the total check box will have no effect. This is because the data has not been sent to change
Process product quantity
Let's start with the quantity of this product
When we modify this quantity, we need to initiate a request
Documentation
And when we bring data to the server, the first must be the id of the product, and the second is the difference between the new value and the old value. For example, if your original value is 12 and then it is 13, you will bring it to the server to get +1
The three attributes dispatched
Among them, type, in order to distinguish these three elements
disNum parameter: + variable value (1) - variable value (-1) the final number of input (not the variable value)
cart: Which product [with ID on the body]
Modify the quantity of shopping cart products
Send a request to the server to modify the quantity
Here we can use switch case to operate
One thing to note here is that if you click on the - sign
Judging that the number of products is greater than 1, it can be passed to the server -1
Otherwise, the number of products is less than or equal to 1, and the value passed to the server is 0
We can use the ternary expression disNum=cart.skuName>1?-1:0 to simplify
allot action
achieve effect
Then add the last case change
This judgment is the final amount entered by the user. If it is illegal (with Chinese characters | a negative number appears), the number brought to the server will be zero
Otherwise, it is a normal situation (decimal, rounded), the amount of change brought to the server, the number of products entered by the user
Action to remove cart product
Take a look at the interface documentation
/api/cart/deleteCart/{skuId}
We're going to operate on this
then go to the warehouse
Then go to the component
Then bind the click event, there is no way to write the method
Writing method, successfully initiate a request to the server to delete data, and re-render to the page
successfully deleted
But there is no problem with slowing down like this. If the user quickly clicks
It will become a negative number, so here we need to use throttling, we can use the throttle library
Modify product status
The interface we use here is this /api/cart/checkCart/{skuID}/{isChecked}
Then write api first
After writing the interface, write vuex
Then dispatch action
Bind a change event and pass in two parameters, which are who you want to modify, and the second is the incoming state
The parameter isChecked brought to the server is not a Boolean value, it should be 0|1
If the data modification is successful, get the server data (shopping cart) again, and prompt if it fails
Delete all selected items
Note: There is no interface to delete many products at once, but there is an interface to delete products by id [delete one at a time]
bind event
This callback function has no way to receive some useful data, so it needs to dispatch action
Here we need to use the Promise.all method
Each of the arrays is a Promise object, and if any of the Promises fail, they all fail. If all succeed, return success
Then reported an error
It turned out that this part was wrongly written. What I need to write here is the instance object of Promise
Successfully deleted all
Change the check status of all products
First bind an event
Dispatch action, the logic is similar to the previous delete
writing method
achieve effect