我的订单

src/main.js

@@ -4,16 +4,29 @@
  * @Author: dream
  * @Date: 2021-03-25 15:13:56
  * @LastEditors: dream
- * @LastEditTime: 2021-03-25 15:29:26
+ * @LastEditTime: 2021-04-08 15:36:33
  */
 import Vue from 'vue'
 import App from './App'
 import uView from 'uview-ui'
 import store from './store'
+import dayjs from 'dayjs'
 
 Vue.config.productionTip = false
 
-Vue.use(uView)
+Vue.filter('dateFilter', (val) => {
+  const nowYear = dayjs().year()
+  const valYear = dayjs(val).year()
+  if (nowYear === valYear) {
+    return dayjs(val).format('MM-DD HH:mm')
+  } else {
+    return dayjs(val).format('YYYY-MM-DD HH:mm')
+  }
+})
+
+Vue.filter('priceFilter', (price) => {
+  return (price / 100).toFixed(2)
+})
 
 App.mpType = 'app'
 

src/pageSubs/deliveryOrder/components/iphDeliveryOrderCard.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-31 18:33:43
  * @LastEditors: dream
- * @LastEditTime: 2021-04-01 17:31:50
+ * @LastEditTime: 2021-04-08 15:36:04
 -->
 <template>
 	<view class="delivery-order-card-main iph-bg-fff" @click.stop="cardClick" :style="{ paddingBottom: `${pagePaddingBottom}px`}">
@@ -26,7 +26,7 @@
       <view class="u-m-t-24 u-font-24 u-line-34">订货单号：{{detail.orderId}}</view>
     </block>
     <block v-else>
-      <view class="u-m-t-24 u-font-24 u-line-34">发货时间：{{detail.invoiceTime | timeFilter}}</view>
+      <view class="u-m-t-24 u-font-24 u-line-34">发货时间：{{detail.invoiceTime | dateFilter}}</view>
     </block>
     <view class="u-m-t-24 u-p-t-16 u-border-top u-text-right">
       <buttton class="call-phone-btn" v-if="detail.phone" @click.stop="callPhone">联系电话</buttton>
@@ -36,7 +36,6 @@
 </template>
 
 <script>
-import dayjs from 'dayjs'
 export default {
   name: 'iphDeliveryOrderCard',
   props: {
@@ -66,15 +65,6 @@ export default {
         3: '已收货'
       }
       return statusText[val]
-    },
-    timeFilter (val) {
-      const nowYear = dayjs().year()
-      const valYear = dayjs(val).year()
-      if (nowYear === valYear) {
-        return dayjs(val).format('MM-DD HH:mm')
-      } else {
-        return dayjs(val).format('YYYY-MM-DD HH:mm')
-      }
     }
   }
 }

src/pageSubs/deliveryOrder/detail.vue

@@ -4,11 +4,10 @@
  * @Author: dream
  * @Date: 2021-03-31 18:03:25
  * @LastEditors: dream
- * @LastEditTime: 2021-04-01 18:37:35
+ * @LastEditTime: 2021-04-08 15:47:23
 -->
 <template>
 	<view class="delivery-order-detail-main" :style="{ paddingBottom: `${pagePaddingBottom}px`}">
-    <u-navbar title="发货单详情" is-back :is-fixed="false" :border-bottom="false" title-color="#ffffff" back-icon-color="#ffffff" :background="{ background: '#1677FF' }" />
     <view class="head-area"><text class="status-title">{{detail.status | statusFilter}}</text></view>
     <view class="warehouse-info iph-bg-fff">
       <view class="u-flex u-border-bottom u-p-b-32">
@@ -20,7 +19,7 @@
       </view>
       <view class="u-flex u-p-t-24">
         <view class="u-font-22 u-line-32 u-flex-1">发货单号：{{detail.invoiceId}}</view>
-        <view class="order-time u-font-22 u-line-32">{{detail.invoiceTime | timeFilter}}</view>
+        <view class="order-time u-font-22 u-line-32">{{detail.invoiceTime | dateFilter}}</view>
       </view>
     </view>
     <view class="good-list iph-bg-fff">
@@ -39,9 +38,8 @@
 </template>
 
 <script>
