【系】微信小程序云開發(fā)實戰(zhàn)堅果商城...

cyfanz 2021-10-30

展開全文

第 4-6 課：前后端交互之商品詳情實現(xiàn)

1 邏輯處理

打開 client 新建 models/productModel.js ,新增

import { CloudRequest } from '../utils/cloud-request.js'
class ProductModel extends CloudRequest {
  
  /*********** 新增 *********/  
  /**
   * 根據(jù)商品ID 獲取商品信息
   * @param {*} product_id 
   * @param {*} callBack 
   */
  getProductById(product_id,callBack) {
    this.request({
      url: "getProductById",
      data:{product_id:product_id},
      success: res => {
        callBack(res)
      }
    })
  }

}
export { ProductModel }

2 前臺數(shù)據(jù)處理

回到我們 pages/product/product.js

// pages/product/product.js
import {  ProductModel } from '../../models/productModel.js'
import { CartModel } from '../../models/CartModel.js'
let productModel = new ProductModel()
let cartmodel = new CartModel()
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    currentTab: 0,      // tab選項卡
    product:''
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    let product_id = options.product_id
    this._init(product_id)
  },
  // 詳情和參數(shù)切換
  clickTab: function (e) {
    const currentTab = e.currentTarget.dataset.current
    this.setData({
      currentTab
    })
  },
  _init:function(product_id){
    // 獲取商品信息
    productModel.getProductById(product_id,res=>{
      this.setData({
        product:res.result.data.data
      })
    })
  },
  // 購物車
  goCart:function(){   
    wx.switchTab({    
      url: '/pages/cart/cart',
    })
  },
  // 回到首頁
  goHome:function(){
    wx.switchTab({
      url: '/pages/index/index',
    })
  },
  // 關(guān)注
  focus:function(e){
      wx.showToast({
        icon: 'none',
        title: '暫未開通'
      })
  },
  joinCart:function(){

    cartmodel.add(this.data.product,1,res=>{
      wx.showToast({
        icon:"success",
        context:"添加成功"
      })
    })
  },
  immediately:function(){
    // 數(shù)量默認(rèn)為1
    let count = 1
    wx.navigateTo({
      url: '../order/order?count=' + count + '&productId='+this.data.product._id+ '&from=product'
    });
  }
})

pages/product/product.wxml

<!--pages/product/product.wxml-->
<view class='container'>
  <!-- 商品圖片 -->
  <view class='swiper-container'>
       <image src="{{product.product_img}}" class="slide-image" />
  </view>
   <!-- 商品標(biāo)題  -->
  <view class='title-container'>
    <view class="title">{{product.product_name}}</view>
  </view>
    <view class='price-container'>
    <text class='symbol'>￥</text>
    <text class='price'>{{product.product_sell_price}}</text>
    <text class='market-price'>{{product.product_price}}</text>
  </view>
  <!-- 基本參數(shù) -->
  <view class='parameter-container'>
    <text>快遞:49包郵</text>
    <text class='parameter-color'>剩余:{{product.product_stock}}</text>
    <text>總銷量:999</text>
  </view>
   <!-- tab選項卡 -->
  <view class='tab-container'>
    <view class="swiper-tab">
        <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">商家詳情</view>
        <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">規(guī)格參數(shù)</view>
    </view>
    <view class='swiper-tab-show'>
      <view class='dealer-details' wx:if="{{currentTab==0}}">
         <text>商品詳情正在更新中！</text>
      </view>
      <view class='format-container' wx:else>
          <text>詳情正在更新中!</text>
      </view>
    </view>
  </view>
  
  <!-- 底部 -->
    <view class='bottom-container'>
      <view class='icon-container home' bind:tap='goHome' >
        <icon class='iconfont iconziyuan'></icon>
        <text>首頁</text>
      </view>
      <view class="icon-container customer {{focusStatus?'focusActive':''}}" bind:tap='focus'>
        <icon class="iconfont  iconshoucang1 "></icon>
        <text>關(guān)注</text>
      </view>
      <view class='icon-container cart' bind:tap='goCart'>
        <icon class='iconfont iconicon01'></icon>
        <text>購物車</text>
      </view>
      <view class='go-container'>
        <view class='joinCart' bind:tap='joinCart'><text>加入購物車</text></view>
        <view class='immediately' bind:tap='immediately'><text>立即購買</text></view>
      </view>
  </view>
</view>

3 代碼解析

3.1 初始數(shù)據(jù)

商品詳情進(jìn)入的時候需要拿到商品的 id ，通過 id 獲取商品的詳情。

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    let product_id = options.product_id
    this._init(product_id)
  },
    _init:function(product_id){
    // 獲取商品信息
    productModel.getProductById(product_id,res=>{
      this.setData({
        product:res.result.data.data
      })
    })
  },

3.2 添加購物車和立即購買

購物車的實現(xiàn)是每次用戶點擊一次商品加 1 ，并給出用戶提示信息。立即購買目前沒有數(shù)量選擇的功能，則是默認(rèn)給出商品數(shù)為 1 并把數(shù)量和商品的 id 在跳轉(zhuǎn)的時候一起帶入。

 // 添加購物車
  joinCart:function(){
    cartmodel.add(this.data.product,1,res=>{
      wx.showToast({
        icon:"success",
        context:"添加成功"
      })
    })
  },
  // 立即購買
  immediately:function(){
    // 數(shù)量默認(rèn)為1
    let count = 1
    wx.navigateTo({
      url: '../order/order?count=' + count + '&productId='+this.data.product._id+ '&from=product'
    });
  }

3.3 其他跳轉(zhuǎn)

這里關(guān)注因為后臺沒有實現(xiàn)關(guān)聯(lián)，這個功能就只能目前給出一個提示。

 // 購物車
  goCart:function(){   
    wx.switchTab({    
      url: '/pages/cart/cart',
    })
  },
  // 回到首頁
  goHome:function(){
    wx.switchTab({
      url: '/pages/index/index',
    })
  },
  // 關(guān)注
  focus:function(e){
      wx.showToast({
        icon: 'none',
        title: '暫未開通'
      })
  },