认证通会员版本页面绘制

src/router/module/audit.js

@@ -7,35 +7,35 @@ const clubAuditRoutes = [
     path: 'club',
     component: () => import('@/views/admin/audit/club'),
     name: 'AuditClub',
-    meta: { title: '机构认证', roles: ['admin'], noCache: true, id: 'club1' }
+    meta: { title: '机构认证', roles: ['admin'], noCache: true, id: 'audit1' }
   },
   {
     path: 'club-list',
     hidden: true,
     component: () => import('@/views/admin/audit/club/list'),
     name: 'AuditClubList',
-    meta: { title: '机构认证审核', roles: ['admin'], noCache: true, id: 'club2' }
+    meta: { title: '机构认证审核', roles: ['admin'], noCache: true, id: 'audit2' }
   },
   {
     path: 'club-detail',
     hidden: true,
     component: () => import('@/views/admin/audit/club/review'),
     name: 'AuditClubDetail',
-    meta: { title: '机构认证审核详情', roles: ['admin'], noCache: true, id: 'club3' }
+    meta: { title: '机构认证审核详情', roles: ['admin'], noCache: true, id: 'audit3' }
   },
   {
     path: 'club-device-list',
     hidden: true,
     component: () => import('@/views/admin/audit/club/device'),
     name: 'AuditClubDeviceList',
-    meta: { title: '设备审核列表', roles: ['admin'], noCache: true, id: 'club4' }
+    meta: { title: '设备审核列表', roles: ['admin'], noCache: true, id: 'audit4' }
   },
   {
     path: 'club-device-detail',
     hidden: true,
     component: () => import('@/views/admin/audit/club/device/review'),
     name: 'AuditClubDeviceDetail',
-    meta: { title: '设备审核详情', roles: ['admin'], noCache: true, id: 'club4' }
+    meta: { title: '设备审核详情', roles: ['admin'], noCache: true, id: 'audit5' }
   }
 ]
 
@@ -45,21 +45,21 @@ const doctorAuditRoutes = [
     path: 'doctor',
     component: () => import('@/views/admin/audit/doctor'),
     name: 'AuditDoctor',
-    meta: { title: '医师认证', roles: ['admin'], noCache: true, id: 'club6' }
+    meta: { title: '医师认证', roles: ['admin'], noCache: true, id: 'audit6' }
   },
   {
     path: 'doctor-list',
     hidden: true,
     component: () => import('@/views/admin/audit/doctor/list'),
     name: 'AuditDoctorList',
-    meta: { title: '医师审核列表', roles: ['admin'], noCache: true, id: 'club7' }
+    meta: { title: '医师审核列表', roles: ['admin'], noCache: true, id: 'audit7' }
   },
   {
     path: 'doctor-detail',
     hidden: true,
     component: () => import('@/views/admin/audit/doctor/review'),
     name: 'AuditDoctorDetail',
-    meta: { title: '医师审核详情', roles: ['admin'], noCache: true, id: 'club8' }
+    meta: { title: '医师审核详情', roles: ['admin'], noCache: true, id: 'audit8' }
   }
 ]
 
@@ -69,49 +69,49 @@ const materialAuditRoutes = [
     path: 'material',
     component: () => import('@/views/admin/audit/material'),
     name: 'AuditMaterial',
-    meta: { title: '资料库', roles: ['admin'], noCache: true, id: 'club9' }
+    meta: { title: '资料库', roles: ['admin'], noCache: true, id: 'audit9' }
   },
   {
     path: 'material/article-list',
     component: () => import('@/views/admin/audit/material/article'),
     name: 'AuditMaterialArticleList',
     hidden: true,
-    meta: { title: '文章审核列表', roles: ['admin'], noCache: true, id: 'club10' }
+    meta: { title: '文章审核列表', roles: ['admin'], noCache: true, id: 'audit10' }
   },
   {
     path: 'material/article-detail',
     component: () => import('@/views/admin/audit/material/article/review'),
     name: 'AuditMaterialArticleDetail',
     hidden: true,
-    meta: { title: '审核文章', roles: ['admin'], noCache: true, id: 'club11' }
+    meta: { title: '审核文章', roles: ['admin'], noCache: true, id: 'audit11' }
   },
   {
     path: 'material/image-list',
     component: () => import('@/views/admin/audit/material/image'),
     name: 'AuditMaterialImageList',
     hidden: true,
-    meta: { title: '图片审核列表', roles: ['admin'], noCache: true, id: 'club12' }
+    meta: { title: '图片审核列表', roles: ['admin'], noCache: true, id: 'audit12' }
   },
   {
     path: 'material/image-detail',
     component: () => import('@/views/admin/audit/material/image/review'),
     name: 'AuditMaterialImageDetail',
     hidden: true,
-    meta: { title: '审核图片', roles: ['admin'], noCache: true, id: 'club3' }
+    meta: { title: '审核图片', roles: ['admin'], noCache: true, id: 'audit13' }
   },
   {
     path: 'material/video-list',
     component: () => import('@/views/admin/audit/material/video'),
     name: 'AuditMaterialVideoList',
     hidden: true,
-    meta: { title: '视频审核列表', roles: ['admin'], noCache: true, id: 'club4' }
+    meta: { title: '视频审核列表', roles: ['admin'], noCache: true, id: 'audit14' }
   },
   {
     path: 'material/file-list',
     component: () => import('@/views/admin/audit/material/file'),
     name: 'AuditMaterialFileList',
     hidden: true,
-    meta: { title: '文件审核列表', roles: ['admin'], noCache: true, id: 'club5' }
+    meta: { title: '文件审核列表', roles: ['admin'], noCache: true, id: 'audit15' }
   }
 ]
 

src/router/module/member.js

@@ -41,13 +41,13 @@ const memberRoutes = [
         path: 'combo-edit',
         component: () => import('@/views/admin/member/settings/combo-edit'),
         name: 'ComboEdit',
-        meta: { title: '会员服务配置', roles: ['admin'] }
+        meta: { title: '会员套餐配置', roles: ['admin'] }
       },
       {
         path: 'service-edit',
         component: () => import('@/views/admin/member/settings/service-edit'),
         name: 'ServiceEdit',
-        meta: { title: '会员套餐配置', roles: ['admin'] }
+        meta: { title: '会员服务配置', roles: ['admin'] }
       }
     ]
   }

src/styles/index.scss

@@ -171,15 +171,6 @@ aside {
   }
 }
 
