feat:添加图录管理页面

src/api/business/consign.js

@@ -90,3 +90,11 @@ export function returnOrderDetail(params) {
     data: params
   })
 }
+
+export function requestBookList(params) {
+  return request({
+    url: '/imageCatelog/find',
+    method: 'post',
+    data: params
+  })
+}

src/router/index.js

@@ -623,6 +623,18 @@ export const asyncRouterMap = [
     ],
     hidden: true
   },
-
+  {
+    path: '/books',
+    component: Layout,
+    redirect: 'bookManager',
+    children: [
+      {
+        path: 'bookManager',
+        component: () => import('@/views/books/bookManager'),
+        name: 'bookManager',
+        meta: { title: '图录管理', icon: 'table', noCache: true }
+      }
+    ]
+  },
   { path: '*', redirect: '/404', hidden: true }
 ]

src/views/books/bookManager.vue

+<template>
+  <div class="page_bookManager">
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      size="small"
+      element-loading-text="正在查询中..."
+      border
+      highlight-current-row>
+      <el-table-column align="center" min-width="100px" prop="title" label="标题" />
+      <el-table-column align="center" label="操作" width="500">
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleCopyCode(scope.row)">复制链接
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <Pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.page"
+      :limit.sync="listQuery.size"
+      @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import { requestBookList } from '@/api/business/consign'
+
+export default {
+  name: 'BookManager',
+  components: {
+    Pagination
+  },
+  data() {
+    return {
+      itemKey: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        size: 20
+      },
+      list: [],
+      total: 0
+      // 物流
+    }
+  },
+  created() {
+    this.getList()
+  },
+  destroyed() {
+    this.clearAll()
+  },
+  methods: {
+    // 清除所有定时器
+    clearAll() {
+      if (this.list) {
+        this.list.forEach((el) => {
+          clearInterval(el.countDown)
+        })
+      }
+    },
+    handlerGetList() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleClick(tab, event) {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      requestBookList(this.listQuery).then(response => {
+        this.clearAll()
+        this.list = response.data.data.dataList
+        this.total = response.data.data.total
+        this.listLoading = false
+      }).catch((e) => {
+        this.list = []
+        this.total = 0
+        this.listLoading = false
+      })
+    },
+    /**
+     * 复制链接
+     */
+    handleCopyCode(row) {
+      // 复制结果
+      let copyResult = true
+      // 设置想要复制的文本内容
+      if (!row.id) {
+        return
+      }
+      const text = `http://h5.wanwudezhi.com/product-web/books/bookPage?bookId=${row.id}`
+      // 判断是否支持clipboard方式
+      if (window.navigator.clipboard) {
+        // 利用clipboard将文本写入剪贴板（这是一个异步promise）
+        window.navigator.clipboard.writeText(text).then((res) => {
+          console.log('复制成功')
+          // 返回复制操作的最终结果
+          this.$notify.success({
+            message: '复制成功，快去分享给好友吧～'
+          })
+          return copyResult
+        }).catch((err) => {
+          copyResult = false
+          console.log('复制失败', err)
+          // 返回复制操作的最终结果
+          return copyResult
+        })
+      } else {
+        // 不支持clipboard方式 则采用document.execCommand()方式
+        // 创建一个input元素
+        const inputDom = document.createElement('textarea')
+        // 设置为只读 防止移动端手机上弹出软键盘
+        inputDom.setAttribute('readonly', 'readonly')
+        // 给input元素赋值
+        inputDom.value = text
+        // 将创建的input添加到body
+        document.body.appendChild(inputDom)
+        // 选中input元素的内容
+        inputDom.select()
+        // 执行浏览器复制命令
+        // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
+        // Input要在正常的编辑状态下原生复制方法才会生效
+        const result = document.execCommand('copy')
+        // 判断是否复制成功
+        if (result) {
+          console.log('复制成功')
+        } else {
+          console.log('复制失败')
+          copyResult = false
+        }
+        // 复制操作后再将构造的标签 移除
+        document.body.removeChild(inputDom)
+        // 返回复制操作的最终结果
+      }
+      this.$notify.success({
+        message: '复制成功，快去分享给好友吧～'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page_bookManager {
+  padding: 20px;
+}
+/deep/ .cell {
+  display: flex;
+  justify-content: center;
+}
+.page_consignList {
+  padding: 0 20px 20px;
+}
+
+</style>