过期时间计算

pagesA/vip/index.vue

@@ -9,6 +9,9 @@
       </view>
       <view class="nameBox">
 				<view class="name font-weight-bold font-size-16">{{ baseInfo?.name || userInfo?.phone }}</view>
+				<view class="vipInfo font-size-14">
+          14天双周卡将于{{ remaining }}后过期
+        </view>
       </view>
     </view>
     <view style="height: 20rpx; background-color: #f8f8fa;"></view>
@@ -31,7 +34,7 @@
 
 <script setup>
 import { userStore } from '@/store/user'
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import { getUserAvatar } from '@/utils/avatar'
 
 
@@ -39,6 +42,13 @@ const useUserStore = userStore()
 const baseInfo = computed(() => useUserStore?.baseInfo)
 const userInfo = computed(() => useUserStore?.userInfo)
 
+const remaining = computed(() => {
+  if (!userInfo.value?.vipExpireDate) return '0'
+  const diffInMs =  (userInfo.value?.vipExpireDate-0) - new Date().getTime()
+  const day = diffInMs / (1000 * 60 * 60 * 24)
+  return day < 1 ? '今天' : Math.floor(day) + '天'
+})
+
 const list = ref([
 	{	title: '简历模板',	path: '/pagesA/vip/template/index'	},					
 	{	title: '屏蔽企业',	path: '/pagesA/vip/blockEnt/index'	},			
@@ -81,10 +91,16 @@ const handleToLink = (item) => {
     }
   }
   .nameBox {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
     margin-left: 30rpx;
     .name {
       color: #724d2b;
     }
+    .vipInfo {
+      color: #211000;
+    }
   }
 }