代码优化提测

.env.development

@@ -2,19 +2,19 @@
 ENV = 'development'
 
 # 测试地址 API接口
-# VUE_APP_BASE_API = 'https://zplma-b.caimei365.com'
-VUE_APP_BASE_API = 'http://192.168.2.68:8012'
+VUE_APP_BASE_API = 'https://zplma-b.caimei365.com'
+# VUE_APP_BASE_API = 'http://192.168.2.68:8012'
 
 # 文件上传 API接口地址
-# VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'
-VUE_APP_UPLOAD_API='http://192.168.2.68:8012'
+VUE_APP_UPLOAD_API='https://zplma-b.caimei365.com'
+# VUE_APP_UPLOAD_API='http://192.168.2.68:8012'
 
 # 二维码生成链接location
 VUE_APP_BASE_SERVER = 'https://www-b.caimei365.com'
 
 # 消息接口地址 WebSocket
-VUE_APP_SOCKET_SERVER = 'wss://zplma-b.caimei365.com/websocket?sessionSource=zplm_admin'
-# VUE_APP_SOCKET_SERVER = 'ws://192.168.2.68:8012/websocket?sessionSource=zplm_admin'
+# VUE_APP_SOCKET_SERVER = 'wss://zplma-b.caimei365.com/websocket?sessionSource=zplm_admin'
+VUE_APP_SOCKET_SERVER = 'ws://192.168.2.68:8012/websocket?sessionSource=zplm_admin'
 
 # 支付
 VUE_APP_PAY_LOCAL = 'http://192.168.2.68:18014'

