接口调用

.env.development

@@ -2,12 +2,12 @@
 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'

src/api/member.js

@@ -0,0 +1,56 @@
+// 会员相关的接口
+import request from '@/utils/request'
+
+/** 获取会员成员列表 */
+export function fetchMemberList(params) {
+  return request({
+    url: '/vip/list',
+    method: 'get',
+    params
+  })
+}
+
+/** 获取会员开通记录 */
+export function fetchVipRecord(params) {
+  return request({
+    url: '/vip/history/list',
+    method: 'get',
+    params
+  })
+}
+
+/** 获取会员会员套餐  服务列表 */
+export function fetchConfigureList(params) {
+  return request({
+    url: '/vip/configure/form',
+    method: 'get',
+    params
+  })
+}
+
+/** 添加会员套餐  服务*/
+export function updateConfigure(data) {
+  return request({
+    url: '/vip/configure',
+    method: 'post',
+    data
+  })
+}
+
+/** 获取会员套餐列表 */
+export function fetchVipComboList(params) {
+  return request({
+    url: '/vip/package/list',
+    method: 'get',
+    params
+  })
+}
+
+/** 赠送会员 */
+export function handselVip(data) {
+  return request({
+    url: '/vip/send',
+    method: 'post',
+    data
+  })
+}

src/api/system.js

