猫舍管理 运营管理

src/views/ohplay/operation/index.vue

@@ -1,94 +1,96 @@
 <template>
   <div class="app-container">
-    <el-row>
-      <el-col :span="6">
-        <el-image :src="require('@/assets/images/ohplay/search.png')" />
-        <el-image :class="['border', active === item.id ? 'active' : '']" v-for="item in img" :key="item.id"
-          :src="item.url" @click="getActive(item.id)" />
-        <el-image :src="require('@/assets/images/ohplay/comment.png')" />
-      </el-col>
-      <el-col v-show="active === 1" :span="18">
-        <el-form label-width="100px" v-for="(item, index) in 6" :key="index">
-          <el-form-item label-width="auto" :label='`广告位${index + 1}`' />
-          <el-form-item label="Banner：">
-            <Upload listType="picture-card" measure="343*140" />
-          </el-form-item>
-          <el-form-item label="选择日期：">
-            <el-date-picker size="small" type="datetimerange" start-placeholder="开始时间"
-              end-placeholder="结束时间" />
-          </el-form-item>
-          <el-form-item label="跳转：">
-            <el-select placeholder="请选择跳转页面">
-              <el-option />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="网址：">
-            <el-input placeholder="请输入网址" />
-          </el-form-item>
-          <el-form-item>
-            <el-button>清空</el-button>
-            <el-button type="primary">确定</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-      <el-col v-show="active === 2" :span="18">
-        <el-form label-width="100px" v-for="(item, index) in 6" :key="index">
-          <el-form-item label-width="auto" :label='`推广位${index + 1}`' />
-          <el-form-item label="Banner：">
-            <Upload listType="picture-card" measure="100*100" />
-          </el-form-item>
-          <el-form-item label="选择日期：">
-            <el-date-picker size="small" type="datetimerange" start-placeholder="开始时间"
-              end-placeholder="结束时间" />
-          </el-form-item>
-          <el-form-item label="跳转：">
-            <el-select placeholder="请选择跳转页面">
-              <el-option />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="网址：">
-            <el-input placeholder="请输入网址" />
-          </el-form-item>
-          <el-form-item>
-            <el-button>清空</el-button>
-            <el-button type="primary">确定</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-      <el-col v-show="active === 3" :span="18">
-        <el-form label-width="100px" v-for="(item, index) in 4" :key="index">
-          <el-form-item label-width="auto" :label='`快捷位${index + 1}`' />
-          <el-form-item label="文字：">
-            <el-input placeholder="请输入快捷按钮文字" />
-          </el-form-item>
-          <el-form-item label="选择日期：">
-            <el-date-picker size="small" type="datetimerange" start-placeholder="开始时间"
-              end-placeholder="结束时间" />
-          </el-form-item>
-          <el-form-item label="跳转：">
-            <el-select placeholder="请选择跳转页面">
-              <el-option />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="网址：">
-            <el-input placeholder="请输入网址" />
-          </el-form-item>
-          <el-form-item>
-            <el-button>清空</el-button>
-            <el-button type="primary">确定</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
+    <div style="width: 400px">
+      <el-image :src="require('@/assets/images/ohplay/search.png')" />
+      <el-image :class="['border', active === item.id ? 'active' : '']" v-for="item in img" :key="item.id"
+        :src="item.url" @click="getActive(item.id)" />
+      <el-image :src="require('@/assets/images/ohplay/comment.png')" />
+    </div>
+    <div class="isShow" v-if="active === 1">
+      <el-form label-width="100px" v-for="(item, index) in 6" :key="index">
+        <el-form-item label-width="auto" :label='`广告位${ index + 1 }`' />
+        <el-form-item label="Banner：">
+          <Upload listType="picture-card" :url="form.banner" measure="343*140" @upload="getUpload" />
+        </el-form-item>
+        <el-form-item label="选择日期：">
+          <el-date-picker v-model="date" size="small" type="datetimerange" start-placeholder="开始时间"
+            end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" />
+        </el-form-item>
+        <el-form-item label="跳转：">
+          <el-select v-model="form.skip" placeholder="请选择跳转页面">
+            <el-option v-for="item in dict.type.nav_address_type" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="网址：">
+          <el-input v-model="form.skipUrl" placeholder="请输入网址" />
+        </el-form-item>
+        <el-form-item>
+          <el-button>清空</el-button>
+          <el-button type="primary" @click="getSubmit">确定</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="isShow" v-if="active === 2">
+      <el-form label-width="100px" v-for="(item, index) in 6" :key="index">
+        <el-form-item label-width="auto" :label='`推荐位${ index + 1 }`' />
+        <el-form-item label="Banner：">
+          <Upload listType="picture-card" :url="form.banner" measure="100*100" @upload="getUpload" />
+        </el-form-item>
+        <el-form-item label="选择日期：">
+          <el-date-picker v-model="date" size="small" type="datetimerange" start-placeholder="开始时间"
+            end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" />
+        </el-form-item>
+        <el-form-item label="跳转：">
+          <el-select v-model="form.skip" placeholder="请选择跳转页面">
+            <el-option v-for="item in dict.type.nav_address_type" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="网址：">
+          <el-input v-model="form.skipUrl" placeholder="请输入网址" />
+        </el-form-item>
+        <el-form-item>
+          <el-button>清空</el-button>
+          <el-button type="primary" @click="getSubmit">确定</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="isShow" v-if="active === 3">
+      <el-form label-width="100px" v-for="(item, index) in 4" :key="index">
+        <el-form-item label-width="auto" :label='`快捷位${index + 1}`' />
+        <el-form-item label="文字：">
+          <el-input placeholder="请输入快捷按钮文字" />
+        </el-form-item>
+        <el-form-item label="选择日期：">
+          <el-date-picker size="small" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
+            value-format="yyyy-MM-dd HH:mm:ss" />
+        </el-form-item>
+        <el-form-item label="跳转：">
+          <el-select placeholder="请选择跳转页面">
+            <el-option />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="网址：">
+          <el-input placeholder="请输入网址" />
+        </el-form-item>
+        <el-form-item>
+          <el-button>清空</el-button>
+          <el-button type="primary" @click="getSubmit">确定</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
   </div>
 </template>
 
 <script>
