我的订单点击跳转订单详情页；订单详情页展示订单总金额；立即下单可以选择商品数量

weixin-miniprogram/pages/shop/goodDetail.js

@@ -10,7 +10,9 @@ Page({
    */
   data: {
     goodId: -1,
-    goodinfo: {}
+    goodinfo: {},
+
+    buyGoodCount: 1,
   },
 
   /**
@@ -74,22 +76,66 @@ Page({
 
   },
 
+
+  bindCountInput(e) {
+    console.log("e", e)
+    console.log("e.detail.value", e.detail.value)
+
+    let regexp = /^[0-9]+$/.exec(e.detail.value)
+    let buyGoodCountNum = Number(e.detail.value)
+    if (!regexp || isNaN(buyGoodCountNum) || buyGoodCountNum < 1) {
+      wx.showToast({
+        title: '输入无效',
+        icon: "error",
+      })
+      this.setData({
+        buyGoodCount: this.data.buyGoodCount,
+      })
+      return
+    }
+
+    this.setData({
+      buyGoodCount: buyGoodCountNum,
+    })
+  },
+  btnAddCount() {
+    this.setData({
+      buyGoodCount: this.data.buyGoodCount + 1,
+    })
+  },
+  btnSubtractCount() {
+    this.setData({
+      buyGoodCount: this.data.buyGoodCount - 1,
+    })
+  },
+
+
   // 立即下单
   btnBuyTap() {
     (async () => {
       // 创建订单
       let orderList = [{
         goodId: this.data.goodId,
-        count: 1,
+        count: this.data.buyGoodCount,
       }]
       let orderId = await orderService.createOrder(orderList)
       console.log("orderId", orderId)
 
-      // 跳转订单查看页面（携带订单号）
-      wx.navigateTo({
-        // url: "/pages/scan/entrance?a=1"
-        url: "/pages/shop/orderDetail?orderId=" + orderId
-      })
+      if (!orderId) {
+        wx.showModal({
+          title: '出错了',
+          content: '创建订单失败，请重试',
+          showCancel: false,
+          complete: (res) => {
+          }
+        })
+      } else {
+        // 跳转订单查看页面（携带订单号）
+        wx.navigateTo({
+          // url: "/pages/scan/entrance?a=1"
+          url: "/pages/shop/orderDetail?orderId=" + orderId
+        })
+      }
     })();
   },
 

weixin-miniprogram/pages/shop/goodDetail.wxml

@@ -37,6 +37,11 @@
 
 <view class="bottom-controlbox">
   <!-- 屏幕底部 -->
+  <view class="bottom-inputs">
+    <button class="buy-count-btn" bindtap="btnSubtractCount" size="mini" disabled="{{ buyGoodCount <= 1 }}">-</button>
+    <input class="buy-count-input" type="number" value="{{buyGoodCount}}" placeholder="购买数量" bindinput="bindCountInput" bindblur="bindCountInput" bindconfirm="bindCountInput" />
+    <button class="buy-count-btn" bindtap="btnAddCount" size="mini">+</button>
+  </view>
   <view class="bottom-buttons">
     <view class="btn" id="btn-addcart">加入购物车</view>
     <view class="btn" id="btn-buy" bindtap="btnBuyTap">立即下单</view>

weixin-miniprogram/pages/shop/goodDetail.wxss

@@ -93,6 +93,32 @@
 
 
 
+/* 屏幕底部 */
+/* 屏幕底部 数量输入框 */
+.bottom-inputs {
+  margin-bottom: 3px;
+}
+
+.buy-count-input {
+  border: 1px solid black;
+  display: inline-block;
+  border-radius: 100px;
+  width: 100px;
+  height: 34px;
+  margin: 0 5px;
+}
+
+.buy-count-btn {
+  border-radius: 100px;
+  width: 35px;
+  height: 35px;
+  max-width: 35px;
+  max-height: 35px;
+  min-width: 35px;
+  min-height: 35px;
+  background-color: #FA4126;
+  color: white;
+}
 
 /* 屏幕底部 下单按钮 */
 .bottom-controlbox {

weixin-miniprogram/pages/shop/myOrder.js

@@ -94,10 +94,35 @@ Page({
     this.updatePageData()
   },
 
+  bindOrderDetailTap(e) {
+    let dataset = e.currentTarget.dataset
+    console.log("dataset", dataset)
+    console.log("orderDetail", dataset.orderdetail)
+    // 订单确认页
+    wx.navigateTo({
+      url: "/pages/shop/orderDetail?orderId=" + dataset.orderdetail.id,
+    })
+  },
+
+
+
   loadPageData() {
     (async () => {
       let userOrder = await orderService.listUserOrder()
       console.log("userOrder", userOrder)
+      
+      if (!userOrder) {
+        wx.showModal({
+          title: '订单查询失败',
+          content: '',
+          showCancel: false,
+          complete: (res) => {
+            wx.navigateBack()
+          }
+        })
+        return
+      }
+
       let filterList = Object.keys(userOrder.filter).map(key => {
         return {
           id: key,

weixin-miniprogram/pages/shop/myOrder.wxml

@@ -16,8 +16,13 @@
 
 <view class="container">
 
+  <!-- 无订单时显示 -->
+  <view wx:if="{{orderList.length==0}}" style="text-align: center; margin-top: 30vh;">
+    该筛选条件下无订单
+  </view>
+
   <!-- 订单列表 -->
-  <view class="order-card" wx:for="{{orderList}}" wx:for-item="item" wx:key="id">
+  <view class="order-card" wx:for="{{orderList}}" wx:for-item="item" wx:key="id" bindtap="bindOrderDetailTap" data-orderdetail="{{item}}">
     <view>
       <text class="order-info-key">订单号：</text>
       <text>{{ item.id }}</text>

weixin-miniprogram/pages/shop/orderDetail.js

@@ -8,13 +8,22 @@ Page({
    * 页面的初始数据
    */
   data: {
+    // 订单 ID
     orderId: '',
+    // 订单详情
     order: {},
-    // goods: [],
-    // orderItem: [],
-    orderGoodList: [],
 
+    /**
+     * 用于界面渲染
+     */
+    // 订单商品列表
+    orderGoodList: [],
+    // 订单状态
+    orderStatusCode: '',
+    // 订单创建时间
     orderTime: '',
+    // 订单总金额
+    orderPrice: '',
   },
 
   /**
@@ -88,6 +97,7 @@ Page({
 
   },
 
+  // 订单状态：等待确认
   confirmPayment() {
     // 点击确认支付按钮
     wx.showModal({
@@ -140,13 +150,18 @@ Page({
       }
       console.log("orderGoodList", orderGoodList)
 
+      let orderStatusCode = orderDetail.order.orderStatusCode
+      console.log("orderStatusCode", orderStatusCode)
+
+      let orderPrice = orderDetail.order.orderPrice
+      console.log("orderPrice", orderPrice)
+
       this.setData({
         order: orderDetail.order,
-        // goods: orderDetail.goods,
-        // orderItem: orderDetail.orderItem,
         orderGoodList: orderGoodList,
-
-        orderTime: orderDetail.order.orderDate.replace("T", " ")
+        orderTime: orderDetail.order.orderDate.replace("T", " "),
+        orderStatusCode: orderStatusCode,
+        orderPrice: orderPrice,
       })
     })();
   }

weixin-miniprogram/pages/shop/orderDetail.wxml

@@ -6,13 +6,22 @@
   </view>
 </view>
 
+<!-- 订单总金额 -->
+<view style="text-align: center;">
+  <view class="good-price good-price-counter">
+    <view class="good-price-symbol" style="font-size: 40rpx;">¥</view>
+    <view class="good-price-number" style="font-size: 60rpx;">{{ orderPrice }}</view>
+  </view>
+</view>
+
 <view class="order-info">
   <view>订单号：{{order.id}}</view>
   <view>订单创建时间：{{orderTime}}</view>
+  <view>订单总金额：{{order.orderPrice}} 元</view>
   <view>订单状态：{{order.orderStatus}}</view>
 </view>
 
-<view class="good-list-title">商品列表</view>
+<view class="good-list-title">订单详情</view>
 
 <view class="good-card-container" wx:for="{{orderGoodList}}" wx:for-item="item" wx:key="wxid" goodinfo="{{item}}">
   <!-- 商品图片 -->
@@ -45,6 +54,6 @@
 <view class="bottom-controlbox">
   <!-- 屏幕底部 -->
   <view class="bottom-buttons">
-    <view class="btn" id="btn-confirm-payment" bindtap="confirmPayment">确认支付</view>
+    <view wx:if="{{ orderStatusCode == 'Pending' }}" class="btn" id="btn-confirm-payment" bindtap="confirmPayment">确认支付</view>
   </view>
 </view>