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

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>
+  <view style="text-align: center;">
-  <button type="warn" size="mini" bindtap="magicButton">扫描门禁</button>
+    <button type="warn" bindtap="magicButton">上帝按钮</button>
-  <text>调试信息：{{ debugText }}</text>
+    <!-- <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: "logout",
+      {
-      color: 'red',
+        id: "myOrder",
-      title: "退出登录",
+        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
       })
     })();
   },
@@ -102,4 +102,4 @@ Page({
       })
     })();
   }
-})
+})

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">
@@ -47,4 +47,4 @@
   <view class="bottom-buttons">
     <view class="btn" id="btn-confirm-payment" bindtap="confirmPayment">确认支付</view>
   </view>
-</view>
+</view>

weixin-miniprogram/pages/shop/orderDetail.wxss

@@ -1,144 +1,144 @@
-/* pages/shop/orderConfirm.wxss */
+/* pages/shop/orderDetail.wxss */
-.page-title-container {
+.page-title-container {
-  margin-top: 16px;
+  margin-top: 16px;
-  text-align: center;
+  text-align: center;
-}
+}
-
+
-.page-title-emoji {
+.page-title-emoji {
-  font-size: 72px;
+  font-size: 72px;
-}
+}
-
+
-.page-title {
+.page-title {
-  /* border: 2px dashed black; */
+  /* border: 2px dashed black; */
-  display: inline-block;
+  display: inline-block;
-  padding: 15px 20px;
+  padding: 15px 20px;
-  font-size: 20px;
+  font-size: 20px;
-}
+}
-
+
-.order-info {
+.order-info {
-  background-color: tomato;
+  background-color: tomato;
-  padding: 10px 18px;
+  padding: 10px 18px;
-  margin: 10px;
+  margin: 10px;
-  border-radius: 10px;
+  border-radius: 10px;
-  color: #fff3f1;
+  color: #fff3f1;
-  font-weight: 500;
+  font-weight: 500;
-  line-height: 1.8em;
+  line-height: 1.8em;
-}
+}
-
+
-.good-list-title {
+.good-list-title {
-  text-align: center;
+  text-align: center;
-  margin-top: 20px;
+  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 20px;
-  font-weight: 500;
+  font-weight: 500;
-  font-size: 18px;
+  font-size: 18px;
-}
+}
-
+
-/* 商品列表样式 */
+/* 商品列表样式 */
-.good-card-container {
+.good-card-container {
-  /* border: 1px solid grey; */
+  /* border: 1px solid grey; */
-  border-radius: 12px;
+  border-radius: 12px;
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .2);
-  margin: 0 14px;
+  margin: 0 14px;
-  padding: 15px 20px;
+  padding: 15px 20px;
-  display: grid;
+  display: grid;
-  grid-template-columns: 120px 1fr 50px;
+  grid-template-columns: 120px 1fr 50px;
-  grid-template-rows: 4fr 3fr;
+  grid-template-rows: 4fr 3fr;
-  place-items: center;
+  place-items: center;
-  gap: 0 8px;
+  gap: 0 8px;
-  margin-bottom: 10px;
+  margin-bottom: 10px;
-}
+}
-
+
-.good-card-image {
+.good-card-image {
-  width: 88px;
+  width: 88px;
-  height: 88px;
+  height: 88px;
-  background-color: teal;
+  background-color: teal;
-  background-position: center;
+  background-position: center;
-  background-repeat: no-repeat;
+  background-repeat: no-repeat;
-  background-size: cover;
+  background-size: cover;
-  border: 1px solid grey;
+  border: 1px solid grey;
-  border-radius: 5px;
+  border-radius: 5px;
-  grid-row-start: 1;
+  grid-row-start: 1;
-  grid-row-end: 3;
+  grid-row-end: 3;
-}
+}
-
+
-.good-card-info {
+.good-card-info {
-  width: 100%;
+  width: 100%;
-}
+}
-
+
-/* 商品标题 */
+/* 商品标题 */
-.good-title-container {
+.good-title-container {
-  grid-column-start: 2;
+  grid-column-start: 2;
-  grid-column-end: 4;
+  grid-column-end: 4;
-}
+}
-
+
-.good-title {
+.good-title {
-  font-size: 30rpx;
+  font-size: 30rpx;
-  color: #333;
+  color: #333;
-  font-weight: 400;
+  font-weight: 400;
-  display: -webkit-box;
+  display: -webkit-box;
-  height: 72rpx;
+  height: 72rpx;
-  -webkit-box-orient: vertical;
+  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 2;
-  overflow: hidden;
+  overflow: hidden;
-  word-break: break-word;
+  word-break: break-word;
-  line-height: 36rpx;
+  line-height: 36rpx;
-  margin: 4rpx 0;
+  margin: 4rpx 0;
-}
+}
-
+
-/* 商品价格 */
+/* 商品价格 */
-.good-price {
+.good-price {
-  white-space: nowrap;
+  white-space: nowrap;
-  font-weight: 700;
+  font-weight: 700;
-  margin: 0;
+  margin: 0;
-  display: inline;
+  display: inline;
-  position: relative;
+  position: relative;
-}
+}
-
+
-.good-price-counter {
+.good-price-counter {
-  color: #fa4126;
+  color: #fa4126;
-  font-size: 36rpx;
+  font-size: 36rpx;
-}
+}
-
+
-.good-price .good-price-symbol {
+.good-price .good-price-symbol {
-  font-size: 24rpx;
+  font-size: 24rpx;
-  display: inline;
+  display: inline;
-}
+}
-
+
-.good-price .good-price-number {
+.good-price .good-price-number {
-  display: inline;
+  display: inline;
-}
+}
-
+
-/* 屏幕底部 确认支付按钮 */
+/* 屏幕底部 确认支付按钮 */
-.bottom-controlbox {
+.bottom-controlbox {
-  background-color: white;
+  background-color: white;
-  position: fixed;
+  position: fixed;
-  z-index: 999;
+  z-index: 999;
-  bottom: 0;
+  bottom: 0;
-  left: 0;
+  left: 0;
-  right: 0;
+  right: 0;
-  width: 100%;
+  width: 100%;
-  padding-top: 6px;
+  padding-top: 6px;
-  padding-bottom: 12px;
+  padding-bottom: 12px;
-  border-top: 1px solid grey;
+  border-top: 1px solid grey;
-  text-align: center;
+  text-align: center;
-}
+}
-
+
-.bottom-buttons {
+.bottom-buttons {
-  height: 100%;
+  height: 100%;
-  display: inline-block;
+  display: inline-block;
-}
+}
-
+
-.btn {
+.btn {
-  width: 254rpx;
+  width: 254rpx;
-  height: 80rpx;
+  height: 80rpx;
-  display: inline-grid;
+  display: inline-grid;
-  align-items: center;
+  align-items: center;
-  justify-content: center;
+  justify-content: center;
-  color: white;
+  color: white;
-}
+}
-
+
-#btn-confirm-payment {
+#btn-confirm-payment {
-  background-color: #fa4126;
+  background-color: #fa4126;
-  color: #fff;
+  color: #fff;
-  border-radius: 40rpx;
+  border-radius: 40rpx;
-}
+}

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() {
+    this.setData({
+      tabbarList: [],
+    });
     (async () => {
-      this.setData({
-        tabbarList: [],
-      })
       let goodListPromise = goodService.getGoodList(this.data.sidebarActiveId, this.data.searchText)
       Promise.all([
         goodListPromise,
@@ -180,7 +188,9 @@ 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,
+    }
+  })
+}