-.filter-container {
-  padding-bottom: 10px;
-  .filter-item {
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: 10px;
-  }
-}
-
 //refine vue-multiselect plugin
 .multiselect {
   line-height: 16px;
@@ -189,6 +180,7 @@ aside {
   z-index: 1000 !important;
 }
 
+// 状态颜色
 .status {
   &.success {
     color: #67c23a;
@@ -299,3 +291,34 @@ aside {
     }
   }
 }
+
+// 筛选区域
+.filter-container {
+  .filter-control {
+    display: inline-block;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    > span,
+    > .el-input {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    > span {
+      margin-right: 10px;
+      font-size: 14px;
+    }
+    > .el-input,
+    > .el-select {
+      width: 200px;
+    }
+  }
+}
+
+// 隐藏表格全选控件
+.hide-table-check-all {
+  .el-table__header-wrapper {
+    .el-checkbox {
+      display: none;
+    }
+  }
+}

src/utils/formatRoutesToModule.js

@@ -37,7 +37,10 @@ function formatRoutesToModule() {
       value: getRouteKeyFromMap(first.meta.title, false)
     }
     // 提取当前登录用户可以看到的路由
-    routeMap.push(routerMap.find(item => item.name === first.meta.title))
+    const find = routerMap.find(item => item.name === first.meta.title)
+    if (find) {
+      routeMap.push(find)
+    }
     if (first.children) {
       obj.children = []
       first.children.forEach(second => {
@@ -59,7 +62,11 @@ export function getToutesTree() {
 // 根据id获取栏目
 export function getModuleType(ids) {
   ids = ids.split('-')
-  const parent = routeMap.find(item => item.id === parseInt(ids[0]))
+  console.log(routeMap)
+  const parent = routeMap.find(item => {
+    console.log(item)
+    return item.id === parseInt(ids[0])
+  })
   const children = parent && parent.children.find(item => item.id === parseInt(ids[1]))
   if (!parent || !children) {
     return store.getters.roles.includes('admin') ? '未知模块' : ''

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

@@ -2,37 +2,26 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>设备名称:</span>
-      <el-input
-        v-model="listQuery.productName"
-        placeholder="请输入设备名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>设备SN码:</span>
-      <el-input
-        v-model="listQuery.snCode"
-        placeholder="请输入设备SN码"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.reviewStatus"
-        placeholder="供应商类型"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="所有类型" value="" />
-        <el-option label="待审核" :value="1" />
-        <el-option label="审核通过" :value="2" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <div class="filter-control">
+        <span>设备名称:</span>
+        <el-input v-model="listQuery.productName" placeholder="请输入设备名称" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>设备SN码:</span>
+        <el-input v-model="listQuery.snCode" placeholder="请输入设备SN码" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.reviewStatus" placeholder="供应商类型" clearable @change="getList">
+          <el-option label="所有类型" value="" />
+          <el-option label="待审核" :value="1" />
+          <el-option label="审核通过" :value="2" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -55,13 +44,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 " />
@@ -72,27 +55,39 @@
         </template>
       </el-table-column>
       <el-table-column label="审核时间" width="250px" align="center">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="审核人" align="center">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditBy }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditBy }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="240px" align="center">
-        <template slot-scope="{row}">
-          <el-button v-if="row.auditStatus !== 1" type="primary" icon="el-icon-s-check" size="mini" @click="$_navigationTo(`club-device-detail?id=${row.productId}&authId=${listQuery.authId}`)">审核</el-button>
+        <template slot-scope="{ row }">
+          <el-button
+            v-if="row.auditStatus !== 1"
+            type="primary"
+            icon="el-icon-s-check"
+            size="mini"
+            @click="$_navigationTo(`club-device-detail?id=${row.productId}&authId=${listQuery.authId}`)"
+          >审核</el-button>
           <span v-else class="status success el-icon-check">&nbsp;已审核</span>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
     <!-- 页码 -->
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
 
@@ -137,13 +132,15 @@ export default {
     // 获取列表信息
     getList() {
       this.listLoading = true
-      getProdList(this.listQuery).then(res => {
-        if (res.code !== 0) return
-        this.total = res.data.total
-        this.list = res.data.list
-      }).finally(() => {
-        this.listLoading = false
-      })
+      getProdList(this.listQuery)
+        .then(res => {
+          if (res.code !== 0) return
+          this.total = res.data.total
+          this.list = res.data.list
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
@@ -153,26 +150,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
-.el-table .cell{
+.el-table .cell {
   overflow: visible;
 }
-
 </style>

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

@@ -2,57 +2,37 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>供应商名称:</span>
-      <el-input
-        v-model="listQuery.shopName"
-        placeholder="供应商名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>供应商类型:</span>
-      <el-select
-        v-model="listQuery.shopType"
-        placeholder="供应商类型"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="所有类型" value="" />
-        <el-option label="代理商" :value="2" />
-        <el-option label="品牌方" :value="1" />
-      </el-select>
-      <span>手机号:</span>
-      <el-input
-        v-model="listQuery.mobile"
-        placeholder="手机号"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.lowerAuditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已完成审核" :value="1" />
-        <el-option label="未完成审核" :value="0" />
-      </el-select>
-      <span>联系人:</span>
-      <el-input
-        v-model="listQuery.linkMan"
-        placeholder="联系人"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input v-model="listQuery.shopName" placeholder="供应商名称" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>供应商类型:</span>
+        <el-select v-model="listQuery.shopType" placeholder="供应商类型" clearable @change="getList">
+          <el-option label="所有类型" value="" />
+          <el-option label="代理商" :value="2" />
+          <el-option label="品牌方" :value="1" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>手机号:</span>
+        <el-input v-model="listQuery.mobile" placeholder="手机号" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.lowerAuditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已完成审核" :value="1" />
+          <el-option label="未完成审核" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>联系人:</span>
+        <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>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -156,24 +136,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }

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

@@ -2,42 +2,30 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>机构名称:</span>
-      <el-input
-        v-model="listQuery.authParty"
-        placeholder="机构名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <span>设备认证审核状态:</span>
-      <el-select
-        v-model="listQuery.lowerAuditStatus"
-        placeholder="供应商类型"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已完成审核" :value="1" />
-        <el-option label="未完成审核" :value="0" />
-      </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.authParty" placeholder="机构名称" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>设备认证审核状态:</span>
+        <el-select v-model="listQuery.lowerAuditStatus" placeholder="供应商类型" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已完成审核" :value="1" />
+          <el-option label="未完成审核" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -59,13 +47,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 " />
@@ -83,15 +65,15 @@
       </el-table-column>
 
       <el-table-column label="审核时间" width="250px" align="center">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
 
       <el-table-column label="审核人" align="center" width="200px">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditBy }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditBy }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
@@ -107,14 +89,25 @@
             @click="$_navigationTo(`club-detail?authId=${row.authId}`)"
           >审核</el-button>
           <el-badge :hidden="row.lowerAuditStatus === 1" :value="row.waitAuditNum" :max="99">
-            <el-button icon="el-icon-s-shop" type="primary" size="mini" @click="$_navigationTo(`club-device-list?authId=${row.authId}`)">设备认证审核</el-button>
+            <el-button
+              icon="el-icon-s-shop"
+              type="primary"
+              size="mini"
+              @click="$_navigationTo(`club-device-list?authId=${row.authId}`)"
+            >设备认证审核</el-button>
           </el-badge>
         </template>
       </el-table-column>
     </el-table>
     <!-- 表格区域END -->
     <!-- 页码 -->
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
     <!-- 审核弹窗 -->
     <el-dialog title="授权机构审核" :visible.sync="dialogVisible" width="450px" @close="dialogClosed">
       <div class="auth-info">
@@ -203,14 +196,16 @@ export default {
     // 获取授权列表
     getList() {
       this.listLoading = true
-      fecthAuthList(this.listQuery).then(response => {
-        if (response.code !== 0) return
-        const { list, total } = response.data
-        this.list = list
-        this.total = total
-      }).finally(() => {
-        this.listLoading = false
-      })
+      fecthAuthList(this.listQuery)
+        .then(response => {
+          if (response.code !== 0) return
+          const { list, total } = response.data
+          this.list = list
+          this.total = total
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
     // 审核
     auditStatusHandle() {
@@ -219,14 +214,16 @@ export default {
           // 指定审核人
           this.dialogData.auditBy = this.authUserId
           // 提交审核信息
-          auditAuth(this.dialogData).then(res => {
-            if (res.code !== 0) return
-            this.$message.success(res.data)
-            this.setMessageState({ id: this.dialogData.authId, type: 1 })
-          }).finally(() => {
-            this.dialogVisible = false
-            this.getList()
-          })
+          auditAuth(this.dialogData)
+            .then(res => {
+              if (res.code !== 0) return
+              this.$message.success(res.data)
+              this.setMessageState({ id: this.dialogData.authId, type: 1 })
+            })
+            .finally(() => {
+              this.dialogVisible = false
+              this.getList()
+            })
         }
       })
     },
@@ -250,25 +247,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
-
 .auth-info {
   .auth-name {
     font-size: 16px;

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

@@ -2,57 +2,37 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>供应商名称:</span>
-      <el-input
-        v-model="listQuery.shopName"
-        placeholder="供应商名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>供应商类型:</span>
-      <el-select
-        v-model="listQuery.shopType"
-        placeholder="供应商类型"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="所有类型" value="" />
-        <el-option label="代理商" :value="2" />
-        <el-option label="品牌方" :value="1" />
-      </el-select>
-      <span>手机号:</span>
-      <el-input
-        v-model="listQuery.mobile"
-        placeholder="手机号"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.lowerAuditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已完成审核" :value="1" />
-        <el-option label="未完成审核" :value="0" />
-      </el-select>
-      <span>联系人:</span>
-      <el-input
-        v-model="listQuery.linkMan"
-        placeholder="联系人"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input v-model="listQuery.shopName" placeholder="供应商名称" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>供应商类型:</span>
+        <el-select v-model="listQuery.shopType" placeholder="供应商类型" clearable @change="getList">
+          <el-option label="所有类型" value="" />
+          <el-option label="代理商" :value="2" />
+          <el-option label="品牌方" :value="1" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>手机号:</span>
+        <el-input v-model="listQuery.mobile" placeholder="手机号" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.lowerAuditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已完成审核" :value="1" />
+          <el-option label="未完成审核" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>联系人:</span>
+        <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>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -156,24 +136,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }

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

@@ -1,25 +1,26 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <span>医师姓名:</span>
-      <el-input v-model="listQuery.doctorName" placeholder="医师姓名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <span>从业资格证编号:</span>
-      <el-input v-model="listQuery.certificateNo" placeholder="从业资格证编号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <div class="filter-control">
+        <span>医师姓名:</span>
+        <el-input v-model="listQuery.doctorName" placeholder="医师姓名" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>从业资格证编号:</span>
+        <el-input v-model="listQuery.certificateNo" placeholder="从业资格证编号" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      </div>
     </div>
     <!-- 表格区域 -->
     <el-table
@@ -43,13 +44,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 " />
@@ -61,15 +56,15 @@
       </el-table-column>
 
       <el-table-column label="审核时间" width="250px" align="center">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
 
       <el-table-column label="审核人" align="center">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditBy }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditBy }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
@@ -77,7 +72,12 @@
       <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
       <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width">
         <template slot-scope="{ row }">
-          <el-button v-if="row.auditStatus !== 1" type="primary" size="mini" @click="$_navigationTo(`doctor-detail?id=${row.doctorId}`)">
+          <el-button
+            v-if="row.auditStatus !== 1"
+            type="primary"
+            size="mini"
+            @click="$_navigationTo(`doctor-detail?id=${row.doctorId}`)"
+          >
             审核
           </el-button>
           <span v-else class="status success el-icon-check">&nbsp;已审核</span>
@@ -85,7 +85,13 @@
       </el-table-column>
     </el-table>
     <!-- 页码 -->
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
 
@@ -175,21 +181,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container{
-  span{
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button{
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,.el-select{
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
+
 </style>

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

@@ -2,29 +2,22 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>文章标题:</span>
-      <el-input
-        v-model="listQuery.articleTitle"
-        placeholder="文章标题"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <div class="filter-control">
+        <span>文章标题:</span>
+        <el-input v-model="listQuery.articleTitle" placeholder="文章标题" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -40,11 +33,7 @@
       <el-table-column label="序号" :index="indexMethod" type="index" width="80" align="center" />
       <el-table-column label="文章标题" prop="articleTitle" align="center" />
       <el-table-column label="文章头图" width="200" align="center">
-        <template slot-scope="{ row }">
-          <el-image
-            style="width: 50px; height: 50px"
-            :src="row.articleImage"
-          /></template>
+        <template slot-scope="{ row }"> <el-image style="width: 50px; height: 50px" :src="row.articleImage" /></template>
       </el-table-column>
       <el-table-column label="审核状态" width="150px" align="center">
         <template slot-scope="{ row }">
@@ -53,13 +42,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 " />
@@ -70,20 +53,20 @@
         </template>
       </el-table-column>
       <el-table-column label="审核时间" width="250px" align="center">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
 
       <el-table-column label="审核人" align="center" width="200px">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditBy }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditBy }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="150px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <el-button
             v-if="row.auditStatus !== 1"
             type="primary"
@@ -98,7 +81,13 @@
     </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)"
+    />
   </div>
 </template>
 
@@ -163,28 +152,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }
-.el-badge{
+.el-badge {
   margin: 0 6px;
 }
 </style>

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

@@ -2,29 +2,31 @@
   <div class="app-container review-box">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>文件名称:</span>
-      <el-input
-        v-model="listQuery.fileTitle"
-        placeholder="文件名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <div class="filter-control">
+        <span>文件名称:</span>
+        <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-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -246,25 +248,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-
-}
 .el-table .cell {
   overflow: visible;
 }

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

@@ -2,29 +2,22 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>图片标题:</span>
-      <el-input
-        v-model="listQuery.imageTitle"
-        placeholder="图片标题"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <div class="filter-control">
+        <span>图片标题:</span>
+        <el-input v-model="listQuery.imageTitle" placeholder="图片标题" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -46,13 +39,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 " />
@@ -63,20 +50,20 @@
         </template>
       </el-table-column>
       <el-table-column label="审核时间" width="250px" align="center">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
 
       <el-table-column label="审核人" align="center" width="200px">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditBy }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditBy }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="150px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <el-button
             v-if="row.auditStatus !== 1"
             type="primary"
@@ -91,7 +78,13 @@
     </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)"
+    />
   </div>
 </template>
 
@@ -152,28 +145,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }
-.el-badge{
+.el-badge {
   margin: 0 6px;
 }
 </style>

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

@@ -2,57 +2,37 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>供应商名称:</span>
-      <el-input
-        v-model="listQuery.shopName"
-        placeholder="供应商名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>供应商类型:</span>
-      <el-select
-        v-model="listQuery.shopType"
-        placeholder="供应商类型"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="所有类型" value="" />
-        <el-option label="代理商" :value="2" />
-        <el-option label="品牌方" :value="1" />
-      </el-select>
-      <span>手机号:</span>
-      <el-input
-        v-model="listQuery.mobile"
-        placeholder="手机号"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.lowerAuditStatus"
-        placeholder="供应商类型"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已完成审核" :value="1" />
-        <el-option label="未完成审核" :value="0" />
-      </el-select>
-      <span>联系人:</span>
-      <el-input
-        v-model="listQuery.linkMan"
-        placeholder="联系人"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input v-model="listQuery.shopName" placeholder="供应商名称" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>供应商类型:</span>
+        <el-select v-model="listQuery.shopType" placeholder="供应商类型" clearable @change="getList">
+          <el-option label="所有类型" value="" />
+          <el-option label="代理商" :value="2" />
+          <el-option label="品牌方" :value="1" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>手机号:</span>
+        <el-input v-model="listQuery.mobile" placeholder="手机号" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.lowerAuditStatus" placeholder="供应商类型" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已完成审核" :value="1" />
+          <el-option label="未完成审核" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>联系人:</span>
+        <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>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -120,7 +100,13 @@
     </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)"
+    />
   </div>
 </template>
 
@@ -172,28 +158,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }
-.el-badge{
+.el-badge {
   margin: 0 6px;
 }
 </style>

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

@@ -2,29 +2,22 @@
   <div class="app-container review-box">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>视频名称:</span>
-      <el-input
-        v-model="listQuery.videoTitle"
-        placeholder="视频名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <div class="filter-control">
+        <span>视频名称:</span>
+        <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-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -46,13 +39,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 " />
@@ -63,20 +50,20 @@
         </template>
       </el-table-column>
       <el-table-column label="审核时间" width="250px" align="center">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditTime | formatTime }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
 
       <el-table-column label="审核人" align="center" width="200px">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.auditBy }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.auditBy }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="150px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <el-button
             v-if="row.auditStatus !== 1"
             type="primary"
@@ -91,14 +78,15 @@
     </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="视频审核"
-      :visible.sync="dialogVisible"
-      width="40%"
-      @closed="dialogColosed"
-    >
+    <el-dialog title="视频审核" :visible.sync="dialogVisible" width="40%" @closed="dialogColosed">
       <el-form ref="formRef" :model="dialogData" label-width="65px" :rules="dialogFormRules">
         <el-form-item label="标题：">
           {{ current.videoTitle }}
@@ -220,18 +208,17 @@ export default {
         if (valid) {
           console.log(valid)
           this.dialogData.auditBy = this.authUserId
-          auditVideo(this.dialogData)
-            .then(res => {
-              console.log(res)
-              if (res.code !== 0) return
-              this.$message({
-                message: res.data,
-                type: 'success',
-                duration: 1000
-              })
-              this.dialogVisible = false
-              this.getList()
+          auditVideo(this.dialogData).then(res => {
+            console.log(res)
+            if (res.code !== 0) return
+            this.$message({
+              message: res.data,
+              type: 'success',
+              duration: 1000
             })
+            this.dialogVisible = false
+            this.getList()
+          })
         }
       })
     },
@@ -243,28 +230,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }
-.el-badge{
+.el-badge {
   margin: 0 6px;
 }
 </style>

src/views/admin/member/handsel.vue

@@ -1,15 +1,285 @@
 <template>
-  <div>
-    赠送会员
+  <div class="app-container">
+    <div class="section">
+      <!-- 选择供应商 -->
+      <div class="item">
+        <div class="label"><span>*</span>供应商：</div>
+        <el-button size="mini" type="primary" @click="handleChooseSupplier">选择供应商</el-button>
+      </div>
+      <!-- 选中的供应商列表 -->
+      <el-table v-loading="listLoading" :data="currentSupplierList" class="table-cell">
+        <el-table-column label="序号" type="index" width="80" align="center" />
+        <el-table-column prop="shopName" label="供应商名称" align="center" />
+        <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 prop="mobile" label="手机号" align="center" />
+        <el-table-column prop="limkMan" label="联系人" align="center" />
+        <el-table-column label="操作" align="center">
+          <template>
+            <el-button type="primary" size="mini">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 选择套餐 -->
+      <div class="item">
+        <div class="label"><span>*</span>套餐：</div>
+        <el-select v-model="selected" placeholder="请选择" @change="handlePackageChange">
+          <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </div>
+      <!-- 选中的套餐 -->
+      <el-table v-loading="listLoading" :data="currentPackageList" class="table-cell">
+        <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>
+          </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>
+    </div>
+
+    <!-- 选择供应商dialog -->
+    <el-dialog title="选择供应商" :visible.sync="dialogTableVisible" width="68%">
+      <div>
+        <div class="filter-container">
+          <div class="filter-control">
+            <div class="filter-control">
+              <span>供应商名称:</span>
+              <el-input
+                v-model="listQuery.shopName"
+                size="mini"
+                placeholder="供应商名称"
+                @keyup.enter.native="getSuplierList"
+              />
+            </div>
+            <div class="filter-control">
+              <span>供应商类型:</span>
+              <el-select
+                v-model="listQuery.shopType"
+                placeholder="供应商类型"
+                size="mini"
+                clearable
+                @change="getSuplierList"
+              >
+                <el-option label="所有类型" value="" />
+                <el-option label="代理商" :value="2" />
+                <el-option label="品牌方" :value="1" />
+              </el-select>
+            </div>
+            <div class="filter-control">
+              <span>手机号:</span>
+              <el-input
+                v-model="listQuery.mobile"
+                size="mini"
+                placeholder="手机号"
+                @keyup.enter.native="getSuplierList"
+              />
+            </div>
+            <div class="filter-control">
+              <span>联系人:</span>
+              <el-input
+                v-model="listQuery.limkMan"
+                size="mini"
+                placeholder="联系人"
+                @keyup.enter.native="getSuplierList"
+              />
+            </div>
+            <div class="filter-control">
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="getSuplierList">查询</el-button>
+            </div>
+          </div>
+        </div>
+        <el-table
+          v-infinite-scroll="onLoad"
+          :data="supplierList"
+          class="infinite-list hide-table-check-all"
+          style="overflow:auto"
+          :infinite-scroll-delay="300"
+          :infinite-scroll-immediate="false"
+        >
+          <el-table-column label="序号" type="selection" width="55" align="center" />
+          <el-table-column label="序号" type="index" width="80" align="center" />
+          <el-table-column property="shopName" 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 prop="mobile" label="手机号" align="center" />
+          <el-table-column prop="limkMan" 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>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      listLoading: false,
+      loading: false,
+      dialogTableVisible: false,
+      selected: 1,
+      listQuery: {
+        shopName: '',
+        shopType: '',
+        mobile: '',
+        state: '',
+        limkMan: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      supplierList: [
+        {
+          shopName: '火影大战葫芦娃',
+          shopType: 1,
+          account: 'admin',
+          mobile: '15872950940',
+          limkMan: '还差的远呢',
+          state: 1
+        }
+      ],
+      // 选中的供应商
+      currentSupplierList: [
+        {
+          shopName: '火影大战葫芦娃',
+          shopType: 1,
+          account: 'admin',
+          mobile: '15872950940',
+          limkMan: '还差的远呢',
+          state: 1
+        }
+      ],
+      currentPackageList: [
+        {
+          id: 1,
+          name: '套餐一',
+          originPrice: 7980,
+          price: 5980,
+          timeLimit: 1
+        }
+      ],
+      // 套餐列表
+      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
+        }
+      ]
+    }
+  },
+  created() {
+    this.supplierList = this.addLimit()
+  },
+  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
+    },
+    handlePackageChange(id) {
+      console.log(id)
+      const current = this.packageList.find(item => item.id === id)
+      this.currentPackageList = [current]
+    },
+    getSuplierList() {},
+    handleChooseSupplier() {
+      this.dialogTableVisible = true
+    },
+    onLoad() {
+      console.log('触底了')
+      this.supplierList.push(...this.addLimit())
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.app-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  .item {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 25px 0;
+
+    .label {
+      width: 80px;
+      text-align: right;
+    }
+    span {
+      color: #f56c6c;
+    }
+  }
 
+  .infinite-list {
+    height: 400px;
+  }
+  .loading {
+    margin-top: 16px;
+    text-align: center;
+  }
+
+  .section {
+    min-height: 600px;
+  }
+
+  .control-box {
+    margin: 40px 0;
+    text-align: center;
+    .el-button {
+      width: 140px;
+      margin: 0 8px;
+    }
+  }
+}
 </style>

