app.json

@@ -11,6 +11,7 @@
       "pages/Mall/newCommodity/newCommodity",
       "pages/Mall/hotCommodity/hotCommodity",
       "pages/order/confirmOrder/confirmOrder",
+      "pages/order/orderDetail/orderDetail",
       "pages/my/addressManage/addressManage",
       "pages/my/addAddress/addAddress",
       "pages/my/myOrder/myOrder"

pages/my/myOrder/myOrder.js

@@ -21,7 +21,16 @@ Page({
   // 获取订单列表
   getOrderLists(){
       API.getOrderLists({pageNum:this.data.pageNum,pageSize:10}).then(res=>{
-          console.log(res);
+          this.setData({
+              orderList:res.orderDTOS
+          })
+      })
+  },
+  // 订单详情
+  goOrderDetail(e){
+      let orderId = e.currentTarget.dataset.orderid;
+      wx.navigateTo({
+        url: '/pages/order/orderDetail/orderDetail?orderId='+orderId,
       })
   },
   /**

pages/my/myOrder/myOrder.wxml

@@ -8,21 +8,21 @@
 
    <!-- 订单列表 -->
    <view class="orderList">
-       <view class="itemOrder" wx:for="{{3}}" wx:key="index">
+       <view class="itemOrder" wx:for="{{orderList}}" wx:key="index">
           <view class="orderInfo">
                 <view class="leftInfo">
                     <view class="prodsImg">
-                        <image class="coverImg" src="/images/index/category-item.png" mode="" wx:for="{{1}}" wx:key="index"/>
+                        <image class="coverImg" src="{{item2.imageDTOS[0].picUrl}}" mode="" wx:for="{{item.orderDetailDTOS}}" wx:key="this" wx:for-index="index2" wx:for-item="item2" wx:if="{{index2 < 4}}"/>
                     </view>
-                    <view class="prodInfo">
-                       <text>商品描述高领长袖T恤露脐短装</text>
-                       <text>白色/M</text>
-                       <text>￥：1297</text>
+                    <view class="prodInfo" wx:if="{{item.orderDetailDTOS.length == 1}}">
+                       <text>{{item.orderDetailDTOS[0].prodName}}</text>
+                       <text>{{item.orderDetailDTOS[0].prodAttrName}}</text>
+                       <text>￥：{{item.orderDetailDTOS[0].price}}</text>
                     </view>
                 </view>
               <view class="statistics">
                  <text>
-                    ￥82900.00
+                    ￥{{item.orderAmount}}
                     共5件
                  </text>
               </view>
@@ -32,17 +32,17 @@
                 <text class="name">状态</text>
                 <text>未收货</text>
              </view>
-             <image class="editIcon" src="/images/my/edit.png" mode=""/>
+             <image class="editIcon" src="/images/my/edit.png" mode="" data-orderId="{{item.orderId}}" catchtap="goOrderDetail"/>
              <image class="logistics" src="/images/my/logistics.png" mode=""/>
           </view>
        </view>
    </view>
 
    <!-- 商品总价 -->
-   <view class="totalPrice">
+   <!-- <view class="totalPrice">
       <text>商品总价</text>
       <text>￥：82900.00</text>
-   </view>
+   </view> -->
 
    <!-- 推荐 -->
    <view class="recommend">

pages/order/orderDetail/orderDetail.js

@@ -0,0 +1,79 @@
+import { API } from "../../../service/api"
+
+// pages/order/orderDetail/orderDetail.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    prods:[],
+    orderDetail:''
+  },
+  // 获取订单详情
+  getOrderDetail(orderId){
+      API.getOrderDetail({orderId}).then(res=>{
+        //   console.log(res);
+          this.setData({
+              orderDetail:res.orderDTO,
+              prods:res.orderDetailDTOS
+          })
+      })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    console.log(options);
+    this.getOrderDetail(options.orderId);
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/order/orderDetail/orderDetail.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "existProduct":"/components/existProduct-list/existProduct-list"
+  }
+}

pages/order/orderDetail/orderDetail.wxml

@@ -0,0 +1,17 @@
+<!--pages/order/orderDetail/orderDetail.wxml-->
+<!-- 地址 -->
+<view class="address" bindtap="goAddressMange">
+    <text class="icon">收货地址</text>
+    <view class="addressInfo">
+        <view class="userInfo">
+          <text>{{orderDetail.recName}}</text>
+          <text>{{orderDetail.recMobile}}</text>
+        </view>
+        <text>{{orderDetail.recProv}} {{orderDetail.recCity}} {{orderDetail.recDistrict}} {{orderDetail.recAddress}}</text>
+    </view>
+    <image class="more" src="/images/mall/back.png" mode="widthFix" srcset=""/>
+</view>
+
+<!-- 商品 -->
+<existProduct prods="{{prods}}"></existProduct>
+

pages/order/orderDetail/orderDetail.wxss

@@ -0,0 +1,24 @@
+/* pages/order/orderDetail/orderDetail.wxss */
+.address{
+    width: 650rpx;
+    height: 176rpx;
+    background: #F7F7F7;
+    border-radius: 30rpx;
+    margin: 64rpx auto;
+    box-shadow: 0 0 10rpx 10rpx #F0F0F0;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+.address .userInfo{
+    display: flex;
+    justify-content: space-between;
+}
+.address .icon{
+    width: 170rpx;
+}
+.address .more{
+    width: 30rpx;
+    transform: rotate(180deg);
+    margin: 0 20px;
+}

service/api.js

@@ -293,5 +293,9 @@ export const API = {
     // 获取订单列表
     getOrderLists: function(playload){
         return http.post("/api/store/order/orders",playload)
+    },
+    // 获取订单详情
+    getOrderDetail:function(playload){
+        return http.get("/api/store/order/detail",playload)
     }
 }