communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > Applet WeChat > Développement de mini-programmes > L'API dynamique du développement du centre commercial WeChat mini-programme implémente le code pour la page de détails du produit (ci-dessous)

L'API dynamique du développement du centre commercial WeChat mini-programme implémente le code pour la page de détails du produit (ci-dessous)

不言
Libérer： 2018-08-16 16:52:43
original
3579 Les gens l'ont consulté

Le contenu de cet article concerne l'API dynamique du développement du mini centre commercial WeChat pour implémenter le code de la page de détails du produit (ci-dessous). J'espère que ce sera le cas. utile pour vous.

Voir l'effet

Ajouter au panier.gif

Plan de développement

Ajouter au panier boîte flottante. , Quantité de produits, calcul du prix, collecte et développement de la fonction d'ajout au panier
2. Appelez l'API d'ajout au panier pour ajouter au panier

Obtenir le modèle de données de l'API des détails du produit en fonction de l'ID du produit

🎜>
Visite : https ://100boot.cn/ Sélectionnez le boîtier du micro-centre commercial comme indiqué ci-dessous :

Ajouter au panier et à la collection de produits API.jpg


Vous pouvez consulter le modèle de données détaillé ci-dessous !

detail.wxml
<!-- 底部悬浮栏 --><view class="detail-nav">
  <image bindtap="toCar" src="../../images/cart1.png" />  
  <view class="line_nav"></view>
   <image bindtap="addLike" src="{{isLike?&#39;../../images/enshrine_select.png&#39;:&#39;../../images/enshrine.png&#39;}}" /> 
  <button data-goodid="1"  class="button-green" bindtap="toggleDialog" >加入购物车</button>
  <button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button></view><!--加入购物车-->#template模板引用<import src="../template/template.wxml" /><view class="dialog {{ showDialog ? &#39;dialog--show&#39; : &#39;&#39; }}">
      <view class="dialog__mask" bindtap="toggleDialog" />
      <view class="dialog__container">
        <view class="row">
          <icon bindtap="closeDialog" class="image-close" type="cancel" size="25"/>
          <image class="image-sku" src="{{goods.imgUrl}}"></image>
          <view class="column">
            <text class="sku-price">￥{{goods.totalMoney}}</text>
            <text class="sku-title">销量 {{goods.buyRate}} 件</text>
            <text class="sku-title">商品编码：{{goods.goodsId}}</text>
          </view>
        </view>
        <text class="border-line"></text>
        <view class="row">
          <text >购买数量</text>
          <view class="quantity-position">
              <!-- <template is="quantity"  data="{{ ...item,index:index}}" />  -->
               <template is="quantity" data="{{ ...goods,index:1}}" /> 
          </view>
        </view>
        <text class="border-line"></text>

        <button data-goodid="{{goods.goodsId}}" class="button-addCar" bindtap="addCar" formType="submit">确定</button>
      </view>
    </view>
Copier après la connexion

detail.wxss
#template 模板引用
 @import "../template/template.wxss"; 