src/views/admin/member/index.vue

@@ -1,15 +1,108 @@
 <template>
-  <div>
-    会员列表
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input v-model="listQuery.shopName" placeholder="供应商名称" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>供应商类型:</span>
+        <el-select v-model="listQuery.shopType" placeholder="供应商类型" clearable @change="getList">
+          <el-option label="所有类型" value="" />
+          <el-option label="代理商" :value="2" />
+          <el-option label="品牌方" :value="1" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>手机号:</span>
+        <el-input v-model="listQuery.mobile" placeholder="手机号" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>联系人:</span>
+        <el-input v-model="listQuery.limkMan" placeholder="联系人" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>会员状态:</span>
+        <el-input v-model="listQuery.state" 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="$_navigationTo('/member/handsel')">赠送会员</el-button>
+      </div>
+    </div>
+    <!-- 搜索区域END -->
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      style="width: 100%"
+      border
+      fit
+      highlight-current-row
+      class="table-cell"
+    >
+      <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center" />
+      <el-table-column prop="shopName" label="供应商名称" align="center" />
+      <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 prop="mobile" label="手机号" align="center" />
+      <el-table-column prop="limkMan" 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-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-button type="primary" size="mini" @click="$_navigationTo('/member/service')">配置定制化服务</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      listLoading: false,
+      listQuery: {
+        shopName: '',
+        shopType: '',
+        mobile: '',
+        state: '',
+        limkMan: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      list: [
+        {
+          shopName: '火影大战葫芦娃',
+          shopType: 1,
+          account: 'admin',
+          mobile: '15872950940',
+          limkMan: '还差的远呢',
+          state: 1
+        }
+      ]
+    }
+  },
+  methods: {
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    },
+    getList() {}
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 
 </style>