src/layout/components/AvatarWrapper/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="avatar-wrapper">
+    <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" class="user-avatar">
+    <span>{{ userName }}</span>
+    <template v-if="isSupplier">
+      <!-- 未开通会员时 -->
+      <!-- 开通会员已到期 -->
+      <!-- 开通会员未到期 -->
+      <i v-if="!notOpen" class="vip-icon" :class="{ close: vipInfo.vipStatus === 0 }" />
+      <el-button
+        v-if="notOpen || beExpired"
+        type="primary"
+        size="mini"
+        class="open"
+        @click.stop="toOpenVip"
+      >开通会员</el-button>
+      <el-button
+        v-if="hasOpen"
+        type="danger"
+        size="mini"
+        class="renewal"
+        @click.stop="toOpenVip"
+      >续费</el-button>
+    </template>
+    <i class="el-icon-caret-bottom" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'AvatarWrapper',
+  computed: {
+    ...mapGetters(['name', 'userIdentity', 'mobile', 'loginAccount', 'vipInfo']),
+    // isSupplier
+    isSupplier() {
+      return this.userIdentity === 2
+    },
+    userName() {
+      return this.loginAccount || this.mobile || this.name
+    },
+    // 未开通会员
+    notOpen() {
+      return this.vipInfo.vipStatus === 3
+    },
+    // 已开通会员
+    hasOpen() {
+      return this.vipInfo.vipStatus === 1
+    },
+    // 已到期
+    beExpired() {
+      return this.vipInfo.vipStatus === 0
+    }
+  },
+  methods: {
+    toOpenVip() {
+      this.$router.push('/vip/vip-open')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.avatar-wrapper {
+  position: relative;
+
+  .user-avatar {
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    vertical-align: middle;
+  }
+  span {
+    margin-left: 10px;
+  }
+  .el-icon-caret-bottom {
+    cursor: pointer;
+    position: absolute;
+    right: -20px;
+    top: 25px;
+    font-size: 12px;
+  }
+  .el-button{
+    height: 24px;
+    padding: 0 12px;
+  }
+}
+</style>

src/layout/components/Navbar.vue

@@ -6,9 +6,7 @@
       class="hamburger-container"
       @toggleClick="toggleSideBar"
     />
-
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
-
     <div class="right-menu">
       <template v-if="device !== 'mobile'">
         <!-- <search id="header-search" class="right-menu-item" /> -->
@@ -17,42 +15,13 @@
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
       </template>
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
-        <div class="avatar-wrapper">
-          <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" class="user-avatar">
-          <span>{{ loginAccount || mobile || name }}</span>
-          <template v-if="userIdentity === 2">
-            <i v-if="vipInfo.vipStatus !== 3" class="vip-icon " :class="{ close: vipInfo.vipStatus === 0 }" />
-            <el-button
-              v-if="vipInfo.vipStatus === 3"
-              type="primary"
-              size="mini"
-              class="vip-button"
-              @click.stop="toOpenVipPage('open')"
-            >开通会员</el-button>
-            <el-button
-              v-else
-              type="primary"
-              size="mini"
-              class="vip-button xufei"
-              @click.stop="toOpenVipPage('xufei')"
-            >续费</el-button>
-          </template>
-          <i class="el-icon-caret-bottom" />
-        </div>
-        <el-dropdown-menu slot="dropdown" :class="{ user: userIdentity === 2 }">
-          <template v-if="userIdentity === 2">
+        <!-- 登录用户头像名称 -->
+        <avatar-wrapper />
+        <el-dropdown-menu slot="dropdown">
+          <template v-if="isSupplier">
             <el-dropdown-item class="user-info">
-              <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" class="user-avatar">
-              <div class="right-content">
-                <div class="name">
-                  <span>{{ loginAccount || mobile || name }}</span>
-                  <i class="vip-icon " :class="{ close: vipInfo.vipStatus === 0 || vipInfo.vipStatus === 3 }" />
-                </div>
-                <div class="info">
-                  <span v-if="vipInfo.endTime" class="time">到期时间：{{ vipInfo.endTime | formatTime }}</span>
-                  <span class="record">购买记录</span>
-                </div>
-              </div>
+              <!-- 供应商用户信息卡片 -->
+              <user-card />
             </el-dropdown-item>
             <router-link to="/personal/info">
               <el-dropdown-item>个人资料</el-dropdown-item>
@@ -63,11 +32,9 @@
             <router-link to="/password/edit">
               <el-dropdown-item>修改密码</el-dropdown-item>
             </router-link>
-            <el-dropdown-item v-if="proxyState" divided @click.native="proxyLogout">
-              退出代理
-            </el-dropdown-item>
+            <el-dropdown-item v-if="proxyState" divided @click.native="proxyLogout"> 退出代理 </el-dropdown-item>
             <el-dropdown-item v-else divided @click.native="logout">
-              <span style="display:block;">退出登录</span>
+              <span style="display: block">退出登录</span>
             </el-dropdown-item>
           </template>
           <template v-else>
@@ -75,7 +42,7 @@
               <el-dropdown-item>修改密码</el-dropdown-item>
             </router-link>
             <el-dropdown-item divided @click.native="logout">
-              <span style="display:block;">退出登录</span>
+              <span style="display: block">退出登录</span>
             </el-dropdown-item>
           </template>
         </el-dropdown-menu>
@@ -87,52 +54,37 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { formatDate } from '@/utils'
+
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 // import ErrorLog from '@/components/ErrorLog'
 import Screenfull from '@/components/Screenfull'
 // import Search from '@/components/HeaderSearch'
 // import NoticeTodo from './NoticeTodo'
+import AvatarWrapper from './AvatarWrapper'
+import UserCard from './UserCard'
 import VipTipDialog from './VipTipDialog'
 
 export default {
-  filters: {
-    formatTime(time) {
-      if (!time) {
-        return ''
-      }
-      return formatDate(time, 'yyyy-MM-DD HH:mm:ss')
-    }
-  },
+
   components: {
     Breadcrumb,
     Hamburger,
     // ErrorLog,
     Screenfull,
+    AvatarWrapper,
+    UserCard,
     VipTipDialog
     // NoticeTodo
     // Search
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'device',
-      'name',
-      'userIdentity',
-      'openSoket',
-      'proxyState',
-      'mobile',
-      'loginAccount',
-      'vipInfo'
-    ]),
-    userName() {
-      return this.name
+    ...mapGetters(['sidebar', 'device', 'userIdentity', 'openSoket', 'proxyState']),
+    // isSupplier
+    isSupplier() {
+      return this.userIdentity === 2
     }
   },
-  created() {
-    console.log(this.vipInfo)
-  },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
@@ -155,92 +107,30 @@ export default {
         this.$store.commit('proxy/CLOSE_PROXY')
         this.$router.replace('/proxy')
       }, 500)
-    },
-    // 去开通/续费会员
-    toOpenVipPage(type) {
-      if (type === 'open') {
-        this.$router.push('/vip/vip-open')
-      } else {
-        this.$router.push('/vip/vip-open')
-      }
     }
   }
 }
 </script>
 
-<style scoped>
-.el-dropdown-menu.user >>> .popper__arrow::after {
-  border-bottom-color: #2c3e50;
-}
-</style>
-
 <style lang="scss" scoped>
