小程序商品列表页优化；添加我的订单页面

TODOs.md

@@ -34,10 +34,11 @@ https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProf
 
 
 优点：
-订单id使用 雪花id（分布式）
+订单id使用 雪花id（可以分布式部署）
 
 遇到的问题：
 nacos CPU占满问题，解决方案：提issue，多次测试，找到问题（HTTPDebug），问题解决
+iPhone部分版本不支持webp格式图片
 
 -----
 

weixin-miniprogram/app.json

@@ -7,7 +7,8 @@
     "pages/residents/reportHistory",
     "pages/shop/shop",
     "pages/shop/goodDetail",
-    "pages/shop/orderConfirm",
+    "pages/shop/orderDetail",
+    "pages/shop/myOrder",
     "pages/scan/entrance",
     "pages/person/person"
   ],

weixin-miniprogram/pages/index/index.js

@@ -170,8 +170,12 @@ Page({
 
   magicButton() {
     wx.navigateTo({
+      // 扫码进社区
       // url: "/pages/scan/entrance?a=1"
-      url: "/pages/shop/orderConfirm?orderId=1748800678865801225"
+      // 订单确认页
+      // url: "/pages/shop/orderDetail?orderId=1748800678865801225"
+      // 我的订单
+      url: '/pages/shop/myOrder'
     })
   }
 })

weixin-miniprogram/pages/index/index.wxml

@@ -14,7 +14,9 @@
       <view>{{ menuItem.title }}</view>
     </view>
   </view>
-  <button type="primary" size="mini" bindtap="toggleDot">切换小红点</button>
-  <button type="warn" size="mini" bindtap="magicButton">扫描门禁</button>
-  <text>调试信息：{{ debugText }}</text>
+  <view style="text-align: center;">
+    <button type="warn" bindtap="magicButton">上帝按钮</button>
+    <!-- <button type="primary" size="mini" bindtap="toggleDot">切换小红点</button> -->
+    <!-- <text>调试信息：{{ debugText }}</text> -->
+  </view>
 </view>

weixin-miniprogram/pages/person/person.js

@@ -16,11 +16,17 @@ Page({
     avatarUrl: defaultAvatarUrl,
     nickName: "请登录",
     displayUserId: "",
-    menuList: [{
+    menuList: [
+      {
+        id: "myOrder",
+        title: "我的订单",
+      },
+      {
         id: "logout",
         color: 'red',
         title: "退出登录",
-    }]
+      }
+    ]
   },
 
   /**
@@ -111,6 +117,14 @@ Page({
     console.log("event.target", event.target)
     let menuId = event.target.id
     switch (menuId) {
+      // 我的订单
+      case "myOrder":
+        wx.navigateTo({
+          url: '/pages/shop/myOrder'
+        })
+        break
+
+      // 退出登录
       case "logout":
         wx.clearStorageSync()
         app.globalData.userInfo = null

weixin-miniprogram/pages/shop/components/good-list-card.wxss

@@ -8,7 +8,7 @@
 }
 
 .good-card-image {
-  background-color: bisque;
+  /* background-color: bisque; */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

weixin-miniprogram/pages/shop/goodDetail.js

@@ -88,7 +88,7 @@ Page({
       // 跳转订单查看页面（携带订单号）
       wx.navigateTo({
         // url: "/pages/scan/entrance?a=1"
-        url: "/pages/shop/orderConfirm?orderId=" + orderId
+        url: "/pages/shop/orderDetail?orderId=" + orderId
       })
     })();
   },

weixin-miniprogram/pages/shop/myOrder.js

@@ -0,0 +1,83 @@
+// pages/shop/myOrder.js
+
+const goodService = require("../../services/good")
+const orderService = require("../../services/order")
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    orderList: [],
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.loadPageData()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+  loadPageData() {
+    (async () => {
+      let orderList = await orderService.listUserOrder()
+      console.log("orderList", orderList)
+      this.setData({
+        orderList: orderList.map(order => {
+          order.displayDate = order.orderDate.replace("T", " ")
+          return order
+        })
+      })
+    })();
+  }
+})

