订单详情

src/components/iphFixedBottom.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-29 18:07:15
  * @LastEditors: dream
- * @LastEditTime: 2021-03-30 09:58:15
+ * @LastEditTime: 2021-04-08 16:32:04
 -->
 <template>
 	<view class="iph-fixed-bottom-main">
@@ -33,6 +33,7 @@ export default {
 
 <style lang="scss" scoped>
 .iph-fixed-bottom-main {
+  z-index: 99;
   position: fixed;
   bottom: 0;
   padding-bottom: env(safe-area-inset-bottom);

src/pageSubs/orders/components/iphOrderCard.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-04-08 14:52:47
  * @LastEditors: dream
- * @LastEditTime: 2021-04-08 15:41:10
+ * @LastEditTime: 2021-04-08 16:40:29
 -->
 <template>
   <view class="iph-order-card-main iph-bg-fff">
@@ -38,7 +38,12 @@
       </view>
     </view>
     <view class="u-flex u-row-right u-p-t-26">
-      <button class="to-pay-btn">去支付</button>
+      <blocK v-if="value.status === 1">
+        <button class="to-pay-btn">去支付</button>
+      </blocK>
+      <block v-if="value.status === 3">
+        <button class="after-sale-btn">申请售后</button>
+      </block>
     </view>
   </view>
 </template>
@@ -106,5 +111,9 @@ export default {
       border-radius: 48px;
     }
   }
+  .after-sale-btn {
+    @extend .to-pay-btn;
+    padding: 6px 24px;
+  }
 }
 </style>

src/pageSubs/orders/components/iphOrderGoodCard.vue

@@ -4,49 +4,64 @@
  * @Author: dream
  * @Date: 2021-03-31 09:42:58
  * @LastEditors: dream
- * @LastEditTime: 2021-04-01 17:12:03
+ * @LastEditTime: 2021-04-08 16:24:51
 -->
 <template>
   <view class="order-good-card iph-bg-fff">
     <view class="u-flex u-p-t-32 u-p-l-32 u-p-r-32">
       <view class="icon-shop iph-icon-shop"></view>
-      <view class="u-m-l-8 u-flex-1 u-font-28 u-line-40 text-weight-500">云东仓</view>
+      <view class="u-m-l-8 u-flex-1 u-font-28 u-line-40 text-weight-500">{{value.warehouseName}}</view>
     </view>
-    <view class="good-card u-border-bottom u-flex">
-      <image class="good-image" :src="detail.img" mode="aspectFill" />
-      <view class="good-info u-m-l-16 u-flex-1">
-        <view class="u-line-2">{{detail.name}}</view>
-        <view class="good-info-spce u-m-t-8 u-font-24 u-line-34">{{detail.spce}}</view>
-        <view class="u-flex-1 u-flex u-col-bottom">
-          <text class="u-m-b-2 u-font-22 u-line-32 bold price-color">¥</text>
-          <text class="u-m-l-2 u-font-30 u-line-42 bold price-color">{{detail.salesPrice}}</text>
-          <text class="u-flex-1 u-text-right">x{{detail.num}}</text>
+    <block v-for="(item, index) in value.goodList" :key="index">
+      <view class="good-card u-border-bottom u-flex">
+        <image class="good-image" :src="item.img" mode="aspectFill" />
+        <view class="good-info u-m-l-16 u-flex-1">
+          <view class="u-line-2">{{item.name}}</view>
+          <view class="good-info-spce u-m-t-8 u-font-24 u-line-34">{{item.spce}}</view>
+          <view class="u-flex-1 u-flex u-col-bottom">
+            <text class="u-m-b-2 u-font-22 u-line-32 bold price-color">¥</text>
+            <text class="u-m-l-2 u-font-30 u-line-42 bold price-color">{{item.salesPrice | priceFilter}}</text>
+            <text class="u-flex-1 u-text-right">x{{item.num}}</text>
+          </view>
         </view>
       </view>
-    </view>
-    <view class="warehouse-delivery">
-      <view class="u-flex" @click="changeDelivery">
-        <view class="u-flex-1">配送</view>
-        <view class="u-m-r-8">配送方式</view>
-        <view class="enter-icon iph-icon-enter"></view>
+    </block>
+    <block v-if="showType === 1">
+      <view class="warehouse-delivery">
+        <view class="u-flex" @click="changeDelivery">
+          <view class="u-flex-1">配送</view>
+          <view class="u-m-r-8">配送方式</view>
+          <view class="enter-icon iph-icon-enter"></view>
+        </view>
+        <view class="u-m-t-4 u-text-right">云东仓运费金额¥{{value.warehouseFeePrice | priceFilter}}</view>
       </view>
