增加移动端banner

debug.log

@@ -1 +1,3 @@
 [0517/154023.784:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
+[0518/172215.096:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
+[0519/162903.250:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)

src/App.vue

@@ -32,7 +32,7 @@ export default {
   },
 
   created() {
-    // 测试数据
+    // // 测试数据
     const userId = '1218763410024566784';
     const params = { userId };
     this.getUserId(params);

src/components/Banner/BannerAdd.vue

@@ -2,9 +2,9 @@
   <div class="d-flex flex-wrap pb-3">
     <!-- 添加 -->
     <a-modal
-      :maskClosable="false"
+      :mask-closable="false"
       @cancel="$emit('closeModal')"
-      destroyOnClose
+      destroy-on-close
       footer
       title="添加轮播图"
       v-model="visible"
@@ -49,6 +49,21 @@
             <a-select-option :key="item" :value="index" v-for="(item, index) in enable">{{ item }}</a-select-option>
           </a-select>
         </a-form-item>
+        <!-- 设备 -->
+        <a-form-item
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol"
+          label="设备"
+        >
+          <a-select
+            @change="getUse($event, 'divice')"
+            class="ml-3"
+            default-value="PC"
+            style="width: 150px"
+          >
+            <a-select-option :key="item" :value="index" v-for="(item, index) in enable3">{{ item }}</a-select-option>
+          </a-select>
+        </a-form-item>
         <!-- 页面显示位置 -->
         <a-form-item
           :label-col="formItemLayout.labelCol"
@@ -114,6 +129,7 @@ export default {
       form: this.$form.createForm(this, { name: 'r-d-add' }),
       enable: ['启用', '禁用'],
       enable1: ['不跳转', 'H5'],
+      enable3: ['pc','mobile'],
       enable2: [
         {
           name: '首页',
@@ -180,6 +196,7 @@ export default {
         url: '',
         recStatus: 0,
         showPage: 0,
+        divice: ''
       },
       fileList: [],
       //限制文件上传的格式和大小

src/components/Banner/BannerDate.vue

@@ -38,7 +38,7 @@
     <a-empty v-else />
 
     <!-- 编辑 -->
-    <banner-edit :edit-item="editItem" :edit-visible="editVisible" @editSearch="editSearch" @closeModal="closeModal" />
+    <banner-edit :phone="phone" :edit-item="editItem" :edit-visible="editVisible" @editSearch="editSearch" @closeModal="closeModal" />
   </div>
 </template>
 
@@ -119,6 +119,7 @@ export default {
       type: Object,
       default: () => {},
     },
+    phone: { type: Boolean, default: false }, 
   },
   data() {
     return {
@@ -141,6 +142,9 @@ export default {
       })();
     };
   },
+  created(){
+    console.log("phone",this.phone)
+  },
 
   methods: {
     showEditModal(record) {

src/components/Banner/BannerEdit.vue

@@ -2,9 +2,9 @@
   <div class="d-flex flex-wrap pb-3">
     <!-- 编辑 -->
     <a-modal
-      :maskClosable="false"
+      :mask-closable="false"
       @cancel="$emit('closeModal')"
-      destroyOnClose
+      destroy-on-close
       footer
       title="修改轮播图"
       v-model="editVisible"
@@ -83,7 +83,11 @@ const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };
 
 export default {
   name: 'BannerEdit',
-  props: { editVisible: { type: Boolean, default: false }, editItem: { type: Object, default: () => {} } },
+  props: { 
+    editVisible: { type: Boolean, default: false }, 
+    phone: { type: Boolean, default: false }, 
+    editItem: { type: Object, default: () => {} } 
+    },
   data() {
     return {
       formItemLayout,
@@ -176,7 +180,8 @@ export default {
       this.editData.jumpType = this.editItem.jumpType;
       this.editData.jumpUrl = this.editItem.jumpUrl;
       this.editData.recStatus = this.editItem.recStatus;
-      this.editData.showPage = this.editItem.showPage;
+      this.showPage = this.editItem.showPage;
+      // this.editData.showPage = this.editItem.showPage;
       this.editData.url = this.editItem.url;
       this.jumpType = this.enable1[this.editItem.jumpType];
       this.recStatus = this.enable[this.editItem.recStatus];
@@ -187,11 +192,16 @@ export default {
       }
     },
   },
+  created(){
+    console.log("edit phone",this.phone)
+  },
+
   methods: {
     // 改变搜索条件
     getUse(e, str) {
       this.editData[str] = e;
       if (str === 'jumpType' && e === 0) {
+        console.log("=")
         this.editData.jumpUrl = '';
         for (let i = 0; i < this.enable2.length; i++) {
           if (this.enable.showPage === this.enable2[i].page) {
@@ -205,6 +215,11 @@ export default {
       if (str === 'recStatus') {
         this.recStatus = this.enable[e];
       }
+      
+      if (str === 'showPage') {
+        console.log("showPage",e)
+        this.showPage = e
+      }
     },
     // 上传文件事件
     handleChange(info) {

src/components/BtnCom/BtnCon.vue

@@ -5,6 +5,7 @@
     <div @click="jump('/industry-info')" class="btn">行业资讯</div>
     <div @click="jump('/user-manage')" class="btn">用户管理</div>
     <div @click="jump('/banner-manage')" class="btn">轮播图管理</div>
+    <div @click="jump('/banner-manage-m')" class="btn">(移动端)轮播图管理</div>
     <div @click="jump('/communication-community')" class="btn">交流社区</div>
     <div @click="jump('/event-announcement')" class="btn">活动公告</div>
     <div @click="jump('/innovation-policy')" class="btn">创新政策</div>

src/router/index.js

@@ -34,6 +34,12 @@ const routes = [
     path: '/banner-manage',
     name: 'BannerManage',
     component: () => import(/* webpackChunkName: "banner-manage" */ 'views/BannerManage/BannerManage.vue'),
+  },
+    // 轮播图管理
+  {
+    path: '/banner-manage-m',
+    name: 'BannerManageM',
+    component: () => import(/* webpackChunkName: "banner-manage" */ 'views/BannerManage/BannerManageM.vue'),
   },
   // 交流社区
   {

src/views/BannerManage/BannerManageM.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="pa-3 white fill-height d-flex flex-column">
+    <banner-search @getListData="getListData" />
+    <banner-date :phone="true" :lists="lists" :pagination="pagination" @getListData="getListData" />
+  </div>
+</template>
+
+<script>
+import BannerSearch from 'components/Banner/BannerSearch.vue';
+import BannerDate from 'components/Banner/BannerDate.vue';
+import { queryCarousel } from 'config/api';
+
+export default {
+  name: 'BannerManage',
+  components: {
+    BannerSearch,
+    BannerDate,
+  },
+
+  data() {
+    return {
+      str: '轮播图管理界面',
+      lists: {},
+      pagination: { current: 1, pageSize: 10 },
+      pageNum: 1,
+      pageSize: 10,
+      paramData: {
+        showPage: '',
+        jumpType: 0,
+        recStatus: 0,
+      },
+    };
+  },
+
+  created() {
+    this.getListData();
+  },
+
+  methods: {
+    // 获取轮播图列表
+    async getListData(condition) {
+      try {
+        if (condition && condition.current) {
+          this.pageNum = condition.current;
+          this.pageSize = condition.pageSize;
+        } else if (condition && !condition.pageNum) {
+          this.paramData = condition;
+        }
+        const params = {
+          param: {
+            showPage: this.paramData.showPage,
+            jumpType: this.paramData.jumpType,
+            recStatus: this.paramData.recStatus,
+            pageNum: this.pageNum,
+            pageSize: this.pageSize,
+          },
+        };
+        const res = await queryCarousel(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.lists = data;
+          const paper = { ...this.pagination };
+          paper.current = data.pageNum;
+          paper.total = +data.total;
+          paper.pageSize = data.pageSize;
+          this.pagination = paper;
+        } else {
+          throw msg || '获取失败';
+        }
+      } catch (error) {
+        this.$message.error(error);
+      }
+    },
+  },
+};
+</script>