内容管理 轮播管理

src/views/content/banner/detail.vue

@@ -1,140 +1,67 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :span="6">
-        <div style="position: relative" v-for="item in bannerList" :key="item.id">
-          <el-image :src="item.url" @click="getActive(item.id)" />
-          <div :class="[isActive(item.id)]" />
-        </div>
-      </el-col>
-      <el-col :span="12">
-        <el-form label-width="80px" size="mini">
-          <div class="el-form-list" v-show="imgActive === 1">
-            <el-form-item label="模块名称">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="关联">
-              <el-tag>111</el-tag>
-              <el-button type="primary" style="float:right">选择</el-button>
-            </el-form-item>
-          </div>
-          <div class="el-form-list" v-show="imgActive === 2">
-            <el-form-item label="模块名称">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="关联">
-              <el-tag>1231</el-tag>
-              <el-button type="primary" style="float:right">选择</el-button>
-            </el-form-item>
-          </div>
-          <div class="el-form-list" v-show="imgActive === 3" v-for="item in formList" :key="item.id">
-            <el-form-item label="封面图(345*100)">
-              <upload :limit="1" :isShowTip="false" />
-            </el-form-item>
-            <el-form-item label="模块名称">
-              <el-input />
-            </el-form-item>
-            <el-form-item label="类型">
-              <el-radio>有赞</el-radio>
-              <el-radio>内链</el-radio>
-              <el-radio>外链</el-radio>
-            </el-form-item>
-            <el-form-item label="链接">
-              <el-input />
-            </el-form-item>
-            <el-link v-if="formList.length > 1" class="el-link-close" :underline="false" icon="el-icon-close" />
-          </div>
-          <el-button class="el-form-add" type="primary" size="mini" icon="el-icon-plus" @click="getAdd">
-            添加
-          </el-button>
-        </el-form>
-      </el-col>
-    </el-row>
+    <el-form label-width="110px">
+      <el-form-item label="Banner位置：">
+        <el-select>
+          <el-option></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Banner名称：">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item label="展示顺序：">
+        <el-select>
+          <el-option></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="跳转地址：">
+        <el-radio-group>
+          <el-radio :label="1">内部</el-radio>
+          <el-radio :label="2">外部</el-radio>
+        </el-radio-group>
+        <el-select placeholder="请选择跳转位置" style="margin: 15px 0 20px 0">
+          <el-option></el-option>
+        </el-select>
+        <el-input placeholder="请输入跳转链接地址"></el-input>
+      </el-form-item>
+      <el-form-item label="时间：">
+        <el-date-picker type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" />
+      </el-form-item>
+      <el-form-item label="图片上传：">
+        <Upload listType="picture-card" />
+      </el-form-item>
+    </el-form>
+    <div class="form-btn">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary">提交</el-button>
+    </div>
   </div>
 </template>
 
 <script>