src/views/admin/member/record.vue

@@ -1,15 +1,187 @@
 <template>
-  <div>
-    会员购买记录
+  <div class="app-container">
+    <!-- 供应商基本信息 -->
+    <div class="info">
+      <div class="row"><span>供应商名称：</span><span>上海品辉国际医疗</span></div>
+      <div class="row"><span>供应商类型：</span><span>代理商</span></div>
+      <div class="row"><span>登录账号：</span><span>shanghaipinhui</span></div>
+      <div class="row"><span>手机号：</span><span>15900004040</span></div>
+      <div class="row"><span>联系人：</span><span>黄XX</span></div>
+    </div>
+    <el-divider />
+    <!-- 搜索区域 -->
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>购买套餐:</span>
+        <el-select v-model="listQuery.packageId" 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">
+        <span>会员状态:</span>
+        <el-select v-model="listQuery.state" placeholder="供应商类型" clearable @change="getList">
+          <el-option label="不限" value="" />
+          <el-option label="待生效" :value="1" />
+          <el-option label="生效中" :value="2" />
+          <el-option label="已过期" :value="3" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>购买时间:</span>
+        <el-date-picker
+          v-model="buyTime"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+      </div>
+      <div class="filter-control">
+        <span>到期时间:</span>
+        <el-date-picker
+          v-model="expireTime"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search">查询</el-button>
+      </div>
+    </div>
+    <!-- 表格区域 -->
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      style="width: 100%"
+      border
+      fit
+      class="table-cell"
+    >
+      <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 label="购买价格" align="center">
+        <template slot-scope="{ row }">
+          <span>￥{{ row.price }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="购买方式" align="center">
+        <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>
+        </template>
+      </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>
+        </template>
+      </el-table-column>
+      <el-table-column label="购买时间" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.buyTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="到期时间" align="center">
+        <template slot-scope="{ row }">
+          <span>{{ row.expireTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template>
+          <el-button type="primary" size="mini" @click="dialogTableVisible = true">定制需求</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-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>
 export default {
-
+  data() {
+    return {
+      dialogTableVisible: false,
+      listQuery: {
+        packageId: '',
+        state: '',
+        buyTime: '',
+        expireTime: '',
+        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: '其他'
+        }
+      ]
+    }
+  },
+  methods: {
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    }
+  }
 }
 </script>
 
-<style scoped>
+<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/admin/member/service.vue

@@ -1,15 +1,96 @@
 <template>
-  <div>
-    配置定制化服务
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <div class="filter-container">
+      <div class="filter-control tip">配置订制化服务功能<span>（以下为设置会员特定的订制服务功能）</span></div>
+      <div class="filter-control">
+        <span>配置定制服务：</span>
+        <el-select v-model="listQuery.pacakgeId" clearable size="mini" @change="getList">
+          <el-option label="不限" value="" />
+          <el-option label="1年" :value="1" />
+          <el-option label="3年" :value="2" />
+        </el-select>
+      </div>
+    </div>
+    <!-- 表格区域 -->
+    <el-table :data="serviceList" border fit height="600">
+      <el-table-column label="序号" type="index" width="80" align="center" />
+      <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" />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 确认 取消 -->
+    <div class="control-box">
+      <el-button type="warning">返回</el-button>
+      <el-button type="primary">保存</el-button>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      listQuery: {
+        pacakgeId: ''
+      },
+      serviceList: [
+        {
+          id: 1,
+          demand: '认证授权图片模板',
+          isChecked: false
+        },
+        {
+          id: 2,
+          demand: '认证授权物料制作',
+          isChecked: false
+        },
+        {
+          id: 3,
+          demand: '品牌资料库',
+          isChecked: true
+        }
+      ]
+    }
+  },
+  methods: {
+    getList() {}
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.app-container {
+  width: 800px;
+  margin: 0 auto;
+  .filter-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
+    margin-bottom: 16px;
+
+    .filter-control {
+      margin: 0;
+    }
+  }
+  .tip {
+    font-size: 14px;
+    span {
+      color: #f56c6c;
+    }
+  }
+  .control-box {
+    margin: 40px 0;
+    text-align: center;
+    .el-button {
+      width: 140px;
+      margin: 0 8px;
+    }
+  }
+}
 </style>

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

@@ -1,15 +1,86 @@
 <template>
-  <div>
-    会员套餐配置
+  <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 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-select>
+        </div>
+        <div class="control">
+          <span>原价</span>
+          <el-input size="mini" />
+          <span>元</span>
+        </div>
+        <div class="control">
+          <span>现价</span>
+          <el-input size="mini" />
+          <span>元</span>
+        </div>
+        <div class="control">
+          <el-button type="primary" size="mini">添加</el-button>
+          <el-button type="danger" size="mini">删除</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 class="control">
+          <span>定制服务名称</span>
+          <el-input size="mini" />
+        </div>
+        <div class="control">
+          <el-button type="primary" size="mini">添加</el-button>
+          <el-button type="danger" size="mini">删除</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      dateType: 1
+    }
+  }
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.list{
+  margin-bottom: 60px;
+}
+.section {
+  margin: 24px 0;
+  margin-left: 32px;
+  .control {
+    display: inline-block;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    > span,
+    > .el-input {
+      display: inline-block;
+      vertical-align: middle;
+    }
+    > span {
+      margin: 0 10px;
+      font-size: 14px;
+    }
+    > .el-input {
+      width: 160px;
+    }
+    > .el-select{
+      width: 100px;
+    }
+  }
+}
 </style>

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

@@ -1,15 +1,149 @@
 <template>
-  <div>
-    会员服务配置
+  <div class="app-container">
+    <div class="list">
+      <!-- 会员基础功能服务配置 -->
+      <div class="section">
+        <!-- 搜索区域 -->
+        <div class="filter-container">
+          <div class="filter-control tip">会员基础功能服务配置<span>（以下为会员基础拥有功能）</span></div>
+          <div class="filter-control">
+            <span>基础功能：</span>
+            <el-select v-model="listQuery.pacakgeId" clearable size="mini" @change="getList">
+              <el-option label="不限" value="" />
+              <el-option label="1年" :value="1" />
+              <el-option label="3年" :value="2" />
+            </el-select>
+          </div>
+        </div>
+        <!-- 表格区域 -->
+        <el-table :data="serviceList" border fit height="600">
+          <el-table-column label="序号" type="index" width="80" align="center" />
+          <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" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 交换按钮 -->
+      <div class="switch-control">
+        <el-button type="primary" icon="el-icon-arrow-left" />
+        <el-button type="primary" icon="el-icon-arrow-right" />
+      </div>
+
+      <!-- 会员订制功能服务配置 -->
+      <div class="section">
+        <!-- 搜索区域 -->
+        <div class="filter-container">
+          <div class="filter-control tip">会员订制功能服务配置<span>（以下为设置会员特定的订制服务功能）</span></div>
+          <div class="filter-control">
+            <span>基础功能：</span>
+            <el-select v-model="listQuery.pacakgeId" clearable size="mini" @change="getList">
+              <el-option label="不限" value="" />
+              <el-option label="1年" :value="1" />
+              <el-option label="3年" :value="2" />
+            </el-select>
+          </div>
+        </div>
+        <!-- 表格区域 -->
+        <el-table :data="serviceList" border fit height="600">
+          <el-table-column label="序号" type="index" width="80" align="center" />
+          <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" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+
+    <!-- 确认 取消 -->
+    <div class="control-box">
+      <el-button type="warning">返回</el-button>
+      <el-button type="primary">保存</el-button>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      listQuery: {
+        pacakgeId: ''
+      },
+      serviceList: [
+        {
+          id: 1,
+          demand: '认证授权图片模板',
+          isChecked: false
+        },
+        {
+          id: 2,
+          demand: '认证授权物料制作',
+          isChecked: false
+        },
+        {
+          id: 3,
+          demand: '品牌资料库',
+          isChecked: true
+        }
+      ]
+    }
+  },
+  methods: {
+    getList() {}
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.app-container {
+  margin: 0 auto;
+
+  .list{
+    width: 1350px;
+    margin: 30px auto 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
+  .section{
+    width: 600px;
+  }
+
+  .filter-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    margin-bottom: 16px;
+
+    .filter-control {
+      margin: 0;
+
+      .el-select{
+        width: 100px;
+      }
+    }
+  }
+  .tip {
+    font-size: 14px;
+    span {
+      color: #f56c6c;
+    }
+  }
+  .control-box {
+    margin: 40px 0;
+    text-align: center;
+    .el-button {
+      width: 140px;
+      margin: 0 8px;
+    }
+  }
+}
 </style>

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

@@ -2,32 +2,29 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>标题:</span>
-      <el-input
-        v-model="listQuery.fileTitle"
-        placeholder="标题"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>所属模块:</span>
-
-      <el-cascader
-        v-model="listQuery.fileModule"
-        :options="modules"
-        class="filter-item"
-        placeholder="所属模块"
-        style="margin-rigth: 15px"
-        clearable
-        @change="getList"
-      />
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button
-        v-if="userIdentity === 1"
-        icon="el-icon-edit"
-        type="primary"
-        @click="dialogVisible = true"
-      >添加</el-button>
+      <div class="filter-control">
+        <span>标题:</span>
+        <el-input v-model="listQuery.fileTitle" placeholder="标题" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>所属模块:</span>
+        <el-cascader
+          v-model="listQuery.fileModule"
+          :options="modules"
+          placeholder="所属模块"
+          clearable
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button
+          v-if="userIdentity === 1"
+          icon="el-icon-edit"
+          type="primary"
+          @click="dialogVisible = true"
+        >添加</el-button>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -84,27 +81,31 @@
               icon="el-icon-s-check"
               @click="handleRemove(row)"
             >删除</el-button>
-
           </template>
         </el-table-column>
       </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)"
+    />
 
     <!-- 文档编辑dialog -->
-    <el-dialog
-      title="添加文档"
-      :visible="dialogVisible"
-      width="30%"
-      @close="dialogClose"
-    >
-
+    <el-dialog title="添加文档" :visible="dialogVisible" width="30%" @close="dialogClose">
       <el-form ref="dialogForm" :model="dialogFormData" label-width="86px" :rules="rules">
         <el-form-item label="标题:" prop="fileTitle">
           <el-input v-model="dialogFormData.fileTitle" placeholder="请输入标题" />
         </el-form-item>
         <el-form-item label="文档路径:" prop="fileUrl">