-import dayjs from 'dayjs'
-import iphGoodCard from '../../components/iphGoodCard.vue'
-import IphFixedBottom from '../../components/iphFixedBottom.vue'
+import iphGoodCard from '@/components/iphGoodCard.vue'
+import IphFixedBottom from '@/components/iphFixedBottom.vue'
 export default {
   components: { iphGoodCard, IphFixedBottom },
   name: 'deliveryOrderDetail',
@@ -89,6 +87,21 @@ export default {
   onLoad () {
 
   },
+  onPageScroll (obj) {
+    if (obj.scrollTop < 48) {
+      uni.setNavigationBarColor({
+        frontColor: '#ffffff',
+        backgroundColor: '#1677FF',
+        animation: { duration: 0.5, timingFunc: 'linear' }
+      })
+    } else {
+      uni.setNavigationBarColor({
+        frontColor: '#000000',
+        backgroundColor: '#ffffff',
+        animation: { duration: 0.5, timingFunc: 'linear' }
+      })
+    }
+  },
   methods: {
     getFooterHeight (val) {
       this.pagePaddingBottom = val + 8
@@ -107,15 +120,6 @@ export default {
         3: '已收货'
       }
       return statusText[val]
-    },
-    timeFilter (val) {
-      const nowYear = dayjs().year()
-      const valYear = dayjs(val).year()
-      if (nowYear === valYear) {
-        return dayjs(val).format('MM-DD HH:mm')
-      } else {
-        return dayjs(val).format('YYYY-MM-DD HH:mm')
-      }
     }
   }
 }

src/pageSubs/deliveryOrder/history.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-31 18:01:37
  * @LastEditors: dream
- * @LastEditTime: 2021-04-01 10:49:19
+ * @LastEditTime: 2021-04-08 14:50:20
 -->
 <template>
 	<view class="delivery-order-history-main">
@@ -34,10 +34,10 @@
 </template>
 
 <script>
-import iphEmpty from '../../components/iphEmpty.vue'
+import IphEmpty from '@/components/iphEmpty.vue'
 import IphDeliveryOrderCard from './components/iphDeliveryOrderCard.vue'
 export default {
-  components: { iphEmpty, IphDeliveryOrderCard },
+  components: { IphEmpty, IphDeliveryOrderCard },
   name: 'deliveryOrderHistory',
   data () {
     return {

src/pageSubs/orders/components/iphOrderCard.vue

@@ -0,0 +1,110 @@
+<!--
+ * @Descripttion: 订单卡片
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-08 14:52:47
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-08 15:41:10
+-->
+<template>
+  <view class="iph-order-card-main iph-bg-fff">
+    <view class="u-flex u-font-24 u-line-34 u-p-b-24 u-border-bottom">
+      <view class="u-flex-1 text-weight-500">单号：{{value.orderId}}</view>
+      <view class="order-status">{{value.status | statusFilter}}</view>
+    </view>
+    <blocK v-for="(item, index) in value.deliveryList" :key="index">
+      <view class="u-flex u-p-t-32">
+        <view class="ware-icon iph-icon-warehouse"></view>
+        <view class="u-m-l-8 u-flex-1 u-font-24 u-line-34">{{item.warehouseName}}</view>
+        <view class="card-time u-font-24 u-line-34">{{item.deliveryTime | dateFilter}}</view>
+      </view>
+      <view class="u-flex u-p-t-24">
+        <view class="u-flex-1 u-font-24 u-line-34">共计{{item.goodNum}}项商品</view>
+        <view class="u-font-24 u-line-34">¥{{item.goodPrice | priceFilter}}</view>
+      </view>
+      <view class="u-flex u-p-t-24 u-p-b-32 u-border-bottom">
+        <view class="u-flex-1 u-font-24 u-line-34">配送费</view>
+        <view class="u-font-24 u-line-34">¥{{item.feePrice | priceFilter}}</view>
+      </view>
+    </blocK>
+    <view class="u-flex u-p-t-32">
+      <view class="u-flex-1">
+        <text class="total-price-title">总配送费：</text>
+        <text class="text-weight-500">¥{{value.totalFeePrice | priceFilter}}</text>
+      </view>
+      <view class="total-price-title">
+        <text class="total-price-title">共计{{value.totalGoodNum}}项商品 合计：</text>
+        <text class="text-weight-500">¥{{value.totalPrice | priceFilter}}</text>
+      </view>
+    </view>
+    <view class="u-flex u-row-right u-p-t-26">
+      <button class="to-pay-btn">去支付</button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'iphOrderCard',
+  props: {
+    value: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  filters: {
+    statusFilter (val) {
+      const statusText = {
+        1: '待支付',
+        2: '进行中',
+        3: '已完成',
+        4: '已取消'
+      }
+      return statusText[val]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.iph-order-card-main {
+  padding: 24px;
+  border-radius: 12px;
+ .order-status {
+   color: $u-type-primary;
+  }
+  .ware-icon {
+    width: 30px;
+    height: 30px;
+  }
+  .card-time {
+    color: $iph-desc-text;
+  }
+  .total-price-title {
+    color: $iph-total-text;
+  }
+  .to-pay-btn {
+    margin: 0;
+    padding: 6px 26px;
+    width: 144px;
+    line-height: 34px;
+    font-size: 24px;
+    border-radius: 24px;
+    color: $u-type-primary;
+    background-color: $iph-standby-bg;
+    &::after {
+      content: '';
+      box-sizing:border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform-origin: 0 0;
+      transform: scale(0.5, 0.5);
+      width: 200%;
+      height: 200%;
+      border: 1px solid $u-type-primary;
+      border-radius: 48px;
+    }
+  }
+}
+</style>

src/pageSubs/orders/history.vue

@@ -4,29 +4,102 @@
  * @Author: dream
  * @Date: 2021-03-26 15:16:21
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 15:18:42
+ * @LastEditTime: 2021-04-08 15:50:39
 -->
 <template>
-	<view>Orders History</view>
+	<view class="order-history-main">
+		<u-sticky :enable="enable">
+      <u-tabs
+        class="history-tab"
+        :list="tabList"
+        :is-scroll="false"
+        :current="currentTab"
+        :bold="false"
+        inactive-color="#AAAAAA"
+        :bar-style="{
+          marginLeft: '-22rpx',
+          bottom:  '-4rpx',
+          width: '84rpx',
+          height: '4rpx',
+          borderRadius: 0
+        }"
+        @change="changeTab"
+      ></u-tabs>
+		</u-sticky>
+    <block v-for="(item, index) in orderList" :key="index">
+      <view class="u-m-t-24 u-m-l-16 u-m-r-16">
+        <iph-order-card :value="item" />
+      </view>
+    </block>
+    <iph-empty :show="!orderList.length" :type="1" :marginTop="168"/>
+  </view>
 </template>
 
 <script>
+import IphEmpty from '@/components/iphEmpty.vue'
+import IphOrderCard from './components/iphOrderCard.vue'
 export default {
+  components: { IphEmpty, IphOrderCard },
   name: 'orderHistory',
   data () {
     return {
-
+      enable: true,
+      currentTab: 0,
+      tabList: [{
+        name: '待支付'
+      }, {
+        name: '进行中'
+      }, {
+        name: '已完成'
+      }, {
+        name: '已取消'
+      }],
+      orderList: [{
+        orderId: '337JD32i82492332',
+        status: 1,
+        totalFeePrice: 20000,
+        totalGoodNum: 5,
+        totalPrice: 364000,
+        deliveryList: [{
+          warehouseName: '浙江仓库',
+          deliveryTime: '2021-03-08 22:30',
+          goodNum: 1,
+          goodPrice: 99200,
+          feePrice: 0
+        }, {
+          warehouseName: '云东仓',
+          deliveryTime: '2021-03-08 22:30',
+          goodNum: 1,
+          goodPrice: 29600,
+          feePrice: 20000
+        }]
+      }]
     }
   },
-  onLoad () {
-
+  onLoad (option) {
+    this.currentTab = option.current
+  },
+  onShow () {
+    this.enable = true
+  },
+  onHide () {
+    this.enable = false
   },
   methods: {
-
+    changeTab (val) {
+      this.currentTab = val
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.order-history-main {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
+  .history-tab {
+    /deep/ .u-tab-item {
+      font-weight: 500 !important;
+    }
+  }
+}
 </style>

src/pages.json

@@ -42,10 +42,9 @@
     }, {
       "path": "detail",
       "style": {
-        "navigationStyle": "custom"
-        // "navigationBarBackgroundColor": "#1677FF",
-        // "navigationBarTextStyle": "white",
-        // "navigationBarTitleText": "发货单详情"
+        "navigationBarBackgroundColor": "#1677FF",
+        "navigationBarTextStyle": "white",
+        "navigationBarTitleText": "发货单详情"
 			}
     }]
   }, {

src/pages/my/my.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:56:03
  * @LastEditors: dream
- * @LastEditTime: 2021-04-01 10:47:25
+ * @LastEditTime: 2021-04-08 15:51:55
 -->
 <template>
 	<view class="my-main">
@@ -21,23 +21,23 @@
     <view class="my-order-area iph-bg-fff">
       <view class="area-title">我的订单</view>
       <view class="u-m-t-32 u-p-b-32 u-flex u-row-around">
-        <view class="order-item">
+        <navigator class="order-item" url="/pageSubs/orders/history?current=0">
           <image class="item-img" src="~@/static/common/btn_my_dfk.png" />
           <text class="u-m-t-12 u-font-24 u-line-34">待支付</text>
-        </view>
-        <view class="order-item">
+        </navigator>
+        <navigator class="order-item" url="/pageSubs/orders/history?current=1">
           <image class="item-img" src="~@/static/common/icon_my_zzz.png" />
           <text class="u-m-t-12 u-font-24 u-line-34">进行中</text>
           <u-badge :count="2" :offset="[-16, -4]" size="mini" color="#ffffff" bgColor="#FE5128"></u-badge>
-        </view>
-        <view class="order-item">
+        </navigator>
+        <navigator class="order-item" url="/pageSubs/orders/history?current=2">
           <image class="item-img" src="~@/static/common/icon_my_ywc.png" />
           <text class="u-m-t-12 u-font-24 u-line-34">已完成</text>
-        </view>
-        <view class="order-item">
+        </navigator>
+        <navigator class="order-item" url="/pageSubs/orders/history?current=3">
           <image class="item-img" src="~@/static/common/icon_my_yqx.png" />
           <text class="u-m-t-12 u-font-24 u-line-34">已取消</text>
-        </view>
+        </navigator>
       </view>
     </view>
     <view class="my-use-area iph-bg-fff">

src/uni.scss

@@ -2,6 +2,8 @@
 
 $u-type-primary: #1677FF;
 
+$u-border-color: #eeeeee;
+
 $iph-type-light: #7CB1FB;
 
 $iph-base-text: #212121;