增加风格底部导航代码

src/router/index.js

@@ -222,86 +222,86 @@ export const constantRoutes = [
       }
     ]
   },
-  // {
-  //   path: '/tabbar',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       name: '',
-  //       path: '',
-  //       component: () => import('@/views/tabbar/tabbar.vue'),
-  //       meta: {
-  //         title: '底部导航栏',
-  //         hidden: true,
-  //         breadcrumb: true
-  //       }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/tabbarDetail',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       name: '',
-  //       path: '',
-  //       component: () => import('@/views/tabbar/tabbarDetail.vue'),
-  //       meta: {
-  //         title: '导航详情',
-  //         hidden: true,
-  //         breadcrumb: true
-  //       }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/style',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       name: '',
-  //       path: '',
-  //       component: () => import('@/views/componentGallery/style.vue'),
-  //       meta: {
-  //         title: '风格',
-  //         hidden: true,
-  //         breadcrumb: true
-  //       }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/plate',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       name: '',
-  //       path: '',
-  //       component: () => import('@/views/componentGallery/plate.vue'),
-  //       meta: {
-  //         title: '版块',
-  //         hidden: true,
-  //         breadcrumb: true
-  //       }
-  //     }
-  //   ]
-  // },
-  // {
-  //   path: '/module',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       name: '',
-  //       path: '',
-  //       component: () => import('@/views/componentGallery/module.vue'),
-  //       meta: {
-  //         title: '组件',
-  //         hidden: true,
-  //         breadcrumb: true
-  //       }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/tabbar',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/tabbar/tabbar.vue'),
+        meta: {
+          title: '底部导航栏',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/tabbarDetail',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/tabbar/tabbarDetail.vue'),
+        meta: {
+          title: '导航详情',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/style',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/style.vue'),
+        meta: {
+          title: '风格',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/plate',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/plate.vue'),
+        meta: {
+          title: '版块',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/module',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/componentGallery/module.vue'),
+        meta: {
+          title: '组件',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
 
   // {
   //   path: '/documentation',

src/views/advertise/adPlaceList.vue

@@ -8,7 +8,7 @@
                     <div class="searchBox">
                         <div class="searchTitle">网站名称</div>
                         <el-select v-model="webSiteName_id" :multiple="false" :multiple-limit="1" filterable remote
-                            reserve-keyword placeholder="请输入网站名称" :remote-method="getWebNavList"
+                            reserve-keyword placeholder="请输入网站名称" clearable :remote-method="getWebNavList"
                             :loading="webSiteLoading" @change="selectWebSite">
                             <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
                                 :value="item.value">
@@ -19,7 +19,7 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">广告位名称</div>
-                        <el-input v-model="adPlaceName" class="input" placeholder="请输入广告位名称"></el-input>
+                        <el-input v-model="adPlaceName" class="input" clearable placeholder="请输入广告位名称"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="8" class="right">
@@ -33,7 +33,7 @@
         <!--表格内容 start------------------------------------------------------------>
         <div class="layerBox">
             <tableTitle :name="tableDivTitle" />
-            <button class="btn" @click="addWebsite">添加广告位</button>
+            <!-- <button class="btn" @click="addWebsite">添加广告位</button> -->
             <el-row>
                 <template>
                     <el-table class="my-table" v-loading="loading" :data="tableData" style="width: 100%">
@@ -43,17 +43,31 @@
                         </el-table-column>
                         <el-table-column prop="name" label="广告位名称" width="220">
                         </el-table-column>
-                        <el-table-column prop="type_name" label="广告类型" width="110">
+                        <el-table-column prop="type_name" label="广告类型" width="130">
                         </el-table-column>
-                        <el-table-column prop="size" label="宽/高 (PX)" width="120">
+                        <el-table-column prop="size" label="宽/高 (PX)" width="140">
                         </el-table-column>
-                        <el-table-column prop="price" label="价格 (天)" width="110">
+                        <el-table-column prop="price" label="价格 (天)" width="130">
                         </el-table-column>
-                        <el-table-column prop="created_at" label="创建时间" width="190">
+                        <el-table-column prop="created_at" label="创建时间" width="220">
                         </el-table-column>
-                        <el-table-column prop="updated_at" label="修改时间" width="190">
+                        <el-table-column prop="updated_at" label="修改时间" width="220">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)"><i
+                                            class="el-icon-edit-outline"></i>编辑</div>
+                                    <div class="listLookBtn" @click="goLook(scope.row.id)"><i
+                                            class="el-icon-view"></i>查看</div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <!-- <el-table-column prop="created_at" label="创建时间" width="190">
                         </el-table-column>
-                        <el-table-column fixed="right" label="操作" width="300">
+                        <el-table-column prop="updated_at" label="修改时间" width="190">
+                        </el-table-column> -->
+                        <!-- <el-table-column fixed="right" label="操作" width="300">
                             <template slot-scope="scope">
                                 <div class="listBtnBox">
                                     <div class="listDeleteBtn" @click="deleteRow(scope.row.id)"><i
@@ -64,7 +78,7 @@
                                             class="el-icon-view"></i>查看</div>
                                 </div>
                             </template>
-                        </el-table-column>
+                        </el-table-column> -->
                     </el-table>
                 </template>
             </el-row>
@@ -137,8 +151,7 @@
                     </el-form-item>
                     <el-form-item label="广告位大小:" prop="adSize">
                         <el-select v-model="ruleForm.adSize" placeholder="请选择广告位大小" @change="change">
-                            <el-option v-for="item in options" :key="item.id" :label="item.size"
-                                :value="item.id" >
+                            <el-option v-for="item in options" :key="item.id" :label="item.size" :value="item.id">
                             </el-option>
                         </el-select>
                     </el-form-item>
@@ -168,7 +181,7 @@ import tableTitle from './components/tableTitle.vue';
 
 //引入公用样式
 import '@/styles/global.less';
