diff --git a/pages/mine/vip.vue b/pages/mine/vip.vue
index 744a811..96f0387 100644
--- a/pages/mine/vip.vue
+++ b/pages/mine/vip.vue
@@ -34,9 +34,13 @@
         <view class="user-info">
           <view class="name-row">
             <text class="username">{{ userInfo.nickName || "微信用户" }}</text>
-            <view class="vip-tag">VIP 祥瑞会员</view>
+            <view class="vip-tag" v-if="userInfo.isVip">VIP 祥瑞会员</view>
+            <view class="vip-tag gray" v-else>普通用户</view>
           </view>
-          <text class="expiry-date">2026-02-15 到期</text>
+          <text class="expiry-date" v-if="userInfo.isVip">
+            {{ userInfo.vipExpireAt }} 到期
+          </text>
+          <text class="expiry-date" v-else>开通会员解锁专属权益</text>
         </view>
       </view>
 
@@ -114,6 +118,7 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
+import { storeToRefs } from "pinia";
 
 import {
   getBavBarHeight,
@@ -125,7 +130,7 @@ import { createOrder, getVipPlan } from "@/api/pay.js";
 const navBarHeight = getBavBarHeight();
 const statusBarHeight = getStatus();
 const userStore = useUserStore();
-const userInfo = userStore.userInfo;
+const { userInfo } = storeToRefs(userStore);
 
 const selectedPlanIndex = ref(1);
 
@@ -339,6 +344,11 @@ const handlePurchase = async () => {
   padding: 2rpx 10rpx;
   border-radius: 20rpx;
   font-weight: 500;
+
+  &.gray {
+    background: rgba(0, 0, 0, 0.05);
+    color: #666;
+  }
 }
 
 .expiry-date {