From 7ea79c42bb3adcf7d92ab26b9b954372bff86d77 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Mon, 27 Mar 2023 14:56:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pidu/AppRedemptionPoints/myOrderList.vue  | 215 +++++++++++++++++-
 1 file changed, 209 insertions(+), 6 deletions(-)

diff --git a/src/project/pidu/AppRedemptionPoints/myOrderList.vue b/src/project/pidu/AppRedemptionPoints/myOrderList.vue
index bff7791c..4a5b5589 100644
--- a/src/project/pidu/AppRedemptionPoints/myOrderList.vue
+++ b/src/project/pidu/AppRedemptionPoints/myOrderList.vue
@@ -1,9 +1,38 @@
 <template>
   <div class="myOrderList">
     <AiTopFixed>
-
+      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="90" font-size="28" bg-color="#fff" inactive-color="#8891A1" 
+          active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs>
     </AiTopFixed>
-    
+    <div class="list-content">
+      <div class="item">
+        <div class="time-flex">
+          <p>2022-05-25 17:45</p>
+          <div>已完成</div>
+        </div>
+        <div class="flex">
+          <img src="https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png" alt="">
+          <div class="type type0"><p>京东低价商品</p></div>
+          <div class="flex-right">
+            <p>无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)无染(wuro)本色抽纸无染无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)无染(wuro)</p>
+            <div class="num-flex">
+              <h3>50积分<span>+2元</span></h3>
+              <div>x 1</div>
+            </div>
+          </div>
+        </div>
+        <p class="tips"><span>兑换成功后，点击「去购买」前往京东低价购买</span></p>
+        <p class="remark">备注：不太好用不太好用不太好用不太好用不太好用不太好用不太好用不太好用不太好用不太好用不太好用</p>
+        <div class="flex-btn">
+          <p>核销码:<span>58555</span></p>
+          <div class="btn">取消订单</div>
+        </div>
+        <div class="flex-btn">
+          <p></p>
+          <div class="btn confirm">去购买</div>
+        </div>
+      </div>
+    </div>
     <!-- <AiEmpty v-else></AiEmpty> -->
   </div>
 </template>
@@ -16,7 +45,15 @@ export default {
   appName: '我的订单',
   data() {
     return {
-      
+      tabList: [{name: '全部'}, {name: '待核销'}, {name: '已完成'}, {name: '已取消'}],
+      currentTabs: 0,
+      barStyle: {
+        'width': '20px',
+        'height': '3px',
+        'border-radius': '2px',
+        'bottom': '3px',
+        'background': '#2D7DFF'
+      },
     }
   },
   computed: {
@@ -29,7 +66,10 @@ export default {
     document.title = '我的订单'
   },
   methods: {
-    
+    changeTab(index) {
+      this.currentTabs = index
+      // this.getListInit()
+    },
   },
   onReachBottom() {
     // this.current = this.current + 1
@@ -42,8 +82,171 @@ export default {
 .myOrderList {
   min-height: 100%;
   ::v-deep .AiTopFixed .content {
-   background: #F2F2F2 !important;
-   padding: 24px 16px;
+    min-height: 0;
+    background: #fff !important;
+    padding: 0;
+  }
+  ::v-deep .AiTopFixed .fixed {
+    min-height: 0;
+  }
+  .list-content {
+    padding: 24px;
+    background-color: #F3F6F9;
+    .item {
+      width: 100%;
+      background: #FFF;
+      border-radius: 16px;
+      .time-flex {
+        padding: 0 32px;
+        line-height: 64px;
+        font-family: PingFangSC-Regular;
+        font-size: 12px;
+        color: #666;
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #ddd;
+        div {
+          color: #2D7DFF;
+        }
+      }
+      .flex {
+        padding: 32px 32px 0;
+        display: flex;
+        position: relative;
+        margin-bottom: 20px;
+        img {
+          width: 166px;
+          height: 166px;
+          border-radius: 16px;
+          margin-right: 20px;
+        }
+        .type {
+          position: absolute;
+          left: 32px;
+          bottom: 0;
+          border-bottom-left-radius: 16px;
+          border-bottom-right-radius: 16px;
+          width: 166px;
+          text-align: center;
+          line-height: 34px;
+          font-family: PingFangSC-Regular;
+          font-size: 18px;
+          color: #FFF;
+          p {
+            scale: 0.9;
+          }
+        }
+        .type0 {
+          background-color: #E64E39;
+        }
+        .type1 {
+          background-color: #FF6900;
+        }
+        .flex-right {
+          width: calc(100% - 186px);
+          p {
+            word-break: break-all;
+            font-family: PingFangSC-Regular;
+            font-size: 26px;
+            color: #222;
+            line-height: 34px;
+            text-overflow: -o-ellipsis-lastline;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;					
+            -webkit-box-orient: vertical;
+            margin-bottom: 50px;
+          }
+          .num-flex {
+            display: flex;
+            h3 {
+              width: calc(100% - 100px);
+              font-family: PingFangSC-SNaNpxibold;
+              font-weight: 600;
+              font-size: 34px;
+              color: #FF6900;
+              line-height: 48px;
+              span {
+                display: inline-block;
+                font-size: 34px;
+                color: #4181FF;
+                margin-left: 8px;
+              }
+            }
+            div {
+              width: 100px;
+              text-align: right;
+              font-family: PingFangSC-SNaNpxibold;
+              font-weight: 600;
+              font-size: 24px;
+              color: #222;
+              line-height: 48px;
+            }
+          }
+          
+        }
+      }
+      .tips {
+        display: inline-block;
+        padding: 12px;
+        line-height: 36px;
+        background: #F5FCF5;
+        border-radius: 16px;
+        font-family: PingFangSC-Regular;
+        font-size: 24px;
+        color: #3BBC37;
+        margin: 0 32px 16px 32px;
+        span {
+          display: inline-block;
+          scale: 0.9;
+        }
+      }
+      .remark {
+        font-family: PingFangSC-Regular;
+        font-size: 24px;
+        color: #666;
+        line-height: 34px;
+        word-break: break-all;
+        margin: 0 32px 24px 32px;
+      }
+      .flex-btn {
+        padding: 0 32px 32px;
+        display: flex;
+        justify-content: space-between;
+        p {
+          height: 56px;
+          line-height: 56px;
+          font-family: PingFangSC-Regular;
+          font-size: 24px;
+          color: #666;
+          span {
+            display: inline-block;
+            font-family: PingFangSC-SNaNpxibold;
+            font-weight: 600;
+            font-size: 28px;
+            color: #2D7DFF;
+            margin-left: 8px;
+          }
+        }
+        .btn {
+          width: 136px;
+          text-align: center;
+          line-height: 54px;
+          border: 1px solid #CCC;
+          border-radius: 44px;
+          font-family: PingFangSC-Regular;
+          font-size: 22px;
+          color: #666;
+        }
+        .confirm {
+          border: 1px solid #2D7DFF;
+          background-color: #2D7DFF;
+          color: #fff;
+        }
+      }
+    }
   }