diff --git a/apis/commonApi.js b/apis/commonApi.js
index 53aefec..8d93237 100644
--- a/apis/commonApi.js
+++ b/apis/commonApi.js
@@ -1,5 +1,6 @@
 import http from '../utils/http/index.js'
 import store from '@/store/index'
+import { PAY_URL } from '@/enums/index.js'
 let areaCache = null
 /**
  * 获取省市区街道
@@ -26,16 +27,28 @@ export function getArea(data = {}) {
 function syncStore(res) {
   if (res.enterpriseList && res.enterpriseList.length > 0) {
     let companyInfo = res.enterpriseList[0]
+    let vipExpireTime = companyInfo.vipExpireTime || null
+    let isVip = false
+    if (vipExpireTime) {
+      // 适配ios时间戳
+      vipExpireTime = vipExpireTime.replace(/-/g, '/')
+      let now = new Date().getTime()
+      if (now < new Date(vipExpireTime).getTime()) {
+        isVip = true
+      }
+    }
     store.commit('setCompanyInfo', {
       id: companyInfo.id,
       name: companyInfo.name,
-      fddEnterpriseStatus: companyInfo.fddEnterpriseStatus
+      fddEnterpriseStatus: companyInfo.fddEnterpriseStatus,
+      isVip: isVip,
+      vipExpireTime: vipExpireTime,
     })
     store.commit('setUserInfo', {
       name: companyInfo.employeeName,
       userId: res.userId,
       mobile: res.mobile,
-      avatar: null
+      avatar: null,
     })
   } else {
     if (res) {
@@ -43,7 +56,7 @@ function syncStore(res) {
         name: '',
         userId: res.userId,
         mobile: res.mobile,
-        avatar: null
+        avatar: null,
       })
     }
   }
@@ -61,15 +74,17 @@ export function getBaseInfo(data = {}, refresh = false) {
     if (!refresh && baseInfo) {
       resolve(baseInfo)
     } else {
-      http.get({ url: '/yyt-uec/get/base-info', data }, { hideLoading: true }).then((res) => {
-        if (res) {
-          baseInfo = res
-          syncStore(res)
-          resolve(res)
-        } else {
-          resolve(null)
-        }
-      })
+      http
+        .get({ url: '/yyt-uec/get/base-info', data }, { hideLoading: true })
+        .then((res) => {
+          if (res) {
+            baseInfo = res
+            syncStore(res)
+            resolve(res)
+          } else {
+            resolve(null)
+          }
+        })
     }
   })
 }
@@ -79,7 +94,12 @@ export function getBaseInfo(data = {}, refresh = false) {
  * @param {object} data 参数 enterpriseId
  */
 export function getVerifyUrl(data = {}) {
-  return http.post({ url: '/yyt-uec/get/fdd-enterprise-verify-url?enterpriseId=' + data.enterpriseId, data })
+  return http.post({
+    url:
+      '/yyt-uec/get/fdd-enterprise-verify-url?enterpriseId=' +
+      data.enterpriseId,
+    data,
+  })
 }
 
 /**
@@ -87,7 +107,12 @@ export function getVerifyUrl(data = {}) {
  * @param {object} data 参数 mallSupplierId
  */
 export function getGuaranteeContract(data = {}) {
-  return http.post({ url: '/yyt-uec/create/supplier/guarantee-contract?mallSupplierId=' + data.mallSupplierId, data })
+  return http.post({
+    url:
+      '/yyt-uec/create/supplier/guarantee-contract?mallSupplierId=' +
+      data.mallSupplierId,
+    data,
+  })
 }
 
 /**
@@ -95,7 +120,10 @@ export function getGuaranteeContract(data = {}) {
  * @param {object} data 参数 enterpriseId
  */
 export function getFsCredit(data = {}) {
-  return http.get({ url: '/yyt-uec/credit/get/enterprise-feisuan-credit', data })
+  return http.get({
+    url: '/yyt-uec/credit/get/enterprise-feisuan-credit',
+    data,
+  })
 }
 
 /**
@@ -113,7 +141,7 @@ export function getMonthCredit(data = {}) {
 export function transformFileToImg(data) {
   return http.get({
     url: '/document/get/enterprise-documents/file-image-base64',
-    data: data
+    data: data,
   })
 }
 
@@ -123,7 +151,7 @@ export function transformFileToImg(data) {
 export function getFeisuanUrl(data = {}) {
   return http.get({
     url: '/yyt-uec/feisuan/feisuan-apply-url.json',
-    data: data
+    data: data,
   })
 }
 
@@ -133,7 +161,7 @@ export function getFeisuanUrl(data = {}) {
 export function getLicenseOcr(data = {}) {
   return http.post({
     url: '/base-paper-trading/ocr/business-license',
-    data: data
+    data: data,
   })
 }
 
@@ -143,7 +171,7 @@ export function getLicenseOcr(data = {}) {
 export function getFrontIdCardOcr(data = {}) {
   return http.post({
     url: '/base-paper-trading/ocr/id-card/face',
-    data: data
+    data: data,
   })
 }
 
@@ -153,6 +181,32 @@ export function getFrontIdCardOcr(data = {}) {
 export function getBackIdCardOcr(data = {}) {
   return http.post({
     url: '/base-paper-trading/ocr/id-card/back',
-    data: data
+    data: data,
+  })
+}
+
+/**
+ * 纸盘商开通会员,创建订单
+ * @param {object} data
+ * @value {string} type
+ * @value {string} enterpriseId
+ */
+export function openVip(data = {}) {
+  return http.post({
+    url: `/yyt-uec/customer/apply/for/vip?type=${data.type}&enterpriseId=${data.enterpriseId}`,
+    data: data,
+  })
+}
+
+/**
+ * 纸盘商开通会员,真实支付
+ * @param {object} data
+ * @value {string} orderId
+ * @value {string} channelId
+ */
+export function openVipPay(data = {}) {
+  return http.post({
+    url: PAY_URL,
+    data: data,
   })
 }
