Comment implémenter la fonction de panier d'achat dans l'applet WeChat ? (Présentation de la méthode)

Comment implémenter la fonction de panier dans l'applet WeChat ? L'article suivant vous présentera comment implémenter la fonction de panier dans l'applet WeChat. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Qu'il s'agisse d'un centre commercial ou d'un mini-programme de restauration, la transaction doit être complétée en passant une commande, il y a donc une opération à ajouter au panier. Dans le passé, la fonction de panier d'achat était essentiellement implémentée via un grand nombre d'opérations DOM. L'applet n'étant pas basée sur le Web, elle ne peut pas créer de DOM. L'applet WeChat implémente la fonction de panierEn fait, elle est très similaire à l'utilisation de vue.js.

Tout d’abord, déterminons les besoins du panier.

Sélection unique, toutes sélections et annulations, et le prix total sera calculé en fonction des produits sélectionnés

Augmentation et diminution de la quantité d'achat d'un seul produit

Supprimer le produit . Lorsque le panier est vide, la page passe à la disposition du panier vide

Selon le dessin de conception, nous pouvons d'abord implémenter une page statique. Voyons ensuite de quel type de données un panier d’achat a besoin.

Tout d'abord, une liste de produits (chariots). Les éléments de la liste doivent : l'image du produit (image), le nom du produit (titre), le prix unitaire (prix), la quantité (num), s'il est sélectionné ( selected), Identifiant du produit (id)

Sélectionnez ensuite tout dans le coin inférieur gauche. Un champ (selectAllStatus) est requis pour indiquer si tous sont sélectionnés

Prix total (totalPrice) dans le coin inférieur. coin droit

Enfin, vous devez savoir si le panier est vide (hasList)

Maintenant que vous savez que ces données sont nécessaires, nous les définissons d'abord lors de l'initialisation de la page.

Code d'initialisation :

Page({
    data: {
        carts:[],               // 购物车列表
        hasList:false,          // 列表是否有数据
       totalPrice:0,           // 总价，初始为0
       selectAllStatus:true    // 全选状态，默认全选
    },
    onShow() {
        this.setData({
          hasList:true,        // 既然有数据了，那设为true吧
          carts:[
            {id:1,title:\'新鲜芹菜 半斤\',image:\'/image/s5.png\',num:4,price:0.01,selected:true},
            {id:2,title:\'素米 500g\',image:\'/image/s6.png\',num:1,price:0.03,selected:true}
          ]
        });
      },
})

Nous obtenons généralement les données de la liste des paniers en demandant au serveur, nous attribuons donc des valeurs aux paniers dans la fonction de cycle de vie. J'ai pensé à obtenir le dernier statut du panier à chaque fois que j'entre dans le panier, et onLoad et onReady ne sont exécutés qu'une seule fois lors de l'initialisation, je dois donc mettre la demande dans la fonction onShow.

Calculer le prix total

Prix total = prix du produit sélectionné 1 * quantité + prix du produit sélectionné 2 * quantité + …

Selon la formule, vous pouvez obtenir

getTotalPrice() {
    let carts =this.data.carts;                  // 获取购物车列表
    let total = 0;
    for(let i = 0;i<carts.length; i++)="{        =" 循环列表得到每个数据<="span=" style=";padding: 0px">
        if(carts[i].selected){                   // 判断选中才会计算价格
            total +=carts[i].num * carts[i].price;     // 所有价格加起来
        }
    }
    this.setData({                                // 最后赋值到data中渲染到页面
        carts: carts,
        totalPrice:total.toFixed(2)
    });
}

Cette méthode doit être appelée si d'autres opérations sur la page entraînent une modification du prix total.

Événement de sélection

Il est sélectionné lorsque vous cliquez dessus, et devient désélectionné lorsque vous cliquez à nouveau. En fait, il modifie le champ sélectionné. Passez data-index="{{index}}" pour transmettre l'index du produit actuel dans le tableau de liste à l'événement.

selectList(e) {
    const index =e.currentTarget.dataset.index;    // 获取data- 传进来的index
    let carts =this.data.carts;                    // 获取购物车列表
    const selected =carts[index].selected;         // 获取当前商品的选中状态
    carts[index].selected= !selected;              // 改变状态
    this.setData({
        carts: carts
    });
   this.getTotalPrice();                           // 重新获取总价
}

Sélectionner tous les événements

Sélectionner tout consiste à modifier le

selectAll(e) {
    let selectAllStatus =this.data.selectAllStatus;    // 是否全选状态
    selectAllStatus =!selectAllStatus;
    let carts =this.data.carts;
 
    for (let i = 0; i< carts.length; i++) {
        carts[i].selected = selectAllStatus;            // 改变所有商品状态
    }
    this.setData({
        selectAllStatus:selectAllStatus,
        carts: carts
    });
   this.getTotalPrice();                               // 重新获取总价
}

augmenter ou diminuer la quantité de chaque produit en fonction du statut tous sélectionnés selectAllStatus

Cliquez sur le signe +, num augmentera de 1, cliquez sur le signe -, si num > 1, puis soustrayez 1

// 增加数量
addCount(e) {
    const index =e.currentTarget.dataset.index;
    let carts =this.data.carts;
    let num =carts[index].num;
    num = num + 1;
    carts[index].num =num;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
},
// 减少数量
minusCount(e) {
    const index =e.currentTarget.dataset.index;
    let carts =this.data.carts;
    let num =carts[index].num;
    if(num <= 1){
      return false;
    }
    num = num - 1;
    carts[index].num =num;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
}

Supprimer produit

Cliquez sur le bouton Supprimer pour supprimer l'élément actuel de la liste du panier. Après la suppression, si le panier est vide, remplacez l'indicateur vide du panier hasList par false

deleteList(e) {
    const index =e.currentTarget.dataset.index;
    let carts =this.data.carts;
   carts.splice(index,1);             // 删除购物车列表里这个商品
    this.setData({
        carts: carts
    });
   if(!carts.length){                 // 如果购物车为空
        this.setData({
            hasList:false              // 修改标识为false，显示购物车为空页面
        });
    }else{                              // 如果不为空
       this.getTotalPrice();           //重新计算总价格
    }  
}

Tutoriel de développement de mini-programmes"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!