-          <file-upload ref="fileUpload" :file-list="uploadFileList" accept-type=".doc,.docx" @change="fileUploadChange" />
+          <file-upload
+            ref="fileUpload"
+            :file-list="uploadFileList"
+            accept-type=".doc,.docx"
+            @change="fileUploadChange"
+          />
           <el-input v-show="false" v-model="dialogFormData.fileUrl" />
         </el-form-item>
         <el-form-item label="所属模块:" prop="fileModule">
@@ -119,7 +120,12 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" :disabled="!saveBtnClickable" :loading="requestLoading" @click="submitUpload">确 定</el-button>
+        <el-button
+          type="primary"
+          :disabled="!saveBtnClickable"
+          :loading="requestLoading"
+          @click="submitUpload"
+        >确 定</el-button>
       </span>
     </el-dialog>
     <!-- 文档编辑dialog END -->
@@ -164,20 +170,27 @@ export default {
       uploadFileList: [],
       dialogFormData: {},
       rules: {
-        fileTitle: [{
-          required: true,
-          message: '请输入标题', trigger: ['change', 'blur']
-        }],
+        fileTitle: [
+          {
+            required: true,
+            message: '请输入标题',
+            trigger: ['change', 'blur']
+          }
+        ],
         fileUrl: [
           {
             required: true,
-            message: '请选择文件', trigger: 'change'
+            message: '请选择文件',
+            trigger: 'change'
           }
         ],
-        fileModule: [{
-          required: true,
-          message: '请选择所属模块', trigger: 'change'
-        }]
+        fileModule: [
+          {
+            required: true,
+            message: '请选择所属模块',
+            trigger: 'change'
+          }
+        ]
       }
     }
   },
@@ -244,15 +257,18 @@ export default {
         fileType: this.dialogFormData.fileType,
         fileModule: this.dialogFormData.fileModule.join('-')
       }
-      saveCourse(params).then(res => {
-        this.$message.success('保存成功')
-        this.dialogVisible = false
-        this.getList()
-      }).catch(err => {
-        console.log(err)
-      }).finally(() => {
-        this.requestLoading = false
-      })
+      saveCourse(params)
+        .then(res => {
+          this.$message.success('保存成功')
+          this.dialogVisible = false
+          this.getList()
+        })
+        .catch(err => {
+          console.log(err)
+        })
+        .finally(() => {
+          this.requestLoading = false
+        })
     }, 200),
 
     // 处理文件上传状态
@@ -325,12 +341,11 @@ export default {
         this.$message.info('已取消操作')
       })
       if (text !== 'confirm') return
-      removeCourse({ fileId: row.fileId })
-        .then(res => {
-          if (res.code !== 0) return
-          this.$message.success('删除成功')
-          this.getList(this.listQuery)
-        })
+      removeCourse({ fileId: row.fileId }).then(res => {
+        if (res.code !== 0) return
+        this.$message.success('删除成功')
+        this.getList(this.listQuery)
+      })
     },
 
     // 预览
@@ -364,36 +379,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }
 .el-badge {
   margin: 0 6px;
 }
-
-.el-cascader{
-&.filter-item{
-margin: 0 15px 10px;
-}
-
-}
-
 </style>

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

@@ -2,32 +2,29 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>标题:</span>
-      <el-input
-        v-model="listQuery.fileTitle"
-        placeholder="标题"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>所属模块:</span>
-
-      <el-cascader
-        v-model="listQuery.fileModule"
-        :options="modules"
-        class="filter-item"
-        placeholder="所属模块"
-        style="margin-rigth: 15px"
-        clearable
-        @change="getList"
-      />
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
-      <el-button
-        v-if="userIdentity === 1"
-        icon="el-icon-edit"
-        type="primary"
-        @click="dialogVisible = true"
-      >添加</el-button>
+      <div class="filter-control">
+        <span>标题:</span>
+        <el-input v-model="listQuery.fileTitle" placeholder="标题" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>所属模块:</span>
+        <el-cascader
+          v-model="listQuery.fileModule"
+          :options="modules"
+          placeholder="所属模块"
+          clearable
+          @change="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+        <el-button
+          v-if="userIdentity === 1"
+          icon="el-icon-edit"
+          type="primary"
+          @click="dialogVisible = true"
+        >添加</el-button>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -84,21 +81,20 @@
               icon="el-icon-s-check"
               @click="handleRemove(row)"
             >删除</el-button>
-
           </template>
         </el-table-column>
       </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)"
+    />
 
     <!-- 视频编辑dialog -->
-    <el-dialog
-      title="添加视频"
-      :visible="dialogVisible"
-      width="30%"
-      @close="dialogClose"
-    >
-
+    <el-dialog title="添加视频" :visible="dialogVisible" width="30%" @close="dialogClose">
       <el-form ref="dialogForm" :model="dialogFormData" label-width="86px" :rules="rules">
         <el-form-item label="标题:" prop="fileTitle">
           <el-input v-model="dialogFormData.fileTitle" placeholder="请输入标题" />
@@ -119,7 +115,12 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" :disabled="!saveBtnClickable" :loading="requestLoading" @click="submitUpload">确 定</el-button>
+        <el-button
+          type="primary"
+          :disabled="!saveBtnClickable"
+          :loading="requestLoading"
+          @click="submitUpload"
+        >确 定</el-button>
       </span>
     </el-dialog>
     <!-- 视频编辑dialog END -->
@@ -242,15 +243,18 @@ export default {
         fileType: this.dialogFormData.fileType,
         fileModule: this.dialogFormData.fileModule.join('-')
       }
-      saveCourse(params).then(res => {
-        this.$message.success('保存成功')
-        this.dialogVisible = false
-        this.getList()
-      }).catch(err => {
-        console.log(err)
-      }).finally(() => {
-        this.requestLoading = false
-      })
+      saveCourse(params)
+        .then(res => {
+          this.$message.success('保存成功')
+          this.dialogVisible = false
+          this.getList()
+        })
+        .catch(err => {
+          console.log(err)
+        })
+        .finally(() => {
+          this.requestLoading = false
+        })
     }, 200),
 
     // 处理文件上传状态
@@ -323,12 +327,11 @@ export default {
         this.$message.info('已取消操作')
       })
       if (text !== 'confirm') return
-      removeCourse({ fileId: row.fileId })
-        .then(res => {
-          if (res.code !== 0) return
-          this.$message.success('删除成功')
-          this.getList(this.listQuery)
-        })
+      removeCourse({ fileId: row.fileId }).then(res => {
+        if (res.code !== 0) return
+        this.$message.success('删除成功')
+        this.getList(this.listQuery)
+      })
     },
 
     // 预览
@@ -361,36 +364,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }
 .el-badge {
   margin: 0 6px;
 }
-
-.el-cascader{
-&.filter-item{
-margin: 0 15px 10px;
-}
-
-}
-
 </style>

