小程序(及后端)订单详情页完成；后端获取用户订单列表接口完成

weixin-miniprogram/pages/shop/goodDetail.js

@@ -1,6 +1,7 @@
 // pages/shop/goodDetail.js
 
 const goodService = require("../../services/good")
+const orderService = require("../../services/order")
 
 Page({
 
@@ -73,6 +74,25 @@ Page({
 
   },
 
+  // 立即下单
+  btnBuyTap() {
+    (async () => {
+      // 创建订单
+      let orderList = [{
+        goodId: this.data.goodId,
+        count: 1,
+      }]
+      let orderId = await orderService.createOrder(orderList)
+      console.log("orderId", orderId)
+
+      // 跳转订单查看页面（携带订单号）
+      wx.navigateTo({
+        // url: "/pages/scan/entrance?a=1"
+        url: "/pages/shop/orderConfirm?orderId=" + orderId
+      })
+    })();
+  },
+
   loadPageData() {
     (async () => {
       let goodDetail = await goodService.getGoodDetail(this.data.goodId)

weixin-miniprogram/pages/shop/goodDetail.wxml

@@ -39,6 +39,6 @@
   <!-- 屏幕底部 -->
   <view class="bottom-buttons">
     <view class="btn" id="btn-addcart">加入购物车</view>
-    <view class="btn" id="btn-buy">立即下单</view>
+    <view class="btn" id="btn-buy" bindtap="btnBuyTap">立即下单</view>
   </view>
 </view>

weixin-miniprogram/pages/shop/orderConfirm.js

@@ -0,0 +1,153 @@
+// pages/shop/orderConfirm.js
+
+const orderService = require("../../services/order")
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    orderId: '',
+    order: {},
+    // goods: [],
+    // orderItem: [],
+    orderGoodList: [],
+
+    orderTime: '',
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    console.log(options)
+    if (!options || !options.orderId) {
+      wx.showModal({
+        title: '订单查询失败',
+        content: '请刷新页面后重试',
+        showCancel: false,
+        complete: (res) => {
+          wx.navigateBack()
+        }
+      })
+    }
+
+    this.setData({
+      orderId: options.orderId,
+    })
+    this.loadPageData()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+
+  confirmPayment() {
+    // 点击确认支付按钮
+    wx.showModal({
+      title: '拉起支付',
+      content: '点击确认完成支付，点击取消放弃支付',
+      complete: (res) => {
+        if (res.cancel) {
+          wx.showToast({
+            title: '用户取消支付',
+            icon: 'error',
+          })
+        }
+
+        if (res.confirm) {
+          wx.showToast({
+            title: '支付成功',
+            icon: 'success',
+          })
+        }
+      }
+    })
+  },
+
+  loadPageData() {
+    (async () => {
+      console.log("orderId", this.data.orderId)
+      let orderDetail = await orderService.getOrderDetail(this.data.orderId)
+      console.log("orderDetail", orderDetail)
+
+      if (!orderDetail) {
+        wx.showModal({
+          title: '订单查询失败',
+          content: '',
+          showCancel: false,
+          complete: (res) => {
+            wx.navigateBack()
+          }
+        })
+        return
+      }
+
+      let orderGoodList = []
+      for (let item of orderDetail.orderItem) {
+        orderGoodList.push({
+          wxid: item.goodId, // 用于列表渲染
+          good: orderDetail.goods.find(good => good.id == item.goodId),
+          goodCount: item.goodCount,
+          unitPrice: item.unitPrice,
+        })
+      }
+      console.log("orderGoodList", orderGoodList)
+
+      this.setData({
+        order: orderDetail.order,
+        // goods: orderDetail.goods,
+        // orderItem: orderDetail.orderItem,
+        orderGoodList: orderGoodList,
+
+        orderTime: orderDetail.order.orderDate.replace("T", " ")
+      })
+    })();
+  }
+})

weixin-miniprogram/pages/shop/orderConfirm.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "确认订单"
+}

weixin-miniprogram/pages/shop/orderConfirm.wxml

@@ -0,0 +1,50 @@
+<!--pages/shop/orderConfirm.wxml-->
+<view class="page-title-container">
+  <view class="page-title-emoji">🎉</view>
+  <view class="page-title">
+    订单已创建，快去支付吧
+  </view>
+</view>
+
+<view class="order-info">
+  <view>订单号：{{order.id}}</view>
+  <view>订单创建时间：{{orderTime}}</view>
+  <view>订单状态：{{order.orderStatus}}</view>
+</view>
+
+<view class="good-list-title">商品列表</view>
+
+<view class="good-card-container" wx:for="{{orderGoodList}}" wx:for-item="item" wx:key="wxid" goodinfo="{{item}}">
+  <!-- 商品图片 -->
+  <view class="good-card-image" style="background-image: {{ 'url(' + item.good.picUrl + ');'}};">
+  </view>
+
+  <!-- 商品标题 -->
+  <view class="good-card-info good-title-container">
+    <text class="good-title line-wrap">{{ item.good.brief }}</text>
+  </view>
+
+  <!-- 下单时刻商品单价 -->
+  <view class="good-card-info">
+    <view class="good-price good-price-counter">
+      <view class="good-price-symbol">¥</view>
+      <view class="good-price-number">{{ item.unitPrice }}</view>
+    </view>
+  </view>
+
+  <!-- 商品个数 -->
+  <view class="good-card-info">
+    <view>x{{ item.goodCount }}</view>
+  </view>
+</view>
+
+<view style="height: 110px;">
+  <!-- 占位用 -->
+</view>
+
+<view class="bottom-controlbox">
+  <!-- 屏幕底部 -->
+  <view class="bottom-buttons">
+    <view class="btn" id="btn-confirm-payment" bindtap="confirmPayment">确认支付</view>
+  </view>
+</view>

weixin-miniprogram/pages/shop/orderConfirm.wxss

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

weixin-miniprogram/pages/shop/shop.wxss

@@ -39,6 +39,9 @@
   /* border-bottom: 1px solid rgb(121, 121, 121); */
   height: 100%;
   display: table;
+
+  /* iOS下要设置一下 width */
+  width: 100%;
 }
 
 .sidebar-item:last-child {
@@ -56,6 +59,7 @@
   font-weight: bold;
   color: #FF764E;
   border-left: 4px solid #FF764E;
+  box-sizing: border-box;
 }
 
 .tabbar {