diff --git a/api/pay.js b/api/pay.js
new file mode 100644
index 0000000..8634a22
--- /dev/null
+++ b/api/pay.js
@@ -0,0 +1,9 @@
+import { request } from "@/utils/request.js";
+
+export const createOrder = async (data) => {
+  return request({
+    url: "/api/pay/wechat/order/create",
+    method: "POST",
+    data,
+  });
+};
diff --git a/pages.json b/pages.json
index ab74f0e..21ad45b 100644
--- a/pages.json
+++ b/pages.json
@@ -49,6 +49,14 @@
         "enablePullDownRefresh": false
       }
     },
+    {
+      "path": "pages/mine/vip",
+      "style": {
+        "navigationBarTitleText": "会员中心",
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
+    },
     {
       "path": "pages/mine/mine",
       "style": {
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index dfb73ee..0cd6353 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -40,6 +40,26 @@
           <view class="card-arrow">›</view>
         </view>
 
+        <!-- VIP Banner -->
+        <view class="vip-banner" @tap="navTo('vip')">
+          <view class="vip-left">
+            <view class="vip-icon-box">
+              <uni-icons type="vip-filled" size="32" color="#5d4037" />
+            </view>
+            <view class="vip-content">
+              <view class="vip-title-row">
+                <text class="vip-title">祥瑞会员中心</text>
+                <view class="diamond-tag">DIAMOND</view>
+              </view>
+              <text class="vip-subtitle">开通永久会员解锁全部特权</text>
+            </view>
+          </view>
+          <view class="vip-right">
+            <text class="open-text">立即开通</text>
+            <text class="arrow">›</text>
+          </view>
+        </view>
+
         <!-- My Creations -->
         <view class="section-title">我的创作</view>
         <view class="menu-group">
@@ -202,6 +222,12 @@ const navTo = (page) => {
     });
     return;
   }
+  if (page === "vip") {
+    uni.navigateTo({
+      url: "/pages/mine/vip",
+    });
+    return;
+  }
   uni.showToast({ title: "功能开发中", icon: "none" });
 };
 </script>
@@ -325,6 +351,84 @@ const navTo = (page) => {
   margin-left: 10rpx;
 }
 
