提交订单

src/project/pidu/AppRedemptionPoints/successOrder.vue

@@ -1,10 +1,21 @@
 <template>
   <div class="successOrder">
-    <AiTopFixed>
-
-    </AiTopFixed>
-    
-    <!-- <AiEmpty v-else></AiEmpty> -->
+    <img src="./img/success.png" alt="">
+    <div v-if="isOrder">
+      <h3>提交成功</h3>
+      <p>提交「免费兑」订单成功，扣减 <span>50积分</span></p>
+      <div class="btn-flex">
+        <div>返回</div>
+        <div>查看订单</div>
+      </div>
+    </div>
+    <div v-else>
+      <h3>兑换成功</h3>
+      <p>提交「京东低价商品」订单成功，扣减 <span>50积分</span>
+        可点击下方按钮前往京东商城进行低价购买
+      </p>
+      <div class="btn">去购买</div>
+    </div>
   </div>
 </template>
 
@@ -16,7 +27,7 @@ export default {
   appName: '提交订单',
   data() {
     return {
-      
+      isOrder: false
     }
   },
   computed: {
@@ -39,13 +50,70 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+uni-page-body{
+  background-color: #fff;
+}
 .successOrder {
-  min-height: 100%;
-  ::v-deep .AiTopFixed .content {
-   background: #F2F2F2 !important;
-   padding: 24px 16px;
+  padding: 0 60px;
+  text-align: center;
+  img {
+    width: 240px;
+    height: 232px;
+    margin: 168px auto 32px auto;
+  }
+  h3 {
+    font-family: PingFangSC-SNaNpxibold;
+    font-weight: 600;
+    font-size: 40px;
+    color: #333;
+    line-height: 56px;
+    margin-bottom: 16px;
+  }
+  p {
+    color: #333;
+    font-size: 30px;
+    font-family: PingFangSC;
+    line-height: 50px;
+    text-align: center;
+    margin-bottom: 80px;
+    span {
+      color: #FF6900;
+    }
+  }
+  .btn {
+    width: 410px;
+    height: 88px;
+    line-height: 88px;
+    background: #2D7DFF;
+    border-radius: 44px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    font-size: 34px;
+    color: #FFF;
+    text-align: center;
+    margin: 0 auto;
+  }
+  .btn-flex {
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    font-size: 34px;
+    margin: 0 auto;
+    div {
+      display: inline-block;
+      width: 272px;
+      text-align: center;
+      height: 88px;
+      line-height: 88px;
+      border-radius: 44px;
+      color: #FFF;
+      background-color: #2D7DFF;
+    }
+    div:nth-of-type(1) {
+      background-color: #E5EFFF;
+      color: #2D7DFF;
+      margin-right: 26px;
+    }
   }
-
   
 }
 </style>