src/views/components/payment/pay-alipay.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="pay-code">
+    <div class="paymount">扫码付款：<span class="exp">￥</span><span class="price">5980.00</span></div>
+    <el-image src="https://picsum.photos/200/200" class="qrcode" />
+    <div class="pay-tip">
+      <i class="icon-alipay" />
+      <span>使用支付宝扫码</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped lang="scss">
+.pay-code {
+  .paymount {
+    margin-bottom: 16px;
+    font-size: 16px;
+    color: #101010;
+
+    .exp,
+    .price {
+      color: #ff6d6d;
+    }
+
+    .exp {
+      font-size: 14px;
+    }
+
+    .price {
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  .qrcode {
+    width: 180px;
+    height: 180px;
+    border: 1px solid #1890ff;
+    box-sizing: border-box;
+    padding: 8px;
+  }
+
+  .pay-tip {
+    width: 180px;
+    margin-top: 12px;
+    font-size: 14px;
+    color: #101010;
+    line-height: 25px;
+    text-align: center;
+  }
+
+  .icon-alipay,
+  .icon-wechat {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    vertical-align: middle;
+    margin-right: 10px;
+  }
+
+  .icon-wechat {
+    background: url(~@/assets/pay/icon-wechat.png) no-repeat center;
+    background-size: 25px;
+  }
+
+  .icon-alipay {
+    background: url(~@/assets/pay/icon-alipay.png) no-repeat center;
+    background-size: 25px;
+  }
+}
+</style>

src/views/components/payment/pay-bank.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="pay-bank">
+    <card v-for="i in 24" :key="i" class="card">
+      <el-image src="https://picsum.photos/144/48" class="bank-icon" />
+    </card>
+  </div>
+</template>
+
+<script>
+import Card from '@/components/Card'
+export default {
+  components: { Card },
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style  lang="scss">
+.card{
+  margin-bottom: 16px;
+}
+.bank-icon{
+  display: block;
+}
+</style>

src/views/components/payment/pay-wechat.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="pay-code">
+    <div class="paymount">扫码付款：<span class="exp">￥</span><span class="price">5980.00</span></div>
+    <el-image src="https://picsum.photos/200/200" class="qrcode" />
+    <div class="pay-tip">
+      <i class="icon-wechat" />
+      <span>使用微信扫码</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped lang="scss">
+.pay-code {
+  .paymount {
+    margin-bottom: 16px;
+    font-size: 16px;
+    color: #101010;
+
+    .exp,
+    .price {
+      color: #ff6d6d;
+    }
+
+    .exp {
+      font-size: 14px;
+    }
+
+    .price {
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  .qrcode {
+    width: 180px;
+    height: 180px;
+    border: 1px solid #1890ff;
+    box-sizing: border-box;
+    padding: 8px;
+  }
+
+  .pay-tip {
+    width: 180px;
+    margin-top: 12px;
+    font-size: 14px;
+    color: #101010;
+    line-height: 25px;
+    text-align: center;
+  }
+
+  .icon-alipay,
+  .icon-wechat {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    vertical-align: middle;
+    margin-right: 10px;
+  }
+
+  .icon-wechat {
+    background: url(~@/assets/pay/icon-wechat.png) no-repeat center;
+    background-size: 25px;
+  }
+
+  .icon-alipay {
+    background: url(~@/assets/pay/icon-alipay.png) no-repeat center;
+    background-size: 25px;
+  }
+}
+</style>

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

@@ -1,40 +1,40 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <span>设备名称:</span>
-      <el-input v-model="listQuery.productName" placeholder="设备名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <span>设备SN码:</span>
-      <el-input v-model="listQuery.snCode" placeholder="设备SN码" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <span>上线状态:</span>
-      <el-select
-        v-model="listQuery.status"
-        placeholder="上线状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已上线" :value="1" />
-        <el-option label="待上线" :value="2" />
-        <el-option label="未上线" :value="0" />
-      </el-select>
-      <permission-button type="primary" icon="el-icon-search" @click="handleFilter">查询</permission-button>
-      <permission-button icon="el-icon-edit" type="primary" @click="$_navigationTo(`device-add?type=add`)">添加</permission-button>
+      <div class="filter-control">
+        <span>设备名称:</span>
+        <el-input v-model="listQuery.productName" placeholder="设备名称" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>设备SN码:</span>
+        <el-input v-model="listQuery.snCode" placeholder="设备SN码" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>上线状态:</span>
+        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="待上线" :value="2" />
+          <el-option label="未上线" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <permission-button type="primary" icon="el-icon-search" @click="handleFilter">查询</permission-button>
+        <permission-button
+          icon="el-icon-edit"
+          type="primary"
+          @click="$_navigationTo(`device-add?type=add`)"
+        >添加</permission-button>
+      </div>
     </div>
     <!-- 表格区域 -->
     <el-table
@@ -58,13 +58,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 " />
@@ -76,7 +70,7 @@
       </el-table-column>
 
       <el-table-column label="上线状态" width="140px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
@@ -95,14 +89,18 @@
         </template>
       </el-table-column>
       <el-table-column label="创建时间" class-name="status-col" width="300px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.createTime | formatTime }}</span>
         </template>
       </el-table-column>
       <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
       <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="{row}">
-          <permission-button type="default" size="mini" @click="$_navigationTo(`device-edit?type=edit&id=${row.productId}`)">
+        <template slot-scope="{ row }">
+          <permission-button
+            type="default"
+            size="mini"
+            @click="$_navigationTo(`device-edit?type=edit&id=${row.productId}`)"
+          >
             编辑
           </permission-button>
           <permission-button type="danger" size="mini" @click="handleRemoveProduct(row)">
@@ -119,7 +117,13 @@
     </el-table>
 
     <!-- 页码 -->
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
 
     <!-- 二维码 -->
     <transition name="fade">
@@ -185,14 +189,16 @@ export default {
   methods: {
     // 获取列表信息
     getList() {
-      getProdList(this.listQuery).then(res => {
-        const { total, list } = res.data
-        this.total = total
-        this.list = list
-        // this.checkAuditFailedList(list)
-      }).finally(() => {
-        this.listLoading = false
-      })
+      getProdList(this.listQuery)
+        .then(res => {
+          const { total, list } = res.data
+          this.total = total
+          this.list = list
+          // this.checkAuditFailedList(list)
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
     // 过滤列表
     handleFilter() {
@@ -203,19 +209,21 @@ export default {
     handleChangeStatus(item) {
       if (this.userIdentity === 2 || this.proxyInfo !== null) {
         this.listLoading = true
-        const { status,	productId } = item
+        const { status, productId } = item
         const newStatus = status === 0 ? 1 : 0
-        setProductStatus({ status: newStatus, productId }).then(res => {
-          // this.$message.success(res.data)
-          this.$message({
-            message: '操作成功',
-            duration: 500,
-            type: 'success'
+        setProductStatus({ status: newStatus, productId })
+          .then(res => {
+            // this.$message.success(res.data)
+            this.$message({
+              message: '操作成功',
+              duration: 500,
+              type: 'success'
+            })
+            this.listLoading = false
+          })
+          .finally(() => {
+            this.getList()
           })
-          this.listLoading = false
-        }).finally(() => {
-          this.getList()
-        })
       }
     },
     // 删除商品
@@ -229,16 +237,18 @@ export default {
       })
       if (text !== 'confirm') return
 
-      removeProduct({ productId: item.productId }).then(res => {
-        const h = this.$createElement
-        this.$notify.success({
-          title: '删除商品',
-          message: h('i', { style: 'color: #333' }, `已删除商品："${item.productName}"`),
-          duration: 2000
+      removeProduct({ productId: item.productId })
+        .then(res => {
+          const h = this.$createElement
+          this.$notify.success({
+            title: '删除商品',
+            message: h('i', { style: 'color: #333' }, `已删除商品："${item.productName}"`),
+            duration: 2000
+          })
+        })
+        .finally(() => {
+          this.getList()
         })
-      }).finally(() => {
-        this.getList()
-      })
     },
     // 显示二维码
     handleShowQRcode(item) {
@@ -268,21 +278,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container{
-  span{
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .permission-button{
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,.el-select{
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
+
 </style>

src/views/normal/club/index.vue

@@ -1,44 +1,59 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <span>机构名称:</span>
-      <el-input v-model="listQuery.authParty" placeholder="机构名称" style="width: 280px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <span>上线状态:</span>
-      <el-select
-        v-model="listQuery.status"
-        placeholder="上线状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已上线" :value="1" />
-        <el-option label="待上线" :value="2" />
-        <el-option label="未上线" :value="0" />
-      </el-select>
-
-      <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 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>
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.authParty" placeholder="机构名称" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>上线状态:</span>
+        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="待上线" :value="2" />
+          <el-option label="未上线" :value="0" />
+        </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>
+      </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>
+      </div>
     </div>
     <!-- 表格区域 -->
     <el-table
@@ -62,13 +77,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 " />
@@ -80,7 +89,7 @@
       </el-table-column>
 
       <el-table-column label="上线状态" width="260px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
@@ -100,14 +109,14 @@
       </el-table-column>
 
       <el-table-column label="创建时间" class-name="status-col" width="200px">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.createTime | formatTime }}</span>
         </template>
       </el-table-column>
 
       <!-- <el-table-column label="创建人" class-name="status-col" width="160px" prop="createBy" /> -->
       <el-table-column label="操作" align="center" width="400px" class-name="small-padding fixed-width">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <permission-button type="primary" size="mini" @click="$_navigationTo(`club-edit?type=edit&id=${row.authId}`)">
             编辑
           </permission-button>
@@ -125,15 +134,16 @@
     </el-table>
 
     <!-- 页码 -->
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
 
     <!-- 对话框区域 -->
-    <el-dialog
-      :title="dialogTitle"
-      :visible.sync="showAddAuthDialog"
-      width="30%"
-      @close="dialogClosed"
-    >
+    <el-dialog :title="dialogTitle" :visible.sync="showAddAuthDialog" width="30%" @close="dialogClosed">
       <el-form ref="addAuthForm" :rules="addAuthFormRules" :model="addAuthFormData" label-width="100px">
         <el-form-item label="授权机构：" prop="authParty">
           <el-input v-model="addAuthFormData.authParty" placeholder="请输入授权机构名称" />
@@ -152,12 +162,7 @@
     </el-dialog>
     <!-- 导入对话框 -->
     <!-- dialog Start -->
-    <el-dialog
-      title="导入"
-      :visible.sync="improtDialogVisible"
-      width="30%"
-      @close="improtDialogClose"
-    >
+    <el-dialog title="导入" :visible.sync="improtDialogVisible" width="30%" @close="improtDialogClose">
       <el-form ref="dialogForm" :model="improtDialogFormData" label-width="86px" :rules="improtDialogFormRules">
         <el-form-item label="文件路径:" prop="fileUrl">
           <file-upload ref="fileUpload" :file-list="uploadFileList" @change="fileUploadChange" />
@@ -166,7 +171,12 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <permission-button @click="improtDialogVisible = false">取 消</permission-button>
-        <permission-button type="primary" :disabled="!saveBtnClickable" :loading="requestLoading" @click="submitUpload">确 定</permission-button>
+        <permission-button
+          type="primary"
+          :disabled="!saveBtnClickable"
+          :loading="requestLoading"
+          @click="submitUpload"
+        >确 定</permission-button>
       </span>
     </el-dialog>
     <!-- dialog END -->
@@ -219,9 +229,7 @@ export default {
         status: 2 // 授权状态 0下线，1上线  2待审核
       },
       addAuthFormRules: {
-        authParty: [
-          { required: true, message: '请输入授权机构名称', trigger: 'blur' }
-        ]
+        authParty: [{ required: true, message: '请输入授权机构名称', trigger: 'blur' }]
       },
       disabled: false,
       // 审核未通过
@@ -238,7 +246,8 @@ export default {
         fileUrl: [
           {
             required: true,
-            message: '请选择文件', trigger: 'change'
+            message: '请选择文件',
+            trigger: 'change'
           }
         ]
       },
@@ -300,7 +309,9 @@ export default {
 
     // 下载模板
     downLoadExportExcel() {
-      downLoadWithATag(`${process.env.VUE_APP_BASE_API}/download/file?ossName=%E6%AD%A3%E5%93%81%E8%81%94%E7%9B%9F%E6%9C%BA%E6%9E%84%E3%80%81%E5%95%86%E5%93%81%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx&fileName=%E6%AD%A3%E5%93%81%E8%81%94%E7%9B%9F%E6%9C%BA%E6%9E%84%E3%80%81%E5%95%86%E5%93%81%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx`)
+      downLoadWithATag(
+        `${process.env.VUE_APP_BASE_API}/download/file?ossName=%E6%AD%A3%E5%93%81%E8%81%94%E7%9B%9F%E6%9C%BA%E6%9E%84%E3%80%81%E5%95%86%E5%93%81%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx&fileName=%E6%AD%A3%E5%93%81%E8%81%94%E7%9B%9F%E6%9C%BA%E6%9E%84%E3%80%81%E5%95%86%E5%93%81%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx`
+      )
     },
 
     // 导出为Excel
@@ -333,7 +344,9 @@ export default {
           this.improtDialogVisible = false
           this.getList()
         })
-        .catch(err => { console.log(err) })
+        .catch(err => {
+          console.log(err)
+        })
         .finally(() => {
           this.requestLoading = false
         })
@@ -370,22 +383,25 @@ export default {
     // 获取授权列表
     getList() {
       this.listLoading = true
-      fecthAuthList(this.listQuery).then(response => {
-        if (response.code !== 0) {
+      fecthAuthList(this.listQuery)
+        .then(response => {
+          if (response.code !== 0) {
+            return this.$message.error('授权列表信息获取失败')
+          }
+          const { list, total } = response.data
+          // this.formatList(list)
+          this.list = list
+          this.total = total
+          // 获取审核未通过的列表
+          // this.checkAuditFailedList(list)
+        })
+        .catch(err => {
+          console.log(err)
           return this.$message.error('授权列表信息获取失败')
-        }
-        const { list, total } = response.data
-        // this.formatList(list)
-        this.list = list
-        this.total = total
-        // 获取审核未通过的列表
-        // this.checkAuditFailedList(list)
-      }).catch(err => {
-        console.log(err)
-        return this.$message.error('授权列表信息获取失败')
-      }).finally(() => {
-        this.listLoading = false
-      })
+        })
+        .finally(() => {
+          this.listLoading = false
+        })
     },
     // 获取审核未通过条数
     // Audit failed 审核未通过
@@ -424,26 +440,33 @@ export default {
           // authUserId先判断是否为代理操作，是就从代理数据中获取，否则直接获取当前登录用户的信息
           this.addAuthFormData.authUserId = this.authUserId
           this.addAuthFormData.createBy = this.addAuthFormData.authUserId
-          saveBrandAuth(this.addAuthFormData).then(res => {
-            if (res.code !== 0) {
-              return
-            }
-            this.getList()
-            const h = this.$createElement
-            this.$notify.success({
-              title: `${this.noticeTitle}授权机构`,
-              message: h('i', { style: 'color: #333' }, `已${this.noticeTitle}授权机构："${this.addAuthFormData.authParty}"`),
-              duration: 3000
+          saveBrandAuth(this.addAuthFormData)
+            .then(res => {
+              if (res.code !== 0) {
+                return
+              }
+              this.getList()
+              const h = this.$createElement
+              this.$notify.success({
+                title: `${this.noticeTitle}授权机构`,
+                message: h(
+                  'i',
+                  { style: 'color: #333' },
+                  `已${this.noticeTitle}授权机构："${this.addAuthFormData.authParty}"`
+                ),
+                duration: 3000
+              })
+              this.$refs.addAuthForm.resetFields()
+            })
+            .catch(err => {
+              console.log(err)
+              this.$message.danger('操作失败')
+            })
+            .finally(() => {
+              this.showAddAuthDialog = false
+              this.listLoading = false
+              this.disabled = false
             })
-            this.$refs.addAuthForm.resetFields()
-          }).catch(err => {
-            console.log(err)
-            this.$message.danger('操作失败')
-          }).finally(() => {
-            this.showAddAuthDialog = false
-            this.listLoading = false
-            this.disabled = false
-          })
         }
       })
     },
@@ -459,20 +482,23 @@ export default {
       if (text !== 'confirm') return
       // 要执行的操作
       this.listLoading = true
-      removeAuth({	authId: item.authId }).then(res => {
-        if (res.code !== 0) return
-        const h = this.$createElement
-        this.$notify.success({
-          title: '移除授权机构',
-          message: h('i', { style: 'color: #333' }, `移除授权机构："${item.authParty}"`),
-          duration: 3000
+      removeAuth({ authId: item.authId })
+        .then(res => {
+          if (res.code !== 0) return
+          const h = this.$createElement
+          this.$notify.success({
+            title: '移除授权机构',
+            message: h('i', { style: 'color: #333' }, `移除授权机构："${item.authParty}"`),
+            duration: 3000
+          })
+        })
+        .catch(err => {
+          console.log(err)
+        })
+        .finally(() => {
+          this.listLoading = false
+          this.getList()
         })
-      }).catch(err => {
-        console.log(err)
-      }).finally(() => {
-        this.listLoading = false
-        this.getList()
-      })
     },
     // 格式化列表数据
     formatList(list = []) {
@@ -487,19 +513,22 @@ export default {
         authId: item.authId,
         status: item.status === 1 ? 0 : 1
       }
-      changeAuthStatus(params).then(res => {
-        // this.$message.success(res.data)
-        this.$message({
-          message: res.data,
-          duration: 500,
-          type: 'success'
+      changeAuthStatus(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
-      })
     },
     // 过滤列表
     handleFilter() {
@@ -542,21 +571,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container{
-  span{
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .el-button{
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,.el-select{
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
+
 </style>

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

@@ -2,30 +2,32 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>手机号:</span>
-      <el-input
-        v-model="listQuery.mobile"
-        placeholder="手机号"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>状态:</span>
-      <el-select
-        v-model="listQuery.status"
-        placeholder="邀请码状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已绑定" :value="1" />
-        <el-option label="未绑定" :value="0" />
-        <el-option label="已过期" :value="2" />
-      </el-select>
-      <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
-      <permission-button icon="el-icon-thumb" type="primary" @click="handleMakeGenerate">生成邀请码</permission-button>
+      <div class="filter-control">
+        <span>手机号:</span>
+        <el-input
+          v-model="listQuery.mobile"
+          placeholder="手机号"
+          @keyup.enter.native="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>状态:</span>
+        <el-select
+          v-model="listQuery.status"
+          placeholder="邀请码状态"
+          clearable
+          @change="getList"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="已绑定" :value="1" />
+          <el-option label="未绑定" :value="0" />
+          <el-option label="已过期" :value="2" />
+        </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>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -193,24 +195,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .permission-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }

src/views/normal/doctor/index.vue

@@ -1,38 +1,50 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <span>医师姓名:</span>
-      <el-input v-model="listQuery.doctorName" placeholder="医师姓名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <span>上线状态:</span>
-      <el-select
-        v-model="listQuery.status"
-        placeholder="上线状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已上线" :value="1" />
-        <el-option label="待上线" :value="2" />
-        <el-option label="未上线" :value="0" />
-      </el-select>
-      <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>
+      <div class="filter-control">
+        <span>医师姓名:</span>
+        <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-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>上线状态:</span>
+        <el-select
+          v-model="listQuery.status"
+          placeholder="上线状态"
+          clearable
+          @change="getList"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="待上线" :value="2" />
+          <el-option label="未上线" :value="0" />
+        </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>
+      </div>
     </div>
     <!-- 表格区域 -->
     <el-table
@@ -56,13 +68,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 " />
@@ -74,7 +80,7 @@
       </el-table-column>
 
       <el-table-column label="上线状态" width="140px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
@@ -97,14 +103,14 @@
         </template>
       </el-table-column>
       <el-table-column label="创建时间" class-name="status-col" width="300px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.createTime | formatTime }}</span>
         </template>
       </el-table-column>
 
       <!-- <el-table-column v-if="false" label="创建人" width="180px" align="center" prop="createBy" /> -->
       <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <permission-button type="primary" size="mini" @click="$_navigationTo(`edit?type=edit&id=${row.doctorId}`)">
             编辑
           </permission-button>
@@ -115,7 +121,13 @@
       </el-table-column>
     </el-table>
     <!-- 页码 -->
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
 
@@ -202,21 +214,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container{
-  span{
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .permission-button{
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,.el-select{
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
+
 </style>

src/views/normal/feedback/index.vue

@@ -2,30 +2,25 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>机构名称:</span>
-      <el-input
-        v-model="listQuery.clubName"
-        placeholder="机构名称"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>手机号:</span>
-      <el-input v-model="listQuery.mobile" placeholder="手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
-      <span>处理状态:</span>
-      <el-select
-        v-model="listQuery.handleStatus"
-        placeholder="处理状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已处理" :value="1" />
-        <el-option label="未处理" :value="0" />
-      </el-select>
-      <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
+      <div class="filter-control">
+        <span>机构名称:</span>
+        <el-input v-model="listQuery.clubName" placeholder="机构名称" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>手机号:</span>
+        <el-input v-model="listQuery.mobile" placeholder="手机号" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <span>处理状态:</span>
+        <el-select v-model="listQuery.handleStatus" placeholder="处理状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已处理" :value="1" />
+          <el-option label="未处理" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -40,7 +35,7 @@
     >
       <el-table-column label="序号" :index="indexMethod" type="index" width="80" align="center" />
       <el-table-column type="expand" width="50">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <el-form label-position="left" class="table-expand" label-width="110px">
             <el-form-item label="机构名称：">
               <span>{{ row.clubName }}</span>
@@ -69,13 +64,13 @@
       <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">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span class="content">{{ row.content }}</span>
         </template>
       </el-table-column>
       <el-table-column label="提交时间" width="180px" align="center">
-        <template slot-scope="{row}">
-          <span v-if="row.auditStatus!==2">{{ row.commitTime | formatTime }}</span>
+        <template slot-scope="{ row }">
+          <span v-if="row.auditStatus !== 2">{{ row.commitTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
@@ -86,26 +81,38 @@
         </template>
       </el-table-column>
       <el-table-column label="处理结果" prop="handleResult" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span v-if="row.handleStatus === 1" class="content">{{ row.handleResult }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="处理时间" width="180px" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span v-if="row.handleStatus === 1">{{ row.handleTime | formatTime }}</span>
           <span v-else>—</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="120px" align="center">
-        <template slot-scope="{row}">
-          <permission-button type="primary" size="mini" style="margin-right:5px" icon="el-icon-edit" @click="$_navigationTo(`/feedback/detail?feedbackId=${row.feedbackId}`)">处理</permission-button>
+        <template slot-scope="{ row }">
+          <permission-button
+            type="primary"
+            size="mini"
+            style="margin-right:5px"
+            icon="el-icon-edit"
+            @click="$_navigationTo(`/feedback/detail?feedbackId=${row.feedbackId}`)"
+          >处理</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)"
+    />
   </div>
 </template>
 
@@ -151,14 +158,16 @@ export default {
     getList() {
       this.listQuery.authUserId = this.authUserId
       console.log(this.listQuery)
-      getFeedbackList(this.listQuery).then(res => {
-        console.log(res)
-        if (res.code !== 0) return
-        this.list = res.data.list
-        this.total = res.data.total
-      }).catch(err => {
-        console.log(err)
-      })
+      getFeedbackList(this.listQuery)
+        .then(res => {
+          console.log(res)
+          if (res.code !== 0) return
+          this.list = res.data.list
+          this.total = res.data.total
+        })
+        .catch(err => {
+          console.log(err)
+        })
     },
     // 初始化预览图片列表
     initPreviewList(list) {
@@ -172,25 +181,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .permission-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
-.content{
+.content {
   display: block;
   overflow: hidden !important;
   white-space: nowrap;
@@ -199,20 +190,7 @@ export default {
 .el-table .cell {
   overflow: visible;
 }
-.el-badge{
+.el-badge {
   margin: 0 6px;
 }
-// .table-expand {
-//     font-size: 0;
-//     padding-left: 130px;
-//   }
-//   .table-expand label {
-//     width: 90px;
-//     color: #99a9bf;
-//   }
-//   .table-expand .el-form-item {
-//     margin-right: 0;
-//     margin-bottom: 0;
-//     width: 30%;
-//   }
 </style>

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

@@ -2,48 +2,36 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>文章标题:</span>
-      <el-input
-        v-model="listQuery.articleTitle"
-        placeholder="文章标题"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <span>上线状态:</span>
-      <el-select
-        v-model="listQuery.status"
-        placeholder="上线状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已上线" :value="1" />
-        <el-option label="待上线" :value="2" />
-        <el-option label="未上线" :value="0" />
-      </el-select>
-      <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>
+      <div class="filter-control">
+        <span>文章标题:</span>
+        <el-input v-model="listQuery.articleTitle" placeholder="文章标题" @keyup.enter.native="getList" />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select v-model="listQuery.auditStatus" placeholder="审核状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>上线状态:</span>
+        <el-select v-model="listQuery.status" placeholder="上线状态" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="待上线" :value="2" />
+          <el-option label="未上线" :value="0" />
+        </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>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -59,11 +47,7 @@
       <el-table-column label="序号" :index="indexMethod" type="index" width="80" align="center" />
       <el-table-column label="文章标题" prop="articleTitle" align="center" />
       <el-table-column label="文章头图" width="200" align="center">
-        <template slot-scope="{ row }">
-          <el-image
-            style="width: 50px; height: 50px"
-            :src="row.articleImage"
-          /></template>
+        <template slot-scope="{ row }"> <el-image style="width: 50px; height: 50px" :src="row.articleImage" /></template>
       </el-table-column>
       <el-table-column label="审核状态" width="180px" align="center">
         <template slot-scope="{ row }">
@@ -72,13 +56,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 " />
@@ -94,20 +72,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>
@@ -141,7 +110,13 @@
       </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)"
+    />
   </div>
 </template>
 
@@ -209,12 +184,11 @@ export default {
         this.$message.info('已取消操作')
       })
       if (text !== 'confirm') return
-      removeArticle({ articleId: row.articleId })
-        .then(res => {
-          if (res.code !== 0) return
-          this.$message.success(res.data)
-          this.getList(this.listQuery)
-        })
+      removeArticle({ articleId: row.articleId }).then(res => {
+        if (res.code !== 0) return
+        this.$message.success(res.data)
+        this.getList(this.listQuery)
+      })
     },
     // 状态改变
     handleChangeStatus(item) {
@@ -228,19 +202,22 @@ export default {
         articleId: item.articleId,
         status: item.status === 1 ? 0 : 1
       }
-      changeArticleStatus(params).then(res => {
-        // this.$message.success(res.data)
-        this.$message({
-          message: res.data,
-          duration: 500,
-          type: 'success'
+      changeArticleStatus(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
@@ -250,24 +227,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .permission-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }

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

@@ -2,48 +2,50 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>文件标题:</span>
-      <el-input
-        v-model="listQuery.fileTitle"
-        placeholder="文件标题"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <span>上线状态:</span>
-      <el-select
-        v-model="listQuery.status"
-        placeholder="上线状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已上线" :value="1" />
-        <el-option label="待上线" :value="2" />
-        <el-option label="未上线" :value="0" />
-      </el-select>
-      <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>
+      <div class="filter-control">
+        <span>文件标题:</span>
+        <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-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>上线状态:</span>
+        <el-select
+          v-model="listQuery.status"
+          placeholder="上线状态"
+          clearable
+          @change="getList"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="待上线" :value="2" />
+          <el-option label="未上线" :value="0" />
+        </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>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -436,24 +438,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .permission-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }

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

@@ -2,48 +2,50 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>图片标题:</span>
-      <el-input
-        v-model="listQuery.imageTitle"
-        placeholder="图片标题"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <span>上线状态:</span>
-      <el-select
-        v-model="listQuery.status"
-        placeholder="上线状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已上线" :value="1" />
-        <el-option label="待上线" :value="2" />
-        <el-option label="未上线" :value="0" />
-      </el-select>
-      <permission-button type="primary" icon="el-icon-search" @click="getList">查询</permission-button>
-      <permission-button
-        icon="el-icon-edit"
-        type="primary"
-        @click="$_navigationTo(`image-edit?type=add`)"
-      >添加图片</permission-button>
+      <div class="filter-control">
+        <span>图片标题:</span>
+        <el-input
+          v-model="listQuery.imageTitle"
+          placeholder="图片标题"
+          @keyup.enter.native="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>审核状态:</span>
+        <el-select
+          v-model="listQuery.auditStatus"
+          placeholder="审核状态"
+          clearable
+          @change="getList"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>上线状态:</span>
+        <el-select
+          v-model="listQuery.status"
+          placeholder="上线状态"
+          clearable
+          @change="getList"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="待上线" :value="2" />
+          <el-option label="未上线" :value="0" />
+        </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(`image-edit?type=add`)"
+        >添加图片</permission-button>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -223,24 +225,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .permission-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }

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

@@ -2,44 +2,46 @@
   <div class="app-container">
     <!-- 搜索区域 -->
     <div class="filter-container">
-      <span>视频标题:</span>
-      <el-input
-        v-model="listQuery.videoTitle"
-        placeholder="视频标题"
-        style="width: 200px"
-        class="filter-item"
-        @keyup.enter.native="getList"
-      />
-      <span>审核状态:</span>
-      <el-select
-        v-model="listQuery.auditStatus"
-        placeholder="审核状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="待审核" :value="2" />
-        <el-option label="审核通过" :value="1" />
-        <el-option label="审核未通过" :value="0" />
-      </el-select>
-      <span>上线状态:</span>
-      <el-select
-        v-model="listQuery.status"
-        placeholder="上线状态"
-        clearable
-        style="width: 200px"
-        class="filter-item"
-        @change="getList"
-      >
-        <el-option label="全部" value="" />
-        <el-option label="已上线" :value="1" />
-        <el-option label="待上线" :value="2" />
-        <el-option label="未上线" :value="0" />
-      </el-select>
-      <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>
+      <div class="filter-control">
+        <span>视频标题:</span>
+        <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-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>上线状态:</span>
+        <el-select
+          v-model="listQuery.status"
+          placeholder="上线状态"
+          clearable
+          @change="getList"
+        >
+          <el-option label="全部" value="" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="待上线" :value="2" />
+          <el-option label="未上线" :value="0" />
+        </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>
+      </div>
     </div>
     <!-- 搜索区域END -->
     <!-- 表格区域 -->
@@ -451,24 +453,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter-container {
-  span {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-    font-size: 14px;
-  }
-  .permission-button {
-    display: inline-block;
-    margin-bottom: 10px;
-    vertical-align: middle;
-  }
-  .el-input,
-  .el-select {
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-}
 .el-table .cell {
   overflow: visible;
 }

src/views/normal/vip/buy.vue

@@ -5,7 +5,7 @@
     <div class="section">
       <div class="subtitle">会员套餐<span class="tip">（基础服务功能）</span></div>
       <div class="list">
-        <card>
+        <card :always-show-icon="false" :checked="true">
           <div class="vip-package">
             <div class="time">1年</div>
             <div>
@@ -15,7 +15,7 @@
             </div>
           </div>
         </card>
-        <card>
+        <card :always-show-icon="false">
           <div class="vip-package">
             <div class="time">1年</div>
             <div>
@@ -63,25 +63,19 @@
     <div class="section">
       <div class="subtitle">选择支付方式</div>
       <div class="list">
-        <card v-for="item in payWayList" :key="item.id">
-          <el-image :src="item.image" class="pay-way" />
+        <card v-for="item in payWayList" :key="item.id" :border="false" :always-show-icon="false" :checked="item.id === 0">
+          <el-image :src="item.image" class="pay-way" @click="handleChoosePayWay(item)" />
         </card>
       </div>
     </div>
     <!-- 支付 -->
     <div class="pay-action">
       <!-- 阿里云支付 -->
-      <div class="pay-code">
-        <div class="paymount">扫码付款：<span class="exp">￥</span><span class="price">5980.00</span></div>
-        <el-image src="https://picsum.photos/200/200" class="qrcode" />
-        <div class="pay-tip">
-          <i class="icon-alipay" />
-          <span>使用支付宝扫码</span>
-        </div>
-      </div>
+      <pay-alipay v-if="selectPayWay === 0" class="pay-code" />
       <!-- 微信支付 -->
-      <!-- 企业网银支付 -->
-      <!-- 个人网银支付 -->
+      <pay-wechat v-if="selectPayWay === 1" class="pay-code" />
+      <!-- 企业网银支付 & 个人网银支付-->
+      <pay-bank v-if="selectPayWay === 2 || selectPayWay === 3" class="pay-bank" />
     </div>
   </div>
 </template>
@@ -92,13 +86,21 @@ import imgBank from '@/assets/pay/pay-bank.png'
 import imgSelfBank from '@/assets/pay/pay-self-bank.png'
 import imgWechat from '@/assets/pay/pay-wechat.png'
 
+import PayAlipay from '@/views/components/payment/pay-alipay.vue'
+import PayWechat from '@/views/components/payment/pay-wechat.vue'
+import PayBank from '@/views/components/payment/pay-bank.vue'
+
 import Card from '@/components/Card'
 export default {
   components: {
-    Card
+    Card,
+    PayAlipay,
+    PayWechat,
+    PayBank
   },
   data() {
     return {
+      selectPayWay: 0,
       payWayList: [
         {
           image: imgPayAli,
@@ -122,6 +124,12 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    handleChoosePayWay(item) {
+      console.log(item)
+      this.selectPayWay = item.id
+    }
   }
 }
 </script>
@@ -135,64 +143,12 @@ export default {
   margin: 40px 0;
 }
 
-.pay-action {
+.pay-code {
   margin: 40px 0;
-  .pay-code {
-
-    .paymount{
-      margin-bottom: 16px;
-      font-size: 16px;
-      color: #101010;
-
-      .exp,.price{
-        color: #FF6D6D;
-      }
-
-      .exp{
-        font-size: 14px;
-      }
-
-      .price{
-        font-size: 20px;
-        font-weight: bold;
-      }
-    }
-
-    .qrcode {
-      width: 180px;
-      height: 180px;
-      border: 1px solid #1890ff;
-      box-sizing: border-box;
-      padding: 8px;
-    }
-
-    .pay-tip {
-      width: 180px;
-      margin-top: 12px;
-      font-size: 14px;
-      color: #101010;
-      line-height: 25px;
-      text-align: center;
-    }
-
-    .icon-alipay,.icon-wechat{
-      display: inline-block;
-      width: 25px;
-      height: 25px;
-      vertical-align: middle;
-      margin-right: 10px;
-    }
-
-    .icon-wechat{
-      background: url(~@/assets/pay/icon-wechat.png) no-repeat center;
-      background-size: 25px;
-    }
+}
 
-    .icon-alipay{
-      background: url(~@/assets/pay/icon-alipay.png) no-repeat center;
-      background-size: 25px;
-    }
-  }
+.pay-bank{
+  margin: 25px 0;
 }
 
 .title {