Implémentation de la fonction de panier d'achat dans le mini-programme WeChat

Avant-propos

Dans le passé, les paniers d'achat étaient essentiellement mis en œuvre via un grand nombre d'opérations DOM. L'applet WeChat est en fait très similaire à vue.js dans son utilisation. Voyons ensuite comment l'applet peut implémenter la fonction de panier d'achat.

Besoins

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

• La quantité d'achat d'un seul le produit augmente et réduit

• Supprimer des articles. 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 nécessitent : l'image du produit (image), le nom du produit (titre), le prix unitaire (prix), la quantité (num). , Qu'il soit sélectionné (sélectionné), identifiant du produit (id)

• puis sélectionnez tout dans le coin inférieur gauche, un champ (selectAllStatus) est nécessaire pour indiquer si tous sont sélectionnés

• Le prix total dans le coin inférieur droit (totalPrice)

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

Je sais ce dont j'ai besoin, nous les définissons d'abord lors de l'initialisation de la page.

Implémentation du code

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. (Faisons semblant d'être de fausses données ici)

Layout wxml

Corrigez la page statique écrite auparavant et liez les données.

 <view class="cart-box">
    <!-- wx:for 渲染购物车列表 -->
    <view wx:for="{{carts}}">
    
        <!-- wx:if 是否选择显示不同图标 -->
        <icon wx:if="{{item.selected}}" type="success" color="red" bindtap="selectList" data-index="{{index}}" />
        <icon wx:else type="circle" bindtap="selectList" data-index="{{index}}"/>
        
        <!-- 点击商品图片可跳转到商品详情 -->
        <navigator url="../details/details?id={{item.id}}">
            <image class="cart-thumb" src="{{item.image}}"></image>
        </navigator>
        
        <text>{{item.title}}</text>
        <text>￥{{item.price}}</text>
        
        <!-- 增加减少数量按钮 -->
        <view>
            <text bindtap="minusCount" data-index="{{index}}">-</text>
            <text>{{item.num}}</text>
            <text bindtap="addCount" data-index="{{index}}">+</text>
        </view>
        
        <!-- 删除按钮 -->
        <text bindtap="deleteList" data-index="{{index}}"> × </text>
    </view>
</view>

<!-- 底部操作栏 -->
<view>
    <!-- wx:if 是否全选显示不同图标 -->
    <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" bindtap="selectAll"/>
    <icon wx:else type="circle" color="#fff" bindtap="selectAll"/>
    <text>全选</text>
    
    <!-- 总价 -->
    <text>￥{{totalPrice}}</text>
</view>

Calculez 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++) {         // 循环列表得到每个数据
        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.

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

Sélectionner tous les événements

Sélectionner tout consiste à modifier la sélection de chaque produit en fonction du statut sélectionné. selectAllStatus

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

Augmenter ou diminuer la quantité

Cliquez sur le signe +, ajoutez 1 à num, cliquez sur le signe -, si num > 1, puis soustrayez 1

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

Supprimer le produit

Cliquez sur le bouton Supprimer pour supprimer l'élément actuel du shopping Liste du panier.Après suppression, si vous magasinez 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();           // 重新计算总价格
    }   
}

Résumé

Bien que la fonction du panier soit relativement simple, il en existe encore beaucoup. Points de connaissances impliqués dans l'applet WeChat. Convient aux novices pour pratiquer et maîtriser.

Tutoriel recommandé : "Programme WeChat Mini"

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!