微信小程序 ---- 慕尚花坊购物车

最新推荐文章于 2024-06-25 17:45:37 发布

原创

最新推荐文章于 2024-06-25 17:45:37 发布 · 1.5k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

购物车

01. 购物车-封装购物车接口 API

思路分析：

为了方便后续进行购物车模块的开发，我们在这一节将购物车所有的接口封装成接口 API 函数

落地代码：

import http from '../utils/http'

/**
 * @description 获取购物车列表数据
 * @returns Promise
 */
export const reqCartList = () => {
   
   
  return http.get('/mall-api/cart/getCartList')
}

/**
 * @description 加入购物车
 * @param {*} data
 * @returns Promise
 */
export const reqAddCart = (data) => {
   
   
  return http.get(`/cart/addToCart/${
     
     data.goodsId}/${
     
     data.count}`, data)
}

/**
 * @description 更新商品的选中状态
 * @param {*} goodsId 商品 id
 * @param {*} isChecked 商品的选中状态
 * @returns Promise
 */
export const reqUpdateChecked = (goodsId, isChecked) => {
   
   
  return http.get(`/cart/checkCart/${
     
     goodsId}/${
     
     isChecked}`)
}

/**
 * @description 全选和全不选
 * @param {*} isChecked 商品的选中状态
 * @returns Promise
 */
export const reqCheckAllCart = (isChecked) => {
   
   
  return http.get(`/cart/checkAllCart/${
     
     isChecked}`)
}

/**
 * @description 删除购物车商品
 * @param {*} goodsId 商品 id
 * @returns Promise
 */
export const reqDelCart = (goodsId) => {
   
   
  return http.get(`/cart/delete/${
     
     goodsId}`)
}

02. 加入购物车-模板分析和渲染

业务介绍：

点击加入购物车和立即购买的时候，展示购物弹框，在弹框中需要用户选择购买数量和祝福语

点击加入购物车和立即购买，触发的是同一个弹框。

因此点击弹框中的确定按钮时，我们需要区分当前是加入购物车操作还是立即购买操作。

这时候定义一个状态 buyNow 做区分，buyNow 等于 1 代表是立即购买，否则是加入购物车

产品需求

如果点击的是加入购物车，需要将当前商品加入到购物车
如果点击的是立即购买，需要跳转到结算支付页面，立即购买该商品
如果是立即购买，不支持购买多个商品

结构分析：

点击立即购买和加入购物车的时候，通过 show 属性，控制弹框的隐藏和展示

<!-- 商品的底部商品导航 -->
<van-goods-action>
  <!-- coding... -->
+   <van-goods-action-button text="加入购物车" type="warning" bindtap="handleAddcart" />
+   <van-goods-action-button text="立即购买" bindtap="handeGotoBuy" />
</van-goods-action>

<!-- 加入购物车、立即购买弹框 -->
<!-- show 控制弹框的隐藏和展示 -->
<!-- bind:close 点击关闭弹框时触发的回调 -->
<van-action-sheet show="{
    
    { show }}" bind:close="onClose">
  <view class="sheet-wrapper">
      
    <!-- 代码略... -->
      
    <!-- 购买数量弹框 -->
+     <view class="buy-btn" wx:if="{
    
    { buyNow === 0 }}">
      <!-- Stepper 步进器，由增加按钮、减少按钮和输入框组成，控制购买数量 -->
      <van-stepper value="{
    
    { count }}" bind:change="onChangeGoodsCount" />
    </view>
      
    <!-- 代码略... -->
  </view>
</van-action-sheet>

点击立即购买和加入购物车的时候，通过 buyNow 属性，来区分是进行的某种操作

Page({
   
   
 
  // 页面的初始数据
  data: {
   
   
    goodsInfo: {
   
   }, // 商品详情
    show: false, // 加入购物车和立即购买时显示的弹框
    count: 1, // 商品购买数量，默认是 1
    blessing: '', // 祝福语
+     buyNow: '' // 是否立即购买
  },
  

  // 加入购物车
  handleAddcart() {
   
   
    this.setData({
   
   
      show: true,
+       buyNow: 0
    })
  },

  // 立即购买
  handeGotoBuy() {
   
   
    this.setData({
   
   
      show: true,
+       buyNow: 1
    })
  },

    
  // 代码略...
})

03. 加入购物车-关联 Store 对象

思路分析：

当用户点击加入购物车或者立即购买时，需要判断用户是否进行了登录。

我们需要使用 Token 进行判断，因此需要让页面和 Store 对象建立关联。

这时候可以使用 BehaviorWithStore 让页面和 Store 对象建立关联。

落地代码：

➡️ /behaviors/userBehavior.js

// 导入 BehaviorWithStore 让页面和 Store 对象建立关联
import {
   
    BehaviorWithStore } from 'mobx-miniprogram-bindings'
// 导入用户 Store
import {
   
    userStore } from '@/stores/userstore'

export const userBehavior = BehaviorWithStore({
   
   
  storeBindings: {
   
   
    store: userStore,
    fields: ['token']
  }
})

➡️ /behaviors/userBehavior.js

import {
   
    reqGoodsInfo } from '@/api/goods'
import {
   
    reqAddCart } from '@/api/cart'
+ import {
   
    userBehavior } from '@/behaviors/userBehavior'

Page({
   
   
+   behaviors: [userBehavior],
  
  // 代码略...
})

04. 加入购物车和立即购买区分处理

思路分析：

点击加入购物车以及立即购买以后，需要先判断是否进行了登录，如果用户没有登录过，需要先跳转到登录页面进行登录。

如果点击的是加入购物车，我们只需要调用加入购物车接口即可 (需要获取商品的 ID 、购买数量、祝福语)

如果点击的是立即购买，我们需要携带参数跳转到商品结算页面 (获取商品的 ID 以及祝福语跳转到结算页面)

购买数量的限制有 4 个限制，这 4 个限制直接使用 Vant 组件提供的属性进行限制即可：

必须是正整数，最小是1，最大是200
若输入小于1，则重置为1
若输入大于200，则重置为200
若输入的是其他值，则重置为1

实现步骤：

给 Stepper 步进器组件，通过value设置输入值，同时绑定change事件，并将值同步到 data 中
根据接口文档，导入封装的购物车的接口 API
点击弹框按钮的时候，判断点击的加入购物车还是立即购买，执行不同的操作

落地代码：

➡️ /modules/goodsModule/pages/detail/detail.html

<van-stepper
  value="{
    
    { count }}"
+  integer
+  min="1"
+  max="200"
  bind:change="onChangeGoodsCount"
/>

➡️ /modules/goodsModule/pages/detail/detail.js

// 监听是否更改了购买数量
onChangeGoodsCount(event) {
   
   
  // 将最新的购买数量同步到 data
  this.setData({
   
   
    count: Number(event.detail)
  })
},

// 弹框的确定按钮
async handleSubmit() {
   
   
 // 解构获取数据
 const {
   
    token, count, blessing, buyNow } = this.data
 const goodsId = this.goodsId
  
  // 如果没有 token ，让用户新登录
  if (!this.data.token) {
   
   
    wx.navigateTo({
   
   
      url: '/pages/login/login'
    })
      
    return
  }

  // 将用户输入的值转成 Number 类型
  const count = Number(event.detail)
  // 验证购买数量的正则
  const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/
  // 使用正则验证
  const res = reg.test(count)

  // 如果验证没有通过，直接返回，不执行后续的逻辑
  if (!res) return