-.el-dropdown-menu {
-  &.user {
-    padding-top: 0;
-    width: 280px;
-    border-radius: 8px;
-  }
-}
-.vip-button {
-  height: 24px;
-  line-height: 24px;
-  padding: 0 10px;
-  margin-left: 4px;
-
-  &.xufei {
-    background: #ff6d6d;
-    border-color: #ff6d6d;
-  }
-}
-
-.user-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: #2c3e50;
-  color: #f1f1f1;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  margin-bottom: 6px;
-  border-radius: 8px 8px 0 0;
-  .user-avatar {
-    width: 48px;
-    height: 48px;
-    border-radius: 10px;
-  }
-  .right-content {
-    width: 180px;
-    .name {
-      font-size: 20px;
-    }
-    .info {
-      font-size: 12px;
-      .record {
-        margin-left: 6px;
-        text-decoration: underline;
-      }
+::v-deep {
+  .user-info {
+    background: #2c3e50;
+    border-radius: 4px 4px 0 0;
+    &:hover {
+      background: #2c3e50;
+      color: #f1f1f1;
     }
   }
-
-  &:hover {
-    background: #2c3e50;
-    color: #f1f1f1;
+  .popper__arrow {
+    &::after {
+      border-bottom-color: #2c3e50 !important;
+    }
   }
 }
 
-.vip-icon {
-  display: inline-block;
-  width: 40px;
-  height: 32px;
-  margin: 0 4px;
-  background: url(~@/assets/img/vip-icon-active.png) no-repeat;
-  background-size: 40px;
-  vertical-align: -5px;
-
-  &.close {
-    background: url(~@/assets/img/vip-icon.png) no-repeat;
-  }
+.el-dropdown-menu {
+  padding-top: 0;
 }
 
 .navbar {
@@ -293,37 +183,14 @@ export default {
         cursor: pointer;
         transition: background 0.3s;
 
-        // &:hover {
-        //   background: rgba(0, 0, 0, 0.025);
-        // }
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
       }
     }
 
     .avatar-container {
       margin-right: 30px;
-
-      .avatar-wrapper {
-        // margin-top: 5px;
-        position: relative;
-
-        .user-avatar {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-          vertical-align: middle;
-        }
-        span {
-          margin-left: 10px;
-        }
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
-        }
-      }
     }
   }
 }

src/layout/components/UserCard/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="user-card">
+    <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" class="user-avatar">
+    <div class="right-content">
+      <div class="name">
+        <span>{{ userName }}</span>
+        <i class="vip-icon " :class="{ close: vipInfo.vipStatus === 0 || vipInfo.vipStatus === 3 }" />
+      </div>
+      <div class="info">
+        <span v-if="vipInfo.endTime" class="time">会员到期时间：{{ vipInfo.endTime | formatTime }}</span>
+        <span class="record" @click="handleToRecord">购买记录</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { formatDate } from '@/utils'
+export default {
+  name: 'AvatarWrapper',
+  filters: {
+    formatTime(time) {
+      if (!time) {
+        return ''
+      }
+      return formatDate(time, 'yyyy-MM-DD')
+    }
+  },
+  computed: {
+    ...mapGetters(['name', 'mobile', 'loginAccount', 'vipInfo']),
+    userName() {
+      return this.loginAccount || this.mobile || this.name
+    }
+  },
+  methods: {
+    handleToRecord() {
+      this.$router.push('/personal/vip-record')
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.user-card {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #2c3e50;
+  color: #f1f1f1;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  margin-bottom: 6px;
+  border-radius: 8px 8px 0 0;
+  .user-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
+  }
+  .right-content {
+    width: 220px;
+    margin-left: 16px;
+    .name {
+      font-size: 20px;
+    }
+    .info {
+      font-size: 12px;
+      .record {
+        margin-left: 6px;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &:hover {
+    background: #2c3e50;
+    color: #f1f1f1;
+  }
+}
+</style>

src/layout/components/VipTipDialog/index.vue

@@ -1,14 +1,14 @@
 <template>
   <el-dialog
     title="提示"
-    :visible="vipTipVisiable && (vipInfo.freeUseFlag && vipInfo.freeUseFlag !== 0)"
+    :visible="allShowVipTip && vipTipVisiable"
     width="24%"
     :close-on-click-modal="false"
     center
   >
     <div>{{ contentText }}</div>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="vipTipVisiable = false">取消</el-button>
+      <el-button @click="allShowVipTip = false">取消</el-button>
       <el-button type="primary" @click="toOpenVipPage">开通会员</el-button>
     </span>
   </el-dialog>
@@ -20,16 +20,18 @@ export default {
   name: 'VipTipDialog',
   data() {
     return {
-      vipTipVisiable: true
+      allShowVipTip: true
     }
   },
   computed: {
     ...mapGetters(['vipInfo']),
+    vipTipVisiable() {
+      return this.vipInfo.freeUseFlag > 0
+    },
     contentText() {
       const insertText = ['', '账号试用即将到期', '账号试用已到期', '会员账号即将到期', '会员账号已到期']
       return `对不起，您的账号${insertText[this.vipInfo.freeUseFlag]}，请尽快开通会员，以免影响正常使用`
     }
-
   },
   methods: {
     toOpenVipPage() {

src/permission.js

@@ -30,6 +30,8 @@ router.beforeEach(async(to, from, next) => {
       // 判断当前用户是否拥有角色
       const hasRoles = store.getters.roles && store.getters.roles.length > 0
       if (hasRoles) {
+        // 获取用户vip信息
+        await store.dispatch('user/fetchUserVipInfo')
         // 放行
         next()
       } else {

src/router/module/personal.js

@@ -29,6 +29,13 @@ const personalRoutes = [
         name: 'PersonalAccount',
         meta: { title: '绑定登录账号', roles: ['normal'] }
         // hidden: true
+      },
+      {
+        path: 'vip-record',
+        component: () => import('@/views/normal/personal/vip-record'),
+        name: 'PersonalVipRecord',
+        meta: { title: '会员购买记录', roles: ['normal'] }
+        // hidden: true
       }
     ]
   }

src/router/module/vip.js

@@ -9,6 +9,7 @@ const vipRoutes = [
     name: 'Member',
     meta: { title: '权益与支付', roles: ['normal'] },
     alwaysShow: false,
+    hidden: true,
     children: [
       {
         path: 'vip-open',

src/store/modules/user.js

@@ -54,13 +54,12 @@ const mutations = {
   // 保存会员信息
   SET_VIPINFO: (state, info) => {
     state.vipInfo = info
-    console.log(state.vipInfo)
   }
 }
 
 const actions = {
   // 登录操作
-  login({ commit, dispatch }, userInfo) {
+  login({ commit }, userInfo) {
     const { username, password } = userInfo
     return login({ mobileOrName: username.trim(), password: password })
       .then(res => {

src/styles/index.scss

@@ -324,3 +324,18 @@ aside {
     }
   }
 }
+
+// vip标记
+.vip-icon {
+  display: inline-block;
+  width: 40px;
+  height: 32px;
+  margin: 0 4px;
+  background: url(~@/assets/img/vip-icon-active.png) no-repeat;
+  background-size: 40px;
+  vertical-align: -5px;
+
+  &.close {
+    background: url(~@/assets/img/vip-icon.png) no-repeat;
+  }
+}

src/views/admin/settings/menus/edit.vue

@@ -119,16 +119,6 @@ export default {
       }
     }
   },
-  watch: {
-    // 处理权限列表
-    permissions(nVal) {
-      if (this.permissions.length > 0) {
-        this.menuData.permissionJson = JSON.stringify(this.permissions)
-      } else {
-        this.menuData.permissionJson = ''
-      }
-    }
-  },
   created() {
     this.editType = this.$route.query.type
     this.init()
@@ -187,6 +177,7 @@ export default {
     // 提交
     submit() {
       console.log(this.menuData)
+      this.menuData.permissionJson = JSON.stringify(this.permissions)
       this.$refs.menuFrom.validate(valide => {
         if (!valide) return
         if (this.editType === 'add') {

src/views/components/MemberBenefits/index.vue

@@ -117,14 +117,4 @@ export default {
     }
   }
 }
-
-.vip-icon{
-  display: inline-block;
-  width: 40px;
-  height: 32px;
-  margin-left: 6px;
-  background: url(~@/assets/img/vip-icon.png) no-repeat;
-  background-size: 40px;
-  vertical-align: bottom;
-}
 </style>

src/views/components/PermissionButton/index.vue

@@ -1,10 +1,8 @@
 <template>
-  <el-button v-bind="$attrs" v-on="$listeners"><slot /></el-button>
+  <el-button v-bind="$attrs" @click="handleClick"><slot /></el-button>
 </template>
 
 <script>
-import checkPermission from '@/utils/permission'
-import jumpAction from './jumpAction'
 export default {
   name: 'PermissionButton',
   data() {
@@ -14,16 +12,17 @@ export default {
   },
   methods: {
     handleClick() {
-      if (this.permission.length > 0) this.hasPermission = checkPermission(this.permission)
+      this.hasPermission = this.$store.getters.vipInfo.vipStatus === 1
       if (this.hasPermission) {
         this.$emit('click')
       } else {
-        this.$confirm('对不起，您的账号试用已到期，请尽快开通会员，以免影响正常使用！', '提示', {
+        this.$confirm('对不起，您的会员账号已到期，请尽快续费，以免影响正常使用！', '提示', {
           confirmButtonText: '开通会员',
           cancelButtonText: '取消'
         }).then(() => {
-          jumpAction()
-          console.log('开通会员')
+          // jumpAction()
+          // console.log('开通会员')
+          this.$router.push('/vip/vip-open')
         }).catch(() => {
           this.$message({
             type: 'info',

src/views/normal/personal/index.vue

@@ -40,10 +40,10 @@
         <span v-if="supplierInfo.vipStatus === 3">非会员</span>
       </el-col>
       <el-col :span="8">
-        <router-link v-if="supplierInfo.vipStatus === 3" class="link" to="/vip/vip-open?type=1">
+        <router-link v-if="supplierInfo.vipStatus === 3" class="link" to="/vip/vip-open">
           <i class="el-icon-thumb" /><span>开通会员</span>
         </router-link>
-        <router-link v-if="supplierInfo.vipStatus === 1" class="link" to="/vip/vip-open?type=2">
+        <router-link v-if="supplierInfo.vipStatus === 1" class="link" to="/vip/vip-open">
           <i class="el-icon-thumb" /><span>续费会员</span>
         </router-link>
       </el-col>

src/views/normal/personal/vip-record.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>购买套餐:</span>
+        <el-select v-model="listQuery.vipPackageId" placeholder="购买套餐" clearable @change="getList">
+          <el-option label="不限" value="" />
+          <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>会员状态:</span>
+        <!-- 会员状态：0已过期，1生效中，2待生效，3非会员 -->
+        <el-select v-model="listQuery.vipStatus" placeholder="会员状态" clearable @change="getList">
+          <el-option label="不限" value="" />
+          <el-option label="已过期" :value="0" />
+          <el-option label="生效中" :value="1" />
+          <el-option label="待生效" :value="2" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>购买时间:</span>
+        <el-date-picker
+          v-model="payTimeArray"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy年MM月dd日"
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>到期时间:</span>
+        <el-date-picker
+          v-model="endTimeArray"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          format="yyyy年MM月dd日"
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @change="getList">查询</el-button>
+      </div>
+    </div>
+    <!-- 表格区域 -->
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      style="width: 100%"
+      border
+      fit
+      class="table-cell"
+      header-row-class-name="tableHeader"
+    >
+      <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center" />
+      <el-table-column prop="duration" label="购买套餐" align="center" />
+      <el-table-column label="购买价格" align="center">
+        <template slot-scope="{ row }">
+          <span>￥{{ row.price }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="购买方式" align="center">
+        <!-- 1平台赠送，2支付宝，3微信，4企业网银，5个人网银 -->
+        <template slot-scope="{ row }">
+          <span v-if="row.payWay === 1">平台赠送</span>
+          <span v-if="row.payWay === 2">支付宝</span>
+          <span v-if="row.payWay === 3">微信</span>
+          <span v-if="row.payWay === 4">企业网银</span>
+          <span v-if="row.payWay === 5">个人网银</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="会员状态" align="center">
+        <!-- 会员状态：0已过期，1生效中，2待生效，3非会员 -->
+        <template slot-scope="{ row }">
+          <span v-if="row.vipStatus === 0" class="status danger">已过期</span>
+          <span v-if="row.vipStatus === 1" class="status success">生效中</span>
+          <span v-if="row.vipStatus === 2" class="status warning">待生效</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="购买时间" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.payTime">{{ row.payTime | formatTime }}</span>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="到期时间" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.endTime">{{ row.endTime | formatTime }}</span>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini" @click="handleShowDemand(row)">定制需求</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 定制需求dialog -->
+    <el-dialog title="定制需求" :visible.sync="dialogTableVisible" width="30%">
+      <el-table :data="demandList" border fit empty-text="暂无定制需求">
+        <el-table-column label="序号" type="index" width="80" align="center" />
+        <el-table-column label="定制需求" prop="demand" align="center" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="dialogTableVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { fetchVipRecord, fetchConfigureList } from '@/api/member'
+import { getSupplierById } from '@/api/supplier'
+export default {
+  data() {
+    return {
+      listLoading: false,
+      dialogTableVisible: false,
+      endTimeArray: [],
+      payTimeArray: [],
+      listQuery: {
+        authUserId: '',
+        endBeginTime: null,
+        endEndTime: null,
+        payBeginTime: null,
+        payEndTime: null,
+        vipPackageId: '',
+        vipStatus: '',
+        pageSize: 10,
+        pageNum: 1
+      },
+      list: [],
+      demandList: [],
+      packageList: [],
+      supplierInfo: {}
+    }
+  },
+  created() {
+    this.listQuery.authUserId = this.$store.getters.authUserId
+    this.fetchVipRecord()
+    this.fetchConfigureList()
+    this.fetchSupplierInfo()
+  },
+  methods: {
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    },
+    getList() {
+      this.list = []
+      // 到期时间区间
+      if (this.endTimeArray && this.endTimeArray.length === 2) {
+        const [endBeginTime, endEndTime] = this.endTimeArray
+        this.listQuery.endBeginTime = endBeginTime
+        this.listQuery.endEndTime = endEndTime
+      } else {
+        this.listQuery.endBeginTime = null
+        this.listQuery.endEndTime = null
+      }
+      // 购买时间区间
+      if (this.payTimeArray && this.payTimeArray.length === 2) {
+        const [payBeginTime, payEndTime] = this.payTimeArray
+        this.listQuery.payBeginTime = payBeginTime
+        this.listQuery.payEndTime = payEndTime
+      } else {
+        this.listQuery.payBeginTime = null
+        this.listQuery.payEndTime = null
+      }
+      this.fetchVipRecord()
+    },
+    fetchVipRecord() {
+      console.log(this.listQuery)
+      fetchVipRecord(this.listQuery).then(res => {
+        console.log(res)
+        this.list = [...this.list, ...res.data.list]
+      })
+    },
+    handleShowDemand(row) {
+      this.dialogTableVisible = true
+      this.demandList = row.services
+    },
+    // 获取套餐列表
+    fetchConfigureList() {
+      fetchConfigureList().then(res => {
+        this.packageList = res.data.packageList.map((item, index) => {
+          item.name = `套餐${index + 1}`
+          // item.originalPrice = `${item.originalPrice.toFixed(2)}`
+          // item.price = item.price.toFixed(2)
+          return item
+        })
+      })
+    },
+    // 获取供应商信息
+    fetchSupplierInfo() {
+      getSupplierById({ authUserId: this.listQuery.authUserId }).then(res => {
+        console.log(res)
+        this.supplierInfo = res.data
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  .info {
+    display: flex;
+    justify-content: flex-start;
+    align-content: center;
+    font-size: 14px;
+    .row {
+      margin-right: 32px;
+    }
+  }
+
+  .dialog-footer {
+    text-align: center;
+  }
+}
+</style>

src/views/normal/vip/index.vue

@@ -35,8 +35,6 @@ import vipIcon6 from '@/assets/img/vip-icon-06.png'
 import vipIcon7 from '@/assets/img/vip-icon-07.png'
 
 import MemberBenefits from '@/views/components/MemberBenefits'
-import { mapGetters } from 'vuex'
-
 export default {
   components: {
     MemberBenefits
@@ -84,7 +82,9 @@ export default {
     }
   },
   computed: {
-    ...mapGetters['vipStatus'],
+    vipStatus() {
+      return this.$store.getters.vipInfo.vipStatus
+    },
     themeText() {
       return this.vipStatus === 1 ? '续费会员' : '开通会员'
     },
@@ -196,16 +196,8 @@ export default {
     border-radius: 0;
   }
 
-  .vip-icon {
-    display: inline-block;
-    width: 40px;
-    height: 32px;
-    margin: 0 16px 0 30px;
-    background: url(~@/assets/img/vip-icon.png) no-repeat;
-    background-size: 40px;
-    vertical-align: bottom;
-
-    transform: translateY(-6px);
+  .vip-icon{
+    margin-bottom: 10px;
   }
 }
 </style>