我的订单

app.json

@@ -12,7 +12,8 @@
       "pages/Mall/hotCommodity/hotCommodity",
       "pages/order/confirmOrder/confirmOrder",
       "pages/my/addressManage/addressManage",
-      "pages/my/addAddress/addAddress"
+      "pages/my/addAddress/addAddress",
+      "pages/my/myOrder/myOrder"
   ],
   "window": {
     "backgroundColor": "#FFFFFF",

pages/my/myOrder/myOrder.js

@@ -0,0 +1,82 @@
+import { API } from "../../../service/api";
+
+// pages/my/myOrder/myOrder.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    tab:["全部订单","未支付","未发货","未收货","已收货","完成"],
+    selectTab:0,
+    pageNum:1,
+  },
+  // 切换tab
+  switchTab(e){
+    let index = e.currentTarget.dataset.index;
+    this.setData({
+        selectTab:index
+    })
+  },
+  // 获取订单列表
+  getOrderLists(){
+      API.getOrderLists({pageNum:this.data.pageNum,pageSize:10}).then(res=>{
+          console.log(res);
+      })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.getOrderLists();
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/my/myOrder/myOrder.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText":"我的订单",
+  "usingComponents": {
+    "product-list":"/components/product-list/product-list"
+  }
+}

pages/my/myOrder/myOrder.wxml

@@ -0,0 +1,56 @@
+<!--pages/my/myOrder/myOrder.wxml-->
+<view class="myOrder">
+   
+   <!-- 菜单切换 -->
+   <view class="tab">
+      <view class="itemTab {{selectTab === index?'selectTab':''}}" wx:for="{{tab}}" wx:key="index" data-index="{{index}}" bindtap="switchTab">{{item}}</view>
+   </view>
+
+   <!-- 订单列表 -->
+   <view class="orderList">
+       <view class="itemOrder" wx:for="{{3}}" 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"/>
+                    </view>
+                    <view class="prodInfo">
+                       <text>商品描述高领长袖T恤露脐短装</text>
+                       <text>白色/M</text>
+                       <text>￥：1297</text>
+                    </view>
+                </view>
+              <view class="statistics">
+                 <text>
+                    ￥82900.00
+                    共5件
+                 </text>
+              </view>
+          </view>
+          <view class="operateView">
+             <view class="status">
+                <text class="name">状态</text>
+                <text>未收货</text>
+             </view>
+             <image class="editIcon" src="/images/my/edit.png" mode=""/>
+             <image class="logistics" src="/images/my/logistics.png" mode=""/>
+          </view>
+       </view>
+   </view>
+
+   <!-- 商品总价 -->
+   <view class="totalPrice">
+      <text>商品总价</text>
+      <text>￥：82900.00</text>
+   </view>
+
+   <!-- 推荐 -->
+   <view class="recommend">
+        <view class="divider">
+           <text class="line"></text>
+           <text class="text">更多个性化推荐</text>
+           <text class="line"></text>
+        </view>
+        <product-list position="hot"></product-list>
+    </view>
+</view>

pages/my/myOrder/myOrder.wxss

@@ -0,0 +1,112 @@
+/* pages/my/myOrder/myOrder.wxss */
+.myOrder .tab{
+    width: 100%;
+    height: 120rpx;
+    background: #F9F9F9;
+    display: flex;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left:0;
+}
+.myOrder .tab .itemTab{
+   font-size: 26rpx;
+   flex: 1;
+   height: 60rpx;
+   line-height: 60rpx;
+   text-align: center;
+   border-right: 2rpx solid rgb(189, 189, 189);
+}
+.myOrder .tab .itemTab:last-child{
+    border: none;
+}
+.myOrder .tab .selectTab{
+    background: #FED279;
+    border: none;
+}
+
+/* 订单列表 */
+.myOrder .orderList{
+    padding: 120rpx 30rpx 0 30rpx;
+}
+.myOrder .orderList .itemOrder{
+    border-bottom: 2rpx solid #CCCCCC;
+    margin: 30rpx 0;
+}
+.myOrder .orderList .itemOrder .orderInfo{
+    display: flex;
+    justify-content: space-between;
+}
+.myOrder .orderList .itemOrder .orderInfo .leftInfo{
+   display: flex;
+}
+.myOrder .orderList .itemOrder .orderInfo .prodsImg .coverImg{
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 10rpx;
+    margin-right: 10rpx;
+}
+.myOrder .orderList .itemOrder .orderInfo .prodInfo text{
+   display: block;
+}
+.myOrder .orderList .itemOrder .orderInfo .statistics{
+    width: 120rpx;
+    height: 120rpx;
+    background: #F9F9F9;
+    font-size: 22rpx;
+    text-align: right;
+}
+.myOrder .orderList .itemOrder .operateView{
+   margin: 20rpx 0;
+   display: flex;
+   justify-content: flex-end;
+}
+.myOrder .orderList .itemOrder .operateView .status{
+  border: 2rpx solid #999999;
+  border-radius: 10rpx;
+  display: inline-block;
+}
+.myOrder .orderList .itemOrder .operateView .status text{
+    padding: 0 20rpx;
+    font-size: 28rpx;
+}
+.myOrder .orderList .itemOrder .operateView .status .name{
+  border-right: 2rpx solid #999999;
+}
+.myOrder .orderList .itemOrder .operateView image{
+  width: 50rpx;
+  height: 50rpx;
+  margin-left: 40rpx;
+}
+
+/* 商品总价 */
+.myOrder .totalPrice{
+    width: calc(100% - 40rpx);
+    height: 80rpx;
+    line-height: 80rpx;
+    margin:auto;
+    background: #F9F9F9;
+    display: flex;
+    justify-content: space-between;
+    border-radius:50rpx;
+}
+.myOrder .totalPrice text{
+    margin: 0 20rpx;
+}
+
+/* 个性化 */
+.recommend .divider{
+    margin: 30rpx 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.recommend .divider .text{
+    margin: 0 20rpx;
+}
+.recommend .divider .line{
+    width: 200rpx;
+    height: 2rpx;
+    background: #CFCFCF;
+    display: inline-block;
+}

pages/my/personalCenter/personalCenter.js

@@ -27,8 +27,6 @@ Page({
 
     this.base64(avatarUrl,'png').then(res => {
       console.log(res,'base64路径')
-      let pathUrl = '/api/store/user-profile/upload-avatar';
-
       let data = {
         avatarBase64:res
       }
@@ -73,6 +71,9 @@ Page({
     if(page === "address"){
         url="/pages/my/addressManage/addressManage"
     }
+    if(page === "order"){
+        url="/pages/my/myOrder/myOrder"
+    }
     wx.navigateTo({
       url: url,
     })

pages/my/personalCenter/personalCenter.wxml

@@ -14,7 +14,7 @@
     <view class="myOrder">
        <text class="title">我的订单</text>
        <view class="operate">
-           <text>全部订单</text>
+           <text data-page="order" bindtap="goEnterPage">全部订单</text>
            <text>待发货</text>
            <text>待收货</text>
        </view>

service/api.js

@@ -289,5 +289,9 @@ export const API = {
     // 更新用户昵称
     updateUserNickname: function(playload){
         return http.post("/api/store/user-profile/upload-nickname",playload)
+    },
+    // 获取订单列表
+    getOrderLists: function(playload){
+        return http.post("/api/store/order/orders",playload)
     }
 }