审核功能页面完成

src/layout/components/Navbar.vue

@@ -7,7 +7,7 @@
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <!-- <search id="header-search" class="right-menu-item" /> -->
-
+        <notice-todo />
         <!-- <error-log class="errLog-container right-menu-item hover-effect" /> -->
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -40,13 +40,15 @@ import Hamburger from '@/components/Hamburger'
 // import ErrorLog from '@/components/ErrorLog'
 import Screenfull from '@/components/Screenfull'
 // import Search from '@/components/HeaderSearch'
+import NoticeTodo from './NoticeTodo'
 
 export default {
   components: {
     Breadcrumb,
     Hamburger,
     // ErrorLog,
-    Screenfull
+    Screenfull,
+    NoticeTodo
     // Search
   },
   computed: {

src/layout/components/NoticeTodo/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="notice-container">
+    <div class="notice-btn">
+      <span class="el-icon-message-solid" @click="drawer = true" />
+    </div>
+    <el-drawer
+      title="消息通知"
+      :visible.sync="drawer"
+      :with-header="true"
+      :modal="false"
+      size="380px"
+    >
+      <!-- 侧边展开 -->
+      <div class="drawer-content">
+        <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
+          <el-tab-pane label="全部" name="first">
+            <ul>
+              <li class="dot">
+                <time>2021/05/28</time>
+                <span>XX新增了品牌授权信息</span>
+                <a href="#">去审核</a>
+              </li>
+              <li>
+                <time>2021/05/28</time>
+                <span>XX新增了品牌授权信息</span>
+                <a href="#">去审核</a>
+              </li>
+              <li>
+                <time>2021/05/28</time>
+                <span>XX新增了品牌授权信息</span>
+                <a href="#">已审核</a>
+              </li>
+            </ul>
+          </el-tab-pane>
+          <el-tab-pane label="已处理" name="second">
+            <div class="no-notice">
+              <span class="el-icon-message-solid" />
+              <p>暂时没有任何消息</p>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="未处理(99+)" class="untreated" name="third">
+            <div class="no-notice">
+              <span class="el-icon-message-solid" />
+              <p>暂时没有任何消息</p>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+        <!-- 有新消息时的标识或没处理的标识 -->
+        <div class="dot-list">
+          <span v-show="false" class="dot" />
+          <span v-show="false" class="dot" />
+          <span class="dot" />
+          <span class="dot" />
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      activeName: 'first',
+      drawer: false
+    }
+  },
+  methods: {
+    handleClick() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.notice-container{
+  display: inline-block;
+  height: 50px;
+  margin-right: 10px;
+  vertical-align: text-bottom;
+}
+.notice-btn {
+  position: relative;
+  cursor: pointer;
+  font-size: 24px;
+  color: #666;
+  &::before{
+    content: "";
+    display: block;
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background-color: red;
+    border-radius: 50%;
+    top: 10px;
+    right: 0;
+  }
+}
+.drawer-content{
+  line-height: initial;
+  padding: 15px;
+  position: relative;
+  .no-notice{
+    text-align: center;
+    color: #ddd;
+    span{
+      display: inline-block;
+      font-size: 60px;
+      margin: 25px 0 0;
+    }
+  }
+  ul{
+    line-height: 26px;
+    margin: 0;
+    padding-left: 15px;
+    list-style-type: none;
+    li{
+      margin: 0;
+      font-size: 12px;
+      color: #666;
+      position: relative;
+      border-bottom: 1px dashed #ddd;
+      &.dot{
+        &::before{
+          content:"";
+          display: block;
+          position: absolute;
+          width: 4px;
+          height: 4px;
+          border-radius: 2px;
+          left: -10px;
+          top: 10px;
+          background-color: red;
+        }
+      }
+      span{
+        display: inline-block;
+        vertical-align: middle;
+        max-width: 200px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        margin: 0 10px;
+      }
+      a{
+        color: #409EFF;
+        &:hover{
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+  .dot-list{
+    top: 0;
+    width: 100%;
+    position: absolute;
+    z-index: 99;
+    .dot{
+      position: absolute;
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      background-color: red;
+      border-radius: 50%;
+      top: 32px;
+      &:nth-child(1){
+        left: 63px;
+      }
+      &:nth-child(2){
+        left: 200px;
+      }
+      &:nth-child(3){
+        left: 346px;
+      }
+      &:nth-child(4){
+        top: -28px;
+        left: 75px;
+      }
+    }
+  }
+
+}
+
+</style>

src/permission.js

@@ -1,38 +1,31 @@
 import router from './router'
 import store from './store'
 import { Message } from 'element-ui'
-import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth' // get token from cookie
 import getPageTitle from '@/utils/get-page-title'
 
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
-
 const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
-const toSupplier = ['/supplier/list', '/supplier', '/supplier/add', '/supplier/edit']
+const toSupplier = ['/supplier/list', '/supplier']
+const onlyPath = ['/auth/list', '/product/list', '/product/add', '/product/edit']
 
 router.beforeEach(async(to, from, next) => {
-  // start progress bar
-  NProgress.start()
-
-  // set page title
+  // 设置页面名称
   document.title = getPageTitle(to.meta.title)
 
-  // determine whether the user has logged in
   const hasToken = getToken()
   if (hasToken) {
-    if (toSupplier.includes(to.path)) {
-      store.dispatch('tagsView/delAllViews')
+    if (toSupplier.includes(to.path) && onlyPath.includes(from.path)) {
+      // 满足要求则关闭所有标签，防止数据冲突
+      if (store.getters.proxyInfo !== null) {
+        store.dispatch('tagsView/delAllProxyView')
+      }
       store.commit('user/SET_PROXY_INFO', null)
-      next()
+      console.log('关闭其他的标签')
     }
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
       next()
-      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
     } else {
-      // determine whether the user has obtained his permission roles through getInfo
-      // const hasRoles = store.getters.roles && store.getters.roles.length > 0
       // 加载国家列表
       store.dispatch('app/setCountry')
       const hasInitRouter = store.getters.initRouter
@@ -56,7 +49,6 @@ router.beforeEach(async(to, from, next) => {
           await store.dispatch('user/resetToken')
           Message.error(error || 'Has Error')
           next(`/login?redirect=${to.path}`)
-          NProgress.done()
         }
       }
     }
@@ -68,16 +60,9 @@ router.beforeEach(async(to, from, next) => {
     } else {
       // other pages that do not have permission to access are redirected to the login page.
       next(`/login`)
-      // Message.error('登录失效，请重新登录！')
       // Message({ message: '登录失效，请重新登录！' })
       // router.replace('/login')
-      NProgress.done()
       return
     }
   }
 })
-
-router.afterEach(() => {
-  // finish progress bar
-  NProgress.done()
-})

src/router/index.js

@@ -137,13 +137,13 @@ export const asyncRoutes = [
     // hidden: 'true',
     // hidden: store.getters.userIdentity === 1 ? 'true' : 'false',
     name: 'Auth',
-    meta: { title: '授权管理', icon: 'el-icon-s-promotion', roles: ['admin', 'normal'], noCache: true },
+    meta: { title: '授权管理', icon: 'el-icon-s-promotion', roles: ['admin', 'normal'], noCache: true, proxy: true },
     children: [
       {
         path: 'list',
         component: () => import('@/views/supplier/auth/index'),
         name: 'AuthList',
-        meta: { title: '授权列表', icon: 'el-icon-menu', roles: ['admin', 'normal'], noCache: true, affix: true }
+        meta: { title: '授权列表', icon: 'el-icon-menu', roles: ['admin', 'normal'], affix: true, noCache: true, proxy: true }
       }
     ]
   },
@@ -155,28 +155,65 @@ export const asyncRoutes = [
     redirect: '/product/list',
     hidden: true,
     name: 'Auth',
-    meta: { title: '商品管理', icon: 'el-icon-s-shop', roles: ['admin', 'normal'], noCache: true },
+    meta: { title: '商品管理', icon: 'el-icon-s-shop', roles: ['admin', 'normal'], noCache: true, proxy: true },
     children: [
       {
         hidden: true,
         path: 'list',
         component: () => import('@/views/supplier/product/index'),
         name: 'Product',
-        meta: { title: '商品列表', icon: 'el-icon-menu', roles: ['admin', 'normal'], noCache: true }
+        meta: { title: '商品列表', icon: 'el-icon-menu', roles: ['admin', 'normal'], noCache: true, proxy: true }
       },
       {
         hidden: true,
         path: 'add',
         component: () => import('@/views/supplier/product/add'),
         name: 'AddProduct',
-        meta: { title: '添加商品', icon: 'el-icon-menu', roles: ['admin', 'normal'], noCache: false }
+        meta: { title: '添加商品', icon: 'el-icon-menu', roles: ['admin', 'normal'], noCache: true, proxy: true }
       },
       {
         hidden: true,
         path: 'edit',
         component: () => import('@/views/supplier/product/edit'),
         name: 'EditProduct',
-        meta: { title: '修改商品', icon: 'el-icon-menu', roles: ['admin', 'normal'], noCache: false }
+        meta: { title: '修改商品', icon: 'el-icon-menu', roles: ['admin', 'normal'], noCache: true, proxy: true }
+      }
+    ]
+  },
+  {
+    path: '/review',
+    component: Layout,
+    alwaysShow: true,
+    redirect: '/review/list',
+    name: 'Review',
+    meta: { title: '品牌授权审核', icon: 'el-icon-s-check', roles: ['admin'], noCache: true },
+    children: [
+      {
+        path: 'list',
+        component: () => import('@/views/supplier/review/index'),
+        name: 'ReviewList',
+        meta: { title: '审核列表', icon: 'el-icon-menu', roles: ['admin'], noCache: true, affix: true }
+      },
+      {
+        path: 'auth-list',
+        hidden: true,
+        component: () => import('@/views/supplier/review/authList'),
+        name: 'AuthList',
+        meta: { title: '授权机构审核列表', icon: 'el-icon-menu', roles: ['admin'], noCache: true }
+      },
+      {
+        path: 'shop-list',
+        hidden: true,
+        component: () => import('@/views/supplier/review/shopList'),
+        name: 'ShopList',
+        meta: { title: '商品审核列表', icon: 'el-icon-menu', roles: ['admin'], noCache: true }
+      },
+      {
+        path: 'shop-detail',
+        hidden: true,
+        component: () => import('@/views/supplier/review/shopDetail'),
+        name: 'ShopDetail',
+        meta: { title: '商品审核详情', icon: 'el-icon-menu', roles: ['admin'], noCache: true }
       }
     ]
   },

src/store/modules/tagsView.js

@@ -63,6 +63,16 @@ const mutations = {
         break
       }
     }
+  },
+
+  // 关闭所有可被代理的页面
+  DEL_ALL_PROXY_VIEW: state => {
+    let i = state.visitedViews.length
+    while (i--) {
+      if (state.visitedViews[i].meta?.proxy) {
+        state.visitedViews.splice(i, 1)
+      }
+    }
   }
 }
 
@@ -149,6 +159,10 @@ const actions = {
 
   updateVisitedView({ commit }, view) {
     commit('UPDATE_VISITED_VIEW', view)
+  },
+
+  delAllProxyView({ commit }) {
+    commit('DEL_ALL_PROXY_VIEW')
   }
 }
 

src/styles/index.css

@@ -655,6 +655,10 @@ aside a:hover {
   color: #F56C6C;
 }
 
+.status.warning {
+  color: #E6A23C;
+}
+
 .hidden .el-upload {
   display: none !important;
 }
@@ -662,3 +666,24 @@ aside a:hover {
 .tableHeader th {
   background-color: #f7f7f7 !important;
 }
+
+.el-drawer__header {
+  margin-bottom: 0 !important;
+}
+
+.table-cell .cell {
+  overflow: visible !important;
+}
+
+.table-cell .cell .el-badge {
+  vertical-align: 0;
+  margin-left: 5px;
+}
+
+.el-drawer header span {
+  outline: none;
+}
+
+.el-drawer button {
+  outline: none !important;
+}

src/styles/index.scss

@@ -197,6 +197,9 @@ aside {
   &.danger{
     color: #F56C6C;
   }
+  &.warning{
+    color: #E6A23C;
+  }
 }
 
 
@@ -210,4 +213,32 @@ aside {
   th{
     background-color: #f7f7f7 !important;
   }
+}
+
+// .el-badge__content.is-fixed{
+//   top: 14px !important;
+// }
+
+.el-drawer__header{
+  margin-bottom: 0 !important;
+}
+
+.table-cell{
+  .cell{
+    overflow: visible !important;
+    .el-badge{
+      vertical-align: 0;
+      margin-left: 5px;
+    }
+  }
+}
+.el-drawer{
+  header{
+    span{
+      outline: none;
+    }
+  }
+  button{
+    outline: none !important;
+  }
 }

src/utils/request.js

@@ -3,6 +3,10 @@ import { Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 import router from '@/router'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 // create an axios instance
 const service = axios.create({
@@ -11,28 +15,24 @@ const service = axios.create({
   timeout: 6000 // request timeout
 })
 
-// request interceptor
+// 请求拦截
 service.interceptors.request.use(
   config => {
-    // do something before request is sent
+    NProgress.start()
     config.headers['Content-Type'] = 'application/json'
     config.data = JSON.stringify(config.data)
     if (store.getters.token) {
-      // let each request carry token
-      // ['X-Token'] is a custom headers key
-      // please modify it according to the actual situation
       config.headers['X-Token'] = getToken()
     }
     return config
   },
   error => {
-    // do something with request error
-    console.log(error) // for debug
+    NProgress.done()
     return Promise.reject(error)
   }
 )
 
-// response interceptor
+// 响应拦截
 service.interceptors.response.use(
   /**
    * If you want to get http information such as headers or status
@@ -46,24 +46,23 @@ service.interceptors.response.use(
    */
   response => {
     const res = response.data
-
     // token失效时
     if (res.code === -99) {
-      Message({ message: '登录失效，请重新登录！' })
+      Message({ message: '登录失效，请重新登录！', duration: 1000 })
       router.replace('/login')
+      NProgress.done()
       return
-    }
-
     // 返回不成功
-    if (res.code !== 0) {
+    } else if (res.code !== 0) {
       Message({
-        message: res.msg || 'Error',
+        message: res.msg || '操作失败了，请重试！',
         type: 'error',
-        duration: 5 * 1000
+        duration: 500
       })
-      // return Promise.reject(new Error(res.message || 'Error'))
+      NProgress.done()
       return
     } else {
+      NProgress.done()
       return res
     }
   },
@@ -72,8 +71,9 @@ service.interceptors.response.use(
     Message({
       message: error.message,
       type: 'error',
-      duration: 5 * 1000
+      duration: 500
     })
+    NProgress.done()
     return Promise.reject(error)
   }
 )

src/views/supplier/review/authList.vue

@@ -0,0 +1,207 @@
+<template>
+  <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="handleFilter"
+      />
+      <span>审核状态:</span>
+      <el-select
+        v-model="listQuery.reviewStatus"
+        placeholder="审核状态"
+        clearable
+        style="width: 200px"
+        class="filter-item"
+      >
+        <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.shopReviewStatus"
+        placeholder="供应商类型"
+        clearable
+        style="width: 200px"
+        class="filter-item"
+      >
+        <el-option label="全部" value="" />
+        <el-option label="已完成审核" :value="1" />
+        <el-option label="未完成审核" :value="0" />
+      </el-select>
+      <el-button type="primary">查询</el-button>
+    </div>
+    <!-- 搜索区域END -->
+    <!-- 表格区域 -->
+    <el-table
+      v-loading="listLoading"
+      :data="reviewData"
+      style="width: 100%"
+      border
+      fit
+      highlight-current-row
+      cell-class-name="table-cell"
+    >
+      <el-table-column label="序号" type="index" width="80" align="center" />
+      <el-table-column prop="authParty" label="授权机构" align="center" />
+      <el-table-column label="审核状态" width="220px" align="center">
+        <template slot-scope="{row}">
+          <span v-if="row.reviewStatus === 2" class="status warning">待审核</span>
+          <span v-if="row.reviewStatus === 1" class="status success">审核通过</span>
+          <span v-if="row.reviewStatus === 0" class="status danger">审核未通过</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品信息审核状态" width="220px" align="center">
+        <template slot-scope="{row}">
+          <span v-if="row.shopReviewStatus === 0" class="status danger">未完成审核</span>
+          <span v-if="row.shopReviewStatus === 1" class="status success">已完成审核</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="reviewTime" label="审核时间" align="center" />
+      <el-table-column prop="reviewBy" label="审核人" align="center" />
+      <el-table-column label="操作" width="240px" align="center">
+        <template slot-scope="{row}">
+          <el-button v-if="row.reviewStatus !== 1" type="primary" size="mini" @click="handleShowDialog(row)">审核</el-button>
+          <el-badge :value="12" :max="99">
+            <el-button type="primary" size="mini" @click="$_navigationTo('shop-list')">商品信息审核</el-button>
+          </el-badge>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格区域END -->
+
+    <!-- 审核弹窗 -->
+    <el-dialog title="授权机构审核" :visible.sync="dialogVisible" width="450px" @close="dialogClosed">
+      <div class="auth-info">
+        <div class="auth-name">
+          <i>授权机构：</i>
+          <span>{{ dialogData.authParty }}</span>
+        </div>
+        <el-form ref="form" :model="dialogData" label-width="85px" :rules="dialogFormRules">
+          <el-form-item label="审核状态：">
+            <el-radio-group v-model="dialogData.reviewStatus">
+              <el-radio :label="1">通过</el-radio>
+              <el-radio :label="0">不通过</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="dialogData.reviewStatus === 0" label="原因：" prop="reason">
+            <el-input v-model="dialogData.reason" type="textarea" placeholder="请说明原因" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      // 是否显示dialog
+      dialogVisible: false,
+      listLoading: false,
+      // 查询query
+      listQuery: {
+        authParty: '',
+        reviewStatus: '',
+        shopReviewStatus: ''
+      },
+      dialogData: {
+        authParty: '果果哒',
+        reviewStatus: 1,
+        reason: ''
+      },
+      dialogFormRules: {
+        reason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
+      },
+      // 机构信息审核列表
+      reviewData: [
+        {
+          authParty: '果果哒',
+          reviewStatus: 1,
+          reviewTime: '2020/12/12 12:12:12',
+          reviewBy: 'admin',
+          shopReviewStatus: 0
+        },
+        {
+          authParty: '阿里巴巴',
+          reviewStatus: 1,
+          reviewTime: '2020/12/12 12:12:12',
+          reviewBy: 'admin',
+          shopReviewStatus: 1
+        },
+        {
+          authParty: '腾讯科技',
+          reviewStatus: 2,
+          reviewTime: '2020/12/12 12:12:12',
+          reviewBy: 'admin',
+          shopReviewStatus: 0
+        },
+        {
+          authParty: '字节跳动',
+          reviewStatus: 0,
+          reviewTime: '2020/12/12 12:12:12',
+          reviewBy: 'admin',
+          shopReviewStatus: 1
+        }
+      ]
+    }
+  },
+  methods: {
+    // 过滤列表
+    handleFilter() {},
+    // 审核对话框
+    handleShowDialog(item) {
+      this.dialogData.authParty = item.authParty
+      this.dialogVisible = true
+    },
+    // 审核对话框关闭
+    dialogClosed() {
+      this.dialogData.authParty = ''
+      this.dialogData.reviewStatus = 1
+    }
+  }
+}
+</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;
+    padding-bottom: 25px;
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 25px;
+  }
+}
+</style>

src/views/supplier/review/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <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="handleFilter"
+      />
+      <span>供应商类型:</span>
+      <el-select
+        v-model="listQuery.shopType"
+        placeholder="供应商类型"
+        clearable
+        style="width: 200px"
+        class="filter-item"
+      >
+        <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="handleFilter"
+      />
+      <span>审核状态:</span>
+      <el-select
+        v-model="listQuery.reviewStatus"
+        placeholder="供应商类型"
+        clearable
+        style="width: 200px"
+        class="filter-item"
+      >
+        <el-option label="所有类型" value="" />
+        <el-option label="已审核" :value="1" />
+        <el-option label="未审核" :value="2" />
+        <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="handleFilter"
+      />
+      <el-button type="primary" @click="getList(listQuery)">查询</el-button>
+    </div>
+    <!-- 搜索区域END -->
+    <!-- 表格区域 -->
+    <el-table
+      v-loading="listLoading"
+      :data="reviewData"
+      style="width: 100%"
+      border
+      fit
+      highlight-current-row
+      cell-class-name="table-cell"
+    >
+      <el-table-column label="序号" type="index" width="80" align="center" />
+      <el-table-column prop="shopName" label="供应商名称" align="center" />
+      <el-table-column label="供应商类型" width="150px" align="center">
+        <template slot-scope="{row}">
+          <span v-if="row.shopType === 1">品牌方</span>
+          <span v-if="row.shopType === 2">代理商</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="mobile" label="手机号" width="200px" align="center" />
+      <el-table-column prop="linkMan" label="联系人" width="200px" align="center" />
+      <el-table-column label="审核状态" width="220px" align="center">
+        <template slot-scope="{row}">
+          <span v-if="row.reviewStatus === 0" class="status danger">未完成审核</span>
+          <span v-if="row.reviewStatus === 1" class="status success">已完成审核</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="240px" align="center">
+        <template>
+          <el-badge :value="12">
+            <el-button type="primary" size="mini" @click="$_navigationTo('auth-list')">品牌授权信息审核</el-button>
+          </el-badge>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格区域END -->
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      listLoading: false,
+      listQuery: {
+        shopName: '',
+        shopType: '',
+        mobile: '',
+        reviewStatus: '',
+        linkMan: ''
+      },
+      reviewData: [
+        {
+          shopName: '果果哒',
+          shopType: 1,
+          mobile: '15872950940',
+          linkMan: '预谋',
+          reviewStatus: 1
+        }
+      ]
+    }
+  },
+  methods: {
+    // 过滤列表
+    handleFilter() {}
+  }
+}
+</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;
+}
+</style>

