How uniapp application implements shopping cart and order settlement

How uniapp application implements shopping cart and order settlement

1. Implementation of shopping cart function

The shopping cart is a common function in e-commerce applications One, it is used to record the products purchased by users, making it convenient for users to view, edit and settle at any time.

1. Page design

First, we need to design the layout of the shopping cart page. It can be designed as follows:

1) Top navigation bar: Displays the shopping cart title and return button.

2) Shopping cart list: displays the product information purchased by the user, including product pictures, names, prices, quantities, subtotals, etc. Each product can also add a reduced number of action buttons.

3) Settlement column: Displays the total quantity, total amount and go to checkout button of the selected products.

2. Data Storage

In uniapp, you can use Vuex or local storage to store shopping cart data. The following is a sample code:

// 在main.js中引入Vuex和创建store实例
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    cart: [] // 购物车数据
  },
  mutations: {
    addToCart(state, product) { // 添加商品到购物车
      state.cart.push(product)
    },
    removeFromCart(state, index) { // 从购物车中移除商品
      state.cart.splice(index, 1)
    }
  },
  getters: {
    totalPrice(state) { // 计算购物车中商品的总价
      let total = 0
      state.cart.forEach(item => {
        total += item.price * item.quantity
      })
      return total
    },
    totalQuantity(state) { // 计算购物车中商品的总数量
      let quantity = 0
      state.cart.forEach(item => {
        quantity += item.quantity
      })
      return quantity
    }
  }
})

3. Add product to shopping cart

When the user clicks the add to shopping cart button on the product details page, we need to add the product information to the shopping cart. , and update the status.

The following is the sample code:

// 在商品详情页的methods中添加商品到购物车的方法
methods: {
  addToCart(product) {
    this.$store.commit('addToCart', product)
  }
}

4. Display shopping cart list

In the shopping cart page, we need to traverse the shopping cart through the v-for instruction Data, display product list.

The following is a sample code:

<!-- 在购物车页面的template中展示购物车列表 -->
<view class="cart-list">
  <view v-for="(product, index) in $store.state.cart" :key="index">
    <image :src="product.image" class="product-image"></image>
    <text class="product-name">{{ product.name }}</text>
    <text class="product-price">￥{{ product.price }}</text>
    <view class="quantity-container">
      <text class="minus" @click="decreaseQuantity(index)">-</text>
      <text class="quantity">{{ product.quantity }}</text>
      <text class="plus" @click="increaseQuantity(index)">+</text>
    </view>
  </view>
</view>

5. Edit Shopping Cart

Users can edit the quantity of items in the shopping cart by clicking the increase or decrease button. Change the quantity. The following is a sample code:

// 在购物车页面的methods中增加和减少商品数量的方法
methods: {
  increaseQuantity(index) {
    this.$store.state.cart[index].quantity++
  },
  decreaseQuantity(index) {
    if (this.$store.state.cart[index].quantity > 1) {
      this.$store.state.cart[index].quantity--
    } else {
      this.$store.commit('removeFromCart', index)
    }
  }
}

2. Implementation of order settlement function

Order settlement is an extension of the shopping cart function. Users can select the goods they want to purchase, and determine the delivery address, payment method, etc. Related Information.

1. Page design

First, we need to design the layout of the order settlement page. It can be designed in the following ways:

1) Top navigation bar: Displays the order settlement title and return button.

2) Product list: Displays product information purchased by the user, including product pictures, names, prices, quantities, subtotals, etc.

3) Order information: including shipping address, contact information, payment method, etc.

4) Order total: Display the total quantity, total amount and submit order button of the selected products.

2. Order settlement data

In uniapp, we can store the order settlement data selected by the user in Vuex.

The following is a sample code:

// 在Vuex中添加订单结算数据的state和mutations
const store = new Vuex.Store({
  state: {
    checkoutItems: [] // 订单结算数据
  },
  mutations: {
    addToCheckout(state, product) { // 将商品添加到订单结算数据
      state.checkoutItems.push(product)
    },
    removeFromCheckout(state, index) { // 从订单结算数据中移除商品
      state.checkoutItems.splice(index, 1)
    }
  },
  getters: {
    totalPrice(state) { // 计算订单结算数据中商品的总价
      let total = 0
      state.checkoutItems.forEach(item => {
        total += item.price * item.quantity
      })
      return total
    },
    totalQuantity(state) { // 计算订单结算数据中商品的总数量
      let quantity = 0
      state.checkoutItems.forEach(item => {
        quantity += item.quantity
      })
      return quantity
    }
  }
})

3. Add products to order settlement data

After the user selects the product on the shopping cart page, click the checkout button. We need to add product information to the order settlement data and jump to the order settlement page.

The following is a sample code:

// 在购物车页面的methods中添加商品到订单结算数据的方法
methods: {
  checkout() {
    this.$store.state.cart.forEach(item => {
      this.$store.commit('addToCheckout', item)
    })
    this.$store.state.cart = []
    uni.navigateTo({
      url: '/pages/checkout'
    })
  }
}

4. Display order settlement list

In the order settlement page, we need to traverse the order settlement through the v-for instruction Data, display product list.

The following is a sample code:

<!-- 在订单结算页面的template中展示订单结算清单 -->
<view class="checkout-list">
  <view v-for="(product, index) in $store.state.checkoutItems" :key="index">
    <image :src="product.image" class="product-image"></image>
    <text class="product-name">{{ product.name }}</text>
    <text class="product-price">￥{{ product.price }}</text>
    <text class="product-quantity">数量：{{ product.quantity }}</text>
    <text class="product-subtotal">小计：￥{{ product.price * product.quantity }}</text>
  </view>
</view>

5. Submit order

In the order settlement page, we need to design a submit order button, and when the button is clicked Carry out the corresponding order submission operation.

The following is the sample code:

// 在订单结算页面的methods中提交订单的方法
methods: {
  submitOrder() {
    // 提交订单的逻辑，如创建订单、生成订单号、进行支付等
    // ...
  }
}

Through the implementation of the above steps, we can successfully build and implement the shopping cart and order settlement functions in the uniapp application, providing users with a convenient shopping and settlement experience .

The above is the detailed content of How uniapp application implements shopping cart and order settlement. For more information, please follow other related articles on the PHP Chinese website!