diff --git a/common/css/reset.scss b/common/css/reset.scss
index 8aabfea..2178bac 100644
--- a/common/css/reset.scss
+++ b/common/css/reset.scss
@@ -24,6 +24,68 @@ form {
   display: block;
 }
 
+view,
+image,
+text {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.justify-start {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.justify-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.justify-evenly {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.justify-around {
+  display: flex;
+  justify-content: space-around;
+}
+
+.justify-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.items-start {
+  display: flex;
+  align-items: flex-start;
+}
+
+.items-center {
+  display: flex;
+  align-items: center;
+}
+
+.items-end {
+  display: flex;
+  align-items: flex-end;
+}
+
 cover-view {
   line-height: 1.5;
   white-space: normal;
@@ -45,6 +107,15 @@ button::after {
   clear: both;
   visibility: hidden;
 }
+// 两行省略号
+.u-line-2 {
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box; // 弹性伸缩盒
+  -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
+}
 
 .flex-row-start-start {
   display: flex;
diff --git a/enums/index.js b/enums/index.js
index 3e80d18..1c2d7db 100644
--- a/enums/index.js
+++ b/enums/index.js
@@ -3,6 +3,9 @@ const urlEnv = env === 'production' ? '' : `-${env}`
 
 export const XAPPID = '503258978847966404'
 
+// 统一支付接口
+export const PAY_URL = `https://api-client-psc${urlEnv}.qniao.cn/payment-settlement-center/pay`
+
 /**
  * 账号类型
  */
@@ -11,7 +14,7 @@ export const accountType = {
   PHONE: 2,
   EMAIL: 3,
   APPLEID: 4,
-  CUSTOM: 5
+  CUSTOM: 5,
 }
 
 /**
@@ -22,7 +25,7 @@ export const codePurpose = {
   RESET_LOGIN_PASSWORD: 2,
   RESET_PHONE: 3,
   BIND_BANK_CARD: 4,
-  RESET_CREDIT_PASSWORD: 5
+  RESET_CREDIT_PASSWORD: 5,
 }
 
 /**
@@ -30,7 +33,7 @@ export const codePurpose = {
  */
 export const verificationType = {
   PHONE: 1,
-  EMAIL: 2
+  EMAIL: 2,
 }
 /**
  * 法大大企业认证状态 1:未认证 2:认证中 3:已认证 4:认证失败
@@ -39,14 +42,14 @@ export const fddEnterpriseStatus = {
   UNCERTIFIED: 1,
   CERTIFIED_ING: 2,
   CERTIFIED_SUCCESS: 3,
-  CERTIFIED_FAIL: 4
+  CERTIFIED_FAIL: 4,
 }
 /**
  * 上传地址
  */
 export const uploadUrl = {
   image: `https://api-client-yyt${urlEnv}.qniao.cn/yyt-uec/file-uploading/upload/image`,
-  file: `https://api-client-yyt${urlEnv}.qniao.cn/yyt-uec/file-uploading/upload/file`
+  file: `https://api-client-yyt${urlEnv}.qniao.cn/yyt-uec/file-uploading/upload/file`,
 }
 /**
  * 结算周期：1：月结30（飞算1期），2：月结45，3：月结60（飞算2期），4：月结75，5：月结90（飞算3期）
@@ -54,24 +57,24 @@ export const uploadUrl = {
 export const settlementPeriodEnum = [
   {
     value: 1,
-    label: '月结30'
+    label: '月结30',
   },
   {
     value: 2,
-    label: '月结45'
+    label: '月结45',
   },
   {
     value: 3,
-    label: '月结60'
+    label: '月结60',
   },
   {
     value: 4,
-    label: '月结75'
+    label: '月结75',
   },
   {
     value: 5,
-    label: '月结90'
-  }
+    label: '月结90',
+  },
 ]
 /**
  * 结算周期：1：1期，2：2期，3：3期
@@ -79,16 +82,16 @@ export const settlementPeriodEnum = [
 export const fsSettlementPeriodEnum = [
   {
     value: 1,
-    label: '1期'
+    label: '1期',
   },
   {
     value: 2,
-    label: '2期'
+    label: '2期',
   },
   {
     value: 3,
-    label: '3期'
-  }
+    label: '3期',
+  },
 ]
 /**
  * 飞算结算方式： 1: 先息后本
@@ -96,8 +99,8 @@ export const fsSettlementPeriodEnum = [
 export const fsSettlementMethodEnum = [
   {
     value: 1,
-    label: '先息后本'
-  }
+    label: '先息后本',
+  },
 ]
 
 /**
@@ -107,7 +110,7 @@ export const fsAuditStatus = {
   WAIT_APPLY: 0,
   AUDITING: 1,
   PASS: 2,
-  REJECT: 3
+  REJECT: 3,
 }
 
 /**
@@ -119,7 +122,7 @@ export const orderStatusEnum = {
   WAIT_SUPPLIER_CONFIRM: 30204,
   ORDERED: 30101,
   FINISHED: 30104,
-  CANCELED: 30105
+  CANCELED: 30105,
 }
 
 /**
@@ -128,28 +131,28 @@ export const orderStatusEnum = {
 export const orderStatusArray = [
   {
     value: orderStatusEnum.ALL,
-    label: '全部'
+    label: '全部',
   },
   {
     value: orderStatusEnum.WAIT_CONFIRM,
-    label: '待确认'
+    label: '待确认',
   },
   {
     value: orderStatusEnum.WAIT_SUPPLIER_CONFIRM,
-    label: '待供应商确认'
+    label: '待供应商确认',
   },
   {
     value: orderStatusEnum.ORDERED,
-    label: '已下单'
+    label: '已下单',
   },
   {
     value: orderStatusEnum.FINISHED,
-    label: '已完成'
+    label: '已完成',
   },
   {
     value: orderStatusEnum.CANCELED,
-    label: '已取消'
-  }
+    label: '已取消',
+  },
 ]
 
 export const orderStatusMap = {
@@ -158,7 +161,7 @@ export const orderStatusMap = {
   [orderStatusEnum.WAIT_SUPPLIER_CONFIRM]: '待供应商确认',
   [orderStatusEnum.ORDERED]: '已下单',
   [orderStatusEnum.FINISHED]: '已完成',
-  [orderStatusEnum.CANCELED]: '已取消'
+  [orderStatusEnum.CANCELED]: '已取消',
 }
 
 /**
@@ -176,7 +179,7 @@ export const supplierOrderStatusEnum = {
   FINISHED: 30213,
   WAIT_CLIENT_REPAY: 30217,
   REPAYING: 30216,
-  CANCELED: 30212
+  CANCELED: 30212,
 }
 /**
  * 供应商订单状态 待客户确认订单/30202,待供应商确认订单/30205,待发货/30106,已发货/30107 已发货在H5客户端显示 待收货/30107 ,待客户借款/30207,支付中/30208,待客户支付/30214,付款失败/30211,已完成/30213,待客户还款/30217,已取消/30212,还款中/30216
@@ -193,7 +196,7 @@ export const supplierOrderStatusMap = {
   [supplierOrderStatusEnum.FINISHED]: '已完成',
   [supplierOrderStatusEnum.WAIT_CLIENT_REPAY]: '待还款',
   [supplierOrderStatusEnum.REPAYING]: '还款中',
-  [supplierOrderStatusEnum.CANCELED]: '已取消'
+  [supplierOrderStatusEnum.CANCELED]: '已取消',
 }
 
 /**
@@ -202,11 +205,11 @@ export const supplierOrderStatusMap = {
 export const paymentMethodEnum = {
   WECHAT_PAY: 1,
   MONTHLY_PAY: 2,
-  FLY_PAY: 4
+  FLY_PAY: 4,
 }
 
 export const paymentMethodMap = {
   [paymentMethodEnum.WECHAT_PAY]: '微信支付',
   [paymentMethodEnum.MONTHLY_PAY]: '月结支付',
-  [paymentMethodEnum.FLY_PAY]: '飞算支付'
+  [paymentMethodEnum.FLY_PAY]: '飞算支付',
 }
diff --git a/pages.json b/pages.json
index 81b54d3..f3dce6c 100644
--- a/pages.json
+++ b/pages.json
@@ -163,6 +163,14 @@
         "navigationStyle": "custom",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/vip-center/index",
+      "style": {
+        "navigationBarTitleText": "会员中心",
+        "navigationStyle": "custom",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "globalStyle": {
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index d6a5746..2b8368d 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -8,22 +8,46 @@
             <image class="avatar" :src="curAvatar"></image>
             <view v-if="!hasLogin" @click="go2('login')">
               <view>
-                <text style="font-size: 40rpx; color: #fff; font-weight: 600">点击登录</text>
+                <text style="font-size: 40rpx; color: #fff; font-weight: 600"
+                  >点击登录</text
+                >
               </view>
               <view style="margin-top: 10rpx">
-                <text style="font-size: 26rpx; color: #fff; font-weight: 400">登录解锁更全功能</text>
+                <text style="font-size: 26rpx; color: #fff; font-weight: 400"
+                  >登录解锁更全功能</text
+                >
               </view>
             </view>
             <view v-else>
               <view class="user__name">
                 <text class="name">{{ userInfo.name }}</text>
-                <image v-if="userInfo.fddEnterpriseStatus === fddStatus.CERTIFIED_SUCCESS" class="image" src="/static/imgs/mine/certified-icon.png"></image>
-                <image v-else class="image" @click="certifyCompany()" src="/static/imgs/mine/non-certified-icon.png"></image>
+                <image
+                  v-if="
+                    userInfo.fddEnterpriseStatus === fddStatus.CERTIFIED_SUCCESS
+                  "
+                  class="image"
+                  src="/static/imgs/mine/certified-icon.png"
+                ></image>
+                <image
+                  v-else
+                  class="image"
+                  @click="certifyCompany()"
+                  src="/static/imgs/mine/non-certified-icon.png"
+                ></image>
               </view>
               <view style="margin-top: 10rpx">
                 <text
-                  style="font-size: 26rpx; color: #fff; font-weight: 400; word-break: break-all"
-                  @click="loginGo2(hasCompany ? 'enterprise-info-edit' : 'enterprise-info')"
+                  style="
+                    font-size: 26rpx;
+                    color: #fff;
+                    font-weight: 400;
+                    word-break: break-all;
+                  "
+                  @click="
+                    loginGo2(
+                      hasCompany ? 'enterprise-info-edit' : 'enterprise-info'
+                    )
+                  "
                 >
                   {{ hasCompany ? userInfo.companyName : '点击完善企业信息' }}
                 </text>
@@ -37,41 +61,115 @@
         </view>
       </view>
     </view>
-    <view class="card-area" style="margin-top: -94rpx; z-index: 10">
+    <view
+      class="justify-between section_3"
+      style="margin-top: -68rpx; z-index: 10"
+    >
+      <view class="flex-row group_6">
+        <image
+          src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16457830406308195340.png"
+          class="image_3"
+        />
+        <view class="group_7">
+          <text class="text_4">VIP</text>
+          <text class="text_5">会员</text>
+        </view>
+      </view>
+      <text class="text_6">{{
+        isVip ? `到期时间：${vipExpireTime}` : '立即开通会员 尊享特权'
+      }}</text>
+      <view class="flex-col items-center text-wrapper" @click="makeVip">
+        <text>{{ isVip ? '续费会员' : '开通会员' }}</text>
+      </view>
+    </view>
+    <view class="card-area">
       <view class="header">
-        <text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">我的订单</text>
-        <view class="item" @click="loginGo2('order-list', { status: orderStatusEnum.ALL })">
+        <text
+          style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600"
+          >我的订单</text
+        >
+        <view
+          class="item"
+          @click="loginGo2('order-list', { status: orderStatusEnum.ALL })"
+        >
           <text style="font-size: 26rpx; color: #000000">查看更多订单</text>
-          <uni-icons style="margin-left: 16rpx" type="right" size="10"></uni-icons>
+          <uni-icons
+            style="margin-left: 16rpx"
+            type="right"
+            size="10"
+          ></uni-icons>
         </view>
       </view>
       <view class="order-area">
-        <view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.ALL })">
-          <image class="icon" src="/static/imgs/mine/order-all-icon.png"></image>
+        <view
+          class="icon-item"
+          @click="loginGo2('order-list', { status: orderStatusEnum.ALL })"
+        >
+          <image
+            class="icon"
+            src="/static/imgs/mine/order-all-icon.png"
+          ></image>
           <text class="label">全部订单</text>
         </view>
-        <view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.WAIT_CONFIRM })">
-          <image class="icon" src="/static/imgs/mine/order-ready-icon.png"></image>
+        <view
+          class="icon-item"
+          @click="
+            loginGo2('order-list', { status: orderStatusEnum.WAIT_CONFIRM })
+          "
+        >
+          <image
+            class="icon"
+            src="/static/imgs/mine/order-ready-icon.png"
+          ></image>
           <text class="label">待确认</text>
         </view>
-        <view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.WAIT_SUPPLIER_CONFIRM })">
-          <image class="icon" src="/static/imgs/mine/order-supplier-ready-icon.png"></image>
+        <view
+          class="icon-item"
+          @click="
+            loginGo2('order-list', {
+              status: orderStatusEnum.WAIT_SUPPLIER_CONFIRM,
+            })
+          "
+        >
+          <image
+            class="icon"
+            src="/static/imgs/mine/order-supplier-ready-icon.png"
+          ></image>
           <text class="label">待供应商确认</text>
         </view>
-        <view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.ORDERED })">
-          <image class="icon" src="/static/imgs/mine/order-ing-icon.png"></image>
+        <view
+          class="icon-item"
+          @click="loginGo2('order-list', { status: orderStatusEnum.ORDERED })"
+        >
+          <image
+            class="icon"
+            src="/static/imgs/mine/order-ing-icon.png"
+          ></image>
           <text class="label">已下单</text>
         </view>
-        <view class="icon-item" @click="loginGo2('order-list', { status: orderStatusEnum.FINISHED })">
-          <image class="icon" src="/static/imgs/mine/order-done-icon.png"></image>
+        <view
+          class="icon-item"
+          @click="loginGo2('order-list', { status: orderStatusEnum.FINISHED })"
+        >
+          <image
+            class="icon"
+            src="/static/imgs/mine/order-done-icon.png"
+          ></image>
           <text class="label">已完成</text>
         </view>
       </view>
     </view>
-    <view class="card-area" v-if="fsInfo.status !== -1" style="border-radius: 16rpx">
+    <view
+      class="card-area"
+      v-if="fsInfo.status !== -1"
+      style="border-radius: 16rpx"
+    >
       <image
         class="poster"
-        v-if="fsInfo.status == fsAuditStatus.WAIT_APPLY || fsInfo.status == fsAuditStatus.REJECT"
+        v-if="
+          fsInfo.status == fsAuditStatus.WAIT_APPLY ||
+          fsInfo.status == fsAuditStatus.REJECT
+        "
         src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/fs-to-apply.png"
         @click="applyForFinance()"
       ></image>
@@ -82,32 +180,60 @@
       ></image>
       <view class="fs-card" v-if="fsInfo.status == fsAuditStatus.PASS">
         <view class="left">
-          <text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">可用采购额度</text>
+          <text
+            style="
+              font-size: 30rpx;
+              color: rgba(0, 0, 0, 0.85);
+              font-weight: 600;
+            "
+            >可用采购额度</text
+          >
           <!-- 下面这行不要换行 -->
           <!-- prettier-ignore -->
           <view style="margin:24rpx 0 16rpx;"><text class="pre">￥</text><text class="next">{{fsInfo.availableCreditLine}}</text></view>
-          <text style="font-size: 24rpx; color: rgba(0, 0, 0, 0.75)">{{ `已使用: ￥ ${fsInfo.usedCreditLine}` }}</text>
+          <text style="font-size: 24rpx; color: rgba(0, 0, 0, 0.75)">{{
+            `已使用: ￥ ${fsInfo.usedCreditLine}`
+          }}</text>
         </view>
         <view class="right">
           <text>{{ `授信额度: ${fsInfo.creditLine / 10000}万` }}</text>
-          <uni-icons style="margin-left: 16rpx" type="right" size="10"></uni-icons>
+          <uni-icons
+            style="margin-left: 16rpx"
+            type="right"
+            size="10"
+          ></uni-icons>
         </view>
       </view>
     </view>
     <view class="card-area">
       <view class="header">
-        <text style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600">其他工具</text>
+        <text
+          style="font-size: 30rpx; color: rgba(0, 0, 0, 0.85); font-weight: 600"
+          >其他工具</text
+        >
       </view>
       <view class="icon-area">
-        <view class="icon-item" style="margin-right: 64rpx" @click="loginGo2('account-management')">
+        <view
+          class="icon-item"
+          style="margin-right: 64rpx"
+          @click="loginGo2('account-management')"
+        >
           <image class="icon" src="/static/imgs/mine/account-icon.png"></image>
           <text class="label">账号管理</text>
         </view>
-        <view class="icon-item" style="margin-right: 64rpx" @click="loginGo2('enquiry-list')">
+        <view
+          class="icon-item"
+          style="margin-right: 64rpx"
+          @click="loginGo2('enquiry-list')"
+        >
           <image class="icon" src="/static/imgs/mine/enquiry-icon.png"></image>
           <text class="label">我的询价</text>
         </view>
-        <view class="icon-item" style="margin-right: 64rpx" @click="loginGo2('address-manage')">
+        <view
+          class="icon-item"
+          style="margin-right: 64rpx"
+          @click="loginGo2('address-manage')"
+        >
           <image class="icon" src="/static/imgs/mine/address-icon.png"></image>
           <text class="label">收货地址</text>
         </view>
@@ -119,8 +245,17 @@
 
 <script>
 import { exit, go2, loginGo2 } from '@/utils/hook.js'
-import { fddEnterpriseStatus, fsAuditStatus, orderStatusEnum } from '@/enums/index.js'
-import { getVerifyUrl, getFsCredit, getBaseInfo, getFeisuanUrl } from '@/apis/commonApi.js'
+import {
+  fddEnterpriseStatus,
+  fsAuditStatus,
+  orderStatusEnum,
+} from '@/enums/index.js'
+import {
+  getVerifyUrl,
+  getFsCredit,
+  getBaseInfo,
+  getFeisuanUrl,
+} from '@/apis/commonApi.js'
 
 export default {
   data() {
@@ -130,38 +265,59 @@ export default {
         status: -1, // 初始不存在
         availableCreditLine: 0,
         usedCreditLine: 0,
-        creditLine: 0
+        creditLine: 0,
       },
       fsAuditStatus: Object.freeze(fsAuditStatus),
-      orderStatusEnum: Object.freeze(orderStatusEnum)
+      orderStatusEnum: Object.freeze(orderStatusEnum),
     }
   },
   methods: {
+    makeVip() {
+      if (!this.hasLogin) {
+        go2('login')
+        return
+      }
+      if (this.hasCompany) {
+        loginGo2('vip-center')
+      } else {
+        uni.showToast({
+          title: '请先完善企业信息',
+          icon: 'none',
+        })
+      }
+    },
     loginGo2,
     logout() {
       exit()
     },
     // 企业法大大实名认证
     certifyCompany() {
-      if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED || this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.CERTIFIED_FAIL) {
-        getVerifyUrl({ enterpriseId: this.$store.state.companyInfo.id }).then((res) => {
-          if (res) {
-            // #ifdef APP-PLUS
-            go2('page-view', {
-              title: '实名认证',
-              url: encodeURIComponent(res)
-            })
-            // #endif
-            // #ifdef H5
-            window ? (window.location.href = res) : ''
-            // #endif
+      if (
+        this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED ||
+        this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.CERTIFIED_FAIL
+      ) {
+        getVerifyUrl({ enterpriseId: this.$store.state.companyInfo.id }).then(
+          (res) => {
+            if (res) {
+              // #ifdef APP-PLUS
+              go2('page-view', {
+                title: '实名认证',
+                url: encodeURIComponent(res),
+              })
+              // #endif
+              // #ifdef H5
+              window ? (window.location.href = res) : ''
+              // #endif
+            }
           }
-        })
+        )
       }
-      if (this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED) {
+      if (
+        this.userInfo.fddEnterpriseStatus === fddEnterpriseStatus.UNCERTIFIED
+      ) {
         uni.showToast({
           title: '认证中，请稍后~',
-          icon: 'none'
+          icon: 'none',
         })
       }
     },
@@ -172,7 +328,7 @@ export default {
           // #ifdef APP-PLUS
           go2('page-view', {
             title: '飞算申请',
-            url: encodeURIComponent(res)
+            url: encodeURIComponent(res),
           })
           // #endif
           // #ifdef H5
@@ -180,10 +336,19 @@ export default {
           // #endif
         }
       })
-    }
+    },
     // 获取纸盘商订单统计
   },
   computed: {
+    vipExpireTime() {
+      if (this.$store.state.companyInfo.vipExpireTime) {
+        return this.$store.state.companyInfo.vipExpireTime.substr(0, 10)
+      }
+      return ''
+    },
+    isVip() {
+      return this.$store.state.companyInfo.isVip == true
+    },
     hasLogin() {
       return this.$store.state.qnToken != ''
     },
@@ -202,19 +367,23 @@ export default {
       console.log('companyInfo:', this.$store.state.companyInfo)
       return {
         avatar: this.$store.state.userInfo.avatar || '',
-        name: this.$store.state.userInfo.name || this.$store.state.userInfo.mobile || '',
+        name:
+          this.$store.state.userInfo.name ||
+          this.$store.state.userInfo.mobile ||
+          '',
         companyName: this.$store.state.companyInfo.name || '',
-        fddEnterpriseStatus: this.$store.state.companyInfo.fddEnterpriseStatus || 1
+        fddEnterpriseStatus:
+          this.$store.state.companyInfo.fddEnterpriseStatus || 1,
       }
     },
     hasCompany() {
       return this.$store.state.companyInfo.id != null
-    }
+    },
   },
   onShow() {
     this.hasLogin &&
       getFsCredit({
-        enterpriseId: this.$store.state.companyInfo.id
+        enterpriseId: this.$store.state.companyInfo.id,
       }).then((res) => {
         if (res) {
           this.fsInfo = res
@@ -222,7 +391,7 @@ export default {
       })
     this.hasLogin && getBaseInfo({}, true)
     !this.hasLogin && (this.fsInfo.status = -1)
-  }
+  },
 }
 </script>
 
@@ -427,4 +596,68 @@ export default {
     font-weight: 500;
   }
 }
+.section_3 {
+  padding: 14rpx 32rpx;
+  background-image: linear-gradient(
+    270deg,
+    rgb(51, 51, 51) 0%,
+    rgb(51, 51, 51) 0%,
+    rgb(105, 108, 107) 98.91%,
+    rgb(105, 108, 107) 100%
+  );
+  border-radius: 10rpx 10rpx 0rpx 0px;
+  width: 750rpx;
+  .group_6 {
+    margin: 4rpx 0;
+    .image_3 {
+      margin: 5rpx 0;
+      width: 28rpx;
+      height: 26rpx;
+    }
+    .group_7 {
+      margin-left: 7rpx;
+      line-height: 36rpx;
+      white-space: nowrap;
+      height: 36rpx;
+      .text_4 {
+        color: rgb(219, 193, 137);
+        font-size: 26rpx;
+        font-weight: 500;
+        line-height: 37rpx;
+      }
+      .text_5 {
+        color: rgb(219, 193, 137);
+        font-size: 26rpx;
+        font-weight: 500;
+        line-height: 37rpx;
+      }
+    }
+  }
+  .text_6 {
+    margin: 6rpx 0;
+    color: rgb(231, 225, 190);
+    font-size: 24rpx;
+    font-weight: 600;
+    line-height: 33rpx;
+    white-space: nowrap;
+  }
+  .text-wrapper {
+    padding: 6rpx 0;
+    color: rgb(68, 48, 21);
+    font-size: 24rpx;
+    font-weight: 500;
+    line-height: 33rpx;
+    white-space: nowrap;
+    background-image: linear-gradient(
+      90deg,
+      rgb(244, 237, 206) 0%,
+      rgb(244, 237, 206) 1.2%,
+      rgb(243, 217, 158) 97.87%,
+      rgb(243, 217, 158) 100%
+    );
+    border-radius: 22rpx;
+    width: 128rpx;
+    height: 44rpx;
+  }
+}
 </style>
diff --git a/pages/vip-center/index.vue b/pages/vip-center/index.vue
new file mode 100644
index 0000000..87d3da3
--- /dev/null
+++ b/pages/vip-center/index.vue
@@ -0,0 +1,312 @@
+<template>
+  <view class="content">
+    <uni-nav-bar
+      left-icon="back"
+      @clickLeft="back"
+      statusBar
+      fixed
+      title="会员中心"
+    ></uni-nav-bar>
+    <view class="flex-col group_4">
+      <view class="flex-col">
+        <view class="flex-col section_1">
+          <text class="text_4">超级VIP</text>
+          <view class="flex-col group_6">
+            <text class="text_5">开通立即尊享</text>
+            <text class="text_6">{{ money }} 元/年</text>
+          </view>
+        </view>
+        <view class="flex-col group_7">
+          <view class="flex-col">
+            <text class="text_7">会员权益</text>
+            <view class="flex-row equal-division">
+              <view class="equal-division-item flex-col">
+                <view class="top-image-wrapper flex-col items-center">
+                  <image src="/static/imgs/vip-center/1.png" class="image_4" />
+                </view>
+                <text class="text_8">长账期</text>
+              </view>
+              <view class="equal-division-item flex-col group_10">
+                <view class="top-image-wrapper flex-col items-center">
+                  <image src="/static/imgs/vip-center/2.png" class="image_4" />
+                </view>
+                <text class="text_8">电子签约</text>
+              </view>
+              <view class="equal-division-item_1 flex-col">
+                <view class="flex-col items-center image-wrapper">
+                  <image src="/static/imgs/vip-center/3.png" class="image_7" />
+                </view>
+                <text class="text_11">智能合同</text>
+              </view>
+              <view class="equal-division-item_1 flex-col">
+                <view class="top-image-wrapper flex-col items-center">
+                  <image src="/static/imgs/vip-center/4.png" class="image_4" />
+                </view>
+                <text class="text_11">订单跟踪</text>
+              </view>
+            </view>
+          </view>
+          <view class="flex-col group_13">
+            <text class="text_14">服务说明</text>
+            <text class="text_15">1.纸掌柜会员支付支持微信支付。</text>
+            <text class="text_16">2.支付成功后会员权益立即生效。</text>
+            <text class="text_17"
+              >3.会员权益最终解释权归千鸟互联电商科技有限公司所有。</text
+            >
+          </view>
+        </view>
+      </view>
+      <view class="flex-col section_2">
+        <view class="flex-col items-center button" @click="payForVip">
+          <text>立即支付</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { back } from '@/utils/hook.js'
+import { openVip, openVipPay } from '@/apis/commonApi.js'
+export default {
+  data() {
+    return {
+      money: 2000,
+    }
+  },
+  methods: {
+    back,
+    payForVip() {
+      openVip({
+        enterpriseId: this.$store.state.companyInfo.id,
+        type: 1, // 年费
+      }).then((res) => {
+        if (res) {
+          openVipPay({
+            tradeOrderId: res.orderId,
+            channelId: res.channelId,
+          }).then((info) => {
+            if (info) {
+              console.log('info', info)
+              if (typeof WeixinJSBridge == 'undefined') {
+                uni.showToast({
+                  title: '请在微信内置浏览器中支付，或微信扫码进入本系统',
+                  icon: 'error',
+                })
+              } else {
+                WeixinJSBridge.invoke(
+                  'getBrandWCPayRequest',
+                  info.extra,
+                  function (res) {
+                    if (res.err_msg == 'get_brand_wcpay_request:ok') {
+                      uni.showToast({
+                        title: '支付成功',
+                        icon: 'success',
+                        duration: 2000,
+                      })
+                      setTimeout(() => {
+                        go2('mine', {}, true)
+                      }, 2000)
+                      // 使用以上方式判断前端返回,微信团队郑重提示：
+                      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+                    } else {
+                      uni.showToast({
+                        title: '支付失败',
+                        icon: 'error',
+                        duration: 2000,
+                      })
+                    }
+                  }
+                )
+              }
+            }
+          })
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 750rpx;
+}
+.group_4 {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  .section_2 {
+    margin-top: 329rpx;
+    padding: 28rpx 0 30rpx;
+    color: rgb(126, 86, 28);
+    font-size: 36rpx;
+    font-weight: 500;
+    line-height: 50rpx;
+    white-space: nowrap;
+    background-image: linear-gradient(
+      180deg,
+      rgb(43, 41, 44) 0%,
+      rgb(43, 41, 44) 0%,
+      rgb(60, 58, 52) 100%,
+      rgb(60, 58, 52) 100%
+    );
+    .button {
+      margin: 0 32rpx;
+      padding: 23rpx 0;
+      background-image: linear-gradient(
+        90deg,
+        rgb(255, 234, 208) 0%,
+        rgb(255, 234, 208) 0%,
+        rgb(255, 206, 144) 100%,
+        rgb(255, 206, 144) 100%
+      );
+      border-radius: 48rpx;
+    }
+  }
+  .section_1 {
+    padding: 86rpx 72rpx 63rpx;
+    background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/611dd17441a9be0011f45822/620ccb0962a7d90011fe5c8f/16456699151285633679.png');
+    background-position: 0px 0px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    .text_4 {
+      color: rgb(237, 221, 187);
+      font-size: 68rpx;
+      font-weight: 500;
+      line-height: 95rpx;
+      letter-spacing: 3rpx;
+      white-space: nowrap;
+    }
+    .group_6 {
+      margin-top: 110rpx;
+      .text_5 {
+        color: rgb(247, 251, 255);
+        font-size: 24rpx;
+        font-weight: 500;
+        line-height: 33rpx;
+        white-space: nowrap;
+      }
+      .text_6 {
+        margin-top: 9rpx;
+        color: rgb(247, 251, 255);
+        font-size: 60rpx;
+        font-weight: 500;
+        line-height: 84rpx;
+        white-space: nowrap;
+      }
+    }
+  }
+  .group_7 {
+    padding-top: 20rpx;
+    .group_13 {
+      margin-top: 65rpx;
+      padding: 0 32rpx;
+      .text_14 {
+        color: rgb(51, 51, 51);
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 45rpx;
+        white-space: nowrap;
+      }
+      .text_15 {
+        margin-top: 25rpx;
+        color: rgb(136, 136, 136);
+        font-size: 26rpx;
+        font-weight: 500;
+        line-height: 37rpx;
+        letter-spacing: 4rpx;
+        white-space: nowrap;
+      }
+      .text_16 {
+        margin-top: 17rpx;
+        color: rgb(136, 136, 136);
+        font-size: 26rpx;
+        font-weight: 500;
+        line-height: 37rpx;
+        letter-spacing: 4rpx;
+        white-space: nowrap;
+      }
+      .text_17 {
+        margin-right: 25rpx;
+        margin-top: 17rpx;
+        color: rgb(136, 136, 136);
+        font-size: 26rpx;
+        font-weight: 500;
+        line-height: 37rpx;
+        letter-spacing: 4rpx;
+        text-align: left;
+      }
+    }
+    .text_7 {
+      margin-left: 32rpx;
+      color: rgb(51, 51, 51);
+      font-size: 40rpx;
+      font-weight: 500;
+      line-height: 56rpx;
+      white-space: nowrap;
+    }
+    .equal-division {
+      margin-top: 32rpx;
+      color: rgb(85, 85, 85);
+      font-size: 26rpx;
+      font-weight: 500;
+      line-height: 37rpx;
+      letter-spacing: 4rpx;
+      white-space: nowrap;
+      .equal-division-item {
+        flex: 1 1 168rpx;
+        padding-left: 28rpx;
+        padding-right: 20rpx;
+        .text_8 {
+          margin-top: 8rpx;
+        }
+      }
+      .group_10 {
+        margin-left: 26rpx;
+      }
+      .equal-division-item_1 {
+        margin-left: 26rpx;
+        flex: 1 1 168rpx;
+        padding-left: 27rpx;
+        padding-right: 21rpx;
+        .image-wrapper {
+          margin: 0 4rpx;
+          padding: 30rpx 0;
+          background-image: linear-gradient(
+            90deg,
+            rgba(255, 224, 192, 0.6) 0%,
+            rgba(255, 224, 192, 0.6) 0%,
+            rgba(243, 193, 130, 0.6) 100%,
+            rgba(243, 193, 130, 0.6) 100%
+          );
+          box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.1);
+          border-radius: 50%;
+          .image_7 {
+            width: 52rpx;
+            height: 52rpx;
+          }
+        }
+        .text_11 {
+          margin-top: 8rpx;
+        }
+      }
+      .top-image-wrapper {
+        margin: 0 4rpx;
+        padding: 26rpx 0;
+        background-image: linear-gradient(
+          90deg,
+          rgba(255, 224, 192, 0.6) 0%,
+          rgba(255, 224, 192, 0.6) 0%,
+          rgba(243, 193, 130, 0.6) 100%,
+          rgba(243, 193, 130, 0.6) 100%
+        );
+        box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.1);
+        border-radius: 50%;
+        .image_4 {
+          width: 60rpx;
+          height: 60rpx;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/static/imgs/vip-center/1.png b/static/imgs/vip-center/1.png
new file mode 100644
index 0000000..9529feb
Binary files /dev/null and b/static/imgs/vip-center/1.png differ
diff --git a/static/imgs/vip-center/2.png b/static/imgs/vip-center/2.png
new file mode 100644
index 0000000..eb3765f
Binary files /dev/null and b/static/imgs/vip-center/2.png differ
diff --git a/static/imgs/vip-center/3.png b/static/imgs/vip-center/3.png
new file mode 100644
index 0000000..0ad8854
Binary files /dev/null and b/static/imgs/vip-center/3.png differ
diff --git a/static/imgs/vip-center/4.png b/static/imgs/vip-center/4.png
new file mode 100644
index 0000000..8a27925
Binary files /dev/null and b/static/imgs/vip-center/4.png differ
diff --git a/store/index.js b/store/index.js
index bd0a7c2..e4dd7eb 100644
--- a/store/index.js
+++ b/store/index.js
@@ -14,6 +14,8 @@ let qnToken = null,
    * @value id 企业id
    * @value name 企业名称
    * @value fddEnterpriseStatus 法大大认证状态 。1未认证，2认证进行中，3认证成功，4认证失败
+   * @value isVip 是否是vip
+   * @value vipExpireTime vip过期时间
    */
   companyInfo = null,
   uecToken = null,
@@ -22,7 +24,13 @@ let qnToken = null,
    * @value supplierId 当前被分享的供应商id
    */
   supplierId = null
-const companyInfoParams = ['id', 'name', 'fddEnterpriseStatus']
+const companyInfoParams = [
+  'id',
+  'name',
+  'fddEnterpriseStatus',
+  'isVip',
+  'vipExpireTime',
+]
 const userInfoParams = ['name', 'userId', 'mobile', 'avatar']
 try {
   uecToken = uni.getStorageSync('uecToken')
@@ -54,7 +62,7 @@ const store = new Vuex.Store({
     companyInfo: companyInfo || {}, // 印包厂信息
     nextPage: {
       name: '',
-      data: {}
+      data: {},
     },
     searchHistory: searchHistory || [],
     /**
@@ -62,8 +70,8 @@ const store = new Vuex.Store({
      */
     cache: {
       type: 'none',
-      data: null
-    }
+      data: null,
+    },
   },
   mutations: {
     setCache(state, { type, data }) {
@@ -255,7 +263,7 @@ const store = new Vuex.Store({
       } catch (e) {
         console.error('删除supplierId失败:', e)
       }
-    }
+    },
   },
   actions: {
     logout({ commit }) {
@@ -275,7 +283,7 @@ const store = new Vuex.Store({
         arr = arr.slice(0, 10)
       }
       commit('setSearchHistory', arr)
-    }
-  }
+    },
+  },
 })
 export default store