/* sku选择 */
.dialog__mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}
.dialog__container {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  transform: translateY(150%);
  transition: all 0.4s ease;
  z-index: 11;
}
.dialog--show .dialog__container {
  transform: translateY(0);
}
.dialog--show .dialog__mask {
  display: block;
}
.image-sku {
  width: 200rpx;
  height: 200rpx;
  z-index: 12;
  position: absolute;
  left: 20px;
  top: -30px;
  border-radius: 20rpx;
}
.image-close {
  width: 40rpx;
  height: 40rpx;
  position: fixed;
  right: 20rpx;
  top: 10rpx;
}
.column {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.border-line {
  width: 100%;
  height: 2rpx;
  display: inline-block;
  margin: 30rpx 0rpx;
  background-color: gainsboro;
  text-align: center;
}
.sku-title {
  position: relative;
  left: 300rpx;
  margin: 1rpx;
}
.sku-price {
  color: red;
  position: relative;
  left: 300rpx;
  margin: 1rpx;
}
.row .quantity-position {
  position: absolute;
  right: 30rpx;
  display: flex;  
  justify-content: center;  
  flex-direction: column;  
}
Copier après la connexion

detail.js
// 收藏-修改收藏状态
  addLike() {
    this.setData({
      isLike: !this.data.isLike
    });
ajax.request({
      method: &#39;GET&#39;,
      url: &#39;collection/addShopCollection?key=&#39; + utils.key + &#39;&goodsId=&#39; + goodsId,
      success: data => {
        console.log("收藏返回结果：" + data.message)
        wx.showToast({
          title: data.message,
          icon: &#39;success&#39;,
          duration: 2000
        });
      }
    })
  },
// 立即购买-待开发
  immeBuy() {
    wx.showToast({
      title: &#39;购买成功&#39;,
      icon: &#39;success&#39;,
      duration: 2000
    });
  },
// 跳到购物车-待开发
  toCar() {
    wx.navigateTo({
      url: &#39;../cart/cart&#39;
    })
  },
 /**
   * sku 弹出
   */
  toggleDialog: function () {
    this.setData({
      showDialog: !this.data.showDialog
    });
  },
  /**
   * sku 关闭
   */
  closeDialog: function () {
    console.info("关闭");
    this.setData({
      showDialog: false
    });
  },
/* 减数 */
  delCount: function (e) {
    console.log("刚刚您点击了减1");
    var count = this.data.goods.count;
    // 商品总数量-1
    if (count > 1) {
      this.data.goods.count--;
    }
    // 将数值与状态写回  
    this.setData({
      goods: this.data.goods
    });
    this.priceCount();
  },
  /* 加数 */
  addCount: function (e) {
    console.log("刚刚您点击了加1");
    var count = this.data.goods.count;
    // 商品总数量-1  
    if (count < 10) {
      this.data.goods.count++;
    }
    // 将数值与状态写回  
    this.setData({
      goods: this.data.goods
    });
    this.priceCount();
  },
  //价格计算
  priceCount: function (e) {
    this.data.goods.totalMoney = this.data.goods.price * this.data.goods.count;
    this.setData({
      goods: this.data.goods
    })
  },
/* 减数 */
  delCount: function (e) {
    console.log("刚刚您点击了减1");
    var count = this.data.goods.count;
    // 商品总数量-1
    if (count > 1) {
      this.data.goods.count--;
    }
    // 将数值与状态写回  
    this.setData({
      goods: this.data.goods
    });
    this.priceCount();
  },
  /* 加数 */
  addCount: function (e) {
    console.log("刚刚您点击了加1");
    var count = this.data.goods.count;
    // 商品总数量-1  
    if (count < 10) {
      this.data.goods.count++;
    }
    // 将数值与状态写回  
    this.setData({
      goods: this.data.goods
    });
    this.priceCount();
  },
  //价格计算
  priceCount: function (e) {
    this.data.goods.totalMoney = this.data.goods.price * this.data.goods.count;
    this.setData({
      goods: this.data.goods
    })
  },
/**
   * 加入购物车
   */
  addCar: function (e) {
    var count = this.data.goods.count;
    ajax.request({
      method: &#39;GET&#39;,
      url: &#39;carts/addShopCarts?key=&#39; + utils.key + &#39;&goodsId=&#39; + goodsId + &#39;&num=&#39; + count,
      success: data => {
        console.log("加入购物车返回结果：" + data.message)
        wx.showToast({
          title: &#39;加入购物车成功&#39;,
          icon: &#39;success&#39;,
          duration: 2000
        });
      }
    })
}
Copier après la connexion

utilisation du modèle

Le code source du modèle étant trop long, vous pouvez simplement télécharger le code source et l'utiliser directement.

Recommandations associées :

Construction du cadre https et mise en œuvre de la navigation haut et bas pour le développement du centre commercial de mini-programmes WeChat

Centre commercial de mini-programmes WeChat développement L'API dynamique implémente le code pour la page de détails du produit (Partie 1)

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!

Étiquettes associées：
微信小程序
source：php.cn
Article précédent：L'API dynamique du développement du mini-programme commercial WeChat implémente le code pour la page de détails du produit (partie 1) Article suivant：L'API dynamique développée par WeChat Mini Program Mall réalise le code de mise en page en streaming des produits de vente spéciaux
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment supprimer l'espace sous chaque ligne du tableau Tic-Tac-Toe dans Next.js en utilisant CSS ? Pourquoi y a-t-il un espace sous chaque ligne ? (CSS) J'essaie de créer une application Ne...
Depuis 2024-04-05 11:39:02
0
1
1431
Processus d'autorisation après la connexion de l'utilisateur Google SHOPIFY Après m'être connecté à Google, je ne trouve nulle part des informations sur le compte aut...
Depuis 2024-04-04 09:40:59
0
1
310
Le débordement de contenu dans la fenêtre empêche le défilement et masque le nouveau contenu Je suis actuellement en train de construire un programme de système de roulette (c'est plu...
Depuis 2024-04-03 21:24:55
0
1
285
Application VueJS 2 compilée en 1 Nous construisons une application en utilisant VueJS comme interface. Mais nous fusionnons...
Depuis 2024-04-03 12:00:59
0
1
371
Séparer les éléments radio à l'aide de Bootstrap : un guide étape par étape J'ai essayé mille façons mais je n'arrive pas à trouver le style ou l'espace pour cela. Je...
Depuis 2024-04-03 09:41:55
0
1
401
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal