Die dynamische API von WeChat Mini Program Mall Development implementiert Code für die Produktdetailseite (unten).

Der Inhalt dieses Artikels bezieht sich auf den Code (unten), der in der WeChat-Miniprogramm-Mall-Entwicklung implementiert ist, um die Produktdetailseite zu realisieren Ich hoffe, es wird Ihnen nützlich sein.

Sehen Sie sich den Effekt an

In den Warenkorb legen.gif

Entwicklungsplan

1. In den Warenkorb legen , Produktmenge, Preisberechnung, Sammlung und Entwicklung der Funktion „Zum Warenkorb hinzufügen“
2. Rufen Sie die API zum Hinzufügen zum Warenkorb auf

Produktdetails-API-Datenmodell basierend auf der Produkt-ID abrufen

Besuchen Sie: https://100boot.cn/ Wählen Sie die Micro-Mall-Hülle wie unten gezeigt aus:

Zum Warenkorb und zur Produktsammlung hinzufügen API.jpg

Sie können das detaillierte Datenmodell unten ansehen!

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>

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

detail.js

// 收藏-修改收藏状态
  addLike() {
    this.setData({
      isLike: !this.data.isLike
    });
ajax.request({
      method: 'GET',
      url: 'collection/addShopCollection?key=' + utils.key + '&goodsId=' + goodsId,
      success: data => {
        console.log("收藏返回结果：" + data.message)
        wx.showToast({
          title: data.message,
          icon: 'success',
          duration: 2000
        });
      }
    })
  },
// 立即购买-待开发
  immeBuy() {
    wx.showToast({
      title: '购买成功',
      icon: 'success',
      duration: 2000
    });
  },
// 跳到购物车-待开发
  toCar() {
    wx.navigateTo({
      url: '../cart/cart'
    })
  },
 /**
   * 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  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  {
        console.log("加入购物车返回结果：" + data.message)
        wx.showToast({
          title: '加入购物车成功',
          icon: 'success',
          duration: 2000
        });
      }
    })
}

Vorlagenvorlage verwendet

aufgrund der Hinzufügung von Vorlage Der Quellcode ist zu lang. Sie können den Quellcode einfach herunterladen und verwenden.

Verwandte Empfehlungen:

Aufbau eines https-Frameworks und Implementierung der oberen und unteren Navigation für die WeChat-Miniprogramm-Einkaufszentrumsentwicklung

WeChat-Miniprogramm-Einkaufszentrum Die dynamische Entwicklungs-API implementiert Code für die Produktdetailseite (Teil 1)

Das obige ist der detaillierte Inhalt vonDie dynamische API von WeChat Mini Program Mall Development implementiert Code für die Produktdetailseite (unten).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!