我的订单列表数据过滤

src/pages/my/buyCourses.vue

 <template>
   <div class="main-container" v-show="loaded">
     <ul v-if="list.length">
-      <li class="order-item" v-for="(item, index) in list" :key="index">
+      <li class="order-item" v-for="(item, index) in dataList" :key="index">
         <div class="order-info">
           <div class="no-c"></div>
           <img :src="item.product_image" />
@@ -28,8 +28,10 @@
         <div class="close" @click="isPopShow = false">×</div>
         <div class="tit">恭喜您，课程已购买成功！</div>
         <div class="txt">请添加客服微信，有任何问题可随时沟通客服。</div>
-        <img src="../../assets/images/pay/pay-izq.png" alt="">
-        <a href="https://mp.weixin.qq.com/s/fwDqI1SFrk_bAyUrbLOvhg"><div class="btns">添加客服微信</div></a>
+        <img src="../../assets/images/pay/pay-izq.png" alt />
+        <a href="https://mp.weixin.qq.com/s/fwDqI1SFrk_bAyUrbLOvhg">
+          <div class="btns">添加客服微信</div>
+        </a>
         <!-- <img @click="imagePreview" src="https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg" alt=""> -->
       </div>
     </div>
@@ -50,6 +52,21 @@ export default {
       goFlag: true
     }
   },
+  computed: {
+    isIos() {
+      return this.$store.state.isIos
+    },
+    isWeapp() {
+      return this.$store.state.isWeapp
+    },
+    // ios小程序里过滤未支付的订单
+    dataList() {
+      if (this.isIos && this.isWeapp) {
+        return this.list.filter(item => item.status !== '-1')
+      }
+      return this.list
+    }
+  },
   mounted() {
     this.getMyOrder()
   },
@@ -181,33 +198,33 @@ export default {
     }
   }
 }
-.succ-pop{
+.succ-pop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0,0,0,0.5);
-  .pop{
+  background: rgba(0, 0, 0, 0.5);
+  .pop {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
-    width:5.9rem;
-    height:6.98rem;
-    background:rgba(255,255,255,1);
-    border-radius:.12rem;
-    .tit{
+    width: 5.9rem;
+    height: 6.98rem;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 0.12rem;
+    .tit {
       line-height: 1.1rem;
       text-align: center;
-      font-size: .3rem;
+      font-size: 0.3rem;
       color: #222;
       font-weight: bold;
     }
-    .txt{
-      width:5.1rem;
-      font-size: .3rem;
-      color:rgba(34,34,34,1);
+    .txt {
+      width: 5.1rem;
+      font-size: 0.3rem;
+      color: rgba(34, 34, 34, 1);
       margin: 0 auto;
     }
     // img{
@@ -216,28 +233,28 @@ export default {
     //   margin: 0.4rem auto;
     //   display: block;
     // }
-    img{
+    img {
       width: 3.16rem;
       height: 3rem;
       margin: 0.6rem auto 0.45rem auto;
       display: block;
     }
-    .btns{
+    .btns {
       width: 4.5rem;
       height: 0.7rem;
-      background: #C62245;
-      border-radius: .12rem;
+      background: #c62245;
+      border-radius: 0.12rem;
       margin: 0 auto;
       text-align: center;
       line-height: 0.7rem;
-      font-size: .3rem;
+      font-size: 0.3rem;
       color: #fff;
     }
-    .close{
+    .close {
       position: absolute;
-      top: -.8rem;
+      top: -0.8rem;
       right: 0;
-      font-size: .6rem;
+      font-size: 0.6rem;
       color: #fff;
     }
   }