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

backend/microservice-provider-shop-8003/src/main/java/com/cxyxiaomo/epp/shop/controller/OrderController.java

@@ -2,6 +2,7 @@ package com.cxyxiaomo.epp.shop.controller;
 
 import com.alibaba.fastjson2.JSONArray;
 import com.alibaba.fastjson2.JSONObject;
+import com.cxyxiaomo.epp.common.enums.OrderStatus;
 import com.cxyxiaomo.epp.common.pojo.Order;
 import com.cxyxiaomo.epp.common.pojo.OrderDetail;
 import com.cxyxiaomo.epp.common.response.Res;
@@ -13,10 +14,7 @@ import com.cxyxiaomo.epp.shop.service.OrderService;
 import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
-import java.util.HashMap;
+import java.util.*;
-import java.util.LinkedList;
-import java.util.List;
-import java.util.Map;
 import java.util.stream.Collectors;
 
 @RestController
@@ -130,12 +128,25 @@ public class OrderController {
      */
     @GetMapping("/miniprogram/listUserOrder")
     @ResponseBody
-    public Res listUserOrder(@RequestParam Integer userId) {
+    public Res listUserOrder(@RequestParam Integer userId,
+                             @RequestParam(value = "filter", required = false) String orderStatusFilter) {
         if (userId == null) {
             return Res.error("参数错误");
         }
-        List<Order> orders = orderService.listUserOrder(userId);
+        List<Order> orders = orderService.listUserOrder(userId, orderStatusFilter);
         List<OrderVO> orderVOS = OrderVO.convertFrom(orders);
-        return Res.success(orderVOS);
+
+        HashMap<String, Object> map = new HashMap<>();
+
+
+        JSONObject filter = new JSONObject();
+        Arrays.stream(OrderStatus.values())
+                .forEach(orderStatus -> filter.put(orderStatus.getValue(), orderStatus.toString()));
+        // List<String> filter = Arrays.stream(OrderStatus.values())
+        //         .map(OrderStatus::toString).collect(Collectors.toList());
+
+        map.put("filter", filter);
+        map.put("orders", orderVOS);
+        return Res.success(map);
     }
 }

backend/microservice-provider-shop-8003/src/main/java/com/cxyxiaomo/epp/shop/dao/OrderDao.java

@@ -32,9 +32,10 @@ public interface OrderDao {
      * 根据用户 ID 查询订单列表
      *
      * @param userId
+     * @param orderStatus
      * @return
      */
-    List<Order> listOrderByUserId(Integer userId);
+    List<Order> listOrderByUserId(@Param("userId") Integer userId, @Param("orderStatus") String orderStatus);
 
     /**
      * 创建订单

backend/microservice-provider-shop-8003/src/main/java/com/cxyxiaomo/epp/shop/service/OrderService.java

@@ -105,8 +105,8 @@ public class OrderService {
      * @param userId
      * @return
      */
-    public List<Order> listUserOrder(Integer userId) {
+    public List<Order> listUserOrder(Integer userId, String orderStatus) {
-        List<Order> orders = orderDao.listOrderByUserId(userId);
+        List<Order> orders = orderDao.listOrderByUserId(userId, orderStatus);
         return orders;
     }
 }

backend/microservice-provider-shop-8003/src/main/resources/mybatis/mapper/OrderMapper.xml

@@ -37,6 +37,9 @@
         SELECT *
         FROM `order`
         WHERE user_id = #{userId}
+        <if test="orderStatus != null and orderStatus != ''">
+            AND order_status = #{orderStatus}
+        </if>
         order by order_date desc
     </select>
 

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()
+      let userOrder = await orderService.listUserOrder()
-      console.log("orderList", orderList)
+      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>
+<view class="filterbar">
-    <text class="order-info-key">订单号：</text>
+  <!-- <radio-group bindchange="filterRadioChange" data-item="{{filter}}">
-    <text>{{ item.id }}</text>
+      <label class="radio-item" wx:for="{{filterList}}" wx:for-item="filter" wx:key="id">
-  </view>
+        <radio value="{{filter.id}}" checked="{{ filter.id == filterActiveId }}" />{{filter.name}}
-  <view>
+      </label>
-    <text class="order-info-key">创建时间：</text>
+    </radio-group> -->
-    <text>{{ item.displayDate }}</text>
+  <picker range="{{filterList}}" range-key="name" value="{{filterPirckerIndex}}" bindchange="filterPickerChange">
-  </view>
+    <view class="picker">
-  <view>
+      订单状态(点击筛选)：{{filterActiveName}}
-    <text class="order-info-key">订单状态：</text>
+    </view>
-    <text>{{ item.orderStatus }}</text>
+  </picker>
-  </view>
 </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 {

weixin-miniprogram/services/order.js

@@ -1,40 +1,41 @@
-/* eslint-disable no-param-reassign */
+/* eslint-disable no-param-reassign */
-
+
-const send_request = require('../utils/sendRequest')
+const send_request = require('../utils/sendRequest')
-
+
-/** 商品下单 */
+/** 商品下单 */
-export function createOrder(orderList) {
+export function createOrder(orderList) {
-  let userInfo = wx.getStorageSync("userInfo")
+  let userInfo = wx.getStorageSync("userInfo")
-  // orderList 结构为 [ { goodId, count }, ... ]
+  // orderList 结构为 [ { goodId, count }, ... ]
-  return send_request({
+  return send_request({
-    url: '/shop/order/miniprogram/createOrder',
+    url: '/shop/order/miniprogram/createOrder',
-    method: "POST",
+    method: "POST",
-    data: {
+    data: {
-      "userId": userInfo.id,
+      "userId": userInfo.id,
-      "orderList": orderList
+      "orderList": orderList
-    }
+    }
-  })
+  })
-}
+}
-
+
-/** 获取订单详情 */
+/** 获取订单详情 */
-export function getOrderDetail(orderId) {
+export function getOrderDetail(orderId) {
-  return send_request({
+  return send_request({
-    url: '/shop/order/miniprogram/orderDetail',
+    url: '/shop/order/miniprogram/orderDetail',
-    method: "GET",
+    method: "GET",
-    data: {
+    data: {
-      "orderId": orderId
+      "orderId": orderId
-    }
+    }
-  })
+  })
-}
+}
-
+
-/** 我的订单 */
+/** 我的订单 */
-export function listUserOrder() {
+export function listUserOrder(filter) {
-  let userInfo = wx.getStorageSync("userInfo")
+  let userInfo = wx.getStorageSync("userInfo")
-  return send_request({
+  return send_request({
-    url: '/shop/order/miniprogram/listUserOrder',
+    url: '/shop/order/miniprogram/listUserOrder',
-    method: "GET",
+    method: "GET",
-    data: {
+    data: {
-      "userId": userInfo.id,
+      "userId": userInfo.id,
-    }
+      "filter": filter || "",
-  })
+    }
-}
+  })
+}