+/* VIP Banner */
+.vip-banner {
+  background: linear-gradient(135deg, #2e2424 0%, #1a1616 100%);
+  border-radius: 30rpx;
+  padding: 30rpx 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 40rpx;
+  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
+}
+
+.vip-left {
+  display: flex;
+  align-items: center;
+}
+
+.vip-icon-box {
+  width: 80rpx;
+  height: 80rpx;
+  background: #fceea9;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 24rpx;
+  border: 4rpx solid #bfa46f;
+}
+
+.vip-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.vip-title-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8rpx;
+}
+
+.vip-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fceea9;
+  margin-right: 12rpx;
+}
+
+.diamond-tag {
+  background: rgba(252, 238, 169, 0.15);
+  color: #fceea9;
+  font-size: 18rpx;
+  padding: 2rpx 8rpx;
+  border-radius: 6rpx;
+  border: 1px solid rgba(252, 238, 169, 0.4);
+}
+
+.vip-subtitle {
+  font-size: 22rpx;
+  color: rgba(252, 238, 169, 0.6);
+}
+
+.vip-right {
+  display: flex;
+  align-items: center;
+}
+
+.open-text {
+  font-size: 26rpx;
+  color: #fceea9;
+  margin-right: 4rpx;
+  font-weight: 500;
+}
+
+.vip-banner .arrow {
+  color: #fceea9;
+  font-size: 32rpx;
+}
+
 /* Section Title */
 .section-title {
   font-size: 26rpx;
diff --git a/pages/mine/vip.vue b/pages/mine/vip.vue
new file mode 100644
index 0000000..cf78d1e
--- /dev/null
+++ b/pages/mine/vip.vue
@@ -0,0 +1,533 @@
+<template>
+  <view class="vip-page" :style="{ paddingTop: navBarHeight + 'px' }">
+    <!-- Custom Navbar -->
+    <view
+      class="nav-bar"
+      :style="{
+        height: navBarHeight + 'px',
+        paddingTop: statusBarHeight + 'px',
+      }"
+    >
+      <view class="nav-left" @click="goBack">
+        <uni-icons type="left" size="24" color="#000" />
+      </view>
+      <text class="nav-title">会员中心</text>
+    </view>
+
+    <!-- Content -->
+    <view class="content">
+      <!-- User Info Card -->
+      <view class="user-card">
+        <view class="avatar-box">
+          <image
+            class="avatar"
+            :src="
+              userInfo.avatarUrl ||
+              'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
+            "
+            mode="aspectFill"
+          />
+          <view class="fire-badge">
+            <uni-icons type="fire-filled" size="14" color="#fff" />
+          </view>
+        </view>
+        <view class="user-info">
+          <view class="name-row">
+            <text class="username">{{ userInfo.nickName || "微信用户" }}</text>
+            <view class="vip-tag">VIP 祥瑞会员</view>
+          </view>
+          <text class="expiry-date">2026-02-15 到期</text>
+        </view>
+      </view>
+
+      <!-- Plans -->
+      <view class="section-title">选择会员方案</view>
+      <view class="plans-grid">
+        <view
+          v-for="(plan, index) in plans"
+          :key="index"
+          class="plan-card"
+          :class="{ active: selectedPlanIndex === index }"
+          @click="selectPlan(index)"
+        >
+          <view v-if="plan.badge" class="plan-badge" :class="plan.badgeType">
+            {{ plan.badge }}
+          </view>
+          <text class="plan-duration">{{ plan.duration }}</text>
+          <view class="plan-price">
+            <text class="currency">¥</text>
+            <text class="amount">{{ plan.price }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- Benefits -->
+      <view class="benefits-card">
+        <view class="card-header">
+          <uni-icons type="vip-filled" size="20" color="#ff3b30" />
+          <text class="card-title">会员专属权益</text>
+        </view>
+        <view class="benefits-grid">
+          <view
+            v-for="(benefit, index) in benefits"
+            :key="index"
+            class="benefit-item"
+          >
+            <view class="benefit-icon-box" :style="{ background: benefit.bg }">
+              <uni-icons
+                :type="benefit.icon"
+                size="24"
+                :color="benefit.color"
+              />
+            </view>
+            <text class="benefit-name">{{ benefit.name }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- Purchase Notes -->
+      <view class="notes-section">
+        <text class="notes-title">购买说明</text>
+        <view class="notes-list">
+          <view class="note-item" v-for="(note, index) in notes" :key="index">
+            <text class="dot">•</text>
+            <text class="note-text">{{ note }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- Bottom Action Bar -->
+    <view class="bottom-bar safe-area-bottom">
+      <button class="buy-btn" @click="handlePurchase">
+        <text>立即开通</text>
+        <uni-icons
+          type="arrowright"
+          size="18"
+          color="#fff"
+          style="margin-left: 4rpx"
+        />
+      </button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import {
+  getBavBarHeight,
+  getStatusBarHeight as getStatus,
+} from "@/utils/system";
+import { useUserStore } from "@/stores/user";
+import { createOrder } from "@/api/pay.js";
+
+const navBarHeight = getBavBarHeight();
+const statusBarHeight = getStatus();
+const userStore = useUserStore();
+const userInfo = userStore.userInfo;
+
+const selectedPlanIndex = ref(1);
+
+const plans = [
+  { duration: "一个月", price: "8.8", total: 880 },
+  {
+    duration: "一个季度",
+    price: "18",
+    badge: "热销",
+    badgeType: "hot",
+    total: 18000,
+  },
+  { duration: "一年", price: "48", total: 48000 },
+  {
+    duration: "永久会员",
+    price: "88",
+    badge: "最划算",
+    badgeType: "best",
+    total: 88000,
+  },
+];
+
+const benefits = [
+  { name: "高级模板", icon: "star-filled", color: "#ff3b30", bg: "#fff0f0" },
+  { name: "无限制下载", icon: "image-filled", color: "#ff6b00", bg: "#fff7e6" },
+  { name: "马年头像框", icon: "medal-filled", color: "#bfa46f", bg: "#fffbe6" },
+  { name: "高速渲染", icon: "upload-filled", color: "#ff3b30", bg: "#fff0f0" },
+  {
+    name: "数据永久保存",
+    icon: "paperplane-filled",
+    color: "#409eff",
+    bg: "#ecf5ff",
+  },
+  { name: "1对1服务", icon: "headphones", color: "#9053fa", bg: "#f5f0ff" },
+];
+
+const notes = [
+  "会员服务为虚拟产品，支付后立即生效，不支持退款。",
+  "会员权益在有效期内全平台通用。",
+  "如有疑问，请通过“我的-使用说明”联系客服处理。",
+  "最终解释权归 2026 新春助手团队所有。",
+];
+
+const goBack = () => {
+  uni.navigateBack();
+};
+
+const selectPlan = (index) => {
+  selectedPlanIndex.value = index;
+};
+
+const handlePurchase = async () => {
+  const plan = plans[selectedPlanIndex.value || 0];
+  console.log("plan", plan);
+  const orderRes = await createOrder({
+    description: `新春会员购买 ${plan.duration} ${plan.price}`,
+    total: plan.total,
+  });
+  if (orderRes.payParams) {
+    wx.requestPayment({
+      ...orderRes.payParams,
+      success(res) {
+        // 等后端回调，不要直接认为支付成功
+        console.log(11111, res);
+      },
+      fail(res) {
+        console.log(22222, res);
+      },
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.vip-page {
+  min-height: 100vh;
+  background-color: #f8f8f8;
+  box-sizing: border-box;
+  padding-bottom: 200rpx; // Space for bottom bar
+}
+
+.nav-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+  .nav-left {
+    position: absolute;
+    left: 30rpx;
+    bottom: 0;
+    height: 44px; // Standard title bar height
+    display: flex;
+    align-items: center;
+  }
+
+  .nav-title {
+    font-size: 34rpx;
+    font-weight: 600;
+    color: #000;
+  }
+}
+
+.content {
+  padding: 30rpx;
+}
+
+/* User Card */
+.user-card {
+  background: #fff;
+  border-radius: 30rpx;
+  padding: 30rpx;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 10rpx 40rpx rgba(255, 59, 48, 0.08);
+  margin-bottom: 40rpx;
+  position: relative;
+  overflow: hidden;
+
+  // Decorative gradient background hint
+  &::before {
+    content: "";
+    position: absolute;
+    top: -50%;
+    right: -20%;
+    width: 300rpx;
+    height: 300rpx;
+    background: radial-gradient(
+      circle,
+      rgba(255, 59, 48, 0.1) 0%,
+      transparent 70%
+    );
+    border-radius: 50%;
+  }
+}
+
+.avatar-box {
+  position: relative;
+  margin-right: 24rpx;
+}
+
+.avatar {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  border: 4rpx solid #fff;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.fire-badge {
+  position: absolute;
+  top: -6rpx;
+  right: -6rpx;
+  background: #ff3b30;
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2rpx solid #fff;
+}
+
+.user-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.name-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8rpx;
+}
+
+.username {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-right: 16rpx;
+}
+
+.vip-tag {
+  background: rgba(255, 59, 48, 0.1);
+  color: #ff3b30;
+  font-size: 20rpx;
+  padding: 2rpx 10rpx;
+  border-radius: 20rpx;
+  font-weight: 500;
+}
+
+.expiry-date {
+  font-size: 24rpx;
+  color: #999;
+}
+
+/* Plans Grid */
+.section-title {
+  font-size: 28rpx;
+  color: #666;
+  font-weight: 500;
+  margin-bottom: 24rpx;
+}
+
+.plans-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 40rpx;
+}
+
+.plan-card {
+  width: 330rpx; // (750 - 60 - 30 gap) / 2
+  height: 180rpx;
+  background: #fff;
+  border-radius: 24rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 30rpx;
+  position: relative;
+  border: 2rpx solid transparent;
+  transition: all 0.2s;
+
+  &.active {
+    border-color: #ff3b30;
+    background: #fff5f5;
+
+    .plan-price {
+      color: #ff3b30;
+    }
+  }
+}
+
+.plan-badge {
+  position: absolute;
+  top: -16rpx;
+  right: -10rpx;
+  font-size: 20rpx;
+  color: #fff;
+  padding: 4rpx 12rpx;
+  border-radius: 12rpx 0 12rpx 0;
+  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+
+  &.hot {
+    background: #ff3b30;
+  }
+
+  &.best {
+    background: #e6a23c;
+  }
+}
+
+.plan-duration {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 12rpx;
+}
+
+.plan-price {
+  color: #333;
+  font-weight: bold;
+  display: flex;
+  align-items: baseline;
+}
+
+.currency {
+  font-size: 28rpx;
+  margin-right: 4rpx;
+}
+
+.amount {
+  font-size: 48rpx;
+}
+
+/* Benefits Card */
+.benefits-card {
+  background: #fff;
+  border-radius: 30rpx;
+  padding: 30rpx;
+  margin-bottom: 40rpx;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30rpx;
+}
+
+.card-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+  margin-left: 12rpx;
+}
+
+.benefits-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.benefit-item {
+  width: 33.33%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 30rpx;
+
+  &:nth-last-child(-n + 3) {
+    margin-bottom: 0;
+  }
+}
+
+.benefit-icon-box {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16rpx;
+}
+
+.benefit-name {
+  font-size: 24rpx;
+  color: #666;
+}
+
+/* Notes */
+.notes-section {
+  padding: 0 10rpx;
+  margin-bottom: 40rpx;
+}
+
+.notes-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #666;
+  margin-bottom: 16rpx;
+  display: block;
+}
+
+.notes-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.note-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 12rpx;
+}
+
+.dot {
+  color: #999;
+  margin-right: 10rpx;
+  font-size: 24rpx;
+  line-height: 1.4;
+}
+
+.note-text {
+  flex: 1;
+  font-size: 24rpx;
+  color: #999;
+  line-height: 1.4;
+}
+
+/* Bottom Bar */
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #fff;
+  padding: 20rpx 30rpx;
+  box-sizing: border-box;
+  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
+  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  z-index: 99;
+}
+
+.buy-btn {
+  background: linear-gradient(90deg, #ff3b30 0%, #ff1a1a 100%);
+  color: #fff;
+  border-radius: 50rpx;
+  height: 90rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  font-weight: bold;
+  border: none;
+
+  &:active {
+    opacity: 0.9;
+  }
+}
+</style>