轮播图相关

package-lock.json

@@ -1808,6 +1808,16 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594427999421&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1840,6 +1850,34 @@
           "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=",
           "dev": true
         },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "css-loader": {
           "version": "3.6.0",
           "resolved": "https://registry.npm.taobao.org/css-loader/download/css-loader-3.6.0.tgz?cache=0&sync_timestamp=1604507107408&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcss-loader%2Fdownload%2Fcss-loader-3.6.0.tgz",
@@ -1893,6 +1931,13 @@
             "universalify": "^0.1.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
         "icss-utils": {
           "version": "4.1.1",
           "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz?cache=0&sync_timestamp=1602527330977&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-4.1.1.tgz",
@@ -2007,6 +2052,16 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1603881757308&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -2023,6 +2078,32 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.1.2",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "loader-utils": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+              "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+              }
+            }
+          }
         }
       }
     },
@@ -12561,87 +12642,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-rc.1",
-      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-rc.1.tgz?cache=0&sync_timestamp=1604764704943&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-rc.1.tgz",
-      "integrity": "sha1-nB8WhOLQHIpyIW+dTbEZ4VxiJkU=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1601839122515&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz",
-          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611732186&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-quill-editor": {
       "version": "3.0.6",
       "resolved": "https://registry.npm.taobao.org/vue-quill-editor/download/vue-quill-editor-3.0.6.tgz",

src/components/Banner/BannerDate.vue

@@ -1,21 +1,24 @@
 <template>
   <div class="main flex-1">
-    <div style="width:100%" v-if="lists && lists.length > 0">
+    <div style="width: 100%" v-if="lists && lists.list.length > 0">
       <a-table
         :columns="columns"
-        :data-source="lists"
+        :data-source="lists.list"
         :loading="loading"
         :row-key="record => record.id"
         bordered
         class="white"
+        :scroll="{ y: height }"
       >
         <template slot="id" slot-scope="text, record, index">
           <span>{{ index + 1 }}</span>
         </template>
-
+        <template slot="url" slot-scope="text, record">
+          <img :src="record.url" style="width: 300px; height: 80px" alt="" />
+        </template>
         <template slot="edit" slot-scope="text, record">
           <a-icon @click="showEditModal(record)" class="pointer" theme="twoTone" type="edit" />
-          <a-popconfirm @confirm="() => onDelete(record.id)" title="确定要删除这一条?" v-if="lists.length">
+          <a-popconfirm @confirm="() => onDelete(record.id)" title="确定要删除这一条?" v-if="lists.list.length > 0">
             <a-icon class="ml-4 pointer" theme="twoTone" two-tone-color="#ff0000" type="delete" />
           </a-popconfirm>
           <a-switch checked-children="启用" class="ml-4" default-checked un-checked-children="禁用" />
@@ -25,12 +28,12 @@
     <a-empty v-else />
 
     <!-- 编辑 -->
-    <banner-edit :editItem="editItem" :editVisible="editVisible" @closeModal="closeModal" />
+    <banner-edit :edit-item="editItem" :edit-visible="editVisible" @closeM-modal="closeModal" />
   </div>
 </template>
 
 <script>
