Cara aplikasi uniapp melaksanakan troli beli-belah dan penyelesaian pesanan

Bagaimanakah aplikasi UNIPP melaksanakan keranjang belanja dan penyelesaian pesanan

1. untuk kemudahan pengguna Lihat, edit dan daftar keluar pada bila-bila masa.

Page Design

1. Pertama, kita perlu mereka bentuk susun atur halaman troli beli-belah. Ia boleh direka bentuk seperti berikut:

1) Bar navigasi atas: Menunjukkan tajuk troli beli-belah dan butang belakang.

2) Senarai troli beli-belah: Memaparkan maklumat produk yang dibeli oleh pengguna, termasuk gambar produk, nama, harga, kuantiti, subjumlah, dsb. Setiap produk juga boleh menambah bilangan butang tindakan yang dikurangkan.

3) Lajur Checkout: Memaparkan jumlah kuantiti, jumlah jumlah dan butang daftar keluar produk yang dipilih.

Storan Data

2. Dalam uniapp, anda boleh menggunakan Vuex atau storan setempat untuk menyimpan data troli beli-belah. Berikut ialah kod sampel:

// 在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
    }
  }
})

Tambahkan produk ke troli beli-belah

3. Apabila pengguna mengklik butang tambah ke troli beli-belah pada halaman butiran produk, kami perlu menambah maklumat produk ke troli beli-belah dan mengemas kini status .

Berikut ialah kod contoh:

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

Paparkan senarai troli beli-belah

4. Dalam halaman troli beli-belah, kita perlu merentasi data troli beli-belah melalui arahan v-for untuk memaparkan senarai produk.

Berikut adalah contoh kod:

<!-- 在购物车页面的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>

Edit Troli Beli-belah

5. Pengguna boleh mengedit kuantiti item dalam troli beli-belah dan menukar kuantiti dengan mengklik butang tambah atau kurang. Berikut adalah contoh kod:

// 在购物车页面的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. Pelaksanaan fungsi penyelesaian pesanan

Penyelesaian pesanan adalah lanjutan daripada fungsi shopping cart Pengguna boleh memilih barang yang ingin dibeli dan menentukan alamat penghantaran, kaedah pembayaran dan lain-lain yang berkaitan maklumat.

Page Design

1. Mula-mula kita perlu design layout page settlement order. Ia boleh direka bentuk seperti berikut:

1) Bar navigasi atas: Memaparkan tajuk penyelesaian pesanan dan butang pulang.

2) Senarai produk: Memaparkan maklumat produk yang dibeli oleh pengguna, termasuk gambar produk, nama, harga, kuantiti, subjumlah, dsb.

3) Maklumat pesanan: termasuk alamat penghantaran, maklumat hubungan, kaedah pembayaran, dsb.

4) Jumlah pesanan: Memaparkan jumlah kuantiti, jumlah jumlah dan butang hantar pesanan produk yang dipilih.

Data penyelesaian pesanan

2. Dalam uniapp, kami boleh menyimpan data penyelesaian pesanan yang dipilih oleh pengguna dalam Vuex.

Berikut adalah contoh kod:

// 在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
    }
  }
})

Tambahkan produk ke data penyelesaian pesanan

3. Selepas pengguna memilih produk pada halaman troli beli-belah, klik butang Pergi ke Daftar Keluar, kami perlu menambah maklumat produk pada data penyelesaian pesanan dan lompat ke halaman penyelesaian pesanan.

Berikut adalah contoh kod:

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

Paparkan senarai penyelesaian pesanan

4. Dalam halaman penyelesaian pesanan, kita perlu merentasi data penyelesaian pesanan melalui arahan v-for untuk memaparkan senarai produk.

Berikut adalah contoh kod:

<!-- 在订单结算页面的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>

Submit order

5. Dalam halaman penyelesaian pesanan, kita perlu mereka bentuk butang hantar pesanan dan melakukan operasi penghantaran pesanan yang sepadan apabila butang diklik.

Berikut ialah kod contoh:

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

Melalui pelaksanaan langkah di atas, kami boleh berjaya membina dan melaksanakan troli beli-belah dan fungsi penyelesaian pesanan dalam aplikasi uniapp, memberikan pengguna pengalaman membeli-belah dan penyelesaian yang mudah.

Atas ialah kandungan terperinci Cara aplikasi uniapp melaksanakan troli beli-belah dan penyelesaian pesanan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!