-      <view class="u-m-t-4 u-text-right">云东仓运费金额¥200</view>
-    </view>
+    </block>
+    <block v-if="showType === 2">
+      <view class="warehouse-delivery">
+        <view class="u-flex u-row-between">
+          <view>商品金额</view>
+          <view>¥{{value.totalPrice | priceFilter}}</view>
+        </view>
+        <view class="u-m-t-32 u-flex u-row-between">
+          <view>运费</view>
+          <view>¥{{value.feePrice | priceFilter}}</view>
+        </view>
+      </view>
+    </block>
   </view>
 </template>
 
 <script>
 export default {
   name: 'orderGoodCard',
-  data () {
-    return {
-      detail: {
-        img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
-        name: '华硕天选',
-        spce: '一件',
-        salesPrice: 468,
-        num: 1
-      }
+  props: {
+    showType: {
+      type: Number,
+      default: 1
+    },
+    value: {
+      type: Object,
+      default: () => {}
     }
   },
   methods: {

src/pageSubs/orders/detail.vue

@@ -4,29 +4,156 @@
  * @Author: dream
  * @Date: 2021-03-26 14:32:52
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 14:33:17
+ * @LastEditTime: 2021-04-08 16:36:57
 -->
 <template>
-	<view>Orders Detail</view>
+	<view class="order-detail-main" :style="{ paddingBottom: `${pagePaddingBottom}px`}">
+    <view class="head-area"><text class="status-title">待支付</text></view>
+    <view class="delivery-list">
+      <block v-for="(item, index) in deliveryList" :key="index">
+        <view class="card u-m-t-16">
+          <iph-order-good-card :showType="2" :value="item" />
+        </view>
+      </block>
+    </view>
+    <view class="order-info iph-bg-fff">
+      <view class="u-flex u-row-between">
+        <view>订单号：</view>
+        <view>38742738239932</view>
+      </view>
+      <view class="u-m-t-32 u-flex u-row-between">
+        <view>商品总数：</view>
+        <view>共5项商品</view>
+      </view>
+      <view class="u-m-t-32 u-flex u-row-between">
+        <view>商品合计金额：</view>
+        <view>¥3214</view>
+      </view>
+      <view class="u-m-t-32 u-flex u-row-between">
+        <view>总配送费：</view>
+        <view>¥200</view>
+      </view>
+    </view>
+    <iph-fixed-bottom @getHeight="getFooterHeight">
+      <view class="footer u-flex iph-bg-fff">
+        <view class="u-flex-1">
+          <text class="u-m-b-8 u-font-32 u-line-44 text-weight-500 price-color">¥</text>
+          <text class="total-price price-color">1607</text>
+        </view>
+        <button class="pay-btn">立即支付</button>
+      </view>
+    </iph-fixed-bottom>
+  </view>
 </template>
 
 <script>
+import IphFixedBottom from '@/components/iphFixedBottom.vue'
+import IphOrderGoodCard from './components/iphOrderGoodCard.vue'
 export default {
+  components: { IphOrderGoodCard, IphFixedBottom },
   name: 'orderDetail',
   data () {
     return {
-
+      pagePaddingBottom: 0,
+      deliveryList: [{
+        warehouseName: '云东仓',
+        totalPrice: 140700,
+        feePrice: 20000,
+        goodList: [{
+          img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
+          name: '华硕天选',
+          spce: '一件',
+          salesPrice: 46800,
+          num: 1
+        }]
+      }, {
+        warehouseName: '浙江仓',
+        totalPrice: 140700,
+        feePrice: 20000,
+        goodList: [{
+          img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
+          name: '华硕天选',
+          spce: '一件',
+          salesPrice: 46900,
+          num: 1
+        }, {
+          img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
+          name: '两排文案两排文案两排文案两排文案两排文案两排文案两排文案两排文案',
+          spce: '1件/1000套',
+          salesPrice: 46900,
+          num: 1
+        }]
+      }]
     }
   },
   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
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.order-detail-main {
+  .head-area {
+    padding: 0 24px;
+    height: 282px;
+    background: linear-gradient(180deg, $u-type-primary 0%, $iph-type-light 55%, $iph-base-bg 100%);
+    .status-title {
+      font-size: 56px;
+      font-weight: 500;
+      line-height: 80px;
+      color: $iph-standby-text;
+    }
+  }
+  .delivery-list {
+    padding: 0 24px;
+    margin-top: -200px;
+    .card {
+      border-radius: 12px;
+      overflow: hidden;
+    }
+  }
+  .order-info {
+    margin: 24px 24px 0;
+    padding: 32px;
+    border-radius: 12px;
+  }
+  .footer {
+    padding: 24px 32px;
+    .total-price {
+      font-size: 52px;
+      line-height: 74px;
+      font-weight: 600;
+    }
+    .pay-btn {
+      padding: 16px 56px;
+      line-height: 40px;
+      color: $iph-standby-text;
+      font-size: 28px;
+      font-weight: 500;
+      border-radius: 38px;
+      background-color: $u-type-primary;
+    }
+  }
+}
 </style>

src/pageSubs/orders/history.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-26 15:16:21
  * @LastEditors: dream
- * @LastEditTime: 2021-04-08 15:50:39
+ * @LastEditTime: 2021-04-08 16:41:11
 -->
 <template>
 	<view class="order-history-main">
@@ -56,7 +56,7 @@ export default {
       }],
       orderList: [{
         orderId: '337JD32i82492332',
-        status: 1,
+        status: 3,
         totalFeePrice: 20000,
         totalGoodNum: 5,
         totalPrice: 364000,

src/pageSubs/orders/submit.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-26 13:59:15
  * @LastEditors: dream
- * @LastEditTime: 2021-04-01 17:31:12
+ * @LastEditTime: 2021-04-08 16:25:52
 -->
 <template>
 	<view class="submit-order-main" :style="{ paddingBottom: `${pagePaddingBottom}px`}">
@@ -28,12 +28,9 @@
         <view class="detail-address">浙江省杭州市滨江区滨康路619号德邦电子3幢509慕玛披萨</view>
       </view>
     </block>
-    <block>
+    <block v-for="(item, index) in deliveryList" :key="index">
       <view class="u-m-t-16">
-        <iph-order-good-card />
-      </view>
-      <view class="u-m-t-16">
-        <iph-order-good-card />
+        <iph-order-good-card :showType="1" />
       </view>
     </block>
     <view class="total-area iph-bg-fff">
@@ -60,14 +57,25 @@
 
 <script>
 import IphFixedBottom from '@/components/iphFixedBottom.vue'
-import iphOrderGoodCard from './components/iphOrderGoodCard.vue'
+import IphOrderGoodCard from './components/iphOrderGoodCard.vue'
 export default {
-  components: { iphOrderGoodCard, IphFixedBottom },
+  components: { IphOrderGoodCard, IphFixedBottom },
   name: 'orderSubmit',
   data () {
     return {
       pagePaddingBottom: 0,
-      isNoAddress: false
+      isNoAddress: false,
+      deliveryList: [{
+        warehouseName: '云东仓',
+        warehouseFeePrice: 20000,
+        goodList: [{
+          img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=288400877,2749955263&fm=26&gp=0.jpg',
+          name: '华硕天选',
+          spce: '一件',
+          salesPrice: 46800,
+          num: 1
+        }]
+      }]
     }
   },
   onLoad () {

src/pages.json

@@ -62,6 +62,8 @@
 		}, {
       "path": "detail",
       "style": {
+        "navigationBarBackgroundColor": "#1677FF",
+        "navigationBarTextStyle": "white",
         "navigationBarTitleText": "订单详情"
 			}
 		}, {

src/pages/goods/goods.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-03-25 15:55:15
  * @LastEditors: dream
- * @LastEditTime: 2021-03-31 14:10:13
+ * @LastEditTime: 2021-04-08 16:47:59
 -->
 <template>
 	<view class="goods-main">
@@ -91,6 +91,7 @@ export default {
     }
   },
   onReady () {
+    this.$store.dispatch('systemStore/getSystemInfo')
     const view = uni.createSelectorQuery().in(this).select('.goods-search-area')
     view.fields({
       size: true
@@ -110,6 +111,7 @@ export default {
 
 <style lang="scss" scoped>
 .goods-main {
+  height: 100vh;
   .goods-search-area {
     padding: 16px 24px 36px;
     background-color: $iph-standby-bg;