订单小程序：学习-IT无限

在 config.js 文件里引入接口地址

 const config = {
     development: {
         baseUrl: "http://dly.tooi.cn/index.php/",
     },
     production: {
         baseUrl: "https://xg.budun.com",
     },
 };

传入后台数据：

在页面脚本开头里引入：

   import http from '../../utils/http';

创建一个订单列表：

   created() {
       this.getOrderList()
           },

获取订单列表：

   methods: {
       // 获取订单列表
       getOrderList() {
           // 获取接口地址
           http.post('/order/query', {
               // 定义关键字
               word: this.keyword,
               // 获取当前状态
               state: this.list[this.current]['state']
           }).then(res => {
               this.orderList = res.data.lists
           })
       },

1. 在 data 里面定义一个空订单列表、关键字：
```
   keyword: '',
   orderList: [],
```

HTML 代码：

   <CustomerOrderItem :list="orderList" />

实现页面内跳转并获取内容

   <navigator style="margin-right: 15px;" :url="'/pages/order/delivery?id='+item.id"
       hover-class="navigator-hover">
       收货
   </navigator>

页面合并：主体相同，内容不同
①在订单文件夹里新建一个 components 文件夹，里面存放各自的内容代码
②在订单列表页脚本开头里引入：

 import CustomerOrderItem from './components/CustomerOrderItem.vue';
 import BusinessOrderItem from './components/BusinessOrderItem.vue'

定义文件名：

 components: {
         CustomerOrderItem,
         BusinessOrderItem
     },

订单小程序：学习

相关文章