我的订单

src/apps/AppIntegralExchange/commodityDetails.vue

@@ -13,7 +13,7 @@
     <div class="exchange">
       <div class="owner_integral">积分余额:438</div>
       <!-- 积分不足、缺货 -->
-      <div class="exchange_btn">立即兑换</div>
+      <div class="exchange_btn" @click="toOrderForm">立即兑换</div>
     </div>
   </div>
 </template>
@@ -30,8 +30,10 @@ export default {
     document.title = '商品详情'
   },
   methods: {
-    
-  },
+    toOrderForm() {
+      uni.navigateTo({url: './orderForm'})
+    }
+  }, 
 }
 </script>
 

src/apps/AppIntegralExchange/myOder.vue

@@ -1,26 +1,226 @@
 <template>
-  <div class="myOder"></div>
+  <div class="myOder">
+
+    <div class="tab-select">
+      <div class="item" :class="tabIndex == index? 'active': ''" v-for="(item,index) in tabList" :key="index" @click="toCheck(index)">{{ item }}<span></span></div>
+    </div>
+
+    <div class="card-List" v-if="orderList.length">
+      <div class="item" v-for="(item,index) in orderList" :key="index">
+        <div @click="$linkTo(`./detail?id=${item.id}`)">
+          <div class="title">
+            <div>{{ item.createTime }}</div>
+            <div :style="{color: item.orderStatus==0? '#FF883C':item.orderStatus==1? '#42D784': '#999999'}">{{ item.orderStatus | format }}</div>
+          </div>
+          <div class="list" v-for="(e,indexs) in item.merchandiseList" :key="indexs">
+            <div class="list-item">
+              <div class="picture">
+                <img :src="JSON.parse(e.merchandisePhoto)[0].url" alt="">
+              </div>
+              <div class="info">
+                <div class="name">{{ e.merchandiseName }}</div>
+                <div class="info-num">
+                  <div class="num">x<span>{{ e.merchandiseNumber }}</span></div>
+                  <div class="integral"><span>{{ e.merchandiseNumber * e.costIntegral }}</span>积分</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="btn" v-if="item.orderStatus == 0">
+          <div class="cancel" @click="cancelBtn(item.id)">取消订单</div>
+          <div class="confirm" @click="confirmBtn(item.id)">核销码：</div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'myOder',
+  name: "myOder",
   data() {
     return {
-
+      tabIndex: 0,
+      tabList: ['全部','待收货','已完成','已取消'],
+      orderList: [],
+      current: 1,
     }
   },
-  onShow() {
+  onLoad() {
+    // this.getOrderList()
     document.title = '我的订单'
   },
   methods: {
-
+    toCheck(index) {
+      this.orderList = []
+      this.current = 1
+      this.tabIndex = index
+      // this.getOrderList()
+    },
+    getOrderList() {
+      this.$instance.post('/appvillagerintegralshoporder/listForWx',null,{
+        params: {
+          current: this.current,
+          orderStatus: this.tabIndex == 0 ? '' : this.tabIndex == 1? 0 : this.tabIndex ==2? 1:2
+        }
+      }).then(res=>{
+        if(res?.data) {
+          this.orderList = this.current == 1? res.data.records : [...this.orderList,...res.data.records]
+        }
+      })
+    },
+    cancelBtn(id) {
+      this.$dialog.confirm({ content: '确定要关闭该订单吗？' }).then(() => {
+        this.$instance.post('/appvillagerintegralshoporder/overOrderForWx',null,{
+          params: {
+            orderId: id
+          }
+        }).then(res=>{
+          if(res.code==0) {
+            this.$u.toast('关闭成功')
+            this.$store.commit('getUserInfo')
+            setTimeout(() => {
+              this.getOrderList()
+            },600)
+          }
+        })
+      })
+    },
+  },
+  filters: {
+    format(num) {
+      if(num == 0) {
+        return '预约中'
+      }else if(num == 1) {
+        return '已完成'
+      }else if(num == 2) {
+        return '已关闭'
+      }
+    },
+  },
+  onReachBottom() {
+    this.current ++
+    this.getOrderList() 
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .myOder {
+  .tab-select {
+    width: 100%;
+    height: 96px;
+    line-height: 96px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #3975C6;
+    display: flex;
+    z-index: 999;
+    .item {
+      flex: 1;
+      text-align: center;
+      font-size: 30px;
+      color: #FFFFFF;
+    }
+    .active {
+      font-size: 32px;
+      font-weight: 600;
+      position: relative;
+      span {
+        width: 50px;
+        height: 6px;
+        background: #FFFFFF;
+        position: absolute;
+        left: 50%;
+        bottom: 14px;
+        margin-left: -24px;
+      }
+    }
+  }
+  .card-List {
+    font-size: 28px;
+    box-sizing: border-box;
+    padding: 128px 32px 32px 32px;
+    .item {
+      width: 100%;
+      background: #FFFFFF;
+      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.04);
+      border-radius: 16px;
+      margin-bottom: 16px;
+      .title {
+        display: flex;
+        justify-content: space-between;
+        height: 104px;
+        line-height: 104px;
+        padding: 0 32px;
+        border-bottom: 1px solid #EEEEEE;
+      }
+      .list {
+        padding: 0 32px;
+        .list-item {
+          display: flex;
+          padding: 32px 0;
+          border-bottom: 1px solid #EEEEEE;
+          .picture {
+            width: 176px;
+            height: 176px;
+            margin-right: 16px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .info {
+            width: calc(100% - 192px);
+            .name {}
+            .info-num {
+              margin-top: 24px;
+              display: flex;
+              justify-content: space-between;
+              .num {
+                color: #999999;
+              }
+              .integral {
+                color: #FF6900;
+                span {
+                  font-size: 44px;
+                  font-weight: 600;
+                }
+              }
+            }
+          }
+        }
+      }
+      .btn {
+        height: 128px;
+        display: flex;
+        justify-content: flex-end;
+        padding: 0 20px;
+        div {
+          margin-top: 32px;
+          width: 176px;
+          height: 64px;
+          line-height: 64px;
+          border: 1px solid #DDDDDD;
+          border-radius: 52px;
+          text-align: center;
+        }
+        div:first-child {
+          margin-right: 32px;
+        }
+        div:last-child {
+          color: #FFFFFF;
+          background: linear-gradient(90deg, #FFA044 0%, #FF8436 100%);
+        }
+      }
+    }
+  }
 
+  ::v-deep .emptyWrap .emptyImg {
+    margin-top: 100px;
+  }
 }
 </style>

src/apps/AppIntegralExchange/orderForm.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="orderForm">
+    <div class="card">
 
+    </div>
   </div>
 </template>
 
@@ -15,7 +17,7 @@ export default {
   onShow() {
     document.title = '提交订单'
   },
-  methods() {
+  methods: {
 
   }
 }
@@ -23,6 +25,11 @@ export default {
 
 <style lang="scss" scoped>
 .orderForm {
-
+  padding: 32px;
+  box-sizing: border-box;
+  .card {
+    background: #FFFFFF;
+    border-radius: 32px;
+  }
 }
 </style>