Code de mise en œuvre du panier d'achat de l'applet WeChat

Cet article présente principalement l'exemple de code d'implémentation du panier dans le chapitre pratique du programme WeChat Mini. Il présente en détail l'implémentation fonctionnelle du panier. Il a une certaine valeur de référence. J'espère que cela pourra aider tout le monde.

L'interface du panier n'est pas difficile à mettre en œuvre. La difficulté est de gérer la logique à l'intérieur. Qu'il s'agisse d'un petit programme ou d'une APP, la logique du panier est désormais la plus difficile. Je vais vous apprendre comment implémenter le panier, d'abord le rendu :

Implémentation du panier

cart.wxml

<import src="/template/quantity/index.wxml" />
<scroll-view class="scroll" scroll-y="true">
 <view class="separate"></view>
 <view wx:for="{{carts}}">
  <view class="cart_container">
   <image class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" src="{{item.isSelect?&#39;../../images/cart/comment_select.png&#39;:&#39;../../images/cart/comment_normal.png&#39;}}" />

   <image class="item-image" src="{{item.pic}}"></image>

   <view class="column">
    <text class="title">{{item.name}}</text>
    <view class="row">
     <text class="sku-price">￥</text>
     <text class="sku-price">{{item.price}}</text>
     <view class="sku">
      <template is="quantity" data="{{ ...item.count, componentId: index }}" />
     </view>
    </view>

   </view>
  </view>
  <view class="separate"></view>
 </view>
</scroll-view>
<view class="bottom_total">
 <view class="bottom_line"></view>

 <view class="row">
  <image class="item-allselect" bindtap="allSelect" src="{{isAllSelect?&#39;../../images/cart/comment_select.png&#39;:&#39;../../images/cart/comment_normal.png&#39;}}" />
  <text class="small_text">全选</text>
  <text>合计:￥ </text>
  <text class="price">{{totalMoney}}</text>
  <button class="button-red" bindtap="toBuy" formType="submit">去结算</button>
 </view>
</view>

La mise en page n'est pas très compliquée. Il s'agit d'une liste circulaire qui boucle les articles du panier, plus un contrôle inférieur pour le règlement. une couche de vue défilante doit être ajoutée en dehors de la liste circulaire, de sorte que lorsqu'il y a beaucoup de données, il est temps de faire défiler. Si vous n'êtes pas familier avec la vue défilante, veuillez lire vous-même les articles précédents, qui contiennent des explications. 🎜>

cat.wxss

/* pages/cart/cart.wxss */
.cart_container {
 display: flex;
 flex-direction: row;
}
.scroll {
 margin-bottom: 120rpx;
}
.column {
 display: flex;
 flex-direction: column;
}
.row {
 display: flex;
 flex-direction: row;
 align-items: center;
}
.sku {
 margin-top: 60rpx;
 margin-left: 100rpx;
}
.sku-price {
 color: red;
 position: relative;
 margin-top: 70rpx;
}
.price {
 color: red;
 position: relative;
}
.title {
 font-size: 38rpx;
 margin-top: 40rpx;
}
.small_text {
 font-size: 28rpx;
 margin-right: 40rpx;
 margin-left: 10rpx;
}
.item-select {
 width: 40rpx;
 height: 40rpx;
 margin-top: 90rpx;
 margin-left: 20rpx;
}
.item-allselect {
 width: 40rpx;
 height: 40rpx;
 margin-left: 20rpx;
}
.item-image {
 width: 180rpx;
 height: 180rpx;
 margin: 20rpx;
}
.bottom_line {
 width: 100%;
 height: 2rpx;
 background: lightgray;
}
.bottom_total {
 position: fixed;
 display: flex;
 flex-direction: column;
 bottom: 0;
 width: 100%;
 height: 120rpx;
 line-height: 120rpx;
 background: white;
}
.button-red {
 background-color: #f44336; /* 红色 */
}
button {
 position: fixed;
 right: 0;
 color: white;
 text-align: center;
 display: inline-block;
 font-size: 30rpx;
 border-radius: 0rpx;
 width: 30%;
 height: 120rpx;
 line-height: 120rpx;
}

Il n'y a rien à dire sur le style wxss. Comprendre ses attributs et appeler la classe Focus sur le panier. js. Toute la logique est dedans

cart.js

// pages/cart/cart.js
var Temp = require('../../template/contract.js');
Page(Object.assign({}, Temp.Quantity, {
 data: {
  isAllSelect:false,
  totalMoney:0,
  // 商品详情介绍
  carts: [
   {
    pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg",
    name:"日本资生堂洗颜",
    price:200,
    isSelect:false,
    // 数据设定
    count: {
     quantity: 2,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg',
    name: "倩碧焕妍活力精华露",
    price: 340,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg',
    name: "特效润肤露",
    price: 390,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 3,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg',
    name: "倩碧水嫩保湿精华面霜",
    price: 490,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
   {
    pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg',
    name: "兰蔻清莹柔肤爽肤水",
    price: 289,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 10,
     min: 1,
     max: 20
    },
   },
   {
    pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg",
    name: "LANCOME兰蔻小黑瓶精华",
    price: 230,
    isSelect: false,
    // 数据设定
    count: {
     quantity: 1,
     min: 1,
     max: 20
    },
   },
  ],
 },
 
 //勾选事件处理函数 
 switchSelect: function (e) {
  // 获取item项的id，和数组的下标值 
  var Allprice = 0,i=0;
  let id = e.target.dataset.id,
 
  index = parseInt(e.target.dataset.index);
  this.data.carts[index].isSelect = !this.data.carts[index].isSelect;
  //价钱统计
  if (this.data.carts[index].isSelect) {
   this.data.totalMoney = this.data.totalMoney + this.data.carts[index].price;
  }
  else {
   this.data.totalMoney = this.data.totalMoney - this.data.carts[index].price;
  }
  //是否全选判断
  for (i = 0; i < this.data.carts.length; i++) {
   Allprice = Allprice + this.data.carts[i].price;
  }
  if (Allprice == this.data.totalMoney)
  {
   this.data.isAllSelect=true;
  }
  else 
  {
   this.data.isAllSelect = false;
  }
  this.setData({
   carts: this.data.carts,
   totalMoney: this.data.totalMoney,
   isAllSelect: this.data.isAllSelect,
  })
 },
 //全选
 allSelect: function (e) {
  //处理全选逻辑
  let i = 0;
  if (!this.data.isAllSelect)
  {
   for (i = 0; i < this.data.carts.length; i++) {
    this.data.carts[i].isSelect = true;
    this.data.totalMoney = this.data.totalMoney + this.data.carts[i].price;
   }
  }
  else
  {
   for (i = 0; i < this.data.carts.length; i++) {
    this.data.carts[i].isSelect = false;
   }
   this.data.totalMoney=0;
  }
  this.setData({
   carts: this.data.carts,
   isAllSelect: !this.data.isAllSelect,
   totalMoney: this.data.totalMoney,
  })
 },
 // 去结算
 toBuy() {
  wx.showToast({
   title: &#39;去结算&#39;,
   icon: &#39;success&#39;,
   duration: 3000
  });
  this.setData({
   showDialog: !this.data.showDialog
  });
 },
 //数量变化处理
 handleQuantityChange(e) {
  var componentId = e.componentId;
  var quantity = e.quantity;
  this.data.carts[componentId].count.quantity = quantity;
  this.setData({
   carts: this.data.carts,
  });
 }
}));

Introduire les paramètres utilisés

1. isAllSelect : s'il faut tout sélectionner

2. totalMoney : montant total

3. paniers : données sur le produit du panier

Traitement logique du bouton de vérification switchSelect requis

1. Jugez si tous sont cochés Si tous sont cochés, le bouton Sélectionner tout en bas devrait s'allumer La base du jugement. est de savoir si le prix est égal au prix total. Bien sûr, ce n'est qu'une manière de juger. Les lecteurs peuvent également vérifier en cochant Déterminer la quantité sélectionnée,

2. Ajouter et soustraire le total. prix du bouton coché ou annulé,

3. this.setData, mettre à jour les données, c'est le point clé à chaque fois que vous traitez les données, pensez à mettre à jour les données

allSelect Traitement logique du bouton Sélectionner tout

Sélectionner tout Allumez simplement l'icône de vérification de chaque article, puis comptez le prix total Si ce n'est pas le cas, tous les articles le sont. sélectionné, il sera grisé. Le prix total est de 0
this.setData met à jour les données

Traitement des données de l'applet WeChat.

1. Modifier la méthode des données

this.data.name

data:{
 name:'我是初始化的name'
}

2. this.setData

this.data.name='我是代码君data'

Les deux méthodes peuvent modifier les données. L'avantage de this.setData est qu'il peut avoir un effet rafraîchissant, c'est-à-dire mettre à jour les données en temps réel

 this.setData({
   name:'我是代码君setData'
  })

2. Modifier le tableau d'objets

Modifier tous les objets

data:{
person:{
 name:'代码君',
 city:'厦门'
}
}

Modifier certaines données

this.setData({
   person:{
    name:'新代码君',
    city:'湖南'
   }
  })

this.setData({
   'person.name': '代码君只修改名字'
  })
//多个数组用这个
this.setData({
   'person[0].name': '代码君只修改名字'
  })

3. Ajouter et supprimer des données

1. Ajouter des données concat

2. Supprimer les données splice() supprime les données puis renvoie les données supprimées

//假设这一段是我们要新增的数组
var newarray = [{
    name:'增加的数据--'+new Date().getTime() ,
}];
//向前--用newarray与this.data.list合拼
this.data.list = newarray.concat(this.data.list);
//向后--用this.data.list与newarray合拼
this.data.list = this.data.list.concat(newarray);

Effacer les données

//删除
 remove:function (e){
  var dataset = e.target.dataset;
  var Index = dataset.index;
  //通过index识别要删除第几条数据，第二个数据为要删除的项目数量，通常为1
  this.data.list.splice(Index,1);
  //渲染数据
  this.setData({
    list:this.data.list
  });
 }

.

//清空
 clear:function (){
  //其实就是让数组变成一个空数组即可
   this.setData({
     list:{}
   });
 }

Résumé

Aujourd'hui, nous expliquons principalement comment js traite la logique des données, et expliquons également l'ajout, la suppression et la modification des données Check, ceci. est une connaissance nécessaire, vous devez pratiquer davantage à votre retour. Eh bien, c'est tout pour aujourd'hui, je vous souhaite à tous un bon week-end ~

Recommandations associées :

Panier d'achat simple par glisser-déposer implémenté par JS function

Explication détaillée de l'implémentation angulaire.js de la fonction de panier d'achat

Implémentation AngularJS de l'exemple de fonction de sélection de tout et de sélection inversée du panier d'achat partage

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!