@@ -0,0 +1,148 @@
+import request from '@/utils/request'
+// 用户
+/** 获取用户列表 */
+export function fetchUserList(query) {
+  return request({
+    url: '/sys/user/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/** 获取用户信息 */
+export function getUser(id) {
+  return request({
+    url: '/sys/user/' + id,
+    method: 'get'
+  })
+}
+
+/** 修改用户信息 */
+export function updateUser(id, data) {
+  return request({
+    url: '/sys/user/update/' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+/** 创建用户 */
+export function createUser(data) {
+  return request({
+    url: '/sys/user/create',
+    method: 'post',
+    data: data
+  })
+}
+
+/** 删除用户 */
+export function deleteUser(id) {
+  return request({
+    url: '/sys/user/delete/' + id,
+    method: 'post'
+  })
+}
+
+// 角色
+/** 获取角色列表 */
+export function fetchRoleList(query) {
+  return request({
+    url: '/sys/role/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/** 获取角色信息 */
+export function getRole(id) {
+  return request({
+    url: '/sys/role/' + id,
+    method: 'get'
+  })
+}
+
+/** 更新角色信息 */
+export function updateRole(id, data) {
+  return request({
+    url: '/sys/role/update/' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+/** 创建角色 */
+export function createRole(data) {
+  return request({
+    url: '/sys/role/create',
+    method: 'post',
+    data: data
+  })
+}
+
+/** 删除角色 */
+export function deleteRole(id) {
+  return request({
+    url: '/sys/role/delete/' + id,
+    method: 'post'
+  })
+}
+
+// 菜单
+/** 获取菜单列表 */
+export function fetchMenuList(query) {
+  return request({
+    url: '/sys/menu/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/** 获取菜单信息 */
+export function getMenu(id) {
+  return request({
+    url: '/sys/menu/' + id,
+    method: 'get'
+  })
+}
+
+/** 修改保存菜单 */
+export function updateMenu(id, data) {
+  return request({
+    url: '/sys/menu/update/' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+/** 添加菜单 */
+export function createMenu(data) {
+  return request({
+    url: '/sys/menu/create',
+    method: 'post',
+    data: data
+  })
+}
+
+/** 删除菜单 */
+export function deleteMenu(id) {
+  return request({
+    url: '/sys/menu/delete/' + id,
+    method: 'post'
+  })
+}
+
+export function updateMenuSelective(id, data) {
+  return request({
+    url: '/sys/menu/update/selective/' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+/** 获取菜单列表 tree */
+export function sysMenuTree() {
+  return request({
+    url: '/sys/menu/tree',
+    method: 'get'
+  })
+}

src/layout/components/Navbar.vue

@@ -12,7 +12,7 @@
     <div class="right-menu">
       <template v-if="device !== 'mobile'">
         <!-- <search id="header-search" class="right-menu-item" /> -->
-        <notice-todo v-if="userIdentity === 1 && openSoket" />
+        <!-- <notice-todo v-if="userIdentity === 1 && openSoket" /> -->
         <!-- <error-log class="errLog-container right-menu-item hover-effect" /> -->
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -25,26 +25,32 @@
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-          <template v-if="!proxyState">
-            <router-link to="/password/edit">
+          <template v-if="userIdentity === 2">
+            <router-link to="/vip/vip-open">
               <el-dropdown-item>会员中心</el-dropdown-item>
             </router-link>
-            <el-dropdown-item divided @click.native="logout">
-              <span style="display:block;">个人资料</span>
-            </el-dropdown-item>
-            <router-link to="/password/edit">
+            <router-link to="/personal/info">
+              <el-dropdown-item divided>个人资料</el-dropdown-item>
+            </router-link>
+            <router-link to="/personal/account">
               <el-dropdown-item>绑定登录账号</el-dropdown-item>
             </router-link>
             <router-link to="/password/edit">
               <el-dropdown-item>修改密码</el-dropdown-item>
             </router-link>
-            <el-dropdown-item divided @click.native="logout">
-              <span style="display:block;">退出</span>
+            <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>
             </el-dropdown-item>
           </template>
           <template v-else>
-            <el-dropdown-item divided @click.native="proxyLogout">
-              退出代理
+            <router-link to="/password/edit">
+              <el-dropdown-item>修改密码</el-dropdown-item>
+            </router-link>
+            <el-dropdown-item divided @click.native="logout">
+              <span style="display:block;">退出登录</span>
             </el-dropdown-item>
           </template>
         </el-dropdown-menu>
@@ -60,15 +66,15 @@ 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 NoticeTodo from './NoticeTodo'
 
 export default {
   components: {
     Breadcrumb,
     Hamburger,
     // ErrorLog,
-    Screenfull,
-    NoticeTodo
+    Screenfull
+    // NoticeTodo
     // Search
   },
   computed: {

src/layout/components/Sidebar/Item.vue

@@ -17,7 +17,7 @@ export default {
     const vnodes = []
 
     if (icon) {
-      if (icon.includes('el-icon')) {
+      if (icon.includes('el-icon') || icon.includes('iconfont')) {
         vnodes.push(<i class={[icon, 'sub-el-icon']} />)
       } else {
         vnodes.push(<svg-icon icon-class={icon}/>)

src/router/module/club.js

@@ -8,14 +8,21 @@ const clubRoutes = [
     alwaysShow: true,
     redirect: '/club/list',
     name: 'Club',
-    meta: { title: '机构认证', icon: 'el-icon-s-custom', roles: ['normal'], noCache: true, proxy: true },
+    meta: { title: '机构认证', icon: 'icon-jigourenzheng iconfont', roles: ['normal'], noCache: true, proxy: true },
     children: [
       // 机构
       {
         path: 'list',
         component: () => import('@/views/normal/club'),
         name: 'ClubList',
-        meta: { title: '机构列表', roles: ['normal'], affix: true, noCache: true, proxy: true }
+        meta: {
+          title: '机构列表',
+          icon: 'icon-jigouliebiao iconfont',
+          roles: ['normal'],
+          affix: true,
+          noCache: true,
+          proxy: true
+        }
       },
       {
         path: 'club-add',

src/router/module/doctor.js

@@ -9,13 +9,13 @@ const doctorRoutes = [
     alwaysShow: true,
     redirect: '/doctor/list',
     name: 'Doctor',
-    meta: { title: '医师认证', icon: 'el-icon-user-solid', roles: ['normal'], noCache: true, proxy: true },
+    meta: { title: '医师认证', icon: 'icon-yishirenzheng iconfont', roles: ['normal'], noCache: true, proxy: true },
     children: [
       {
         path: 'list',
         component: () => import('@/views/normal/doctor'),
         name: 'DoctorList',
-        meta: { title: '医师列表', roles: ['normal'], noCache: true, proxy: true }
+        meta: { title: '医师列表', icon: 'icon-yishiliebiao iconfont', roles: ['normal'], noCache: true, proxy: true }
       },
       {
         hidden: true,

src/router/module/feedback.js

@@ -15,7 +15,7 @@ const feedbackRoutes = [
         path: 'list',
         component: () => import('@/views/normal/feedback'),
         name: 'FeedbackList',
-        meta: { title: '反馈列表', roles: ['normal'], noCache: true }
+        meta: { title: '反馈列表', icon: 'iconfont icon-fankuiliebiao', roles: ['normal'], noCache: true }
       },
       {
         path: 'detail',

src/router/module/helper.js

@@ -15,13 +15,27 @@ const helperRoutes = [
         path: 'video',
         component: () => import('@/views/common/helper/video'),
         name: 'HelperVideo',
-        meta: { title: '视频教程', roles: ['admin', 'normal'], affix: false, noCache: true, proxy: false }
+        meta: {
+          title: '视频教程',
+          icon: 'iconfont icon-shipinjiaocheng',
+          roles: ['admin', 'normal'],
+          affix: false,
+          noCache: true,
+          proxy: false
+        }
       },
       {
         path: 'document',
         component: () => import('@/views/common/helper/document'),
         name: 'HelperDocument',
-        meta: { title: '文档教程', roles: ['admin', 'normal'], affix: false, noCache: true, proxy: false }
+        meta: {
+          title: '文档教程',
+          icon: 'iconfont icon-wendangjiaocheng',
+          roles: ['admin', 'normal'],
+          affix: false,
+          noCache: true,
+          proxy: false
+        }
       }
     ]
   }

src/router/module/material.js

@@ -9,13 +9,13 @@ const materialRoutes = [
     alwaysShow: true,
     redirect: '/material/article-list',
     name: 'Material',
-    meta: { title: '资料库', icon: 'el-icon-s-management', roles: ['normal'], noCache: true, proxy: true },
+    meta: { title: '资料库', icon: 'icon-ziliaoku iconfont', roles: ['normal'], noCache: true, proxy: true },
     children: [
       {
         path: 'article-list',
         component: () => import('@/views/normal/material/article'),
         name: 'MaterialArticleList',
-        meta: { title: '文章列表', icon: 'el-icon-tickets', roles: ['normal'], noCache: true, proxy: true }
+        meta: { title: '文章列表', icon: 'icon-wenjianliebiao iconfont', roles: ['normal'], noCache: true, proxy: true }
       },
       {
         path: 'article-edit',

src/styles/font.scss

@@ -5,18 +5,10 @@
     url('//at.alicdn.com/t/font_3191891_d7gdax2xsxu.ttf?t=1645181006347') format('truetype');
 }
 
-[class^='el-icon-'],
-[class*=' el-icon-'],
-[class^=' icon-'],
-[class*='icon-'] {
-  font-family: 'element-icons', 'iconfont' !important;
+.iconfont {
+  font-family: 'iconfont' !important;
+  // font-size: 16px;
   font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  vertical-align: baseline;
-  display: inline-block;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/views/admin/audit/club/device/index.vue

@@ -20,7 +20,7 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/admin/audit/club/index.vue

@@ -31,7 +31,7 @@
         <el-input v-model="listQuery.linkMan" placeholder="联系人" @keyup.enter.native="getList" />
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/admin/audit/club/list.vue

@@ -24,7 +24,7 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/admin/audit/doctor/index.vue

@@ -31,7 +31,7 @@
         <el-input v-model="listQuery.linkMan" placeholder="联系人" @keyup.enter.native="getList" />
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/admin/audit/doctor/list.vue

@@ -19,7 +19,7 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
       </div>
     </div>
     <!-- 表格区域 -->

src/views/admin/audit/material/article/index.vue

@@ -16,7 +16,7 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/admin/audit/material/file/index.vue

@@ -25,7 +25,7 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/admin/audit/material/image/index.vue

@@ -16,7 +16,7 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/admin/audit/material/index.vue

@@ -31,7 +31,7 @@
         <el-input v-model="listQuery.linkMan" placeholder="联系人" @keyup.enter.native="getList" />
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/admin/audit/material/video/index.vue

@@ -16,7 +16,7 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/admin/member/handsel.vue

@@ -7,21 +7,26 @@
         <el-button size="mini" type="primary" @click="handleChooseSupplier">选择供应商</el-button>
       </div>
       <!-- 选中的供应商列表 -->
-      <el-table v-loading="listLoading" :data="currentSupplierList" class="table-cell">
+      <el-table v-loading="listLoading" :data="currentSupplierList" class="table-cell" empty-text="请选择供应商">
         <el-table-column label="序号" type="index" width="80" align="center" />
-        <el-table-column prop="shopName" label="供应商名称" align="center" />
+        <el-table-column property="name" label="供应商名称" width="150" />
         <el-table-column label="供应商类型" align="center">
           <template slot-scope="{ row }">
             <span v-if="row.shopType === 1">品牌方</span>
             <span v-else>代理商</span>
           </template>
         </el-table-column>
-        <el-table-column prop="account" label="登录账号" align="center" />
+        <el-table-column label="登录账号" align="center">
+          <template slot-scope="{ row }">
+            <span v-if="row.loginAccount">{{ row.loginAccount }}</span>
+            <span v-else>—</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="mobile" label="手机号" align="center" />
-        <el-table-column prop="limkMan" label="联系人" align="center" />
+        <el-table-column prop="linkMan" label="联系人" align="center" />
         <el-table-column label="操作" align="center">
           <template>
-            <el-button type="primary" size="mini">删除</el-button>
+            <el-button type="primary" size="mini" @click="removeSupplier">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -33,27 +38,36 @@
         </el-select>
       </div>
       <!-- 选中的套餐 -->
-      <el-table v-loading="listLoading" :data="currentPackageList" class="table-cell">
+      <el-table v-loading="listLoading" :data="currentPackageList" class="table-cell" empty-text="请选择会员套餐">
         <el-table-column label="序号" type="index" width="80" align="center" />
         <el-table-column prop="name" label="套餐名称" align="center" />
         <el-table-column label="会员期限" align="center">
           <template slot-scope="{ row }">
-            <span>{{ row.timeLimit }}年</span>
+            <span v-if="row.unit === 1">{{ row.duration }}月</span>
+            <span v-if="row.unit === 2">{{ row.duration }}年</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="原价" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.originalPrice | formatPrice }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="现价" align="center">
+          <template slot-scope="{ row }">
+            <span>{{ row.price | formatPrice }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="originPrice" label="原价" align="center" />
-        <el-table-column prop="price" label="现价" align="center" />
       </el-table>
     </div>
 
     <!-- 确认 取消 -->
     <div class="control-box">
-      <el-button type="warning">返回</el-button>
-      <el-button type="primary">保存</el-button>
+      <el-button type="warning" @click="$_back">返回</el-button>
+      <el-button type="primary" @click="onSubmit">开通</el-button>
     </div>
 
     <!-- 选择供应商dialog -->
-    <el-dialog title="选择供应商" :visible.sync="dialogTableVisible" width="68%">
+    <el-dialog title="选择供应商" :visible.sync="dialogTableVisible" width="68%" @closed="handleDialogClosed">
       <div>
         <div class="filter-container">
           <div class="filter-control">
@@ -63,7 +77,8 @@
                 v-model="listQuery.shopName"
                 size="mini"
                 placeholder="供应商名称"
-                @keyup.enter.native="getSuplierList"
+                clearable
+                @keyup.enter.native="fetchSupplierList"
               />
             </div>
             <div class="filter-control">
@@ -73,7 +88,7 @@
                 placeholder="供应商类型"
                 size="mini"
                 clearable
-                @change="getSuplierList"
+                @change="fetchSupplierList"
               >
                 <el-option label="所有类型" value="" />
                 <el-option label="代理商" :value="2" />
@@ -84,22 +99,24 @@
               <span>手机号:</span>
               <el-input
                 v-model="listQuery.mobile"
+                clearable
                 size="mini"
                 placeholder="手机号"
-                @keyup.enter.native="getSuplierList"
+                @keyup.enter.native="fetchSupplierList"
               />
             </div>
             <div class="filter-control">
               <span>联系人:</span>
               <el-input
                 v-model="listQuery.limkMan"
+                clearable
                 size="mini"
                 placeholder="联系人"
-                @keyup.enter.native="getSuplierList"
+                @keyup.enter.native="fetchSupplierList"
               />
             </div>
             <div class="filter-control">
-              <el-button type="primary" icon="el-icon-search" size="mini" @click="getSuplierList">查询</el-button>
+              <el-button type="primary" size="mini" @click="filterSupplierList">查询</el-button>
             </div>
           </div>
         </div>
@@ -111,38 +128,57 @@
           :infinite-scroll-delay="300"
           :infinite-scroll-immediate="false"
           header-row-class-name="tableHeader"
+          highlight-current-row
+          @row-click="handleSelectSupplier"
         >
-          <el-table-column label="序号" type="selection" width="55" align="center" />
+          >
+          <el-table-column label="选择" width="55" align="center">
+            <template slot-scope="{row}">
+              <el-radio v-model="selectedAuthUserId" :label="row.authUserId"><span v-show="false">1</span></el-radio>
+            </template>
+          </el-table-column>
           <el-table-column label="序号" type="index" width="80" align="center" />
-          <el-table-column property="shopName" label="供应商名称" width="150" />
+          <el-table-column property="name" label="供应商名称" width="150" />
           <el-table-column label="供应商类型" align="center">
             <template slot-scope="{ row }">
               <span v-if="row.shopType === 1">品牌方</span>
               <span v-else>代理商</span>
             </template>
           </el-table-column>
-          <el-table-column prop="account" label="登录账号" align="center" />
+          <el-table-column label="登录账号" align="center">
+            <template slot-scope="{ row }">
+              <span v-if="row.loginAccount">{{ row.loginAccount }}</span>
+              <span v-else>—</span>
+            </template>
+          </el-table-column>
           <el-table-column prop="mobile" label="手机号" align="center" />
-          <el-table-column prop="limkMan" label="联系人" align="center" />
+          <el-table-column prop="linkMan" label="联系人" align="center" />
         </el-table>
         <!-- <div class="loading">没有更多了</div> -->
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogTableVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
+        <el-button type="primary" @click="handleSubmitSupplier">确 定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { fetchSupplierList } from '@/api/supplier'
+import { fetchConfigureList, handselVip } from '@/api/member'
 export default {
+  filters: {
+    formatPrice(price) {
+      return `￥${price.toFixed(2)}`
+    }
+  },
   data() {
     return {
       listLoading: false,
       loading: false,
       dialogTableVisible: false,
-      selected: 1,
+      selected: '',
       listQuery: {
         shopName: '',
         shopType: '',
@@ -152,92 +188,96 @@ export default {
         pageNum: 1,
         pageSize: 10
       },
-      supplierList: [
-        {
-          shopName: '火影大战葫芦娃',
-          shopType: 1,
-          account: 'admin',
-          mobile: '15872950940',
-          limkMan: '还差的远呢',
-          state: 1
-        }
-      ],
+      supplierList: [],
+      hasNextPage: false,
+      total: 0,
+      // 选中的供应商id
+      selectedAuthUserId: '',
+      // 选中的供应商信息
+      selectedSupplierInfo: {},
       // 选中的供应商
-      currentSupplierList: [
-        {
-          shopName: '火影大战葫芦娃',
-          shopType: 1,
-          account: 'admin',
-          mobile: '15872950940',
-          limkMan: '还差的远呢',
-          state: 1
-        }
-      ],
-      currentPackageList: [
-        {
-          id: 1,
-          name: '套餐一',
-          originPrice: 7980,
-          price: 5980,
-          timeLimit: 1
-        }
-      ],
+      currentSupplierList: [],
+      // 选中的套餐
+      currentPackageList: [],
       // 套餐列表
-      packageList: [
-        {
-          id: 1,
-          name: '套餐一',
-          originPrice: 7980,
-          price: 5980,
-          timeLimit: 1
-        },
-        {
-          id: 2,
-          name: '套餐二',
-          originPrice: 17980,
-          price: 15980,
-          timeLimit: 3
-        },
-        {
-          id: 3,
-          name: '套餐三',
-          originPrice: 27980,
-          price: 25980,
-          timeLimit: 8
-        }
-      ]
+      packageList: []
     }
   },
   created() {
-    this.supplierList = this.addLimit()
+    this.fetchConfigureList()
   },
   methods: {
-    addLimit() {
-      const list = []
-      for (let i = 0; i < 20; i++) {
-        list.push({
-          shopName: '火影大战葫芦娃',
-          shopType: 1,
-          account: 'admin',
-          mobile: '15872950940',
-          limkMan: '还差的远呢',
-          state: 1
-        })
-      }
-      return list
+    // 提交赠送
+    onSubmit() {
+      handselVip({ authUserId: this.selectedAuthUserId, packageId: this.selected }).then(res => {
+        console.log(res)
+        this.$message.success('赠送会员成功')
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.back()
+      })
+    },
+    // 移除选中的供应商
+    removeSupplier() {
+      this.currentSupplierList = []
+      this.selectedSupplierInfo = {}
+    },
+    // 确认选中的供应商
+    handleSubmitSupplier() {
+      this.dialogTableVisible = false
+      this.currentSupplierList = [this.selectedSupplierInfo]
+    },
+    // 选择供应商
+    handleSelectSupplier(e) {
+      this.selectedAuthUserId = e.authUserId
+      this.selectedSupplierInfo = e
+    },
+    // 选择供应商对话框关闭事件
+    handleDialogClosed() {
+      this.listQuery.pageNum = 1
+      this.listQuery.shopName = ''
+      this.listQuery.shopType = ''
+      this.listQuery.mobile = ''
+      this.listQuery.limkMan = ''
+    },
+    // 筛选供应商
+    filterSupplierList() {
+      this.pageNum = 1
+      this.supplierList = []
+      this.fetchSupplierList()
+    },
+    // 获取供应商列表
+    fetchSupplierList() {
+      fetchSupplierList(this.listQuery).then(res => {
+        console.log(res)
+        this.supplierList = [...this.supplierList, ...res.data.list]
+        this.hasNextPage = res.data.hasNextPage
+        this.total = res.data.total
+      })
     },
     handlePackageChange(id) {
       console.log(id)
       const current = this.packageList.find(item => item.id === id)
       this.currentPackageList = [current]
     },
-    getSuplierList() {},
     handleChooseSupplier() {
+      this.filterSupplierList()
       this.dialogTableVisible = true
     },
     onLoad() {
-      console.log('触底了')
-      this.supplierList.push(...this.addLimit())
+      if (!this.hasNextPage) return
+      this.listQuery.pageNum++
+      this.fetchSupplierList()
+    },
+    // 获取套餐列表
+    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
+        })
+      })
     }
   }
 }

src/views/admin/member/index.vue

@@ -24,10 +24,14 @@
       </div>
       <div class="filter-control">
         <span>会员状态:</span>
-        <el-input v-model="listQuery.state" placeholder="会员状态" @keyup.enter.native="getList" />
+        <el-select v-model="listQuery.vipStatus" placeholder="会员状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="生效中" value="1" />
+          <el-option label="已过期" value="2" />
+        </el-select>
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
         <el-button type="primary" @click="$_navigationTo('/member/handsel')">赠送会员</el-button>
       </div>
     </div>
@@ -50,18 +54,23 @@
           <span v-else>代理商</span>
         </template>
       </el-table-column>
-      <el-table-column prop="account" label="登录账号" align="center" />
+      <el-table-column label="登录账号" align="center">
+        <template slot-scope="{ row }">
+          <span v-if="row.loginAccount">{{ row.loginAccount }}</span>
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
       <el-table-column prop="mobile" label="手机号" align="center" />
-      <el-table-column prop="limkMan" label="联系人" align="center" />
+      <el-table-column prop="linkMan" label="联系人" align="center" />
       <el-table-column label="会员状态" align="center">
         <template slot-scope="{ row }">
-          <span v-if="row.state === 1" class="status success">生效中</span>
+          <span v-if="row.vipStatus === '1'" class="status success">生效中</span>
           <span v-else class="status danger">已过期</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template>
-          <el-button type="primary" size="mini" @click="$_navigationTo('/member/record')">购买记录</el-button>
+      <el-table-column label="操作" align="center" width="280">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini" @click="$_navigationTo(`/member/record?id=${row.authUserId}`)">购买记录</el-button>
           <el-button type="primary" size="mini" @click="$_navigationTo('/member/service')">配置定制化服务</el-button>
         </template>
       </el-table-column>
@@ -70,36 +79,39 @@
 </template>
 
 <script>
+import { fetchMemberList } from '@/api/member'
 export default {
   data() {
     return {
       listLoading: false,
       listQuery: {
+        linkMan: '',
+        mobile: '',
+        vipStatus: '',
         shopName: '',
         shopType: '',
-        mobile: '',
-        state: '',
-        limkMan: '',
         pageNum: 1,
         pageSize: 10
       },
-      list: [
-        {
-          shopName: '火影大战葫芦娃',
-          shopType: 1,
-          account: 'admin',
-          mobile: '15872950940',
-          limkMan: '还差的远呢',
-          state: 1
-        }
-      ]
+      list: [],
+      hasNextPage: false
     }
   },
+  created() {
+    this.getList()
+  },
   methods: {
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
     },
-    getList() {}
+    getList() {
+      fetchMemberList(this.listQuery).then(res => {
+        console.log(res)
+        this.list = res.data.list
+        this.hasNextPage = res.data.hasNextPage
+        this.total = res.data.total
+      })
+    }
   }
 }
 </script>

src/views/admin/member/record.vue

@@ -13,7 +13,7 @@
     <div class="filter-container">
       <div class="filter-control">
         <span>购买套餐:</span>
-        <el-select v-model="listQuery.packageId" placeholder="供应商类型" clearable @change="getList">
+        <el-select v-model="listQuery.vipPackageId" placeholder="购买套餐" clearable @change="getList">
           <el-option label="不限" value="" />
           <el-option label="套餐一" :value="1" />
           <el-option label="套餐二" :value="2" />
@@ -21,7 +21,7 @@
       </div>
       <div class="filter-control">
         <span>会员状态:</span>
-        <el-select v-model="listQuery.state" placeholder="供应商类型" clearable @change="getList">
+        <el-select v-model="listQuery.vipStatus" placeholder="会员状态" clearable @change="getList">
           <el-option label="不限" value="" />
           <el-option label="待生效" :value="1" />
           <el-option label="生效中" :value="2" />
@@ -31,25 +31,31 @@
       <div class="filter-control">
         <span>购买时间:</span>
         <el-date-picker
-          v-model="buyTime"
+          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="expireTime"
+          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" icon="el-icon-search">查询</el-button>
+        <el-button type="primary" @change="getList">查询</el-button>
       </div>
     </div>
     <!-- 表格区域 -->
@@ -63,11 +69,7 @@
       header-row-class-name="tableHeader"
     >
       <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center" />
-      <el-table-column prop="name" label="购买套餐" align="center">
-        <template slot-scope="{ row }">
-          <span>{{ row.time }}年</span>
-        </template>
-      </el-table-column>
+      <el-table-column prop="duration" label="购买套餐" align="center" />
       <el-table-column label="购买价格" align="center">
         <template slot-scope="{ row }">
           <span>￥{{ row.price }}</span>
@@ -83,31 +85,31 @@
       </el-table-column>
       <el-table-column label="会员状态" align="center">
         <template slot-scope="{ row }">
-          <span v-if="row.state === 1" class="status warning">待生效</span>
-          <span v-if="row.state === 2" class="status success">生效中</span>
-          <span v-if="row.state === 3" class="status danger">已过期</span>
+          <span v-if="row.vipStatus === 1" class="status warning">待生效</span>
+          <span v-if="row.vipStatus === 2" class="status success">生效中</span>
+          <span v-if="row.vipStatus === 3" class="status danger">已过期</span>
         </template>
       </el-table-column>
       <el-table-column label="购买时间" align="center">
         <template slot-scope="{ row }">
-          <span>{{ row.buyTime }}</span>
+          <span>{{ row.payTime }}</span>
         </template>
       </el-table-column>
       <el-table-column label="到期时间" align="center">
         <template slot-scope="{ row }">
-          <span>{{ row.expireTime }}</span>
+          <span>{{ row.endTime }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
-        <template>
-          <el-button type="primary" size="mini" @click="dialogTableVisible = true">定制需求</el-button>
+        <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>
+      <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>
@@ -119,51 +121,69 @@
 </template>
 
 <script>
+import { fetchVipRecord } from '@/api/member'
 export default {
   data() {
     return {
+      listLoading: false,
       dialogTableVisible: false,
+      endTimeArray: [],
+      payTimeArray: [],
       listQuery: {
-        packageId: '',
-        state: '',
-        buyTime: '',
-        expireTime: '',
+        authUserId: '',
+        endBeginTime: null,
+        endEndTime: null,
+        payBeginTime: null,
+        payEndTime: null,
+        vipPackageId: '',
+        vipStatus: '',
         pageSize: 10,
         pageNum: 1
       },
-      list: [
-        {
-          time: 1,
-          price: 5980,
-          payWay: 1,
-          state: 1,
-          buyTime: '2021-12-24 11:24:33',
-          expireTime: '2022-12-24 11:24:33'
-        }
-      ],
-      demandList: [
-        {
-          id: 1,
-          demand: '认证授权图片模板'
-        },
-        {
-          id: 2,
-          demand: '认证授权物料制作'
-        },
-        {
-          id: 3,
-          demand: '品牌资料库'
-        },
-        {
-          id: 4,
-          demand: '其他'
-        }
-      ]
+      list: [],
+      demandList: []
     }
   },
+  created() {
+    this.listQuery.authUserId = this.$route.query.id
+    this.fetchVipRecord()
+  },
   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
     }
   }
 }

src/views/admin/member/settings/combo-edit.vue

@@ -2,63 +2,162 @@
   <div class="app-container">
     <el-divider content-position="left">会员套餐配置</el-divider>
     <div class="list">
-      <div class="section">
-        <div class="control"><span>套餐1</span></div>
+      <div v-for="(item, index) in packageList" :key="index" class="section">
+        <div class="control">
+          <span>套餐{{ index + 1 }}</span>
+        </div>
         <div class="control">
           <span>期限</span>
-          <el-input size="mini" style="width:80px;margin-right:16px" />
-          <el-select v-model="dateType" placeholder="请选择" size="mini">
-            <el-option label="年" :value="1" />
-            <el-option label="月" :value="2" />
+          <el-input v-model="item.duration" size="mini" style="width:80px;margin-right:16px" />
+          <el-select v-model="item.unit" placeholder="请选择" size="mini">
+            <el-option label="月" :value="1" />
+            <el-option label="年" :value="2" />
           </el-select>
         </div>
         <div class="control">
           <span>原价</span>
-          <el-input size="mini" />
+          <el-input v-model="item.originalPrice" size="mini" />
           <span>元</span>
         </div>
         <div class="control">
           <span>现价</span>
-          <el-input size="mini" />
+          <el-input v-model="item.price" size="mini" />
           <span>元</span>
         </div>
         <div class="control">
-          <el-button type="primary" size="mini">添加</el-button>
-          <el-button type="danger" size="mini">删除</el-button>
+          <el-button v-if="index === packageList.length -1" type="primary" size="mini" @click="insertOnePackage">添加</el-button>
+          <el-button v-if="canRemovePackage " type="danger" size="mini" @click="removeOnePackage(item,index)">删除</el-button>
         </div>
       </div>
     </div>
     <el-divider content-position="left">会员订制服务配置</el-divider>
     <div class="list">
-      <div class="section">
-        <div class="control"><span>定制服务1</span></div>
+      <div v-for="(item, index) in serviceList" :key="index" class="section">
+        <div class="control"><span>定制服务{{ index + 1 }}</span></div>
         <div class="control">
           <span>定制服务名称</span>
-          <el-input size="mini" />
+          <el-input v-model="item.name" size="mini" />
         </div>
         <div class="control">
-          <el-button type="primary" size="mini">添加</el-button>
-          <el-button type="danger" size="mini">删除</el-button>
+          <el-button v-if="index === serviceList.length -1" type="primary" size="mini" @click="insertOneSerivice">添加</el-button>
+          <el-button v-if="canRemoveService" type="danger" size="mini" @click="removeOneService(item,index)">删除</el-button>
         </div>
       </div>
     </div>
+    <el-divider />
+    <!-- 确认 取消 -->
+    <div class="control-box">
+      <el-button type="warning" @click="$_back">返回</el-button>
+      <el-button type="primary" @click="updateConfigure">保存</el-button>
+    </div>
   </div>
 </template>
 
 <script>
+import { fetchConfigureList, updateConfigure } from '@/api/member'
 export default {
   data() {
     return {
-      dateType: 1
+      dateType: 1,
+      packageList: [],
+      serviceList: []
+    }
+  },
+  computed: {
+    canRemovePackage() {
+      return this.packageList.length > 1
+    },
+    canRemoveService() {
+      return this.serviceList.length > 1
+    }
+  },
+  created() {
+    this.fetchConfigureList()
+  },
+  methods: {
+    // 获取套餐 服务配置列表
+    fetchConfigureList() {
+      fetchConfigureList().then(res => {
+        this.packageList = res.data.packageList
+        this.serviceList = res.data.serviceList
+      })
+    },
+    // 更新套餐 服务配置列表
+    updateConfigure() {
+      updateConfigure({ packageList: this.packageList, serviceList: this.serviceList }).then(res => {
+        console.log(res)
+        this.$message.success('套餐配置保存成功')
+      })
+    },
+    // 添加一条空套餐记录
+    insertOnePackage() {
+      this.packageList.push({
+        duration: '',
+        unit: 1,
+        originalPrice: '',
+        price: ''
+      })
+    },
+    // 添加一条空服务记录
+    insertOneSerivice() {
+      this.serviceList.push({
+        name: ''
+      })
+    },
+    // 删除一条套餐记录
+    removeOnePackage(item, index) {
+      if (item.id) {
+        this.$confirm('确认删除该项配置?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.packageList.splice(index, 1)
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+      } else {
+        this.packageList.splice(index, 1)
+      }
+    },
+    // 删除一条服务记录
+    removeOneService(item, index) {
+      if (item.id) {
+        this.$confirm('确认删除该项配置?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.serviceList.splice(index, 1)
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+      } else {
+        this.serviceList.splice(index, 1)
+      }
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-.list{
+.list {
   margin-bottom: 60px;
 }
+.control-box {
+  margin: 40px 0;
+  text-align: center;
+  .el-button {
+    width: 140px;
+    margin: 0 8px;
+  }
+}
 .section {
   margin: 24px 0;
   margin-left: 32px;
@@ -78,7 +177,7 @@ export default {
     > .el-input {
       width: 160px;
     }
-    > .el-select{
+    > .el-select {
       width: 100px;
     }
   }

src/views/admin/member/settings/service-edit.vue

@@ -22,7 +22,7 @@
           <el-table-column label="定制需求" prop="demand" align="center" />
           <el-table-column label="是否配置" align="center" width="120">
             <template slot-scope="{ row }">
-              <el-checkbox v-model="row.isChecked" />
+              <el-checkbox v-model="row.isChecked" disabled />
             </template>
           </el-table-column>
         </el-table>
@@ -59,7 +59,7 @@
           <el-table-column label="定制需求" prop="demand" align="center" />
           <el-table-column label="是否配置" align="center" width="120">
             <template slot-scope="{ row }">
-              <el-checkbox v-model="row.isChecked" />
+              <el-checkbox v-model="row.isChecked" disabled />
             </template>
           </el-table-column>
         </el-table>
@@ -85,12 +85,12 @@ export default {
         {
           id: 1,
           demand: '认证授权图片模板',
-          isChecked: false
+          isChecked: true
         },
         {
           id: 2,
           demand: '认证授权物料制作',
-          isChecked: false
+          isChecked: true
         },
         {
           id: 3,

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

@@ -17,7 +17,7 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <el-button type="primary" @click="$_navigationTo('menus/add')">添加菜单</el-button>
+        <el-button type="primary" @click="$_navigationTo('/settings/menus/add')">添加菜单</el-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/admin/supplier/club/device/index.vue

@@ -54,7 +54,7 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
+        <el-button type="primary" @click="handleFilter">查询</el-button>
       </div>
     </div>
     <!-- 表格区域 -->

src/views/admin/supplier/club/index.vue

@@ -44,9 +44,9 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <el-button icon="el-icon-search" type="primary" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
         <!-- <el-button icon="el-icon-upload" type="primary" @click="improtDialogVisible = true">导入</el-button> -->
-        <el-button icon="el-icon-document" type="primary" @click="handleExportExcel">导出</el-button>
+        <el-button type="primary" @click="handleExportExcel">导出</el-button>
         <!-- <el-button icon="el-icon-document-copy" type="primary" @click="downLoadExportExcel">获取导入模板</el-button> -->
       </div>
     </div>

src/views/admin/supplier/index.vue

@@ -58,8 +58,8 @@
       </div>
 
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList(listQuery)">查询</el-button>
-        <el-button type="primary" icon="el-icon-edit" @click="$_navigationTo('supplier-add')">添加供应商</el-button>
+        <el-button type="primary" @click="getList(listQuery)">查询</el-button>
+        <el-button type="primary" @click="$_navigationTo('supplier-add')">添加供应商</el-button>
       </div>
     </div>
     <!-- 表格区域 -->

src/views/common/helper/document/index.vue

@@ -17,7 +17,7 @@
         />
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
         <el-button
           v-if="userIdentity === 1"
           icon="el-icon-edit"

src/views/common/helper/video/index.vue

@@ -17,7 +17,7 @@
         />
       </div>
       <div class="filter-control">
-        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
         <el-button
           v-if="userIdentity === 1"
           icon="el-icon-edit"

src/views/normal/club/device/index.vue

@@ -28,9 +28,8 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <permission-button type="primary" icon="el-icon-search" @click="handleFilter">查询</permission-button>
+        <permission-button type="primary" @click="handleFilter">查询</permission-button>
         <permission-button
-          icon="el-icon-edit"
           type="primary"
           @click="$_navigationTo(`device-add?type=add`)"
         >添加</permission-button>

src/views/normal/club/index.vue

@@ -24,35 +24,15 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <permission-button icon="el-icon-search" type="primary" @click="getList">查询</permission-button>
-        <permission-button
-          icon="el-icon-edit"
-          type="primary"
-          @click="$_navigationTo('club-add?type=edit')"
-        >添加</permission-button>
-        <permission-button
-          icon="el-icon-upload"
-          type="primary"
-          @click="improtDialogVisible = true"
-        >导入</permission-button>
-        <permission-button icon="el-icon-document" type="primary" @click="handleExportExcel">导出</permission-button>
+        <permission-button type="primary" @click="getList">查询</permission-button>
+        <permission-button type="primary" @click="$_navigationTo('club-add?type=edit')">添加</permission-button>
+        <permission-button type="primary" @click="improtDialogVisible = true">导入</permission-button>
+        <permission-button type="primary" @click="handleExportExcel">导出</permission-button>
       </div>
       <div class="filter-control">
-        <permission-button
-          icon="el-icon-document-copy"
-          type="primary"
-          @click="downLoadExportExcel"
-        >获取导入模板</permission-button>
-        <permission-button
-          type="primary"
-          icon="el-icon-download"
-          @click="handleExport(1)"
-        >一键下载授权牌</permission-button>
-        <permission-button
-          type="primary"
-          icon="el-icon-download"
-          @click="handleExport(2)"
-        >一键下载二维码</permission-button>
+        <permission-button type="primary" @click="downLoadExportExcel">获取导入模板</permission-button>
+        <permission-button type="primary" @click="handleExport(1)">一键下载授权牌</permission-button>
+        <permission-button type="primary" @click="handleExport(2)">一键下载二维码</permission-button>
       </div>
     </div>
     <!-- 表格区域 -->
@@ -570,6 +550,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/views/normal/club/user/index.vue

@@ -25,8 +25,8 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
-        <permission-button icon="el-icon-thumb" type="primary" @click="handleMakeGenerate">生成邀请码</permission-button>
+        <permission-button type="primary" @click="getList">查询</permission-button>
+        <permission-button type="primary" @click="handleMakeGenerate">生成邀请码</permission-button>
       </div>
     </div>
     <!-- 搜索区域END -->

src/views/normal/doctor/index.vue

@@ -3,20 +3,11 @@
     <div class="filter-container">
       <div class="filter-control">
         <span>医师姓名:</span>
-        <el-input
-          v-model="listQuery.doctorName"
-          placeholder="医师姓名"
-          @keyup.enter.native="handleFilter"
-        />
+        <el-input v-model="listQuery.doctorName" placeholder="医师姓名" @keyup.enter.native="handleFilter" />
       </div>
       <div class="filter-control">
         <span>审核状态:</span>
-        <el-select
-          v-model="listQuery.auditStatus"
-          placeholder="审核状态"
-          clearable
-          @change="getList"
-        >
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
           <el-option label="全部" value="" />
           <el-option label="待审核" :value="2" />
           <el-option label="审核通过" :value="1" />
@@ -25,12 +16,7 @@
       </div>
       <div class="filter-control">
         <span>上线状态:</span>
-        <el-select
-          v-model="listQuery.status"
-          placeholder="上线状态"
-          clearable
-          @change="getList"
-        >
+        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
           <el-option label="全部" value="" />
           <el-option label="已上线" :value="1" />
           <el-option label="待上线" :value="2" />
@@ -38,12 +24,8 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
-        <permission-button
-          type="primary"
-          icon="el-icon-edit"
-          @click="$_navigationTo('add?type=add')"
-        >添加</permission-button>
+        <permission-button type="primary" @click="getList">查询</permission-button>
+        <permission-button type="primary" @click="$_navigationTo('add?type=add')">添加</permission-button>
       </div>
     </div>
     <!-- 表格区域 -->
@@ -213,6 +195,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/views/normal/feedback/index.vue

@@ -19,7 +19,7 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
+        <permission-button type="primary" @click="getList">查询</permission-button>
       </div>
     </div>
     <!-- 搜索区域END -->
@@ -34,7 +34,7 @@
       cell-class-name="table-cell"
       header-row-class-name="tableHeader"
     >
-      <el-table-column label="序号" :index="indexMethod" type="index" width="80" align="center" />
+
       <el-table-column type="expand" width="50">
         <template slot-scope="{ row }">
           <el-form label-position="left" class="table-expand" label-width="110px">
@@ -62,6 +62,7 @@
           </el-form>
         </template>
       </el-table-column>
+      <el-table-column label="序号" :index="indexMethod" type="index" width="80" align="center" />
       <el-table-column label="机构名称" prop="clubName" align="center" />
       <el-table-column label="手机号" prop="mobile" width="120" align="center" />
       <el-table-column label="反馈内容" prop="content" align="center">

src/views/normal/material/article/index.vue

@@ -25,12 +25,8 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
-        <permission-button
-          icon="el-icon-edit"
-          type="primary"
-          @click="$_navigationTo(`article-edit`)"
-        >添加文章</permission-button>
+        <permission-button type="primary" @click="getList">查询</permission-button>
+        <permission-button type="primary" @click="$_navigationTo(`article-edit`)">添加文章</permission-button>
       </div>
     </div>
     <!-- 搜索区域END -->
@@ -97,14 +93,12 @@
             type="primary"
             size="mini"
             style="margin-right:5px"
-            icon="el-icon-edit"
             @click="$_navigationTo(`article-edit?articleId=${row.articleId}`)"
           >编辑</permission-button>
           <permission-button
             type="danger"
             size="mini"
             style="margin-right:5px"
-            icon="el-icon-s-check"
             @click="handleRemoveArticle(row)"
           >删除</permission-button>
         </template>

src/views/normal/material/file/index.vue

@@ -4,20 +4,11 @@
     <div class="filter-container">
       <div class="filter-control">
         <span>文件标题:</span>
-        <el-input
-          v-model="listQuery.fileTitle"
-          placeholder="文件标题"
-          @keyup.enter.native="getList"
-        />
+        <el-input v-model="listQuery.fileTitle" placeholder="文件标题" @keyup.enter.native="getList" />
       </div>
       <div class="filter-control">
         <span>审核状态:</span>
-        <el-select
-          v-model="listQuery.auditStatus"
-          placeholder="审核状态"
-          clearable
-          @change="getList"
-        >
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
           <el-option label="全部" value="" />
           <el-option label="待审核" :value="2" />
           <el-option label="审核通过" :value="1" />
@@ -26,12 +17,7 @@
       </div>
       <div class="filter-control">
         <span>上线状态:</span>
-        <el-select
-          v-model="listQuery.status"
-          placeholder="上线状态"
-          clearable
-          @change="getList"
-        >
+        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
           <el-option label="全部" value="" />
           <el-option label="已上线" :value="1" />
           <el-option label="待上线" :value="2" />
@@ -39,12 +25,8 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
-        <permission-button
-          icon="el-icon-edit"
-          type="primary"
-          @click="handleShowDialog('add')"
-        >添加文件</permission-button>
+        <permission-button type="primary" @click="getList">查询</permission-button>
+        <permission-button type="primary" @click="handleShowDialog('add')">添加文件</permission-button>
       </div>
     </div>
     <!-- 搜索区域END -->
@@ -84,20 +66,11 @@
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
               <span style="margin-right:10px;" class="status danger">已下线</span>
-              <permission-button
-                type="primary"
-                size="mini"
-                @click="handleChangeStatus(row)"
-              >上线</permission-button>
+              <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
             </template>
             <template v-else>
               <span style="margin-right:10px;" class="status success ">已上线</span>
-              <permission-button
-                type="info"
-                size="mini"
-                plain
-                @click="handleChangeStatus(row)"
-              >下线</permission-button>
+              <permission-button type="info" size="mini" plain @click="handleChangeStatus(row)">下线</permission-button>
             </template>
           </template>
           <template v-else>
@@ -117,21 +90,18 @@
             type="primary"
             size="mini"
             style="margin-right:5px"
-            icon="el-icon-view"
             @click="handlePreviewFile(row)"
           >预览</permission-button>
           <permission-button
             type="primary"
             size="mini"
             style="margin-right:5px"
-            icon="el-icon-edit"
             @click="handleShowDialog('edit', row)"
           >编辑</permission-button>
           <permission-button
             type="danger"
             size="mini"
             style="margin-right:5px"
-            icon="el-icon-s-check"
             @click="handleRemoveFile(row)"
           >删除</permission-button>
         </template>
@@ -332,7 +302,8 @@ export default {
             type: 'success'
           })
           this.getList()
-        }).finally(() => {
+        })
+        .finally(() => {
           this.listLoading = false
         })
     },
@@ -421,13 +392,15 @@ export default {
         confirmButtonText: '继续',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => {
-        return Promise.resolve()
-      }).catch(() => {
-        this.$message.info('已取消上传')
-        this.submitLoading = false
-        return Promise.reject()
       })
+        .then(() => {
+          return Promise.resolve()
+        })
+        .catch(() => {
+          this.$message.info('已取消上传')
+          this.submitLoading = false
+          return Promise.reject()
+        })
     },
 
     // 表格索引

src/views/normal/material/image/index.vue

@@ -39,9 +39,9 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
+        <permission-button type="primary" @click="getList">查询</permission-button>
         <permission-button
-          icon="el-icon-edit"
+          icon="icon-tianjia iconfont"
           type="primary"
           @click="$_navigationTo(`image-edit?type=add`)"
         >添加图片</permission-button>
@@ -110,8 +110,8 @@
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
         <template slot-scope="{row}">
-          <permission-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`image-edit?type=edit&imageId=${row.imageId}`)">编辑</permission-button>
-          <permission-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check" @click="handleRemoveImage(row)">删除</permission-button>
+          <permission-button type="primary" size="mini" style="margin-right:5px" @click="$_navigationTo(`image-edit?type=edit&imageId=${row.imageId}`)">编辑</permission-button>
+          <permission-button type="danger" size="mini" style="margin-right:5px" @click="handleRemoveImage(row)">删除</permission-button>
         </template>
       </el-table-column>
     </el-table>

src/views/normal/material/video/index.vue

@@ -4,20 +4,11 @@
     <div class="filter-container">
       <div class="filter-control">
         <span>视频标题:</span>
-        <el-input
-          v-model="listQuery.videoTitle"
-          placeholder="视频标题"
-          @keyup.enter.native="getList"
-        />
+        <el-input v-model="listQuery.videoTitle" placeholder="视频标题" @keyup.enter.native="getList" />
       </div>
       <div class="filter-control">
         <span>审核状态:</span>
-        <el-select
-          v-model="listQuery.auditStatus"
-          placeholder="审核状态"
-          clearable
-          @change="getList"
-        >
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
           <el-option label="全部" value="" />
           <el-option label="待审核" :value="2" />
           <el-option label="审核通过" :value="1" />
@@ -26,12 +17,7 @@
       </div>
       <div class="filter-control">
         <span>上线状态:</span>
-        <el-select
-          v-model="listQuery.status"
-          placeholder="上线状态"
-          clearable
-          @change="getList"
-        >
+        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
           <el-option label="全部" value="" />
           <el-option label="已上线" :value="1" />
           <el-option label="待上线" :value="2" />
@@ -39,8 +25,8 @@
         </el-select>
       </div>
       <div class="filter-control">
-        <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
-        <permission-button icon="el-icon-edit" type="primary" @click="handleShowDialog('add')">添加视频</permission-button>
+        <permission-button type="primary" @click="getList">查询</permission-button>
+        <permission-button type="primary" @click="handleShowDialog('add')">添加视频</permission-button>
       </div>
     </div>
     <!-- 搜索区域END -->
@@ -64,13 +50,7 @@
           <!-- 未通过原因展示 -->
           <template v-if="row.auditStatus === 0">
             <!-- <span class="status danger">审核未通过&nbsp;</span> -->
-            <el-popover
-              placement="top-start"
-              title="审核说明"
-              width="400"
-              trigger="hover"
-              :content="row.invalidReason"
-            >
+            <el-popover placement="top-start" title="审核说明" width="400" trigger="hover" :content="row.invalidReason">
               <el-tag slot="reference" size="small" type="danger" class="reason">
                 <span>审核未通过</span>
                 <span class="el-icon-question status danger " />
@@ -81,7 +61,7 @@
         </template>
       </el-table-column>
       <el-table-column label="上线状态" width="180px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
@@ -100,20 +80,41 @@
         </template>
       </el-table-column>
       <el-table-column label="创建时间" width="240px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           {{ row.createTime | formatTime }}
         </template>
       </el-table-column>
       <el-table-column label="操作" width="280px" align="center">
-        <template slot-scope="{row}">
-          <permission-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-video-play" @click="handlePlayer(row)">播放</permission-button>
-          <permission-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="handleShowDialog('edit',row)">编辑</permission-button>
-          <permission-button type="danger" size="mini" style="margin-right:5px" icon="el-icon-s-check" @click="handleRemoveVideo(row)">删除</permission-button>
+        <template slot-scope="{ row }">
+          <permission-button
+            type="primary"
+            size="mini"
+            style="margin-right:5px"
+            @click="handlePlayer(row)"
+          >播放</permission-button>
+          <permission-button
+            type="primary"
+            size="mini"
+            style="margin-right:5px"
+            @click="handleShowDialog('edit', row)"
+          >编辑</permission-button>
+          <permission-button
+            type="danger"
+            size="mini"
+            style="margin-right:5px"
+            @click="handleRemoveVideo(row)"
+          >删除</permission-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList(listQuery)" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList(listQuery)"
+    />
     <!-- 视频预览对话框 -->
     <el-dialog
       :title="dialogTitle"
@@ -129,13 +130,12 @@
           <el-input v-model="dialogData.videoTitle" maxlength="50" show-word-limit />
         </el-form-item>
         <el-form-item ref="formVideoUrlRef" label="上传视频：" prop="videoPreviewUrl">
-
           <div class="file-upload-box" style="height:40px;">
             <!-- 上传文件组件 -->
             <el-upload
               ref="uploadRef"
               accept=".mp4"
-              :class="{hidden:hasVideo}"
+              :class="{ hidden: hasVideo }"
               :auto-upload="false"
               :headers="headers"
               :action="action"
@@ -160,12 +160,7 @@
     <!-- 视频预览对话框END -->
 
     <!-- 视频预览对话框 -->
-    <el-dialog
-      title="视频预览"
-      :visible.sync="dialogPreviewVisible"
-      width="60%"
-      @closed="dialogPreviewColosed"
-    >
+    <el-dialog title="视频预览" :visible.sync="dialogPreviewVisible" width="60%" @closed="dialogPreviewColosed">
       <video :src="videoPreviewUrl" controls="controls" width="100%">
         您的浏览器不支持播放该视频
       </video>
@@ -174,7 +169,6 @@
       </div>
     </el-dialog>
     <!-- 视频预览对话框END -->
-
   </div>
 </template>
 
@@ -251,7 +245,6 @@ export default {
     this.getList()
   },
   methods: {
-
     // 播放视频
     handlePlayer(row) {
       this.currentVideoUrl = row.videoPreviewUrl
@@ -285,7 +278,7 @@ export default {
         return
       }
       // 对标题字段进行规则校验
-      this.$refs.formRef.validateField('videoTitle', (error) => {
+      this.$refs.formRef.validateField('videoTitle', error => {
         if (!error) {
           /**
            * 新增视频和修改视频
@@ -299,8 +292,10 @@ export default {
            *      4.修改时，只修改视频标题，已经有了视频地址  --直接提交
            *      5.修改时，重新选择了视频  --上传视频后再提交
            */
-          this.submitLoading = true;
-          (this.dialogData.videoPreviewUrl && (!this.hasVideo || (this.hasVideo && !this.chooseNewVideo))) ? this.save() : this.$refs.uploadRef.submit()
+          this.submitLoading = true
+          this.dialogData.videoPreviewUrl && (!this.hasVideo || (this.hasVideo && !this.chooseNewVideo))
+            ? this.save()
+            : this.$refs.uploadRef.submit()
         }
       })
     },
@@ -325,7 +320,8 @@ export default {
               message: res.data,
               duration: 500
             })
-          }).finally(() => {
+          })
+          .finally(() => {
             this.submitLoading = false
           })
       })
@@ -354,12 +350,11 @@ export default {
         this.$message.info('已取消操作')
       })
       if (text !== 'confirm') return
-      removeVideo({ videoId: row.videoId })
-        .then(res => {
-          if (res.code !== 0) return
-          this.$message.success(res.data)
-          this.getList()
-        })
+      removeVideo({ videoId: row.videoId }).then(res => {
+        if (res.code !== 0) return
+        this.$message.success(res.data)
+        this.getList()
+      })
     },
     // 显示对话框
     handleShowDialog(type, row) {
@@ -432,19 +427,22 @@ export default {
         videoId: item.videoId,
         status: item.status === 1 ? 0 : 1
       }
-      changeVideoStatus(params).then(res => {
-        // this.$message.success(res.data)
-        this.$message({
-          message: res.data,
-          duration: 500,
-          type: 'success'
+      changeVideoStatus(params)
+        .then(res => {
+          // this.$message.success(res.data)
+          this.$message({
+            message: res.data,
+            duration: 500,
+            type: 'success'
+          })
+          this.getList()
+        })
+        .catch(err => {
+          console.log(err)
+        })
+        .finally(() => {
+          this.listLoading = false
         })
-        this.getList()
-      }).catch(err => {
-        console.log(err)
-      }).finally(() => {
-        this.listLoading = false
-      })
     },
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
@@ -457,10 +455,10 @@ export default {
 .el-table .cell {
   overflow: visible;
 }
-.el-badge{
+.el-badge {
   margin: 0 6px;
 }
-.hasBottom{
+.hasBottom {
   padding-bottom: 40px;
 }
 </style>

src/views/normal/personal/index.vue

@@ -1,15 +1,82 @@
 <template>
-  <div>
-    个人资料
+  <div class="app-container personal-info">
+    <div class="title">个人资料</div>
+    <el-divider />
+    <el-row>
+      <el-col :span="5">公司名称：</el-col>
+      <el-col :span="19">上海品牌医疗国际有限公司</el-col>
+    </el-row>
+    <el-divider />
+    <el-row>
+      <el-col :span="5">所属类型：</el-col>
+      <el-col :span="8">代理商</el-col>
+    </el-row>
+    <el-divider />
+    <el-row>
+      <el-col :span="5">手机号：</el-col>
+      <el-col :span="8">158729590490</el-col>
+      <el-col :span="8">
+        <router-link class="link" to="/personal/mobile"><i class="el-icon-edit" /><span>修改手机号</span></router-link>
+      </el-col>
+    </el-row>
+    <el-divider />
+    <el-row>
+      <el-col :span="5">登录账号：</el-col>
+      <el-col :span="8">暂未绑定</el-col>
+      <el-col :span="8">
+        <router-link class="link" to="/personal/account"><i class="el-icon-link" /><span>去绑定</span></router-link>
+      </el-col>
+    </el-row>
+    <el-divider />
+    <el-row>
+      <el-col :span="5">代理品牌：</el-col>
+      <el-col :span="8">skinrex</el-col>
+    </el-row>
+    <el-divider />
+    <el-row>
+      <el-col :span="5">会员状态：</el-col>
+      <el-col :span="8">非会员</el-col>
+      <el-col :span="8">
+        <router-link class="link" to="/vip/vip-open"><i class="el-icon-thumb" /><span>开通会员</span></router-link>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 export default {
-
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapGetters(['userInfo'])
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.personal-info {
+  width: 600px;
+  margin: 0 auto;
+  margin-top: 60px;
+  color: #101010;
+  .link {
+    color: #409EFF;
+    font-size: 14px;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 
+  .el-row{
+    .el-col:nth-child(2){
+      color: #404040;
+    }
+  }
+}
+.title {
+  font-size: 24px;
+  font-weight: bold;
+}
 </style>

src/views/normal/personal/set-account.vue

@@ -1,15 +1,103 @@
 <template>
   <div>
-    绑定登录账号
+    <el-form ref="form" :model="formData" :rules="formRules" label-width="120px" class="form">
+      <el-form-item label="手机号" prop="oldPassword">
+        <el-input v-model="formData.oldPassword" type="password" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item label="验证码" prop="newPassword">
+        <el-row>
+          <el-col
+            :span="18"
+          ><el-input
+            v-model="formData.newPassword"
+            type="password"
+            placeholder="请输入验证码"
+          /></el-col>
+          <el-col :span="6" class="send-code"><el-button type="primary">获取验证码</el-button></el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item label="绑定登录账号" prop="confirmPwd">
+        <el-input v-model="formData.confirmPwd" type="password" placeholder="请输入登录账号" />
+      </el-form-item>
+    </el-form>
+    <div class="submit-btn">
+      <el-button type="primary" @click="submit()">确认</el-button>
+      <el-button type="warning" @click="$_back()">返回</el-button>
+    </div>
   </div>
 </template>
 
 <script>
+import { modifyPassword } from '@/api/user'
 export default {
-
+  data() {
+    var confirmPassword = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入新手机号'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      formData: {
+        oldPassword: '',
+        newPassword: '',
+        confirmPwd: ''
+      },
+      formRules: {
+        oldPassword: [{ required: true, message: '请输入原来的手机号', trigger: 'blur' }],
+        newPassword: [{ required: true, trigger: ['change', 'blur'], message: '请输入旧手机号收到的验证码' }],
+        confirmPwd: [
+          { required: true, message: '请输入新手机号' },
+          { validator: confirmPassword, trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit() {
+      const that = this
+      this.$refs.form.validate(valide => {
+        if (!valide) return
+        const authUserId = this.$store.getters.authUserId
+        modifyPassword({ authUserId, ...that.formData })
+          .then(res => {
+            if (res.code === 0) {
+              this.$refs.form.resetFields()
+              this.$message.success('密码修改成功,请重新登录')
+              this.logout()
+            }
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    async logout() {
+      setTimeout(() => {
+        // 退出登录重置用户信息
+        this.$store.dispatch('user/logout')
+        // 重置相关state
+        this.$store.dispatch('resetState')
+        this.$router.replace('/login')
+      }, 500)
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.submit-btn {
+  text-align: center;
+  .el-button {
+    width: 140px;
+  }
+}
+.send-code{
+  text-align: right;
+}
+.form {
+  width: 600px;
+  margin: 80px auto 0;
+}
 </style>

src/views/normal/personal/set-mobile.vue

@@ -1,15 +1,103 @@
 <template>
   <div>
-    修改手机号
+    <el-form ref="form" :model="formData" :rules="formRules" label-width="80px" class="form">
+      <el-form-item label="原手机号" prop="oldPassword">
+        <el-input v-model="formData.oldPassword" type="password" placeholder="请输入原手机号" />
+      </el-form-item>
+      <el-form-item label="验证码" prop="newPassword">
+        <el-row>
+          <el-col
+            :span="18"
+          ><el-input
+            v-model="formData.newPassword"
+            type="password"
+            placeholder="请输入验证码"
+          /></el-col>
+          <el-col :span="6" class="send-code"><el-button type="primary">获取验证码</el-button></el-col>
+        </el-row>
+      </el-form-item>
+      <el-form-item label="新手机号" prop="confirmPwd">
+        <el-input v-model="formData.confirmPwd" type="password" placeholder="请输入新手机号" />
+      </el-form-item>
+    </el-form>
+    <div class="submit-btn">
+      <el-button type="primary" @click="submit()">确认</el-button>
+      <el-button type="warning" @click="$_back()">返回</el-button>
+    </div>
   </div>
 </template>
 
 <script>
+import { modifyPassword } from '@/api/user'
 export default {
-
+  data() {
+    var confirmPassword = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入新手机号'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      formData: {
+        oldPassword: '',
+        newPassword: '',
+        confirmPwd: ''
+      },
+      formRules: {
+        oldPassword: [{ required: true, message: '请输入原来的手机号', trigger: 'blur' }],
+        newPassword: [{ required: true, trigger: ['change', 'blur'], message: '请输入旧手机号收到的验证码' }],
+        confirmPwd: [
+          { required: true, message: '请输入新手机号' },
+          { validator: confirmPassword, trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit() {
+      const that = this
+      this.$refs.form.validate(valide => {
+        if (!valide) return
+        const authUserId = this.$store.getters.authUserId
+        modifyPassword({ authUserId, ...that.formData })
+          .then(res => {
+            if (res.code === 0) {
+              this.$refs.form.resetFields()
+              this.$message.success('密码修改成功,请重新登录')
+              this.logout()
+            }
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      })
+    },
+    async logout() {
+      setTimeout(() => {
+        // 退出登录重置用户信息
+        this.$store.dispatch('user/logout')
+        // 重置相关state
+        this.$store.dispatch('resetState')
+        this.$router.replace('/login')
+      }, 500)
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.submit-btn {
+  text-align: center;
+  .el-button {
+    width: 140px;
+  }
+}
+.send-code{
+  text-align: right;
+}
+.form {
+  width: 600px;
+  margin: 80px auto 0;
+}
 </style>