weixin-miniprogram/pages/shop/myOrder.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "我的订单"
+}

weixin-miniprogram/pages/shop/myOrder.wxml

@@ -0,0 +1,17 @@
+<!--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>
+</view>

weixin-miniprogram/pages/shop/myOrder.wxss

@@ -0,0 +1,16 @@
+/* pages/shop/myOrder.wxss */
+.container {
+  padding: 20px 8vw;
+}
+
+.order-card {
+  border-radius: 12px;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
+  margin: 10px 0;
+  padding: 15px 20px;
+}
+
+.order-info-key {
+  display: inline-block;
+  min-width: 90px;
+}

weixin-miniprogram/pages/shop/orderDetail.js

@@ -1,4 +1,4 @@
-// pages/shop/orderConfirm.js
+// pages/shop/orderDetail.js
 
 const orderService = require("../../services/order")
 

weixin-miniprogram/pages/shop/orderDetail.wxml

@@ -1,4 +1,4 @@
-<!--pages/shop/orderConfirm.wxml-->
+<!--pages/shop/orderDetail.wxml-->
 <view class="page-title-container">
   <view class="page-title-emoji">🎉</view>
   <view class="page-title">

weixin-miniprogram/pages/shop/orderDetail.wxss

@@ -1,4 +1,4 @@
-/* pages/shop/orderConfirm.wxss */
+/* pages/shop/orderDetail.wxss */
 .page-title-container {
   margin-top: 16px;
   text-align: center;

weixin-miniprogram/pages/shop/shop.js

@@ -8,8 +8,11 @@ Page({
    * 页面的初始数据
    */
   data: {
+    // 筛选条件
     sidebarActiveId: -1,
     searchText: '',
+
+    // 数据
     sidebarList: [
       {
         id: -1,
@@ -128,15 +131,20 @@ Page({
   },
 
   sidebarItemTap(event) {
+    console.log("sidebarActiveId", this.data.sidebarActiveId)
     // 清除原来的选中项，并设置新的选中项
     // console.log("event.target", event.target)
     // console.log("event.currentTarget", event.currentTarget)
     let dataset = event.currentTarget.dataset
     console.log("dataset", dataset)
+    if (this.data.sidebarActiveId === dataset.item.id) {
+      console.log("点的分类已选中，跳过")
+      return // 点的分类就是当前激活的分类，直接跳过
+    }
     this.setData({
       sidebarActiveId: dataset.item.id,
     })
-    this.loadPageData()
+    this.updatePageData()
     return
   },
 
@@ -167,10 +175,10 @@ Page({
   },
 
   updatePageData() {
-    (async () => {
     this.setData({
       tabbarList: [],
-      })
+    });
+    (async () => {
       let goodListPromise = goodService.getGoodList(this.data.sidebarActiveId, this.data.searchText)
       Promise.all([
         goodListPromise,
@@ -180,6 +188,8 @@ Page({
         this.setData({
           tabbarList: goodList,
         })
+        // wx.nextTick(() => {
+        // })
       })
     })();
   }

weixin-miniprogram/services/order.js

@@ -16,7 +16,7 @@ export function createOrder(orderList) {
   })
 }
 
-/** 商品下单 */
+/** 获取订单详情 */
 export function getOrderDetail(orderId) {
   return send_request({
     url: '/shop/order/miniprogram/orderDetail',
@@ -26,3 +26,15 @@ export function getOrderDetail(orderId) {
     }
   })
 }
+
+/** 我的订单 */
+export function listUserOrder() {
+  let userInfo = wx.getStorageSync("userInfo")
+  return send_request({
+    url: '/shop/order/miniprogram/listUserOrder',
+    method: "GET",
+    data: {
+      "userId": userInfo.id,
+    }
+  })
+}