Vue e-commerce プロジェクト -- 詳細ページが完成しました

虫眼鏡操作

<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>

まず、このカルーセルを作成するには、まずカルーセルを初期化します。公式ウェブサイトをコピーして、不要なコンテンツを削除するだけです

ただしバグがあり、デフォルトでは 1 つしか存在しません

問題を解決するには、公式 Web サイトを参照してください。slidesPerView_Swiper パラメーターオプション

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

クリックしてアクティブなスタイルを追加する効果が実現されました。これに加えて、兄弟コンポーネントに現在のインデックスを通知し、対応する上記の画像を表示することも追加する必要があります。

それからそれを受け取ります

虫眼鏡の上

なぜいつも最初のものをクリックするのでしょうか? これは、.skuImageList[0] にはデッドインデックスがあり、最初のインデックスのみにすることができるためです。インデックスを保存する変数を定義し、これがライブインデックスであることを確認する必要があります。

よし、これは成功だ。この時点で、この虫眼鏡がどのように実現されるかを考える必要があります。

マウスを中に移動するだけで、マスクもマウスと一緒に移動できます

e.offsetX-mask.offsetWidth/2 はこの目盛りの距離です

このように移動はできますが、拘束範囲はありません

しかし、まだバグがあります。つまり、全体像は変わっていないため、同じ方法で全体像を設定する必要があります。

 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'
      }

商品の数量を購入する操作

この作品を完成させたら、「++、--」ボタンをクリックしてください。

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

カートに追加する

これは、誰がサーバーに参加し、サーバーにリクエストを送信するかをサーバーに通知することです。次にルーティングジャンプを実行します

カートに追加 (既存のアイテムの数量を変更) インターフェイスの説明

リクエストアドレス

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

リクエストメソッド

役職

パラメータの種類

パラメータ名

タイプ

必要ですか?

説明

skuID

弦

製品番号

スクナンバー

弦

製品数

正の数は増加を表します

負の数値は削減を表します

戻り値の例

成功：

{

「コード」: 200、

"メッセージ": "成功",

「データ」: null、

「わかりました」: 本当

}

最初にインターフェースを書く

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

まずショッピングカートに追加する機能をバインドします

1. リクエストを送信します - 製品をデータベースに追加します (サーバーに通知します)。

2. サーバーストレージは成功しました -- ルーティングジャンプを実行してパラメータを渡します

3. 失敗した場合、ユーザーにプロンプトを表示する

まず最初にデータを取得してから、データを配信する必要があります

次に、エラー 404 を見つけました。サーバーインターフェイスに問題があることを確認してください。そして、案の定、/api を追加するとエラーが発生しました。

これでリクエストが正常に開始されます

ここで、サーバーはデータの書き込みに成功し、他のデータは返さず、操作が成功したことを示す code=200 のみを返すことに注意してください。

サーバーは残りのデータを返さないため、トリプルストレージデータは必要ありません

買い物かごへの追加成功・失敗の判定

元々はアクションを分散してサーバーからリクエストを受け取るというものでした。ただし、ショッピングカートの成功と失敗の判断を追加し、ルーティングジャンプを正常に実行し、失敗した場合はメッセージを表示する必要もあります。

返されるのは Promise オブジェクトであるため、失敗と成功のコールバックがあります。上記のコードはウェアハウスの addOrUpdateShopCart を呼び出すため、このメソッドと async は Promise オブジェクトを返す必要があります。

注意すべき点の 1 つは、例外を監視するには try...catch... を使用する必要があることです。

カートに追加する操作

まず、正常に書き込まれてリダイレクトされたルートのコンポーネントをコピーします。次にルートを登録します

セッションストレージと組み合わせたルート受け渡しパラメーター

つまり、ルーティングがジャンプする場合、製品情報を次のレベルのルーティングコンポーネントに渡す必要があります。

いくつかの単純なデータ skuNum がクエリの形式でルーティングコンポーネントに渡されます。

製品情報のデータ[比較的単純: skuInfo]はセッションを通じて保存されます(永続化されず、セッション終了後にデータは消滅します)

ローカルストレージ|セッションストレージ: 通常、文字列が保存されます。

セッションに保存する

次に、属性を計算して処理し、ページ上にレンダリングします。

ショッピングカートの静的コンポーネントと変更

以前はカートページにジャンプできましたが、クリックして戻るようになりました。

もちろん、ID を元に戻してから、クリックしてショッピングカートの決済 > モジュールに移動する必要があります。

最初にコンポーネントを取得してから、ルーティングを構成します

静的コンポーネントを変更する

終わらせる