diff --git a/src/views/blackList/blackList.vue b/src/views/blackList/blackList.vue
new file mode 100644
index 0000000..0d74a44
--- /dev/null
+++ b/src/views/blackList/blackList.vue
@@ -0,0 +1,183 @@
+<!-- 黑名单列表 -->
+<template>
+  <app-container>
+    <search-area :need-clear="false" :need-search-more="false" :size="size" type="default" search-more-type="default" @search="search">
+      <!--一般查询条件-->
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" :size="size" placeholder="电话号码" clearable/>
+      </search-item>
+      <el-button slot="btns" class="filter-item" style="" size="small" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
+      <el-button slot="btns" class="filter-item" style="" size="small" type="primary" icon="el-icon-plus" @click="add">移除</el-button>
+    </search-area>
+    <normal-table
+      :data="list"
+      :head="tableOption.head"
+      :size="size"
+      :query="listQuery"
+      :total="total"
+      :columns="columns"
+      :list-loading="listLoading"
+      :options="tableOption.options"
+      :tools-option="tableOption.toolsOption"
+      @change="changePage"
+      @select-change="handleSelectionChange"/>
+    <edit-customer ref="editdialog" @watch-child="fetchData"/>
+  </app-container>
+</template>
+
+<script>
+import AppContainer from '@/components/layout/AppContainer'
+import SearchArea from '@/components/SearchArea/SearchArea'
+import SearchItem from '@/components/SearchArea/SearchItem'
+import CaseListTable from '@/views/caseManage/caseCommon/caseListTable'
+import NormalTable from '@/components/NomalTable'
+import { getCustomerList, delCustomer } from '@/api/customer'
+import EditCustomer from './editBlack'
+
+export default {
+  name: 'CustomerList',
+  components: { EditCustomer, AppContainer, SearchArea, SearchItem, CaseListTable, NormalTable },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: true, // 列表加载动画
+      multipleSelection: [], // 多选选中项
+      listQuery: {
+        name: '', // 姓名
+        tel: '', // 电话
+        address: '', // 地址
+        offset: 1,
+        limit: 20,
+        sort: '',
+        order: ''
+      }, // 筛选条件
+      columns: [
+        {
+          text: '电话',
+          value: 'tel',
+          align: 'center'
+        },
+        {
+          text: '备注',
+          value: 'name',
+          align: 'center'
+        }
+      ], // 显示列
+      checkStateList: [], // 审核状态
+      groundStateList: [], // 上架状态
+      validStateList: [], // 可用状态
+      tableOption: {
+        head: {
+          show: false, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: true, // 是否需要序号列
+          needMultipleSelection: true // 需要多选列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      },
+      checkedId: '', // 被审核知识id
+      size: 'small'
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    search() {
+      this.fetchData(false)
+    },
+    // 获取数据
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      this.listLoading = true
+      getCustomerList(this.listQuery).then(response => {
+        if (response.code === 200) {
+          response.data.rows = [
+            {
+              'id': '1',
+              'name': '李四',
+              'typeName': '',
+              'tel1': '1310000000',
+              'tel2': '1562323221',
+              'cardNo': '110123199601019281',
+              'address': '北京海淀',
+              'remarks': ''
+            }
+          ]
+          this.list = response.data.rows
+          this.total = response.data.total
+          this.listLoading = false
+        }
+      })
+    },
+    detail(row) {
+      this.$refs.editdialog.initDialog('info', true, row)
+    },
+    // 添加客户
+    add(row) {
+      this.$refs.editdialog.initDialog('create', true, row)
+    },
+    // 编辑
+    edit(row) {
+      this.$refs.editdialog.initDialog('update', true, row)
+    },
+    // 删除客户资料吗
+    del() {
+      if (this.checkSelection()) {
+        this.$confirm(
+          '确定要移除黑名单吗？',
+          '确认操作',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(() => {
+          const list = this.multipleSelection.map(item => item.id)
+          delCustomer(list).then(response => {
+            if (response.code === 200) {
+              this.$message.success('删除成功')
+            }
+          })
+        })
+      }
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
+    },
+    // 更换类别
+    changeType(typeid) {
+      this.listQuery.type = typeid
+      this.search()
+    },
+    // 多选选中项
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    checkSelection() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning('请至少选择一项')
+        return false
+      } else {
+        return true
+      }
+    }
+  }
+}
+</script>