src/views/supplier/review/shopDetail.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="shop-detail">
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+      <el-form-item label="商品名称：">
+        <span>某某某商品高级货色</span>
+      </el-form-item>
+      <el-form-item label="商品SN码：">
+        <span>954sad54gasg</span>
+      </el-form-item>
+      <el-form-item label="商品图片：">
+        <el-image
+          style="width: 140px; height: 140px"
+          :src="shopImageUrl"
+          :preview-src-list="srcList"
+        />
+      </el-form-item>
+      <el-form-item label="授权牌：">
+        <el-image
+          style="width: 140px; height: 140px"
+          :src="authorizeUrl"
+          :preview-src-list="srcList"
+        />
+      </el-form-item>
+      <el-form-item label="相关参数：">
+        <table>
+          <tr>
+            <td>品牌：</td>
+            <td>阿里巴巴</td>
+          </tr>
+          <tr>
+            <td>品牌：</td>
+            <td>阿里巴巴</td>
+          </tr>
+          <tr>
+            <td>品牌：</td>
+            <td>阿里巴巴</td>
+          </tr>
+          <tr>
+            <td>品牌：</td>
+            <td>阿里巴巴</td>
+          </tr>
+        </table>
+      </el-form-item>
+
+      <el-form-item label="审核状态：">
+        <el-radio-group v-model="formData.status">
+          <el-radio :label="1">通过</el-radio>
+          <el-radio :label="0">不通过</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="formData.status!==1" prop="reason" label="原因：">
+        <el-input v-model="formData.reason" type="textarea" placeholder="请说明原因" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="info">返回</el-button>
+        <el-button type="primary">提交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      titleCol: 4,
+      contentCol: 18,
+      shopImageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+      authorizeUrl: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
+      srcList: [
+        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+      ],
+      formData: {
+        status: 1,
+        reason: ''
+      },
+      formRules: {
+        reason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.shop-detail{
+  height: 100vh;
+  font-size: 14px;
+  color: #444;
+  .params-list{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    li{
+      margin-bottom: 15px;
+    }
+  }
+  .el-form {
+    width: 600px;
+    margin: 25px auto 0;
+    .el-button{
+      width: 120px;
+    }
+  }
+}
+</style>

src/views/supplier/review/shopList.vue

@@ -0,0 +1,135 @@
+<template>
+  <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="handleFilter"
+      />
+      <span>商品SN码:</span>
+      <el-input
+        v-model="listQuery.mobile"
+        placeholder="请输入商品SN码"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter.native="handleFilter"
+      />
+      <span>审核状态:</span>
+      <el-select
+        v-model="listQuery.reviewStatus"
+        placeholder="供应商类型"
+        clearable
+        style="width: 200px"
+        class="filter-item"
+      >
+        <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">查询</el-button>
+    </div>
+    <!-- 搜索区域END -->
+    <!-- 表格区域 -->
+    <el-table
+      v-loading="listLoading"
+      :data="reviewData"
+      style="width: 100%"
+      border
+      fit
+      highlight-current-row
+      cell-class-name="table-cell"
+    >
+      <el-table-column label="序号" type="index" width="80" align="center" />
+      <el-table-column prop="productName" label="商品名称" align="center" />
+      <el-table-column prop="sncode" label="商品SN码" align="center" />
+      <el-table-column label="审核状态" width="220px" align="center">
+        <template slot-scope="{row}">
+          <span v-if="row.reviewStatus === 2" class="status warning">待审核</span>
+          <span v-if="row.reviewStatus === 1" class="status success">审核通过</span>
+          <span v-if="row.reviewStatus === 0" class="status danger">审核未通过</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="reviewTime" label="审核时间" align="center" />
+      <el-table-column prop="reviewBy" label="审核人" align="center" />
+      <el-table-column label="操作" width="240px" align="center">
+        <template>
+          <el-button type="primary" size="mini" @click="$_navigationTo('shop-detail')">审核</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格区域END -->
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      listLoading: false,
+      listQuery: {
+        shopName: '',
+        shopType: '',
+        mobile: '',
+        reviewStatus: '',
+        linkMan: ''
+      },
+      reviewData: [
+        {
+          productName: '果果哒',
+          reviewStatus: 1,
+          reviewTime: '2021/12/12 12:12:12',
+          sncode: 'jlfasdjlgds',
+          reviewBy: 'admin'
+        },
+        {
+          productName: '拼多多三折',
+          reviewStatus: 2,
+          reviewTime: '2021/12/12 12:12:12',
+          sncode: 'jlfasdjlgds',
+          reviewBy: 'admin'
+        },
+        {
+          productName: '淘宝五折',
+          reviewStatus: 0,
+          reviewTime: '2021/12/12 12:12:12',
+          sncode: 'jlfasdjlgds',
+          reviewBy: 'admin'
+        }
+      ]
+    }
+  },
+  methods: {
+    // 过滤列表
+    handleFilter() {}
+  }
+}
+</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;
+}
+</style>

src/views/supplier/user/edit.vue

@@ -293,8 +293,8 @@ export default {
     supplierBrands() {
       if (this.supplierBrands.length > 0) {
         this.formData1.shopInfo = 1
-       this.$refs.shopInfoRef?.clearValidate()
-       console.log('供应商列表不为空')
+        this.$refs.shopInfoRef?.clearValidate()
+        console.log('供应商列表不为空')
       } else {
         this.formData1.shopInfo = null
         console.log('供应商列表为空')