下啦刷新

src/views/coupon-center/index.vue

@@ -25,20 +25,35 @@
       >
       </CommonNavbar>
       <div class="page-content">
-        <van-list v-if="couponList.length" class="list" enable-flex scroll-y>
-          <coupo-item
-            v-for="(item, index) in couponList"
-            :key="index"
-            class="item"
-            :coupon-detail="item"
-            :has-tips="hasTips"
-            :has-stock="false"
-            @goUse="chooseCoupon"
-          />
-        </van-list>
-        <div v-else>
-          <empty />
-        </div>
+        <van-pull-refresh
+          style="height: 100%"
+          v-model="refreshing"
+          @refresh="onRefresh"
+        >
+          <van-list
+            :immediate-check="false"
+            v-if="couponList.length"
+            class="list"
+            enable-flex
+            scroll-y
+            v-model="loading"
+            :finished="finished"
+            @load="getSearchCoupons"
+          >
+            <coupo-item
+              v-for="(item, index) in couponList"
+              :key="index"
+              class="item"
+              :coupon-detail="item"
+              :has-tips="hasTips"
+              :has-stock="false"
+              @goUse="chooseCoupon"
+            />
+          </van-list>
+          <div v-else>
+            <empty />
+          </div>
+        </van-pull-refresh>
       </div>
       <coupon-tips :visible.sync="show" @close="close" />
     </div>
@@ -77,6 +92,9 @@ export default {
       navTitle: "领券中心",
       isFixNavbar: true,
       isInMergeDetail: false,
+      loading: false,
+      refreshing: false,
+      finished: false,
     };
   },
   watch: {
@@ -142,6 +160,11 @@ export default {
   },
   methods: {
     ...mapActions(["setUserInfo"]),
+    onRefresh() {
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      this.getSearchCoupons();
+    },
     //获取用户信息
     getUserInfo() {
       rocNative.getUserInfo({
@@ -149,9 +172,12 @@ export default {
       });
     },
     getSearchCoupons() {
+      this.loading = true;
       this.POST(`trade/coupon/app/searchCoupons`, {}).then((res) => {
-        console.log(res);
         this.couponList = res.data.baseCouponModelList;
+        this.loading = false;
+        this.finished = true;
+        this.refreshing = false;
       });
     },
     chooseCoupon(item) {
@@ -167,7 +193,7 @@ export default {
             //   this.show = true;
             // } else {
             this.$toast("领取成功");
-            this.getSearchCoupons();
+            // this.getSearchCoupons();
             // }
           });
 
@@ -204,7 +230,7 @@ export default {
 }
 .page-wrapper {
   padding-top: 84px;
-  height: auto;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   /deep/ .nav-title {
@@ -215,6 +241,7 @@ export default {
     background-color: #fff;
   }
   .page-content {
+    height: 100%;
     padding: 10px 12px 24px;
   }
   .list {

src/views/coupon/components/coupon-item.vue

@@ -108,7 +108,9 @@
                 btnList[couponDetail.couponStatus].class,
               ]"
             >
-              <span>{{ btnList[couponDetail.couponStatus].label }}</span>
+              <span>{{
+                !hasDown ? btnList[couponDetail.couponStatus].label : "去使用"
+              }}</span>
               <div v-if="couponDetail.couponStatus == 1" class="arrow" />
             </div>
           </div>
@@ -203,6 +205,7 @@ export default {
           label: "已失效",
         },
       },
+      hasDown: false,
     };
   },
   computed: {
@@ -229,6 +232,10 @@ export default {
       this.$emit("update:showTips", !this.showTips);
     },
     goUse() {
+      console.log(this.$route);
+      if (this.$route.path == "/coupon-center") {
+        this.hasDown = true;
+      }
       this.$emit("goUse", this.couponDetail);
     },
   },

src/views/coupon/coupon-list.vue

@@ -23,19 +23,32 @@
             />
           </div>
         </CommonNavbar>
-        <van-list v-if="couponList.length" class="list">
-          <coupo-item
-            v-for="(item, index) in couponList"
-            :key="index"
-            class="item"
-            :coupon-detail="item"
-            :show-tips.sync="item.showTips"
-            @goUse="chooseCoupon"
-          />
-        </van-list>
-        <div v-else>
-          <empty />
-        </div>
+        <van-pull-refresh
+          style="height: 100%"
+          v-model="refreshing"
+          @refresh="onRefresh"
+        >
+          <van-list
+            :immediate-check="false"
+            v-if="couponList.length"
+            class="list"
+            v-model="loading"
+            :finished="finished"
+            @load="getMyCouponsList"
+          >
+            <coupo-item
+              v-for="(item, index) in couponList"
+              :key="index"
+              class="item"
+              :coupon-detail="item"
+              :show-tips.sync="item.showTips"
+              @goUse="chooseCoupon"
+            />
+          </van-list>
+          <div v-else>
+            <empty />
+          </div>
+        </van-pull-refresh>
       </div>
       <coupon-bottom />
     </div>
@@ -91,6 +104,9 @@ export default {
       currentIndex: 0,
       couponList: [],
       activeIndex: 0,
+      loading: false,
+      refreshing: false,
+      finished: false,
     };
   },
   computed: {
@@ -150,6 +166,11 @@ export default {
   },
   methods: {
     ...mapActions(["setUserInfo"]),
+    onRefresh() {
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      this.getMyCouponsList();
+    },
     //获取用户信息
     getUserInfo() {
       rocNative.getUserInfo({
@@ -157,6 +178,7 @@ export default {
       });
     },
     getMyCouponsList() {
+      this.loading = true;
       this.commonCheckToken(() => {
         this.GET(
           `trade/coupon/app/myCoupons?couponStatus=${
@@ -172,6 +194,9 @@ export default {
               this.couponList = JSON.parse(
                 JSON.stringify(data.baseCouponModelList)
               );
+              this.loading = false;
+              this.finished = true;
+              this.refreshing = false;
             });
           }
         });