订单页完成

src/common/http.api.js

@@ -29,6 +29,9 @@ const MY_ORDERS_REQ_UNIFIEDORDER = '/my/orders/req_unifiedorder'
 // 查看支付状态
 const MY_ORDERS_CHKORDER = '/my/orders/chkOrder'
 
+// 查询所有订单
+const MY_ORDERS_ALL = '/my/orders/all'
+
 // 拿到token
 const token = uni.getStorageSync('token') || ''
 
@@ -67,6 +70,9 @@ const install = (Vue, vm) => {
     // 更新支付状态
     checkOrder: (params = {}) => vm.$u.post(MY_ORDERS_CHKORDER, params,
       { Authorization: token}),
+    // 更新支付状态
+    getOrderList: (params = {}) => vm.$u.get(MY_ORDERS_ALL, params,
+      { Authorization: token}),
   }
 }
 

src/pages/order/order.vue

@@ -1,7 +1,35 @@
 <template>
   <view>
-    <view class="tabs">
+    <!-- 1. tab组件 -->
-      <u-tabs :list="tabs" :is-scroll="false" :current="tabsCurrent" inactive-color="#666" active-color="#eb4450" @change="onTapsChange"></u-tabs>
+    <u-tabs
+      :list="tabs"
+      :is-scroll="false"
+      :current="tabsCurrent"
+      inactive-color="#666"
+      active-color="#eb4450"
+      @change="onTapsChange"
+    ></u-tabs>
+
+    <!-- 2. 菜单 -->
+    <view class="list">
+      <view class="item" v-for="item in orders" :key="item.order_id">
+        <view class="item_row">
+          <text class="item_row_left">订单编号</text>
+          <text class="item_row_right">{{ item.order_number }}</text>
+        </view>
+        <view class="item_row">
+          <text class="item_row_left">订单金额</text>
+          <text class="item_row_right price">{{ item.order_price }}</text>
+        </view>
+        <view class="item_row">
+          <text class="item_row_left">订单日期</text>
+          <text class="item_row_right">{{item.update_time_format}}</text>
+        </view>
+        <view class="item_row">
+          <text class="item_row_left">支付状态</text>
+          <text class="item_row_right">{{ item.pay_status === "0" ? "未支付" : "已付款" }}</text>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -12,28 +40,55 @@ export default {
     return{
       tabs: [
         {
-          name: "全部",
+          name: "全部",type: 1
         },
         {
-          name: "待支付",
+          name: "待支付",type: 2
         },
         {
-          name: "待发货",
+          name: "待发货", type: 3
         },
       ],
-    tabsCurrent: 0
+      tabsCurrent: 0,
+      orders: [],
+      type: 1
     }
   },
   methods: {
     // 切换子页面
     onTapsChange(index){
       this.tabsCurrent = index
+      this.type = this.tabs[index].type
+      this.getOrderList()
+    },
+    // 获取支付信息
+    async getOrderList(){
+      const {message: { orders }} = await this.$u.api.getOrderList({ type: this.type })
+      this.orders = orders.map(item => ({...item, update_time_format: new Date(item.update_time * 1000).toLocaleString()}))
     }
+  },
+
+  onLoad() {
+    this.getOrderList()
   }
 
 }
 </script>
 
 <style lang="scss">
-
+.list {
+  .item {
+    padding: 20rpx;
+    border-top: 5px solid #f4f4f4;
+    .item_row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 60rpx;
+      .item_row_left {
+        color: #666;
+      }
+    }
+  }
+}
 </style>