+import { create, list } from '@/api/ohplay/operation'
 import Upload from "@/components/Upload/index"
 export default {
   components: {
     Upload
   },
+  dicts: ['nav_address_type'],
   data() {
     return {
       img: [{
@@ -101,23 +103,85 @@ export default {
         id: 3,
         url: require('@/assets/images/ohplay/shortcut.png')
       }],
-      active: 1
+      active: 1,
+      form: {},
+      date: [],
+      list: [],
     }
   },
+  watch: {
+    date(val) {
+      this.form.startCreateTime = val[0]
+      this.form.updateTime = val[1]
+    }
+  },
+  mounted() {
+    this.getList()
+  },
   methods: {
+    // 切换选中位置
     getActive(id) {
-      this.active = id
+      if (this.active !== id) {
+        this.active = id
+        this.form = {}
+        this.date = []
+        this.getList()
+      }
+    },
+
+    // 列表
+    getList() {
+      let type = this.active === 1 ? '' : this.active === 2 ? 0 : 1
+      list({
+        type: type
+      }).then(res => {
+        console.log(res);
+        if (res.code === 0) {
+          this.list = res.data
+        }
+      })
+    },
+
+    // 上传图片
+    getUpload(e) {
+      this.form.banner = e.file
+    },
+
+    // 新增
+    getSubmit() {
+      this.form.type = this.active === 1 ? '' : this.active === 2 ? 0 : 1
+      create(this.form).then(res => {
+        console.log(res);
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.app-container {
+  display: flex;
+}
+
 .el-image {
   background: #000;
   display: block;
 }
 
+.isShow {
+  width: calc(100% - 400px);
+  margin-left: 20px;
+  display: flex;
+  flex-wrap: wrap;
+
+  .el-form {
+    border: 1px solid #dcdfe6;
+    padding: 20px;
+    box-shadow: 5px 5px 5px 0px #dcdfe6;
+    margin: 0 20px 20px 0;
+  }
+}
+
 .border {
   position: relative;
   border-top: 1px solid yellow;
@@ -138,17 +202,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-
-.el-col-18 {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-}
-
-.el-form {
-  border: 1px solid #dcdfe6;
-  box-shadow: 5px 5px 5px 0px #dcdfe6;
-  padding: 20px;
-  margin-bottom: 20px;
-}
 </style>