确认订单

src/pageSubs/orders/components/iphOrderGoodCard.vue

@@ -0,0 +1,98 @@
+<!--
+ * @Descripttion: 订单货品卡片
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-03-31 09:42:58
+ * @LastEditors: dream
+ * @LastEditTime: 2021-03-31 10:33:58
+-->
+<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>
+    <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">趣包筷子四件套</view>
+        <view class="good-info-spce u-m-t-8 u-font-24 u-line-34">1件/1000套</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">469</text>
+          <text class="u-flex-1 u-text-right">x1</text>
+        </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>
+      </view>
+      <view class="u-m-t-4 u-text-right">云东仓运费金额¥200</view>
+    </view>
+  </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'
+      }
+    }
+  },
+  methods: {
+    changeDelivery () {
+      uni.showModal({
+        title: '配送方式说明',
+        content: '100元-200元区间收费（当前运费200元）',
+        showCancel: false,
+        confirmText: '我知道了',
+        confirmColor: '#1677FF',
+        success: (res) => {
+          if (res.confirm) {
+            console.log('我知道了')
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.order-good-card {
+  .icon-shop {
+    width: 28px;
+    height: 28px;
+  }
+  .good-card {
+    margin: 0 32px;
+    padding: 32px 0;
+    .good-image {
+      width: 172px;
+      height: 172px;
+      border-radius: 8px;
+    }
+    .good-info {
+      display: flex;
+      flex-direction: column;
+      height: 172px;
+      .good-info-spce {
+        color: $iph-desc-text;
+      }
+    }
+  }
+  .warehouse-delivery {
+    padding: 32px;
+    .enter-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+</style>

src/pageSubs/orders/result.vue

@@ -4,10 +4,17 @@
  * @Author: dream
  * @Date: 2021-03-26 14:00:59
  * @LastEditors: dream
- * @LastEditTime: 2021-03-26 15:14:15
+ * @LastEditTime: 2021-03-31 11:04:42
 -->
 <template>
-	<view>Orders Submit Result</view>
+	<view class="order-submit-res">
+    <view class="main-area iph-bg-fff">
+      <view class="res-icon iph-icon-res-success"></view>
+      <view class="res-text u-m-t-40 u-font-36 u-line-50">支付成功</view>
+      <view class="res-desc u-m-t-16">请耐心等候您的订单</view>
+    </view>
+    <button class="back-btn">返回</button>
+  </view>
 </template>
 
 <script>
@@ -18,9 +25,6 @@ export default {
 
     }
   },
-  onLoad () {
-
-  },
   methods: {
 
   }
@@ -28,5 +32,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.order-submit-res {
+  .main-area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 64px 32px;
+    .res-text {
+      color: $iph-prompt-text;
+    }
+    .res-desc {
+      color: $iph-desc-text;
+    }
+  }
+  .res-icon {
+    width: 128px;
+    height: 128px;
+  }
+  .back-btn {
+    margin-top: 48px;
+    padding: 22px 0;
+    width: 686px;
+    height: 88px;
+    line-height: 44px;
+    font-size: 32px;
+    text-align: center;
+    color: $iph-standby-text;
+    background-color: $u-type-primary;
+  }
+}
 </style>

src/pageSubs/orders/submit.vue

@@ -4,10 +4,10 @@
  * @Author: dream
  * @Date: 2021-03-26 13:59:15
  * @LastEditors: dream
- * @LastEditTime: 2021-03-30 16:59:08
+ * @LastEditTime: 2021-03-31 10:52:20
 -->
 <template>
-	<view class="submit-order-main">
+	<view class="submit-order-main" :style="{ paddingBottom: `${pagePaddingBottom}px`}">
     <block v-if="isNoAddress">
       <view class="order-no-address">
         <view class="u-flex no-address iph-bg-fff">
@@ -28,14 +28,45 @@
         <view class="detail-address">浙江省杭州市滨江区滨康路619号德邦电子3幢509慕玛披萨</view>
       </view>
     </block>
+    <block>
+      <view class="u-m-t-16">
+        <iph-order-good-card />
+      </view>
+      <view class="u-m-t-16">
+        <iph-order-good-card />
+      </view>
+    </block>
+    <view class="total-area iph-bg-fff">
+      <view class="u-flex">
+        <view class="u-flex-1">商品金额</view>
+        <view>￥1407</view>
+      </view>
+      <view class="u-flex u-m-t-32">
+        <view class="u-flex-1">运费</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: 'orderSubmit',
   data () {
     return {
+      pagePaddingBottom: 0,
       isNoAddress: false
     }
   },
@@ -43,7 +74,9 @@ export default {
 
   },
   methods: {
-
+    getFooterHeight (val) {
+      this.pagePaddingBottom = val + 8
+    }
   }
 }
 </script>
@@ -85,5 +118,26 @@ export default {
       color: $iph-empty-text;
     }
   }
+  .total-area {
+    margin-top: 8px;
+    padding: 32px;
+  }
+  .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/uni.scss

@@ -37,12 +37,18 @@ $iph-btn-disabel-bg: #999999;
   font-size: 44px;
 }
 
+.u-line-34 {
+  line-height: 34px;
+}
 .u-line-36 {
   line-height: 36px;
 }
 .u-line-40 {
   line-height: 40px;
 }
+.u-line-42 {
+  line-height: 42px;
+}
 .u-line-44 {
   line-height: 44px;
 }
@@ -57,6 +63,10 @@ $iph-btn-disabel-bg: #999999;
   color: $u-type-primary;
 }
 
+.price-color {
+  color: $iph-main-price-text;
+}
+
 .iph-bg-fff {
   background-color: #fff;
 }
@@ -91,3 +101,8 @@ $iph-btn-disabel-bg: #999999;
   background: url('~@/static/common/icon_enter.png') no-repeat center center;
   background-size: contain;
 }
+
+.iph-icon-res-success {
+  background: url('~@/static/common/icon_zt_right.png') no-repeat center center;
+  background-size: contain;
+}