小程序订单详情筛选条件完成

weixin-miniprogram/pages/shop/myOrder.js

@@ -9,6 +9,12 @@ Page({
    * 页面的初始数据
    */
   data: {
+    filterActiveId: '',
+    filterActiveName: '',
+    filterList: [],
+
+    filterPirckerIndex: 0,
+
     orderList: [],
   },
 
@@ -68,12 +74,61 @@ Page({
 
   },
 
+  // filterRadioChange(e) {
+  //   console.log("e.detail.value", e.detail.value)
+  //   this.setData({
+  //     filterActiveId: e.detail.value,
+  //   })
+  //   this.updatePageData()
+  // },
+
+  filterPickerChange(e) {
+    console.log("e.detail.value", e.detail.value)
+    let filter = this.data.filterList[e.detail.value]
+    console.log("filterActiveId", filter.id)
+    console.log("filterActiveName", filter.name)
+    this.setData({
+      filterActiveId: filter.id,
+      filterActiveName: filter.name
+    })
+    this.updatePageData()
+  },
+
   loadPageData() {
     (async () => {
-      let orderList = await orderService.listUserOrder()
-      console.log("orderList", orderList)
+      let userOrder = await orderService.listUserOrder()
+      console.log("userOrder", userOrder)
+      let filterList = Object.keys(userOrder.filter).map(key => {
+        return {
+          id: key,
+          name: userOrder.filter[key],
+        }
+      })
+      filterList.unshift({
+        id: '',
+        name: "全部",
+      })
+      console.log("filterList", filterList)
       this.setData({
-        orderList: orderList.map(order => {
+        filterList: filterList,
+        filterActiveName: "全部",
+        orderList: userOrder.orders.map(order => {
+          order.displayDate = order.orderDate.replace("T", " ")
+          return order
+        })
+      })
+    })();
+  },
+
+  updatePageData() {
+    this.setData({
+      orderList: [],
+    });
+    (async () => {
+      let userOrder = await orderService.listUserOrder(this.data.filterActiveId)
+      console.log("userOrder", userOrder)
+      this.setData({
+        orderList: userOrder.orders.map(order => {
           order.displayDate = order.orderDate.replace("T", " ")
           return order
         })

weixin-miniprogram/pages/shop/myOrder.wxml

@@ -1,17 +1,34 @@
 <!--pages/shop/myOrder.wxml-->
-<view class="container">
-<view class="order-card" wx:for="{{orderList}}" wx:for-item="item" wx:key="id">
-  <view>
-    <text class="order-info-key">订单号：</text>
-    <text>{{ item.id }}</text>
-  </view>
-  <view>
-    <text class="order-info-key">创建时间：</text>
-    <text>{{ item.displayDate }}</text>
-  </view>
-  <view>
-    <text class="order-info-key">订单状态：</text>
-    <text>{{ item.orderStatus }}</text>
-  </view>
+
+<!-- 筛选条件 -->
+<view class="filterbar">
+  <!-- <radio-group bindchange="filterRadioChange" data-item="{{filter}}">
+      <label class="radio-item" wx:for="{{filterList}}" wx:for-item="filter" wx:key="id">
+        <radio value="{{filter.id}}" checked="{{ filter.id == filterActiveId }}" />{{filter.name}}
+      </label>
+    </radio-group> -->
+  <picker range="{{filterList}}" range-key="name" value="{{filterPirckerIndex}}" bindchange="filterPickerChange">
+    <view class="picker">
+      订单状态(点击筛选)：{{filterActiveName}}
+    </view>
+  </picker>
 </view>
+
+<view class="container">
+
+  <!-- 订单列表 -->
+  <view class="order-card" wx:for="{{orderList}}" wx:for-item="item" wx:key="id">
+    <view>
+      <text class="order-info-key">订单号：</text>
+      <text>{{ item.id }}</text>
+    </view>
+    <view>
+      <text class="order-info-key">创建时间：</text>
+      <text>{{ item.displayDate }}</text>
+    </view>
+    <view>
+      <text class="order-info-key">订单状态：</text>
+      <text>{{ item.orderStatus }}</text>
+    </view>
+  </view>
 </view>

weixin-miniprogram/pages/shop/myOrder.wxss

@@ -1,6 +1,17 @@
 /* pages/shop/myOrder.wxss */
+.filterbar {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  padding: 10px 20px;
+  background-color: white;
+  border: 1px solid black;
+}
+
 .container {
   padding: 20px 8vw;
+
+  margin-top: 30px;
 }
 
 .order-card {