-import BannerEdit from "components/Banner/BannerEdit.vue";
+import BannerEdit from 'components/Banner/BannerEdit.vue';
 // import { delTeam } from 'config/api';
 
 const columns = [
@@ -42,25 +45,47 @@ const columns = [
     scopedSlots: { customRender: 'id' },
   },
   {
-    title: '页面路径',
+    title: '图片',
+    align: 'center',
+    dataIndex: 'url',
+    key: 'url',
+    width: 350,
+    scopedSlots: { customRender: 'url' },
+  },
+  {
+    title: '显示位置',
     align: 'center',
-    dataIndex: 'pagePath',
+    dataIndex: 'showPage',
-    key: 'pagePath',
+    key: 'showPage',
-    scopedSlots: { customRender: 'pagePath' },
+    scopedSlots: { customRender: 'showPage' },
   },
   {
-    title: '排序',
+    title: '跳转类型',
     align: 'center',
-    dataIndex: 'sort',
+    dataIndex: 'jumpType',
-    key: 'sort',
+    key: 'jumpType',
-    scopedSlots: { customRender: 'sort' },
+    scopedSlots: { customRender: 'jumpType' },
   },
   {
     title: '跳转路径',
     align: 'center',
-    dataIndex: 'jumpPath',
+    dataIndex: 'jumpUrl',
-    key: 'jumpPath',
+    key: 'jumpUrl',
-    scopedSlots: { customRender: 'jumpPath' },
+    scopedSlots: { customRender: 'jumpUrl' },
+  },
+  {
+    title: '图片参数',
+    align: 'center',
+    dataIndex: 'param',
+    key: 'param',
+    scopedSlots: { customRender: 'param' },
+  },
+  {
+    title: '创建时间',
+    align: 'center',
+    dataIndex: 'updatedAt',
+    key: 'updatedAt',
+    scopedSlots: { customRender: 'updatedAt' },
   },
   {
     title: '编辑',
@@ -72,51 +97,45 @@ const columns = [
   },
 ];
 
-const lists = [
-  {
-    id:'001',
-    pagePath:'http://localhost:8080/',
-    sort:1,
-    jumpPath: 'https://test.tall.wiki/pt-dev/user/login?redirect=%2F',
-  },
-  {
-    id:'002',
-    pagePath:'http://localhost:8080/',
-    sort:2,
-    jumpPath: 'https://test.tall.wiki/pt-dev/user/login?redirect=%2F',
-  }
-];
-
 export default {
-  name: "BannerDate",
+  name: 'BannerDate',
-  components: {
+  components: { BannerEdit },
-    BannerEdit,
+  props: {
+    lists: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
-    this.cacheData = lists.map(item => ({ ...item }));
     return {
       columns,
-      lists,
       loading: false,
       editingKey: '',
       height: '',
       editVisible: false,
       editItem: null, // 修改的那条
-    }
+    };
   },
-
   mounted() {
-    this.height = document.getElementsByClassName('main')[0].offsetHeight - 150;
+    let th = 200;
+    let wh = window.innerHeight;
+    this.height = wh - th;
+    window.onresize = () => {
+      return (() => {
+        wh = window.innerHeight;
+        this.height = wh - th;
+      })();
+    };
   },
 
   methods: {
-    showEditModal(record){
+    showEditModal(record) {
       console.log('record: ', record);
       this.editItem = record;
       this.editVisible = true;
     },
 
-    closeModal(){
+    closeModal() {
       this.editVisible = false;
     },
 
@@ -140,10 +159,10 @@ export default {
     },
 
     // 打开报名
-    openSignUp(){
+    openSignUp() {
       const { query } = this.$route;
       this.$router.push({ path: '/sign-up', query });
-    }
+    },
   },
 };
 </script>

src/config/api.js

@@ -9,6 +9,7 @@ let { proxyUrl, msgUrl } = require('@/config/setting');
 const greenvalley = `${proxyUrl}/greenvalley`;
 const researchTeam = `${greenvalley}/researchTeam`; // 创新平台相关操作
 const page = `${greenvalley}/page`; // 页面管理相关操作
+const carousel = `${greenvalley}/carousel`; // 轮播图相关接口
 
 // websocket基础地址
 export const WS_BASE_URL = msgUrl;
@@ -39,3 +40,5 @@ export const addPage = params => axios.post(`${page}/add`, params);
 
 // 页面配置删除
 export const deletePage = params => axios.post(`${page}/delete`, params);
+// 查询轮播图列表
+export const queryCarousel = params => axios.post(`${carousel}/queryCarousel`, params);

src/views/BannerManage/BannerManage.vue

@@ -1,37 +1,50 @@
 <template>
   <div class="pa-3 white fill-height d-flex flex-column">
     <banner-search />
-    <banner-date />
+    <banner-date :lists="lists" />
   </div>
 </template>
 
 <script>
-import BannerSearch from "components/Banner/BannerSearch.vue";
+import BannerSearch from 'components/Banner/BannerSearch.vue';
-import BannerDate from "components/Banner/BannerDate.vue";
+import BannerDate from 'components/Banner/BannerDate.vue';
-// import { getSelectTeam } from 'config/api';
+import { queryCarousel } from 'config/api';
 
 export default {
-  name: "BannerManage",
+  name: 'BannerManage',
   components: {
     BannerSearch,
     BannerDate,
   },
 
+  data() {
+    return {
+      str: '轮播图管理界面',
+      lists: {},
+    };
+  },
+
   created() {
-    // this.getSelectTeam()
+    this.getListData();
   },
 
   methods: {
-    /**
+    // 获取轮播图列表
-     * 根据团队id查看研发团队相关信息
+    async getListData() {
-     * @param { String } competeTimeId 第几届信息的id
-     */
-    async getSelectTeam() {
       try {
-        const params = {param:{}}
+        const params = {
-        const res = await getSelectTeam(params);
+          param: {
+            showPage: '',
+            jumpType: '',
+            recStatus: '',
+            pageNum: 1,
+            pageSize: 10,
+          },
+        };
+        const res = await queryCarousel(params);
         const { code, msg, data } = res.data;
         if (code === 200) {
+          this.lists = data;
         } else {
           throw msg || '获取失败';
         }