Bagaimana untuk melaksanakan fungsi penghantaran produk dalam vue

Vue ialah rangka kerja bahagian hadapan yang sangat baik yang mudah digunakan, berskala dan cekap. Vue digunakan secara meluas dalam banyak projek, terutamanya dalam pembangunan platform e-dagang. Seterusnya, saya akan memperkenalkan cara menggunakan Vue untuk menulis fungsi penghantaran produk.

Pertama sekali, kami perlu menjelaskan proses penghantaran produk platform e-dagang. Secara umumnya, proses penghantaran produk boleh dibahagikan kepada langkah berikut:

1. Sahkan pesanan: Selepas pengguna membuat pesanan, dia perlu mengesahkan pesanan di latar belakang pengurusan.
2. Bersedia untuk penghantaran: Selepas mengesahkan pesanan, anda perlu menyediakan produk dan maklumat berkaitan pengangkutan, seperti syarikat kurier, nombor penjejakan kurier, dsb.
3. Penghantaran: Hantar barang kepada syarikat kurier dan berikan maklumat berkaitan pengangkutan.
4. Sahkan penerimaan: Selepas menerima barangan, pengguna perlu mengesahkan penerimaan pada platform e-dagang.

Seterusnya, mari mula menulis fungsi penghantaran produk.

Pertama, kita perlu menentukan model data pesanan dalam komponen Vue. Dalam contoh ini, kami mentakrifkan model pesanan sebagai:

{
  orderId: '', //订单ID
  goodsList: [], //商品列表
  status: 0 //订单状态，0表示待处理，1表示处理中，2表示已完成
}

di mana orderId digunakan untuk mengenal pasti pesanan, goodsList ialah tatasusunan yang mengandungi maklumat produk dan status digunakan untuk mewakili status semasa pesanan.

Kami boleh menggunakan sistem komponen Vue untuk menentukan komponen senarai pesanan untuk memaparkan pesanan dan menyediakan fungsi seperti mengesahkan pesanan, menyediakan penghantaran dan mengesahkan resit.

Sekarang, mari tulis kod untuk komponen senarai pesanan:

<template>
  <table>
    <tr>
      <th>订单ID</th>
      <th>商品列表</th>
      <th>订单状态</th>
      <th>操作</th>
    </tr>
    <tr v-for="(order,index) in orders" :key="index">
      <td>{{order.orderId}}</td>
      <td>
        <ul>
          <li v-for="(item,index) in order.goodsList" :key="index">{{item.name}} x{{item.count}}</li>
        </ul>
      </td>
      <td>{{getStatusText(order.status)}}</td>
      <td>
        <button v-if="order.status === 0" @click="confirmOrder(index)">确认订单</button>
        <button v-if="order.status === 1" @click="prepareShipment(index)">准备发货</button>
        <button v-if="order.status === 2" @click="confirmReceived(index)">确认收货</button>
      </td>
    </tr>
  </table>
</template>
<script>
export default {
  props: {
    orders: { // 订单列表
      type: Array,
      required: true
    }
  },
  methods: {
    confirmOrder(index) { // 确认订单
      this.orders[index].status = 1;
    },
    prepareShipment(index) { // 准备发货
      this.orders[index].status = 2;
      // 发货操作
    },
    confirmReceived(index) { // 确认收货
      this.orders[index].status = 3;
    },
    getStatusText(status) { // 获取订单状态文本
      switch (status) {
        case 0:
          return '待处理';
        case 1:
          return '处理中';
        case 2:
          return '已发货';
        case 3:
          return '已完成';
        default:
          return '';
      }
    }
  }
}
</script>

Seterusnya, kita perlu menambah pelaksanaan khusus untuk dua fungsi penyediaan untuk penghantaran dan mengesahkan penerimaan.

Semasa bersiap untuk menghantar, kami perlu menghantar permintaan kepada syarikat kurier dan menyimpan nombor kurier dan maklumat lain dalam pesanan. Dalam contoh ini, kami menggunakan perpustakaan axios untuk menghantar permintaan ke antara muka ekspres. Kod pelaksanaan khusus untuk penyediaan penghantaran adalah seperti berikut:

import axios from 'axios';

// ...

prepareShipment(index) { // 准备发货
  this.orders[index].status = 2;
  
  // 构造请求数据
  const requestData = {
    orderId: this.orders[index].orderId,
    expressCompany: '顺丰',
    expressNumber: 'SF1010101'
  };
  
  // 向快递接口发送请求
  axios.post('/api/shipments', requestData).then(response => {
    console.log(response);
  }).catch(error => {
    console.error(error);
  });
},

Apabila mengesahkan penerimaan, kami hanya perlu menetapkan status pesanan kepada Selesai. Kod pelaksanaan khusus untuk mengesahkan penerimaan adalah seperti berikut:

confirmReceived(index) { // 确认收货
  this.orders[index].status = 3;
},

Akhir sekali, kami perlu menyediakan pintu masuk dalam platform e-dagang untuk memaparkan senarai pesanan. Dalam contoh ini, kami memaparkan senarai pesanan sebagai halaman yang berasingan. Dalam Vue, anda boleh menggunakan sistem penghalaan untuk mencapai lompatan halaman. Kod untuk menambah laluan senarai pesanan adalah seperti berikut:

import Vue from 'vue';
import VueRouter from 'vue-router';
import OrderList from './views/OrderList.vue';

Vue.use(VueRouter);

const routes = [{
  path: '/',
  component: OrderList
}];

const router = new VueRouter({
  routes
});

export default router;

Kod di atas mentakrifkan laluan "/" untuk memaparkan halaman senarai pesanan.

Pada ketika ini, fungsi menggunakan Vue untuk melaksanakan penghantaran produk telah selesai. Melalui komponenisasi dan sistem penghalaan Vue, kami boleh membina platform e-dagang yang sangat baik dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penghantaran produk dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!