Vue e-commerce project--details page completed

magnifying glass operation

<script>        
  var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>

First of all, to make this carousel, first initialize the carousel. Just copy the official website and delete some content that we don’t need

But there is a bug, it only exists one by default

Look at the official website to solve the problem slidesPerView_Swiper parameter option

  // 设置图片的个数
          slidesPerView:3,
          // 每次切换一个图片
          slidesPerGroup:1

Now the effect of clicking to add active style is realized. In addition to this, we also need to add: notify the sibling component, what is the current index, and then display the corresponding picture above

then receive it

magnifying glass over

Why do we always click on the first one? This is because .skuImageList[0] has a dead index, it can only be the first one, we should define a variable to save the index, and ensure that this is a live index

ok, this is a success. At this point we need to consider how this magnifying glass is realized

Just move the mouse in, and let the mask move with the mouse

e.offsetX-mask.offsetWidth/2 is the distance of this tick

In this way, you can move, but there is no constraint range

But there is still a bug, that is, the big picture has not changed, we need to set the big picture in the same way

 handler(e){
        let mask=this.$refs.mask
        let big=this.$refs.big
        let left =e.offsetX-mask.offsetWidth/2
        let top=e.offsetY-mask.offsetHeight/2
        // 约束范围
        if(left<=0) left=0;
        if(left>=mask.offsetWidth) left=mask.offsetWidth
        if(top<=0) top=0;
        if(top>=mask.offsetWidth) top=mask.offsetHeight
        // 修改mask的left|top的值
        mask.style.left=left+'px'
        mask.style.top=top+'px'
        big.style.left=-2*left+'px'
        big.style.top=-2*top+'px'
      }

The operation of purchasing the number of products

After completing this piece, click the button ++, -- effect

 changeSkuNum(e){
       let value=e.target.value*1
      //  如果用户输入进来的非法，出现nan或者小于1
       if(isNaN(value)||value<1){
        this.skuNum=1
       }else{
        // 不能出现小数
        this.skuNum=parseInt(value)
       }
      }

add to the cart

It is to tell the server who joins the server and sends a request to the server. Then perform routing jump

Add to cart (change the quantity of existing items) interface description

request address

/api/cart/addToCart/{ skuId }/{ skuNum }

request method

POST

Parameter Type

parameter name

type

Is it required?

describe

skuID

string

Product ID

skuNum

string

Number of Products

A positive number represents an increase

Negative numbers represent reductions

return example

success:

{

"code": 200,

"message": "Success",

"data": null,

"ok": true

}

Write the interface first

export const reqAddOrUpdateShopCart=(skuId,skuNum)=>requests({url:`/api/cart/addToCart/${skuId}/${skuNum }`,method:'post'})

First bind the function of adding to the shopping cart

1. Send a request - add the product to the database (notify the server)

2. The server storage is successful -- perform routing jump to pass parameters

3. Failure, prompt the user

First of all, we need to get our data first, and then deliver the data

Then I found an error, 404, check that it should be a problem with the server interface, and sure enough, adding /api caused an error

This successfully initiates the request

It should be noted here that the server writes data successfully, and does not return other data, only returns code=200, indicating that the operation is successful

Because the server does not return the rest of the data, so we don't need triple storage data

Judgment of success and failure of adding to shopping cart

It was originally that we distributed an action and got the request from the server. But we also need to add the judgment of the success and failure of the shopping cart, successfully perform the routing jump, and prompt the message if it fails

What it returns is a Promise object, so there are failure and success callbacks. Because the above code is to call addOrUpdateShopCart of the warehouse, this method plus asyn must return a Promise object

One thing to note is that we have to use try...catch...to monitor exceptions

Add to cart operation

First copy the components of the route that is successfully written and then redirected. Then register the route

Route passing parameters combined with session storage

That is, when the routing jumps, it is necessary to bring the product information to the next-level routing component

Some simple data skuNum is passed to the routing component in the form of query

The data of product information [relatively simple: skuInfo] is stored through the session (not persisted, and the data disappears after the session ends)

Local storage|session storage: Generally, strings are stored