-import { createAdPlace, getAdPlaceList, delAdPlace, updateAdPlace, getAdList, getAdPlaceInfo,getSize } from '@/api/advertise'
+import { createAdPlace, getAdPlaceList, delAdPlace, updateAdPlace, getAdList, getAdPlaceInfo, getSize } from '@/api/advertise'
 export default {
     components: {
         tableTitle,//表格标题-
@@ -185,7 +198,7 @@ export default {
             tableDivTitle: "广告列表",  //列表标题
             dialogTableVisible: false,      //编辑弹框
             dialogName: '编辑', //编辑弹窗名称
-            loading:true, //加载中
+            loading: true, //加载中
 
             tableData: [],//表格数据
 
@@ -243,36 +256,50 @@ export default {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            getAdPlaceList({
-                page: this.page,
-                pageSize: this.pageSize
-            }).then(data => {
-                console.log(data.data.rows);
-                this.tableData = data.data.rows
-                this.total = data.data.count
-                if(data.code==200){
-                    this.loading=false
-                }
-                for (let item of this.tableData) {
-                    item.size = item.width + 'x' + item.height
-                }
-            })
+            if (this.adPlaceName !== '' || this.webSiteName_id !== '') {
+                getAdPlaceList({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.adPlaceName,
+                    website_id: this.webSiteName_id, //广告位名称 id
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                    for (let item of this.tableData) {
+                        item.size = item.width + 'x' + item.height
+                    }
+                })
+            } else {
+                getAdPlaceList({
+                    page: this.page,
+                    pageSize: this.pageSize
+                }).then(data => {
+                    this.loading = false
+                    console.log(data.data.rows);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                    for (let item of this.tableData) {
+                        item.size = item.width + 'x' + item.height
+                    }
+                })
+            }
+
         },
 
         //获取广告尺寸
-        getSize(){
-            getSize().then(data=>{
+        getSize() {
+            getSize().then(data => {
                 console.log(data.data);
-                this.options=data.data
-                for(let item of this.options){
+                this.options = data.data
+                for (let item of this.options) {
                     item.size = item.width + 'x' + item.height
                 }
                 console.log(this.options);
-                
             })
         },
 
-        change(){
+        change() {
             console.log(this.ruleForm.adSize);
         },
 
@@ -313,9 +340,9 @@ export default {
             });
         },
         //1.3 查看示例图
-        goGraph() {
-            this.dialogVisible = true
-        },
+        // goGraph() {
+        //     this.dialogVisible = true
+        // },
 
         //1.4 列表内容分页
         //直接跳转
@@ -374,7 +401,7 @@ export default {
 
             if (val.ad_size_id == 1) {
                 this.ruleForm.adSize = '1200x90'  //广告位大小
-            }else if (val.ad_size_id == 2) {
+            } else if (val.ad_size_id == 2) {
                 this.ruleForm.adSize = '420x560'  //广告位大小
             }
             if (val.typeid == 2) {

src/views/advertise/advertiseList.vue

@@ -6,7 +6,7 @@
             <el-row>
                 <el-col :span="24">
                     <i class="tipsIcon"></i>
-                    <span class="tipsText">7个工作日内，若运营没有操作用户的申请，则用户申请的时间、信息等将会释放。</span>
+                    <span class="tipsText">24小时内，若运营没有操作用户的申请，则用户申请的时间、信息等将会释放。</span>
                 </el-col>
             </el-row>
         </div>
@@ -16,29 +16,19 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">工单编号</div>
-                        <el-input class="input" v-model="order_code" placeholder="请输入工单编号"></el-input>
+                        <el-input class="input" v-model="order_code" clearable placeholder="请输入工单编号"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="6" class="left">
                     <div class="searchBox">
-                        <div class="searchTitle">审核状态</div>
-                        <el-select v-model="status" placeholder="请选择审核状态">
+                        <div class="searchTitle">订单状态</div>
+                        <el-select v-model="order_status" clearable placeholder="请选择订单状态">
                             <el-option v-for="item in order" :key="item.value" :label="item.label" :value="item.value">
                             </el-option>
                         </el-select>
                     </div>
                 </el-col>
-                <el-col :span="6" class="left">
-                    <div class="searchBox">
-                        <div class="searchTitle">广告状态</div>
-                        <el-select v-model="ad_status" placeholder="请选择广告状态">
-                            <el-option v-for="item in order_ad" :key="item.value" :label="item.label"
-                                :value="item.value">
-                            </el-option>
-                        </el-select>
-                    </div>
-                </el-col>
-                <el-col :span="6" class="right">
+                <el-col :span="8" class="right">
                     <div class="btnList">
                         <button class="search" @click="goSearch">搜索</button>
                         <button class="reset" @click="goReset">重置</button>
@@ -52,23 +42,21 @@
             <el-row>
                 <template>
                     <el-table class="my-table" :data="tableData" style="width: 100%">
-                        <el-table-column fixed prop="id" label="编号" width="90">
+                        <el-table-column fixed prop="id" label="编号" width="80">
                         </el-table-column>
                         <el-table-column prop="order_num" label="工单编号" width="175">
                         </el-table-column>
-                        <el-table-column prop="user_name" label="广告名称" width="200">
-                        </el-table-column>
-                        <el-table-column prop="status" label="审核状态" width="90" algin="center">
+                        <el-table-column prop="name" label="广告名称" width="160">
                         </el-table-column>
-                        <el-table-column prop="ad_status" label="广告状态" width="90">
+                        <el-table-column prop="orderStatus" label="订单状态" width="100">
                         </el-table-column>
-                        <el-table-column prop="sttime" label="开始时间" width="120">
+                        <el-table-column prop="sttime" label="开始时间" width="">
                         </el-table-column>
-                        <el-table-column prop="edtime" label="结束时间" width="120">
+                        <el-table-column prop="edtime" label="结束时间" width="">
                         </el-table-column>
                         <el-table-column prop="cttime" label="创建时间" width="">
                         </el-table-column>
-                        <el-table-column prop="admin_user_name" label="操作人" width="100">
+                        <el-table-column prop="price" label="总金额" width="110">
                         </el-table-column>
                         <el-table-column fixed="right" label="操作" width="330">
                             <template slot-scope="scope">
@@ -108,11 +96,12 @@
                         <el-input v-model="ruleForm.name" disabled placeholder="请输入网站名称"></el-input>
                     </el-form-item>
                     <el-form-item label="广告网址:" prop="">
-                        <el-input v-model="ruleForm.name" disabled placeholder="请输入网站名称"></el-input>
+                        <el-input v-model="ruleForm.ad_url" disabled placeholder="请输入网站名称"></el-input>
                     </el-form-item>
                     <el-form-item label="广告图:" prop="">
                         <div class="adImage">
-                            <img src="../../assets/advertise/404.png" alt="">
+                            <img :src="ruleForm.adImg" v-if="this.ruleForm.adImg" alt="">
+                            <img :src="'../../assets/advertise/404.png'" v-else-if="this.ruleForm.adImg = ''" alt="">
                         </div>
                     </el-form-item>
                     <el-form-item label="持续时间:" prop="">
@@ -158,7 +147,8 @@
                     <el-form-item label="广告位置:" prop="">
                         <span class="example" @click="goGraph">查看示例图</span>
                         <div>
-                            <el-button disabled v-for="item in 12" class="el_btnList">中农兴业网 一号广告位</el-button>
+                            <el-button disabled v-for="item in ruleForm.adPlace" class="el_btnList">{{ item
+                                }}</el-button>
                         </div>
                     </el-form-item>
                 </div>
@@ -191,6 +181,12 @@
 
         <!-- 弹出框 审核 start----------------------------------------------------------->
         <el-dialog title="审核状态" :visible.sync="dialogFormVisible" width="35%" top="25vh">
+            <template slot="title">
+                <div style="display: flex; align-items: center;">
+                    <span>审核状态</span>
+                    <span class="redTips">(确定后,审核状态不可再次更改.请确认好再审核)</span>
+                </div>
+            </template>
             <el-form ref="form" :model="form" label-width="80px">
                 <div class="radioGroup">
                     <el-radio-group v-model="status_radio">
@@ -203,7 +199,6 @@
                         </el-input>
                     </el-form-item>
                 </div>
-
             </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button @click="dialogFormVisible = false">取 消</el-button>
@@ -221,7 +216,7 @@ import tableTitle from './components/tableTitle.vue';
 
 //引入公用样式
 import '@/styles/global.less';
-import { getStatus, getOrderListAdmin, getOrderDetailAdmin, applyOrderStatusAdmin, editOrderAdmin, rejectOrderAdmin, endOrderAdmin, delOrderAdmin } from '@/api/advertise'
+import { getStatus, getOrderList, getOrderListAdmin, getOrderDetail, getOrderDetailAdmin, applyOrderStatusAdmin, editOrderAdmin, rejectOrderAdmin, endOrderAdmin, delOrderAdmin } from '@/api/advertise'
 export default {
     components: {
         tableTitle,//表格标题-
@@ -238,11 +233,12 @@ export default {
 
             tableData: [],//表格数据
 
+            ad_img: 'http://183.131.25.186:9501/image/20250102/1735810611310322.png', //广告图
+
             // 搜索框相关
             order_code: '', //工单编号 
-            status: '',//审核状态
-            ad_status: '',//广告状态
-            order: [ //审核状态数据
+            order_status: '',//订单状态
+            order: [ //订单状态数据
                 {
                     value: 1,
                     label: '已通过'
@@ -251,27 +247,9 @@ export default {
                     value: 2,
                     label: '已驳回'
                 },
-                {
-                    value: 5,
-                    label: '待审核'
-                },
-            ],
-            order_ad: [ //广告状态数据
-                {
-                    value: 1,
-                    label: '待投放'
-                },
-                {
-                    value: 2,
-                    label: '已驳回'
-                },
                 {
                     value: 3,
-                    label: '已撤回'
-                },
-                {
-                    value: 4,
-                    label: '已修改'
+                    label: '已取消'
                 },
                 {
                     value: 5,
@@ -283,11 +261,7 @@ export default {
                 },
                 {
                     value: 7,
-                    label: '已结束'
-                },
-                {
-                    value: 8,
-                    label: '投放中'
+                    label: '已完成'
                 }
             ],
 
@@ -299,6 +273,8 @@ export default {
             pageSize: 10,
             total: 0,
 
+            orderads: [],
+
             // 审核弹窗相关
             status_radio: "",   //审核状态
             textarea: '',    //驳回原因
@@ -308,12 +284,14 @@ export default {
             ruleForm: {
                 name: '', //广告名称
                 ad_url: '', //广告网址
+                adImg: '', //广告图
                 radio: '',//广告尺寸
                 startTime: '', //开始时间
                 endTime: '',   //结束时间
                 price: '',  //价格
                 days: '',   //天数
                 num: '',   //个数
+                adPlace: [] //广告位
             },
             rules: {
                 name: [
@@ -325,57 +303,64 @@ export default {
             }
         }
     },
-    watch: {
-        status_radio: {
-            handler(newVal, oldVal) {
-                // console.log(newVal);
-            },
-            deep: true,
-            immediate: true
-        }
-    },
     methods: {
         //1.列表和分页相关 start ------------------------------------------------------------>
         //1.1 开始请求列表信息方法
         getData() {
-            let data = new FormData()
-            data.append('page', this.page)
-            data.append('pageSize', this.pageSize)
-            console.log(data);
+            if (this.order_code == '' || this.order_status == '') {
+                let data = new FormData()
+                data.append('page', this.page)
+                data.append('pageSize', this.pageSize)
+                data.append('status', this.order_status)
+                data.append('order_num', this.order_code)
 
-            getOrderListAdmin(data).then(data => {
-                console.log("全部数据", data);
-                console.log(data.data.rows);
-                this.tableData = data.data.rows
-                this.total = data.data.count
-                for (let item of this.tableData) {
-                    if (item.status == 1) {
-                        item.status = "已通过"
-                    } else if (item.status == 2) {
-                        item.status = "已驳回"
-                    } else if (item.status == 6) {
-                        item.status = "待审核"
+                getOrderListAdmin(data).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                    for (let item of this.tableData) {
+                        if (item.status == 1) {
+                            item.orderStatus = '已通过'
+                        } else if (item.status == 7) {
+                            item.orderStatus = '已完成'
+                        } else if (item.status == 2) {
+                            item.orderStatus = '已驳回'
+                        } else if (item.status == 3) {
+                            item.orderStatus = '已取消'
+                        } else if (item.status == 5) {
+                            item.orderStatus = '已过期'
+                        } else if (item.status == 6) {
+                            item.orderStatus = '待审核'
+                        }
                     }
-
-                    if (item.ad_status == 1) {
-                        item.ad_status = "待投放"
-                    } else if (item.ad_status == 2) {
-                        item.ad_status = "已驳回"
-                    } else if (item.ad_status == 3) {
-                        item.ad_status = "已撤回"
-                    } else if (item.ad_status == 4) {
-                        item.ad_status = "已修改"
-                    } else if (item.ad_status == 5) {
-                        item.ad_status = "已过期"
-                    } else if (item.ad_status == 6) {
-                        item.ad_status = "待审核"
-                    } else if (item.ad_status == 7) {
-                        item.ad_status = "已结束"
-                    } else if (item.ad_status == 8) {
-                        item.ad_status = "待投放"
+                })
+            } else {
+                let data = new FormData()
+                data.append('page', this.page)
+                data.append('pageSize', this.pageSize)
+                console.log(data);
+                getOrderListAdmin(data).then(data => {
+                    console.log("getOrderListAdmin", data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                    for (let item of this.tableData) {
+                        if (item.status == 1) {
+                            item.orderStatus = '已通过'
+                        } else if (item.status == 7) {
+                            item.orderStatus = '已完成'
+                        } else if (item.status == 2) {
+                            item.orderStatus = '已驳回'
+                        } else if (item.status == 3) {
+                            item.orderStatus = '已取消'
+                        } else if (item.status == 5) {
+                            item.orderStatus = '已过期'
+                        } else if (item.status == 6) {
+                            item.orderStatus = '待审核'
+                        }
                     }
-                }
-            })
+                })
+            }
+
         },
 
         //1.2 删除内容
@@ -439,76 +424,93 @@ export default {
             let data = new FormData()
             data.append('page', this.page)
             data.append('pageSize', this.pageSize)
-            data.append('status', this.status)
-            data.append('ad_status', this.ad_status)
+            data.append('status', this.order_status)
             data.append('order_num', this.order_code)
-            data.append('sttime', "")
-            data.append('edtime', "")
             console.log(data);
 
             getOrderListAdmin(data).then(data => {
                 console.log(data);
-                console.log(data.data.rows);
                 this.tableData = data.data.rows
                 this.total = data.data.count
                 for (let item of this.tableData) {
                     if (item.status == 1) {
-                        item.status = "已通过"
+                        item.orderStatus = '已通过'
+                    } else if (item.status == 7) {
+                        item.orderStatus = '已完成'
                     } else if (item.status == 2) {
-                        item.status = "已驳回"
+                        item.orderStatus = '已驳回'
+                    } else if (item.status == 3) {
+                        item.orderStatus = '已取消'
+                    } else if (item.status == 5) {
+                        item.orderStatus = '已过期'
                     } else if (item.status == 6) {
-                        item.status = "待审核"
-                    }
-
-                    if (item.ad_status == 1) {
-                        item.ad_status = "待投放"
-                    } else if (item.ad_status == 2) {
-                        item.ad_status = "已驳回"
-                    } else if (item.ad_status == 3) {
-                        item.ad_status = "已撤回"
-                    } else if (item.ad_status == 4) {
-                        item.ad_status = "已修改"
-                    } else if (item.ad_status == 5) {
-                        item.ad_status = "已过期"
-                    } else if (item.ad_status == 6) {
-                        item.ad_status = "待审核"
-                    } else if (item.ad_status == 7) {
-                        item.ad_status = "已结束"
-                    } else if (item.ad_status == 8) {
-                        item.ad_status = "待投放"
+                        item.orderStatus = '待审核'
                     }
                 }
             })
         },
         //1.7 重置按钮
         goReset() {
-            this.order_code = '',
-                this.status = ''
-            this.ad_status = ''
+            this.order_code = ''
+            this.order_status = ''
+            this.page = 1
+            this.pageSize = 10
             this.getData();
         },
         //列表和分页相关 end ------------------------------------------------------------>
 
         //1.9 编辑
         goEdit(id, val) {
-            console.log(id);
-
+            console.log(id, val);
             this.activeid = id
             this.dialogTableVisible = true
-            console.log(id, val);
-            this.ruleForm.name = val.user_name
-            this.ruleForm.ad_url = val.ad_url
-            // this.ruleForm.radio = val.width
+            this.ruleForm.name = val.name
+            if (val.width == 1200) {
+                this.ruleForm.radio = '1'
+            } else {
+                this.ruleForm.radio = '2'
+            }
             this.ruleForm.startTime = val.sttime
             this.ruleForm.endTime = val.edtime
-            this.ruleForm.price = val.price
             this.ruleForm.days = val.days
+
+            let data = new FormData()
+            data.append('id', id)
+
+            //查看列表详情
+            getOrderDetailAdmin(data).then(data => {
+                // console.log('详情', data);
+                console.log('详情', data.data.ad[0]?.image_url);
+
+                this.ruleForm.ad_url = data.data.ad[0]?.image_url //广告链接
+                this.ruleForm.adImg = data.data.ad[0]?.image_src //广告图
+                this.ruleForm.num = data.data.ad.length //广告个数
+                this.ruleForm.price = val.price / val.days / this.ruleForm.num //广告价格
+
+                let adPlace = data.data.ad
+
+                this.ruleForm.adPlace = []
+
+                for (let item of adPlace) {
+                    this.ruleForm.adPlace.push(item.ad_name)//广告位名称
+                }
+                console.log(this.ruleForm.adPlace);
+            })
         },
 
         //2.0 审核
         goReview(id, val) {
             this.activeid = id
-            this.dialogFormVisible = true
+            this.activeid = id
+            if (val.status != 6) {
+                this.$message({
+                    message: '该广告已经审核，不能再次审核',
+                    type: 'warning'
+                })
+                this.dialogFormVisible = false
+            } else {
+                this.dialogFormVisible = true
+            }
         },
 
         //审核中的确定
@@ -561,9 +563,10 @@ export default {
         // 弹出层相关方法
         // 提交表单
         submitForm() {
+            let total = this.ruleForm.price * this.ruleForm.days * this.ruleForm.num
             let data = new FormData()
             data.append('id', this.activeid)
-            data.append('price', this.ruleForm.price)
+            data.append('price', total.toFixed(2))
             editOrderAdmin(data).then(data => {
                 console.log(data);
                 if (data.code == 200) {
@@ -572,13 +575,13 @@ export default {
                         message: '修改成功',
                         type: 'success'
                     })
+                    this.getData()
                 }
                 if (data.code == 0) {
                     this.$message({
                         message: data.message + ',需要保留两位小数',
                         type: 'error'
                     })
-                    this.dialogTableVisible = true
                 }
             })
         },
@@ -595,6 +598,13 @@ export default {
 </script>
 
 <style scoped lang="less">
+.redTips {
+    color: red;
+    display: inline-block;
+    margin-left: 20px;
+    font-size: 14px;
+}
+
 // 提示信息
 .tips {
     margin: 30px;
@@ -766,13 +776,13 @@ export default {
     .adImage {
         width: 140px;
         height: 140px;
-        line-height: 210px;
+        // line-height: 210px;
         border-radius: 12px;
         border: 1px solid rgba(85, 112, 241, 0.11);
 
         img {
             width: 140px;
-            height: 80px;
+            // height: 80px;
         }
     }
 

src/views/componentGallery/components/tableTitle.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    height: 38px;
+    line-height: 38px;
+    color:#333333;
+    position: relative;
+    margin-bottom: 30px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:10px;
+    }
+  }
+</style>

src/views/componentGallery/module.vue

@@ -0,0 +1,835 @@
+<!-- 组件 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">版块</div>
+                        <el-select v-model="templateName" clearable placeholder="请选择版块">
+                            <el-option v-for="item in options" :key="item.id" :label="item.sector_name"
+                                :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">组件名称</div>
+                        <el-input v-model="componentName" clearable placeholder="请输入组件名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加组件</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="moduleLoading">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="component_name" label="组件名称" width="">
+                        </el-table-column>
+                        <el-table-column prop="component_code" label="组件代码" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="关联版块:" prop="plateName">
+                        <el-cascader v-model="ruleForm.plateName" :options="styleOptions" :props="cascaderProps"
+                            :disabled="this.dialogName === '编辑'" @change="handleChange" placeholder="请选择关联的版块名称"
+                            clearable>
+                        </el-cascader>
+                    </el-form-item>
+                    <el-form-item label="组件名称:" prop="component_name">
+                        <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="组件代码:" prop="component_code">
+                        <el-input v-model="ruleForm.component_code" placeholder="请输入组件代码"
+                            :disabled="this.dialogName === '编辑'"></el-input>
+                    </el-form-item>
+                    <el-form-item label="组件展示图:" prop="component_img" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload" :disabled="this.dialogName === '编辑'">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl" :src="logoUrl" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="ruleForm.webLogo">
+                                    <!-- <input type="hidden" name="logo" v-model="logoUrl"> -->
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl && dialogName == '添加'" class="delete-button"
+                                    @click="handleDelete">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getComponentList, addComponent, delComponent, updateComponent, getComponentInfo } from '@/api/module'
+import { getSectorList } from '@/api/plate'
+import { getTemplateClass } from '@/api/style'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            // 1.1 初始化数据
+            tableDivTitle: "组件列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            moduleLoading: true, //表格数据加载中
+
+            tableData: [],//表格数据
+            options: [],//版块列表
+            activeid: "", //活动id
+            styleOptions: [],//关联版块
+            plateOptions: [],//关联版块
+            selectedId: '',
+            selectedOptions: [],
+            cascaderProps: {
+                value: "id", // 指定实际表示值的字段为id
+                label: "name", // 指定实际表示显示文本的字段为name
+                expandTrigger: 'hover',
+                checkStrictly: true, // 严格模式，只能选择叶子节点
+                children: 'children',
+            },
+
+
+            // 1.2 搜索框相关
+            templateName: '', //版块名称
+            componentName: '', //组件名称
+
+
+            //3.4 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            value: '',
+
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            template_id: '', //关联风格id
+            sector_id: '', //关联版块id
+
+            ruleForm: {
+                plateName: '', //关联版块名称
+                component_name: '', //组件名称
+                component_code: '', //组件代码
+                component_img: '',//组件展示
+            },
+
+            rules: {
+                plateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_name: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_code: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                component_img: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            if (this.templateName != '' || this.componentName != '') {
+                getComponentList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: '',
+                    component_name: this.componentName,
+                    sector_id: this.templateName,
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            } else {
+                getComponentList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log('组件', data);
+                    if (data.code == 200) {
+                        this.moduleLoading = false
+                        this.tableData = data.data.data
+                        this.total = data.data.total
+                    }
+                })
+            }
+        },
+        //获取版块列表
+        getList() {
+            getSectorList({
+                page: this.page,
+                page_size: 1000,
+            }).then(data => {
+                console.log('获取版块', data.data.data);
+                this.options = data.data.data
+            })
+
+            getTemplateClass().then(data => {
+                console.log("风格", data.data);
+                this.styleOptions = data.data
+                for (let item of this.styleOptions) {
+                    item.children = []
+                }
+            })
+        },
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delComponent({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 版块发生改变时 获取版块下的组件列表
+
+        // handleMouseEnter(event) {
+        //     const currentValue = this.ruleForm.plateName[this.ruleForm.plateName.length - 1];
+        //     console.log('当前级的值:', currentValue);
+        //     console.log('当前级:', event);
+        // },
+
+        handleChange(value) {
+            console.log('val', value);
+            this.template_id = value[0]
+            this.sector_id = value[1]
+            console.log("当前选中的父级：", this.template_id);
+            console.log("当前选中的子级：", this.sector_id);
+            // 当选中的选项发生变化时触发
+            if (value.length > 0) {
+                const selectedValue = value[value.length - 1]; // 获取最后一级选中的值
+                this.fetchChildren(selectedValue); // 请求对应的子选项
+
+            }
+        },
+        fetchChildren(parentValue) {
+            // 根据父级值请求子选项的接口
+            getSectorList({
+                page: this.page,
+                page_size: 1000,
+                template_class_id: parentValue
+            }).then(data => {
+                console.log('data', data.data.data);
+                this.plateOptions = data.data.data
+                this.styleOptions = this.styleOptions.map(item => {
+                    if (item.id === parentValue) {
+                        const children = []
+                        for (let item of this.plateOptions) {
+                            children.push({
+                                id: item.id,
+                                name: item.sector_name,
+                            })
+                        }
+                        item.children = children
+                    }
+                    return item
+                })
+                console.log(this.styleOptions);
+
+            })
+        },
+
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            getComponentList({
+                page: this.page,
+                page_size: this.pageSize,
+                template_class_id: '',
+                component_name: this.componentName,
+                sector_id: this.templateName,
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.data
+                this.total = data.data.total
+            })
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.templateName = ""
+            this.componentName = ""
+            this.page = 1
+            this.pageSize = 10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.plateName = '' //关联版块
+            this.ruleForm.component_name = '' //组件名称
+            this.ruleForm.component_code = '' //组件代码
+            this.ruleForm.component_img = '' //组件展示图
+            this.logoUrl = '' //组件展示图
+
+        },
+
+
+        //1.9 编辑
+        goEdit(id, val) {
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+            this.getList()
+
+            //数据回显
+            this.template_id = val.template_class_id
+            this.sector_id = val.sector_id
+            this.ruleForm.plateName = val.template_class_name //关联版块
+            this.ruleForm.plateName = [val.template_class_id, val.sector_id] // 组合成数组
+            this.ruleForm.plateName = [this.template_id, this.sector_id] // 组合成数组
+            // this.ruleForm.plateName = val.template_class_name+'/'+val.sector_name //组件名称
+            this.ruleForm.component_name = val.component_name //组件名称
+            this.ruleForm.component_code = val.component_code //组件代码
+            this.ruleForm.component_img = val.component_img //组件展示图
+            this.logoUrl = val.component_img //组件展示图
+        },
+
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                addComponent({
+                    template_id: this.template_id,
+                    sector_id: this.sector_id,
+                    component_name: this.ruleForm.component_name,
+                    component_img: this.ruleForm.component_img,
+                    component_code: this.ruleForm.component_code,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    }
+                })
+            }
+
+            if (this.website_id == '') {
+                this.$message({
+                    message: '请输入并选择网站名称',
+                    type: 'error'
+                })
+                this.dialogVisible = true
+            }
+            if (this.dialogName == "编辑") {
+                updateComponent({
+                    id: this.activeid,
+                    component_name: this.ruleForm.component_name,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.component_img = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+
+
+    },
+    mounted() {
+        this.getData()
+        this.getList()
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .el-cascader--medium {
+        font-size: 14px;
+        line-height: 36px;
+        width: 100%;
+    }
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>

src/views/componentGallery/plate.vue

@@ -0,0 +1,840 @@
+<!-- 板块 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">模板风格</div>
+                        <el-select v-model="templateStyle" clearable placeholder="请选择模板风格">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">版块</div>
+                        <el-input v-model="plateName" clearable placeholder="请输入版块名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加版块</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="plateLoading">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="sector_name" label="版块" width="">
+                        </el-table-column>
+                        <el-table-column prop="sector_code" label="版块代码" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="关联风格名称:" prop="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择关联风格名称"
+                            :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="版块名称:" prop="plateName">
+                        <el-input v-model="ruleForm.plateName" placeholder="请输入版块名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="版块代码:" prop="plateCode">
+                        <el-input v-model="ruleForm.plateCode" placeholder="请输入版块代码"
+                            :disabled="this.dialogName === '编辑'"></el-input>
+                    </el-form-item>
+                    <el-form-item label="页面类型:" prop="pageType">
+                        <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox"
+                            :disabled="this.dialogName === '编辑'">
+                            <el-checkbox v-for="(item, index) in checkList" :key="index" :label="item.value">{{
+                                item.label
+                            }}</el-checkbox>
+                        </el-checkbox-group>
+                    </el-form-item>
+                    <el-form-item label="组件展示图：" prop="image" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload" :disabled="this.dialogName === '编辑'">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl" :src="logoUrl" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="ruleForm.image">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl && dialogName == '添加'" class="delete-button"
+                                    @click="handleDelete">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getSectorList, addSector, delSector, updateSector, getSectorInfo } from '@/api/plate'
+import { getTemplateClass } from '@/api/style'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            //1.1 初始化信息 
+            tableDivTitle: "版块列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            plateLoading: true, //表格内容加载中
+
+            tableData: [],//表格数据
+            options: [],//模板风格下拉列表
+
+            // 1.2搜索框相关 
+            templateStyle: '',//风格
+            plateName: '',
+
+            pageType: '',//页面类型
+            value: '',
+            checkList: [
+                {
+                    value: '1',
+                    label: '首页',
+                },
+                {
+                    value: '2',
+                    label: '分类页',
+                },
+                {
+                    value: '3',
+                    label: '列表页',
+                },
+                {
+                    value: '4',
+                    label: '详情页',
+                },
+                {
+                    value: '5',
+                    label: '搜索页',
+                },
+                {
+                    value: '6',
+                    label: '特殊列表页',
+                },
+                {
+                    value: '7',
+                    label: '特殊详情页',
+                },
+            ],
+
+            //活动id
+            activeid: "",
+
+            newArr: [],
+
+            // 1.3 分页相关 
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            //1.4 弹框相关数据 
+            ruleForm: {
+                templateStyle: '', //关联风格名称
+                plateName: '', //版块名称
+                plateCode: '',//版块代码
+                pageType: [], //页面类型
+                image: '',//组件展示图
+            },
+            rules: {
+                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                plateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                plateCode: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                pageType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                image: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            },
+
+
+            //1.5 弹窗中 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            if (this.templateStyle != '' || this.plateName != '') {
+                getSectorList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: this.templateStyle,
+                    sector_name: this.plateName,
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            } else {
+                getSectorList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.plateLoading = false
+                    }
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }
+
+        },
+
+        //获取风格列表
+        getStyleList() {
+            getTemplateClass({
+                page: this.page,
+                page_size: this.pageSize
+            }).then(data => {
+                console.log('模板风格列表', data);
+                this.options = data.data
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delSector({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 多选按钮发生变化
+        changeCheckbox(val) {
+            console.log(val);
+            this.newArr = []
+            val.forEach(item => {
+                if (typeof item !== 'object' || !item.hasOwnProperty('__ob__')) {
+                    this.newArr.push(item);
+                }
+            });
+            this.pageType = JSON.stringify(this.newArr);
+            console.log(this.pageType);
+        },
+
+        changeTemplateStyle(val) {
+            console.log('风格id', val);
+            console.log(this.ruleForm.templateStyle);
+        },
+
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            getSectorList({
+                page: this.page,
+                page_size: this.pageSize,
+                template_class_id: this.templateStyle,
+                sector_name: this.plateName,
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.data
+                this.total = data.data.total
+            })
+
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.templateStyle = ""
+            this.plateName = ""
+            this.page=1
+            this.pageSize=10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.9 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+            // console.log("状态", val.status);
+            this.hovering = false
+
+            //数据回显
+            this.ruleForm.templateStyle = val.template_class_id //关联风格名称
+            this.ruleForm.plateName = val.sector_name //版块名称
+            this.ruleForm.plateCode = val.sector_code //版块代码
+            this.ruleForm.pageType = JSON.parse(JSON.parse(val.page_type))//页面类型
+            this.ruleForm.image = val.sector_img //组件展示图 
+            this.logoUrl = val.sector_img
+        },
+
+
+        //1.7 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.templateStyle = '' //关联风格名称
+            this.ruleForm.plateName = '' //版块名称
+            this.ruleForm.plateCode = '' //版块代码
+            this.ruleForm.pageType = [] //页面类型
+            this.ruleForm.image = '' //组件展示图
+            this.logoUrl = ''
+        },
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                addSector({
+                    template_id: this.ruleForm.templateStyle,
+                    sector_name: this.ruleForm.plateName,
+                    sector_code: this.ruleForm.plateCode,
+                    page_type: this.pageType,
+                    sector_img: this.ruleForm.image,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    }
+                })
+            }
+
+            if (this.website_id == '') {
+                this.$message({
+                    message: '请输入并选择网站名称',
+                    type: 'error'
+                })
+                this.dialogVisible = true
+            }
+            if (this.dialogName == "编辑") {
+                updateSector({
+                    id: this.activeid,
+                    sector_name: this.ruleForm.plateName,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.image = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+
+        //
+        getWebNavList(query) {
+            if (query !== '') {
+                this.webSiteLoading = true;
+                let data = { keyword: query }
+                let dataArr = [];
+                this.$store.dispatch('pool/getNavWebList', data).then(res => {
+                    console.log(res.data)
+                    for (let item of res.data) {
+                        let data = {};
+                        data.key = item.id;
+                        data.value = item.id;
+                        data.label = item.website_name;
+                        dataArr.push(data)
+                    }
+                    this.webSiteList = dataArr;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
+    },
+    mounted() {
+        this.getData()
+        this.getStyleList()
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>

src/views/componentGallery/style.vue

@@ -0,0 +1,1265 @@
+<!-- 风格 -->
+<template>
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">模板风格</div>
+                        <el-select v-model="templateStyle" clearable placeholder="请选择">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">模板名称</div>
+                        <el-input v-model="templateName" clearable placeholder="请输入模板名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加风格</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%" v-loading="templateLoading">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="template_class_name" label="模板风格" width="">
+                        </el-table-column>
+                        <el-table-column prop="template_name" label="模板名称" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="6vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="模板风格:" prop="templateStyle">
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择模板风格">
+                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="模板名称:" prop="templateName">
+                        <el-input v-model="ruleForm.templateName" placeholder="请输入模板名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="风格图:" prop="templateImg" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_home">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_home" :src="logoUrl_home" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="homeImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_home" class="delete-button" @click="handleDelete_home">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>首页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_classify">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_class" :src="logoUrl_class" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="classifyImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_class" class="delete-button" @click="handleDelete_class">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>分类页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_list">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_list" :src="logoUrl_list" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="listImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_list" class="delete-button" @click="handleDelete_list">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>列表页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_detail">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_detail" :src="logoUrl_detail" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="detailImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_detail" class="delete-button"
+                                    @click="handleDelete_detail">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>详情页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_search">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_search" :src="logoUrl_search" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="searchImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_search" class="delete-button"
+                                    @click="handleDelete_search">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>搜索页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_sList">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_sList" :src="logoUrl_sList" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="sListImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_sList" class="delete-button" @click="handleDelete_sList">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>特殊列表页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <div class="uploaderBox">
+                            <!--图片上传组件 start ------------------------------------------------------------>
+                            <div class="avatar-upload-container" @mouseenter="hovering = true"
+                                @mouseleave="hovering = false">
+                                <!-- 上传组件 -->
+                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
+                                    :before-upload="beforeAvatarUpload_sDetail">
+                                    <!-- 预览图片 -->
+                                    <img v-if="logoUrl_sDetail" :src="logoUrl_sDetail" class="avatar">
+                                    <!-- 上传图标 -->
+                                    <div v-else class="chooseImgDiv">
+                                        <div>
+                                            <img src="@/assets/public/upload/noImage.png">
+                                            <div>选择图片</div>
+                                        </div>
+                                    </div>
+                                    <input type="hidden" name="logo" v-model="sDetailImg">
+                                </el-upload>
+                                <!-- 删除按钮，当鼠标悬浮时显示 -->
+                                <div v-if="hovering && logoUrl_sDetail" class="delete-button"
+                                    @click="handleDelete_sDetail">
+                                    <i class="el-icon-delete"></i>
+                                </div>
+                                <h5>特殊详情页</h5>
+                            </div>
+                            <!--图片上传组件 end ------------------------------------------------------------>
+                        </div>
+                        <!--  -->
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getTemplateClass, getTemplateList, addTemplate, delTemplate, updateTemplate, getTemplateInfo } from '@/api/style'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            // 1.1  初始化数据 ---------------------------------
+            tableDivTitle: "模板列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            templateLoading: true,//页面加载中
+
+            tableData: [],//表格数据
+
+
+            //1.2 搜索框相关 ----------------------------------
+            templateStyle: '',//模板风格
+            templateName: '',//模板名称
+
+
+            // 1.3 分页相关 -----------------------------------
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+            //3.4 上传logo图片 --------------------------------
+            // logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            //首页图片
+            homeImg: '',
+            logoUrl_home: '',
+            home_obj: {
+                url: '',
+                name: '首页',
+                value: '1',
+            },
+            //分类页图片
+            classifyImg: '',
+            logoUrl_class: '',
+            class_obj: {
+                url: '',
+                name: '分类页',
+                value: '2',
+            },
+            //列表页图片
+            listImg: '',
+            logoUrl_list: '',
+            list_obj: {
+                url: '',
+                name: '列表页',
+                value: '3',
+            },
+            //详情页图片
+            detailImg: '',
+            logoUrl_detail: '',
+            detail_obj: {
+                url: '',
+                name: '详情页',
+                value: '4',
+            },
+            //搜索页图片
+            searchImg: '',
+            logoUrl_search: '',
+            search_obj: {
+                url: '',
+                name: '搜索页',
+                value: '5',
+            },
+            //特殊列表页图片
+            sListImg: '',
+            logoUrl_sList: '',
+            sList_obj: {
+                url: '',
+                name: '特殊列表页',
+                value: '6',
+            },
+            //特殊详情页图片
+            sDetailImg: '',
+            logoUrl_sDetail: '',
+            sDetail_obj: {
+                url: '',
+                name: '特殊详情页',
+                value: '7',
+            },
+            //图片json
+            img_arr: [],
+
+            value: '',
+            options: [],
+
+            //活动id
+            activeid: "",
+
+            formLabelWidth: '', //广告示例图相关
+
+            // 弹框相关 -------------------------------------------
+            ruleForm: {
+                templateStyle: '', //模板风格
+                templateName: '', //模板名称
+                templateImg: [], //模板图片
+            },
+            rules: {
+                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                templateImg: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            if(this.templateStyle != '' || this.templateName != ''){
+                getTemplateList({
+                    page: this.page,
+                    page_size: this.pageSize,
+                    template_class_id: this.templateStyle, //模板风格id
+                    template_name: this.templateName, //模板名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }else{
+                getTemplateList({
+                    page: this.page,
+                    page_size: this.pageSize
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.templateLoading = false
+                    }
+                    this.tableData = data.data.data
+                    this.total = data.data.total
+                })
+            }
+        },
+        
+        //获取模板风格
+        getStyleList() {
+            getTemplateClass({
+                page: this.page,
+                page_size: this.pageSize
+            }).then(data => {
+                console.log('模板风格列表', data);
+                this.options = data.data
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+                delTemplate({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索按钮
+        goSearch() {
+            getTemplateList({
+                page: this.page,
+                page_size: this.pageSize,
+                template_class_id: this.templateStyle, //模板风格id
+                template_name: this.templateName, //模板名称
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.data
+                this.total = data.data.total
+            })
+        },
+        //1.6 重置按钮
+        goReset() {
+            this.templateStyle = ""
+            this.templateName = ""
+            this.page=1
+            this.pageSize=10
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.7 编辑
+        goEdit(id, val) {
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+
+            //数据回显
+            this.ruleForm.templateStyle = val.template_class_id
+            this.ruleForm.templateName = val.template_name
+            this.img_arr = JSON.parse(val.template_img)
+
+            this.homeImg = ''
+            this.logoUrl_home = ''
+            this.classifyImg = ''
+            this.logoUrl_class = ''
+            this.listImg = ''
+            this.logoUrl_list = ''
+            this.detailImg = ''
+            this.logoUrl_detail = ''
+            this.searchImg = ''
+            this.logoUrl_search = ''
+            this.sListImg = ''
+            this.logoUrl_sList = ''
+            this.sDetailImg = ''
+            this.logoUrl_sDetail = ''
+
+            for (let item of this.img_arr) {
+                if (item.name == '首页') {
+                    this.logoUrl_home = item.url
+                    this.homeImg = item.url
+                }
+                if (item.name == '分类页') {
+                    this.logoUrl_class = item.url
+                    this.classifyImg = item.url
+                }
+                if (item.name == '列表页') {
+                    this.logoUrl_list = item.url
+                    this.listImg = item.url
+                }
+                if (item.name == '详情页') {
+                    this.logoUrl_detail = item.url
+                    this.detailImg = item.url
+                }
+                if (item.name == '搜索页') {
+                    this.logoUrl_search = item.url
+                    this.searchImg = item.url
+                }
+                if (item.name == '特殊列表页') {
+                    this.logoUrl_sList = item.url
+                    this.sListImg = item.url
+                }
+                if (item.name == '特殊详情页') {
+                    this.logoUrl_sDetail = item.url
+                    this.sDetailImg = item.url
+                }
+            }
+        },
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.templateStyle = ''
+            this.ruleForm.templateName = ''
+            this.ruleForm.templateImg = []
+            this.img_arr = []
+            this.homeImg = ''
+            this.logoUrl_home = ''
+            this.classifyImg = ''
+            this.logoUrl_class = ''
+            this.listImg = ''
+            this.logoUrl_list = ''
+            this.detailImg = ''
+            this.logoUrl_detail = ''
+            this.searchImg = ''
+            this.logoUrl_search = ''
+            this.sListImg = ''
+            this.logoUrl_sList = ''
+            this.sDetailImg = ''
+            this.logoUrl_sDetail = ''
+        },
+
+        // 弹出层相关方法 ---------------------------------------------------->
+        // 1.9 提交表单
+        submitForm() {
+            this.img_arr = []
+            //首页
+            if (this.logoUrl_home) {
+                this.home_obj.url = this.homeImg
+                this.img_arr.push(this.home_obj)
+            }
+            //分类页
+            if (this.logoUrl_class) {
+                this.class_obj.url = this.classifyImg
+                this.img_arr.push(this.class_obj)
+            }
+            //列表页
+            if (this.logoUrl_list) {
+                this.list_obj.url = this.listImg
+                this.img_arr.push(this.list_obj)
+            }
+            //详情页
+            if (this.logoUrl_detail) {
+                this.detail_obj.url = this.detailImg
+                this.img_arr.push(this.detail_obj)
+            }
+            //搜索页
+            if (this.logoUrl_search) {
+                this.search_obj.url = this.searchImg
+                this.img_arr.push(this.search_obj)
+            }
+            //特殊列表页
+            if (this.logoUrl_sList) {
+                this.sList_obj.url = this.sListImg
+                this.img_arr.push(this.sList_obj)
+            }
+            //特殊详情页
+            if (this.logoUrl_sDetail) {
+                this.sDetail_obj.url = this.sDetailImg
+                this.img_arr.push(this.sDetail_obj)
+            }
+            function cleanObProp(arr) {
+                return arr.map(item => {
+                    const newItem = {};
+                    for (const key in item) {
+                        if (key !== '__ob__') {
+                            newItem[key] = item[key];
+                        }
+                    }
+                    return newItem;
+                });
+            }
+            const cleanArray = cleanObProp(this.img_arr);
+            this.ruleForm.templateImg = JSON.stringify(cleanArray);
+            console.log(this.ruleForm.templateImg);
+
+            if (this.dialogName == "添加") {
+                addTemplate({
+                    template_name: this.ruleForm.templateName, //模板名称
+                    template_img: this.ruleForm.templateImg, // 模板图片
+                    template_class_id: this.ruleForm.templateStyle, //模板风格id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    }
+                })
+            }
+
+            if (this.dialogName == "编辑") {
+                updateTemplate({
+                    id: this.activeid, //活动id
+                    template_name: this.ruleForm.templateName, //模板名称
+                    template_img: this.ruleForm.templateImg, // 模板图片
+                    template_class_id: this.ruleForm.templateStyle, //模板风格id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+
+        //3.6 上传图片操作
+        beforeAvatarUpload_home(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_home = res.data.imgUrl;//显示缩略图
+                this.homeImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_classify(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_class = res.data.imgUrl;//显示缩略图
+                this.classifyImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_list(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_list = res.data.imgUrl;//显示缩略图
+                this.listImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_detail(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_detail = res.data.imgUrl;//显示缩略图
+                this.detailImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_search(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_search = res.data.imgUrl;//显示缩略图
+                this.searchImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_sList(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_sList = res.data.imgUrl;//显示缩略图
+                this.sListImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        beforeAvatarUpload_sDetail(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl_sDetail = res.data.imgUrl;//显示缩略图
+                this.sDetailImg = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete_home() {
+            // 删除图片
+            this.logoUrl_home = ''; // 清空图片 URL
+        },
+        handleDelete_class() {
+            // 删除图片
+            this.logoUrl_class = ''; // 清空图片 URL
+        },
+        handleDelete_list() {
+            // 删除图片
+            this.logoUrl_list = ''; // 清空图片 URL
+        },
+        handleDelete_detail() {
+            // 删除图片
+            this.logoUrl_detail = ''; // 清空图片 URL
+        },
+        handleDelete_search() {
+            // 删除图片
+            this.logoUrl_search = ''; // 清空图片 URL
+        },
+        handleDelete_sList() {
+            // 删除图片
+            this.logoUrl_sList = ''; // 清空图片 URL
+        },
+        handleDelete_sDetail() {
+            // 删除图片
+            this.logoUrl_sDetail = ''; // 清空图片 URL
+        },
+        // 3.7 弹出层相关方法 end ------------------------------------------------------------>
+
+    },
+    mounted() {
+        this.getData()
+        this.getStyleList() //获取模板风格
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+    .uploaderBox,
+    .avatar-upload-container {
+        display: inline-block;
+    }
+
+    .avatar-uploader {
+        background-color: #fff;
+    }
+
+    .uploaderBox {
+        margin-right: 20px;
+        position: relative;
+
+        h5 {
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #999999;
+            margin-top: 0px;
+        }
+    }
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>

src/views/crawler/webCrawlerList.vue

@@ -95,10 +95,26 @@
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
                     <el-form-item label="关联导航池:" prop="name">
-                        <el-select v-model="ruleForm.name" placeholder="请选择关联的导航池名称">
+                        <!-- <el-select v-model="ruleForm.name" placeholder="请选择关联的导航池名称">
                             <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                             </el-option>
-                        </el-select>
+                        </el-select> -->
+                        <el-select
+    v-model="value"
+    multiple
+    filterable
+    remote
+    reserve-keyword
+    placeholder="请输入关键词"
+    :remote-method="remoteMethod"
+    :loading="loading">
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
+    </el-option>
+  </el-select>
                     </el-form-item>
                 </div>
                 <div class="dialogBtn">
@@ -320,7 +336,7 @@ export default {
         submitForm() {
             addCatid({
                 rule_id: this.ruleId,//任务规则id
-                catid: this.ruleForm.name,//导航池栏目id
+                cat_arr_id: this.ruleForm.name,//导航池栏目id
             }).then(data => {
                 console.log(this.ruleForm.name);
                 console.log(data);

src/views/tabbar/components/tableTitle.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    height: 38px;
+    line-height: 38px;
+    color:#333333;
+    position: relative;
+    margin-bottom: 30px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:10px;
+    }
+  }
+</style>

src/views/tabbar/tabbar.vue

@@ -0,0 +1,785 @@
+<template>
+    <!-- 广告位管理 -->
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">网站名称</div>
+                        <el-input v-model="webSiteName_name" class="input" placeholder="请输入网站名称"></el-input>
+                        <!-- <el-select v-model="webSiteName_id" :multiple="false" :multiple-limit="1" filterable remote
+                            reserve-keyword placeholder="请输入网站名称" :remote-method="getWebNavList"
+                            :loading="webSiteLoading" @change="selectWebSite">
+                            <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select> -->
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">底部导航名称</div>
+                        <el-input v-model="tabbarName" class="input" placeholder="请输入底部导航名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加底部导航</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="website_name" label="网站" width="">
+                        </el-table-column>
+                        <el-table-column prop="name" label="底部导航名称" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="300">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                    <div class="listLookBtn" @click="goLook(scope.row.id,scope.row)">
+                                        <i class="el-icon-view"></i>
+                                        查看
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="关联网站名称:" prop="webName">
+                        <el-select v-model="ruleForm.webName" :multiple="false" :multiple-limit="1" filterable remote
+                            reserve-keyword placeholder="请输入关联网站名称" :remote-method="getWebNavList"
+                            :loading="webSiteLoading" @change="detectionWebSite">
+                            <el-option v-for="item in webSiteList" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="底部导航名称:" prop="tabbarName">
+                        <el-input v-model="ruleForm.tabbarName" placeholder="请输入底部导航名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="页面类型:" prop="pageType">
+                        <el-radio v-model="ruleForm.pageType" label="1" :disabled="this.disabled">特殊列表页</el-radio>
+                        <el-radio v-model="ruleForm.pageType" label="0" :disabled="this.disabled">特殊详情页</el-radio>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { getFooterCategory, getTemplateClass, upFooterCategory, delFooterCategory } from '@/api/tabbar'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            tableDivTitle: "底部导航列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            disabled: false, //禁用
+
+            tableData: [],//表格数据
+
+            // 可以输入的搜索框相关
+            webSiteList: [],//获取关联网站列表
+            webSiteLoading: false,
+
+            //3.4 上传logo图片
+            logoUrl: '',
+            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
+
+            value: '',
+
+            
+            activeid: "",  //活动id 
+            type:"",  //查看时需要传递的类型
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+
+            formLabelWidth: '', //广告示例图相关
+
+
+            // 搜索框相关
+            webSiteName_name: '', //网站名称
+            webSiteName_id: '', //网站名称id
+            tabbarName: '', //底部导航名称
+            website_id: "", //网站id
+
+
+            ruleForm: {
+                webName: '', //网站名称
+                tabbarName: '', //底部导航名称
+                pageType: '', //页面类型
+            },
+            rules: {
+                webName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                tabbarName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                pageType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            getFooterCategory({
+                page: this.page,
+                pageSize: this.pageSize
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.rows
+                this.total = data.data.count
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delFooterCategory({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //1.3 查看示例图
+        goGraph() {
+            this.dialogVisible = true
+        },
+
+        //1.4 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.5 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            if (this.webSiteName_name && this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.tabbarName,
+                    website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            } else if (this.webSiteName_name && !this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    // name: this.tabbarName,
+                    website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            } else if (!this.webSiteName_name && this.tabbarName) {
+                getFooterCategory({
+                    page: this.page,
+                    pageSize: this.pageSize,
+                    name: this.tabbarName,
+                    // website_name: this.webSiteName_name, //网站名称
+                }).then(data => {
+                    console.log(data);
+                    this.tableData = data.data.rows
+                    this.total = data.data.count
+                })
+            }
+
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.webSiteName_name = ""
+            this.tabbarName = ""
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.9 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            this.disabled=true
+            console.log(id, val);
+            console.log("状态", val);
+
+            //数据回显
+            this.website_id = val.website_id
+            this.ruleForm.webName = val.website_name //网站名称
+            this.ruleForm.tabbarName = val.name //底部导航名称
+            if (val.type == 0) {
+                this.ruleForm.pageType = '0' //页面类型
+            } else if (val.type == 1) {
+                this.ruleForm.pageType = '1' //页面类型
+            }
+        },
+
+        //2.0 查看
+        goLook(id,val) {
+            this.activeid = id
+            this.type=val.type
+            this.$router.push({
+                path: '/tabbarDetail',
+                query: {
+                    id: this.activeid,
+                    type:this.type
+                }
+            })
+        },
+
+        //1.7 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+            this.disabled=false
+
+            //添加时清空回显回来的数据
+            this.ruleForm.webName = '' //关联网站名称
+            this.ruleForm.tabbarName = '' //底部导航名称
+            this.ruleForm.pageType = '' //页面类型
+        },
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                getTemplateClass({
+                    website_id: this.website_id,
+                    name: this.ruleForm.tabbarName,
+                    type: this.ruleForm.pageType,
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '添加成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                        return
+                    }
+                })
+            }
+            if (this.website_id == '') {
+                this.$message({
+                    message: '请输入并选择网站名称',
+                    type: 'error'
+                })
+                this.dialogVisible = true
+            }
+            if (this.dialogName == "编辑") {
+                upFooterCategory({
+                    website_id: this.website_id,
+                    name: this.ruleForm.tabbarName,
+                    id: this.activeid
+                }).then(data => {
+                    console.log(data);
+                    if (data.code == 200) {
+                        this.$message({
+                            message: '编辑成功',
+                            type: 'success'
+                        })
+                        this.dialogTableVisible = false
+                    }
+                    if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                        this.dialogTableVisible = true
+                    }
+                    this.getData()
+                })
+            }
+
+        },
+        //取消添加或编辑
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+        //3.6 上传图片操作
+        beforeAvatarUpload(file) {
+            const isJPG = file.type === 'image/jpeg';
+            const isPNG = file.type === 'image/png';
+            const isLt2M = file.size / 1024 / 1024 < 2;
+
+            if (!isJPG && !isPNG) {
+                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+                return false;
+            }
+            if (!isLt2M) {
+                this.$message.error('上传图片大小不能超过 2MB!');
+                return false;
+            }
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            this.$store.dispatch('pool/uploadFile', formData).then(res => {
+                this.logoUrl = res.data.imgUrl;//显示缩略图
+                this.ruleForm.adPhoto = res.data.imgUrl;//提供表单地址
+                console.log(res.data.imgUrl)
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '网络错误，请重试！'
+                });
+            })
+
+            // 阻止默认的上传行为
+            return false;
+        },
+        handleDelete() {
+            // 删除图片
+            this.logoUrl = ''; // 清空图片 URL
+        },
+
+        //搜索部分的输入关键词下拉框
+        selectWebSite(value) {
+            this.webSiteName_id = value
+        },
+
+        //添加 / 编辑弹窗中输入关键词下拉框 
+        // 判断是否已经关联了网站
+        detectionWebSite(value) {
+            console.log(value);
+            this.website_id = value
+            console.log(this.website_id);
+
+        },
+
+        //
+        getWebNavList(query) {
+            if (query !== '') {
+                this.webSiteLoading = true;
+                let data = { keyword: query }
+                let dataArr = [];
+                this.$store.dispatch('pool/getNavWebList', data).then(res => {
+                    console.log(res.data)
+                    for (let item of res.data) {
+                        let data = {};
+                        data.key = item.id;
+                        data.value = item.id;
+                        data.label = item.website_name;
+                        dataArr.push(data)
+                    }
+                    this.webSiteList = dataArr;
+                    this.webSiteLoading = false;
+                }).catch(() => {
+                    this.$message({
+                        type: 'info',
+                        message: '网络错误，请重试！'
+                    });
+                })
+            } else {
+                this.navList = [];
+            }
+        },
+    },
+    mounted() {
+        this.getData()
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn,
+    .listLookBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    .listLookBtn {
+        text-align: center;
+        border-radius: 8px;
+        cursor: pointer;
+        color: #55b5f1;
+        background-color: rgba(85, 181, 241, 0.16);
+
+        >i {
+            padding-right: 8px;
+        }
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>

src/views/tabbar/tabbarDetail.vue

@@ -0,0 +1,651 @@
+<template>
+    <!-- 广告位管理 -->
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title" v-if="this.tabbarType == 1">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">列表标题</div>
+                        <el-input v-model="listTitle" class="input" placeholder="请输入列表标题"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">内容标题</div>
+                        <el-input v-model="contentTitle" class="input" placeholder="请输入内容标题"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addWebsite">添加详情</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="list_title" label="列表标题" width="" v-if="this.tabbarType == 1">
+                        </el-table-column>
+                        <el-table-column prop="con_title" label="内容标题" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="200">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="列表标题:" prop="listTitle" v-if="this.tabbarType == 1">
+                        <el-input v-model="ruleForm.listTitle" placeholder="请输入列表标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="内容标题:" prop="contentTitle">
+                        <el-input v-model="ruleForm.contentTitle" placeholder="请输入内容标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="内容详情:" prop="contentDetail">
+                        <el-input v-model="ruleForm.contentDetail" type="textarea" :rows="10" placeholder="请输入内容详情"
+                            resize="none">
+                        </el-input>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="cancelForm">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle.vue';
+
+//引入公用样式
+import '@/styles/global.less';
+import { addFooterContent, getFooterContent, upFooterContent, delFooterContent } from '@/api/tabbar'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        const validateEmpty = (rule, value, callback) => {
+            if (value.length == 0) {
+                callback(new Error('该项不能为空！'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            tableDivTitle: "底部导航详情",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+
+            tableData: [],//表格数据
+            tabbarId: '',//底部导航传递的id
+            tabbarType: 1,//底部导航传递的类型
+
+            //活动id
+            activeid: "",
+
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+
+
+            // 搜索框相关
+            listTitle: '', //网站名称id
+            contentTitle: '', //广告位名称
+
+            //弹框相关
+            ruleForm: {
+                listTitle: '', //列表标题
+                contentTitle: '', //内容标题
+                contentDetail: '', //内容详情
+            },
+            rules: {
+                listTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contentTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+                contentDetail: [{ required: true, trigger: 'blur', validator: validateEmpty }],
+            }
+        }
+    },
+    methods: {
+        //1.列表和分页相关 start ------------------------------------------------------------>
+        //1.1 开始请求列表信息方法
+        getData() {
+            getFooterContent({
+                fcat_id: this.tabbarId,
+                page: this.page,
+                pageSize: this.pageSize
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.rows
+                this.total = data.data.count
+            })
+        },
+
+        //1.2 删除内容
+        deleteRow(id) {
+            console.log(id);
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                delFooterContent({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else if (data.code == 0) {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+
+        //1.3 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.4 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.5 搜索按钮
+        goSearch() {
+            getFooterContent({
+                fcat_id: this.tabbarId,
+                page: this.page,
+                pageSize: this.pageSize,
+                list_title:this.listTitle,
+                con_title:this.contentTitle,
+            }).then(data => {
+                console.log(data);
+                this.tableData = data.data.rows
+                this.total = data.data.count
+            })
+        },
+        //1.6 重置按钮
+        goReset() {
+            this.listTitle = ""
+            this.contentTitle = ""
+            this.getData()
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+
+        //1.7 编辑
+        goEdit(id, val) {
+            // console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            console.log(id, val);
+
+            //数据回显
+            this.ruleForm.listTitle = val.list_title //列表标题
+            this.ruleForm.contentTitle = val.con_title //内容标题
+            this.ruleForm.contentDetail = val.content //内容详情
+        },
+
+        //1.8 添加
+        addWebsite() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+
+            //添加时清空回显回来的数据
+            this.ruleForm.contentTitle = '' //内容标题
+            this.ruleForm.contentDetail = '' //内容详情
+        },
+
+        // 弹出层相关方法
+        // 1.9 提交表单
+        submitForm(formName) {
+            // 判断用户是否输入数据
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    console.log('submit!');
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+            if (this.dialogName == "添加") {
+                if (this.tabbarType == 0) { //详情页类型
+                    addFooterContent({
+                        fcat_id: this.tabbarId,
+                        type: this.tabbarType,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).then(data => {
+                        console.log(data);
+                        if (data.code == 200) {
+                            this.$message({
+                                message: '添加成功',
+                                type: 'success'
+                            })
+                            this.dialogTableVisible = false
+                            this.getData()
+                        } else {
+                            this.$message({
+                                message: data.message,
+                                type: 'error'
+                            })
+                        }
+                    })
+                } else if (this.tabbarType == 1) { //列表页类型
+                    addFooterContent({
+                        fcat_id: this.tabbarId,
+                        type: this.tabbarType,
+                        list_title: this.ruleForm.listTitle,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).then(data => {
+                        console.log(data);
+                        if (data.code == 200) {
+                            this.$message({
+                                message: '添加成功',
+                                type: 'success'
+                            })
+                            this.dialogTableVisible = false
+                            this.getData()
+                        } else {
+                            this.$message({
+                                message: data.message,
+                                type: 'error'
+                            })
+                        }
+                    })
+                }
+            }
+            if (this.dialogName == "编辑") {
+                if (this.tabbarType == 0) { //详情页类型
+                    upFooterContent({
+                        id: this.activeid, //内容id
+                        type: this.tabbarType,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).then(data => {
+                        console.log(data);
+                        if (data.code == 200) {
+                            this.$message({
+                                message: '修改成功!',
+                                type: 'success'
+                            })
+                            this.dialogTableVisible = false
+                            this.getData()
+                        } else {
+                            this.$message({
+                                message: data.message,
+                                type: 'error'
+                            })
+                        }
+                    })
+                } else if (this.tabbarType == 1) { //列表页类型
+                    upFooterContent({
+                        id: this.activeid, //内容id
+                        type: this.tabbarType,
+                        list_title: this.ruleForm.listTitle,
+                        con_title: this.ruleForm.contentTitle,
+                        content: this.ruleForm.contentDetail,
+                    }).then(data => {
+                        console.log(data);
+                        if (data.code == 200) {
+                            this.$message({
+                                message: '修改成功!',
+                                type: 'success'
+                            })
+                            this.dialogTableVisible = false
+                            this.getData()
+                        } else {
+                            this.$message({
+                                message: data.message,
+                                type: 'error'
+                            })
+                        }
+                    })
+                }
+            }
+
+        },
+        //取消
+        cancelForm() {
+            this.dialogTableVisible = false
+        },
+    },
+    mounted() {
+        console.log(this.$route.query.id);
+        this.tabbarId = this.$route.query.id
+        this.tabbarType = this.$route.query.type
+
+        this.getData() //获取数据
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>