コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > WeChat アプレット > ミニプログラム開発 > WeChat ミニ プログラム モール開発の動的 API は、商品詳細ページのコードを実装します (下)

WeChat ミニ プログラム モール開発の動的 API は、商品詳細ページのコードを実装します (下)

不言
リリース： 2018-08-16 16:52:43
オリジナル
3580 人が閲覧しました

この記事では、商品詳細ページを実現するための WeChat ミニ プログラム モール開発のコード (以下) を紹介します。必要な方は参考にしていただければ幸いです。 。 ヘルプ。

効果を見る

カートに追加.gif

開発計画

1. カートに追加するフローティングボックス、製品数量、価格計算、収集およびカートに追加する機能の開発
2. カートに追加を呼び出します。ショッピング カートに参加するための API

商品の詳細を取得する商品 ID に基づいた API データ モデル

アクセス: https://100boot.cn/ 以下に示すように、マイクロモール ケースを選択します:

ショッピング カートに追加および製品コレクション API.jpg


以下で詳細なデータ モデルを確認できます。

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: &#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
        });
      }
    })
}
ログイン後にコピー

テンプレートの使い方

テンプレートのソースコードが長すぎるため、ソースコードを直接ダウンロードして使用することもできます。

関連する推奨事項:

WeChat ミニ プログラム モール開発のための https フレームワークの構築と上部および下部ナビゲーションの実装

WeChat ミニ プログラム モール開発のための動的 API を使用した商品詳細ページを実装するコード (パート 1)

以上がWeChat ミニ プログラム モール開発の動的 API は、商品詳細ページのコードを実装します (下)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
WeChat アプレット
ソース：php.cn
前の記事：WeChat ミニプログラム モール開発の動的 API は商品詳細ページのコードを実装します (パート 1) 次の記事：WeChatミニプログラムモールが開発した動的APIにより特売商品のストリーミングレイアウトコードを実現
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS を使用して Next.js の三目並べボードの各行の下のスペースを削除するにはどうすればよいですか? 各行の下にスペースがあるのはなぜですか? (CSS) 自分のスキルをテストするために Next.js 三目並べアプリを作成しようとしています。ただし、CSSに問題があります。ボード...
から 2024-04-05 11:39:02
0
1
1431
Google SHOPIFYユーザーログイン後の認証プロセス Google にログインした後、ユーザーの承認されたアカウントに関する情報がどこにも見つかりません。 laravel ベースのアプリケーションがあります。Google にログインし...
から 2024-04-04 09:40:59
0
1
310
ウィンドウ内のコンテンツがオーバーフローするとスクロールできなくなり、新しいコンテンツが非表示になります 私は現在ルーレット システム プログラムを構築しており (これは賭けをするというよりも賭けを阻止するためです!)、基本的なフレームワークを実行しているだけですが、すでにメイン ウィ...
から 2024-04-03 21:24:55
0
1
285
VueJS 2 アプリケーションが 1 にコンパイルされました フロントエンドとして VueJS を使用してアプリケーションを構築しています。しかし、私たちは 2 つのアプリを 1 つに統合しているようなものです。一般に公開される電子商取引側に...
から 2024-04-03 12:00:59
0
1
371
ブートストラップを使用した無線要素の分離: ステップバイステップ ガイド 何千もの方法を試しましたが、これに適したスタイルやスペースを見つけることができません。ブートストラップを使用する必要があります。このように見えるようにする必要がありますが、私のコー...
から 2024-04-03 09:41:55
0
1
401
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート