接口返回完善

src/pages/be-vip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import SButton from "@/components/SButton.vue";
@@ -16,6 +16,9 @@ const { updateUser } = store;
 
 const selectedVIP = ref(0);
 const showModal = ref(false);
+const lastDate = ref(user.value.expiredAt);
+const refreshing = ref(false);
+const timer = ref(null);
 
 const onPay = async () => {
   if (!user.value.id) {
@@ -35,12 +38,19 @@ const onPay = async () => {
           paySign: params.paySign, // 签名
           signType: "RSA", // 签名类型，默认为RSA
           async success(res) {
-            const result = await getHomeData();
-            if (result.user) updateUser(result.user);
             uni.showToast({
               title: "支付成功",
               icon: "none",
             });
+            timer.value = setInterval(async () => {
+              refreshing.value = true;
+              const result = await getHomeData();
+              if (result.user.expiredAt > lastDate.value) {
+                refreshing.value = false;
+                if (result.user) updateUser(result.user);
+                clearInterval(timer.value);
+              }
+            }, 1000);
           },
           fail(res) {
             console.log("pay error", res);
@@ -56,6 +66,10 @@ const toOrderPage = () => {
     url: "/pages/orders",
   });
 };
+
+onUnmounted(() => {
+  if (timer.value) clearInterval(timer.value);
+});
 </script>
 
 <template>
@@ -66,9 +80,18 @@ const toOrderPage = () => {
           <Avatar :src="user.avatar" :size="35" />
           <text class="truncate">{{ user.nickName }}</text>
         </view>
-        <text v-if="user.expiredAt">
-          {{ formatTimestamp(user.expiredAt) }}到期
-        </text>
+        <block v-if="refreshing">
+          <image
+            src="../static/btn-loading.png"
+            mode="widthFix"
+            class="loading"
+          />
+        </block>
+        <block v-else>
+          <text v-if="user.expiredAt">
+            {{ formatTimestamp(user.expiredAt) }}到期
+          </text>
+        </block>
       </view>
       <view
         class="container"
@@ -229,4 +252,12 @@ const toOrderPage = () => {
 .my-orders > view > image {
   width: 15px;
 }
+.loading {
+  width: 20px;
+  height: 20px;
+  margin-left: 10px;
+  transition: all 0.3s ease;
+  background-blend-mode: darken;
+  animation: rotate 2s linear infinite;
+}
 </style>