ohplay_system/src/views/ohplay/operation/index.vue

<template>
  <div class="app-container">
    <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>

    <keep-alive>
      <div class="isShow">
        <el-button v-if="isShow()" type="primary" icon="el-icon-plus" @click="getAdd"
          v-hasPermi="['ohplay:operation:add']">添加</el-button>
        <el-form label-width="100px" v-for="(item, index) in list" :key="index">
          <el-link :underline="false" class="close" icon="el-icon-close" @click="getDelete(item.id, index)" />
          <el-form-item :label="label + (index + 1)" />
          <el-form-item v-if="active === 3" label="文字：">
            <el-input v-model="item.script" placeholder="请输入快捷按钮文字" />
          </el-form-item>
          <el-form-item v-else label="Banner：">
            <Upload listType="picture-card" :url="item.banner" :width="343" :height="140" @upload="getUpload($event, index)" />
          </el-form-item>
          <el-form-item label="选择日期：">
            <el-date-picker v-model="item.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="item.skip" placeholder="请选择跳转页面">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                :value="Number(item.value)" />
            </el-select>
          </el-form-item>
          <el-form-item label="网址：">
            <el-input v-model="item.skipUrl" placeholder="请输入网址" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getSubmit(item, index)"
              v-hasPermi="['ohplay:operation:submit']">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </keep-alive>
  </div>
</template>

<script>
import { create, list, remove, edit } from '@/api/ohplay/operation'
export default {
  data() {
    return {
      img: [{
        id: 1,
        url: require('@/assets/images/ohplay/banner.png')
      }, {
        id: 2,
        url: require('@/assets/images/ohplay/pop.png')
      }, {
        id: 3,
        url: require('@/assets/images/ohplay/shortcut.png')
      }],
      active: 1,
      label: '广告位',
      // 列表
      list: [],
      // 跳转类型
      typeOptions: [{
        value: 0,
        label: '指定页面'
      }, {
        value: 1,
        label: '指定URL'
      }]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 切换选中位置
    getActive(id) {
      if (this.active !== id) {
        this.active = id
        this.label = id === 1 ? '广告位' : id === 2 ? '推广位' : '快捷位'
        this.getList()
      }
    },

    // 添加
    getAdd() {
      this.list.push({})
    },

    // 隐藏添加按钮
    isShow() {
      return this.active === 3 ? this.list.length < 4 ? true : false : this.list.length < 6 ? true : false
    },

    // 删除
    getDelete(id, index) {
      if (id) {
        this.$confirm('是否删除？', '提示', {
          'confirmButtonText': '确定',
          'cancelButtonText': '取消',
          type: 'warning'
        }).then(() => {
          remove(id).then(res => {
            if (res.code === 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      } else {
        this.list.splice(index, 1)
      }
    },

    // 列表
    getList() {
      let type = this.active === 1 ? 2 : this.active === 2 ? 0 : 1
      this.list = []
      list({
        type: type
      }).then(res => {
        if (res.code === 0) {
          if (res.data) {
            res.data.map(i => {
              this.list.push({
                date: [i.startCreateTime, i.endCreateTime],
                ...i
              })
            })
          }
        }
      })
    },

    // 上传图片
    getUpload(e, index) {
      this.list[index].banner = e.file 
    },

    // 新增 编辑
    getSubmit(item, index) {
      let form = {
        type: this.active === 1 ? 2 : this.active === 2 ? 0 : 1,
        startCreateTime: item.date[0],
        endCreateTime: item.date[1],
        sort: index + 1,
        skip: item.skip,
        skipUrl: item.skipUrl,
        script: item.script,
        banner: item.banner
      }
      if (item.id) {
        form.id = item.id
        edit(form).then(res => {
          if (res.code === 0) {
            this.$message.success('修改成功！')
            this.getList()
          }
        })
      } else {
        create(form).then(res => {
          if (res.code === 0) {
            this.$message.success('创建成功！')
            this.getList()
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
}

.el-image {
  background: #000;
  display: block;
}

.isShow {
  width: calc(100% - 400px);
  margin-left: 20px;

  .el-form {
    width: 500px;
    border: 1px solid #dcdfe6;
    padding: 20px;
    box-shadow: 5px 5px 5px 0px #dcdfe6;
    margin: 0 20px 20px 0;
    position: relative;

    .close {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 99;
    }
  }
}

.border {
  position: relative;
  border-top: 1px solid yellow;
  border-right: 1px solid yellow;
  border-left: 1px solid yellow;
}

.border:nth-child(4) {
  border-bottom: 1px solid yellow;
}

.active::after {
  content: '';
  background: rgba(255, 255, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>