-import upload from '@/components/ImageUpload/index'
+import Upload from '@/components/Upload/index'
 export default {
-  components: {
-    upload
+  components:{
+    Upload
   },
   data() {
     return {
-      bannerList: [{
-        id: 1,
-        url: 'http://39.108.171.189:3010/radio/radio1.png',
-      }, {
-        id: 2,
-        url: 'http://39.108.171.189:3010/radio/radio2.png',
-      }, {
-        id: 3,
-        url: 'http://39.108.171.189:3010/radio/radio7.png'
-      }],
-      imgActive: 1,
-      formList: [{ id: 1 }, { id: 2 }]
+
     }
   },
   methods: {
-    isActive(id) {
-      return this.imgActive === id ? 'active' : ''
-    },
-    getActive(id) {
-      this.imgActive = id
-    },
-    // 添加
-    getAdd(){
-      this.formList.push({
-        id: this.formList.length + 1
-      })
-      console.log(this.formList);
+    cancel(){
+      this.$tab.closeOpenPage("/content/banner");
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.el-image {
-  width: 100%;
-  display: block;
-}
-
-.active {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 0, 0.3);
-  z-index: 99;
-}
-
-::v-deep .el-upload--picture-card {
-  width: 80px;
-  height: 80px;
-  line-height: 90px;
-}
-
-.el-form-list {
-  padding: 24px;
-  border: 1px solid #e8e8e8;
-  transition: all 0.3s;
-  position: relative;
-  margin-bottom: 20px;
-
-  .el-link-close {
-    position: absolute;
-    top: 20px;
-    right: 20px;
-  }
+.el-form {
+  width: 500px;
 }
-
-.el-form-list:hover {
-  box-shadow: 0 2px 8px #bbb;
-}
-
-.el-form-add {
-  position: fixed;
-  bottom: 0;
+.form-btn{
+  margin-left: 110px;
 }
 </style>

src/views/content/banner/index.vue

@@ -1,42 +1,47 @@
 <template>
   <div class="app-container">
-    <el-tabs v-model="tabActive" @tab-click="getTab">
-      <el-tab-pane :label="item.label" :name="item.name" v-for="item in tabList" :key="item.id">
-        <el-button v-if="isShow(item.name)" type="primary" size="mini" icon="el-icon-plus" @click="dialogVisible = true">
-          新增页面
-        </el-button>
-        <el-table :data="data">
-          <el-table-column label="页面ID" prop="id" align="center" />
-          <el-table-column label="页面名称" prop="name" align="center" />
-          <el-table-column label="上线时间" prop="date" align="center" />
-          <el-table-column label="操作" align="center">
-            <template slot-scope="scope">
-              <el-button type="text" size="mini" @click="getEdit(scope.row)">编辑</el-button>
-              <el-button type="text" size="mini">复制</el-button>
-              <el-button type="delete" size="mini">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-tab-pane>
-    </el-tabs>
-    <!-- 新增/编辑弹窗 -->
-    <el-dialog title="新增页面" width="500px" :visible.sync="dialogVisible">
-      <el-form :model="form" :rules="rules" label-width="90px">
-        <el-form-item label="页面类型:" prop="type">
-          <el-select v-model="form.type" disabled />
-        </el-form-item>
-        <el-form-item label="页面名称:" prop="name">
-          <el-input v-model="form.name" placeholder="请输入页面名称" />
-        </el-form-item>
-        <el-form-item label="上线时间:" prop="date">
-          <el-date-picker type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
-        </el-form-item>
-      </el-form>
-      <div slot="footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="getSubmit">确定</el-button>
-      </div>
-    </el-dialog>
+    <!-- 搜索 -->
+    <el-form inline label-width="110px" size="mini">
+      <el-form-item label="Banner名称：">
+        <el-input placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item label="展示位置：">
+        <el-select placeholder="请选择展示位置">
+          <el-option></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="当前状态：">
+        <el-select placeholder="请选择当前状态">
+          <el-option></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间：">
+        <el-date-picker type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        <el-button icon="el-icon-refresh">重置</el-button>
+        <el-button type="primary" icon="el-icon-plus" plain @click="getDetail()">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table>
+      <el-table-column label="Banner名称" align="center"></el-table-column>
+      <el-table-column label="Banner位置" align="center"></el-table-column>
+      <el-table-column label="轮播顺序" align="center"></el-table-column>
+      <el-table-column label="图片" align="center"></el-table-column>
+      <el-table-column label="当前状态" align="center"></el-table-column>
+      <el-table-column label="开始时间" align="center"></el-table-column>
+      <el-table-column label="结束时间" align="center"></el-table-column>
+      <el-table-column label="操作" align="center">
+        <template>
+          <el-button type="text">编辑</el-button>
+          <el-button type="text">下架</el-button>
+          <el-button type="text">上架</el-button>
+          <el-button type="delete">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
@@ -44,70 +49,13 @@
 export default {
   data() {
     return {
-      // 标签页
-      tabList: [{
-        id: 1,
-        label: '默认页面',
-        name: 'default'
-      }, {
-        id: 2,
-        label: '音乐备选',
-        name: 'music'
-      }, {
-        id: 3,
-        label: '电台备选',
-        name: 'radio'
-      }],
-      // 选中的标签页
-      tabActive: 'default',
-      // 是否显示弹窗
-      dialogVisible: false,
-      // 新增弹窗表单
-      form: {
-        type: '',
-        name: '',
-        date: ''
-      },
-      // 表单验证规则
-      rules: {
-        name: [{
-          required: true, message: '请输入页面名称', trigger: 'blur'
-        }],
-        date: [{
-          type: 'date', required: true, message: '请选择时间', trigger: 'change'
-        }]
-      },
-      // 表格
-      data: [{
-        id: 865757821164077089,
-        name: '热门分类新图片',
-        date: '2021-08-16 00:00:00 至 2022-08-17 08:17:08'
-      }, {
-        id: 852296063829164065,
-        name: '222222',
-        date: '2020-04-22 11:11:50 至 2020-04-22 14:11:50'
-      }]
+
     }
   },
   methods: {
-    // 选择标签页
-    getTab(e) {
-      if (e.index !== '0') {
-        this.form.type = e.index == 1 ? '音乐页' : '电台页'
-      }
-    },
-    // 默认页面不显示新增按钮
-    isShow(name) {
-      return name !== 'default'
-    },
-    // 确认新增页面
-    getSubmit() {
-      this.dialogVisible = false
-    },
-    // 编辑
-    getEdit(row) {
+    getDetail(){
       this.$router.push({
-        path: '/content/banner/' + row.id,
+        path: '/content/banner/detail'
       })
     }
   }