boss/pages/main/index/jishuquan.vue

<template>
  <div>
    <el-radio-group v-model="tab" size="small">
      <el-radio-button label="ad">活动直播管理</el-radio-button>
      <el-radio-button label="topic">文章管理</el-radio-button>
      <el-radio-button label="video">视频管理</el-radio-button>
    </el-radio-group>
    <br/>
    <template v-if="tab==='ad'">
      <div class="content" v-if="ads">
        <el-table :data="ads" height="100%" border style="width: 100%">
          <el-table-column prop="title" label="方案名称"></el-table-column>
          <el-table-column prop="nickname" label="类型"></el-table-column>
          <el-table-column prop="updated_at" label="基本数据"></el-table-column>
          <el-table-column prop="status_name" label="状态"></el-table-column>
          <el-table-column prop="created_at " label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination class="order-footer" background layout="prev, pager, next" :page-size="20"
                     :total="total" @current-change="handleCurrentChange"/>

    </template>
    <template v-if="tab==='topic'">
      <div class="content" v-if="topic">
        <el-table :data="topics" height="100%" border style="width: 100%">
          <el-table-column prop="title" label="文章标题"></el-table-column>
          <el-table-column prop="nickname" label="作者"></el-table-column>
          <el-table-column prop="updated_at" label="基本数据"></el-table-column>
          <el-table-column prop="status_name" label="状态"></el-table-column>
          <el-table-column prop="created_at " label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination class="order-footer" background layout="prev, pager, next" :page-size="20"
                     :total="total" @current-change="handleCurrentChange"/>

    </template>
    <template v-if="tab==='video'">
      <div class="content" v-if="ads">
        <el-table :data="videos" height="100%" border style="width: 100%">
          <el-table-column prop="title" label="方案名称"></el-table-column>
          <el-table-column prop="nickname" label="类型"></el-table-column>
          <el-table-column prop="updated_at" label="基本数据"></el-table-column>
          <el-table-column prop="status_name" label="状态"></el-table-column>
          <el-table-column prop="created_at " label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination class="order-footer" background layout="prev, pager, next" :page-size="20"
                     :total="total" @current-change="handleCurrentChange"/>

    </template>

    <el-dialog title="活动管理" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="话题标签" :label-width="formLabelWidth">
          <el-input v-model="form.tag" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择活动区域">
            <el-option label="文章" value="1"></el-option>
            <el-option label="视频" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="广告位置" :label-width="formLabelWidth">
          <el-select v-model="form.position" placeholder="请选择活动区域">
            <el-option label="区域一" value="1"></el-option>
            <el-option label="区域二" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: 1,
        size: 20,
        tab: 'ad',
        total: 1,
        ads: [],
        topics: [],
        videos: [],
        form: {
          title: '',
          url: '',
          type: '',
          tags:''
        },
        dialogFormVisible: false,
        formLabelWidth: '120px'
      };
    },
    mounted() {
      this.getList();
    },
    methods: {

      handleCurrentChange(val) {
        this.page = val;
        this.getList();
      },
      async getList() {
        const page = this.page;
        const size = this.size;
        const data = {
          page,
          size
        };
        switch (this.tab) {
          case "ad":
            let res = await this.$post("/api/admin/ji_shu_quan/get_ads", data);
            this.ads = res.data.ads;
            this.record = res.data.record;
            break;
          case 'video':

        }


      },
      async contact(id) {

        const data = {
          id
        };
        let res = await this.$post("/api/admin/jishuquan/get_ads", data);
        this.$message({
          message: res.info,
          type: 'success'
        });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .count-list {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .count-item {
    margin-right: 20px;
    font-size: 16px;
  }

  .content {
    margin-top: 30px;
    white-space: nowrap;
    overflow-x: scroll;
    height: calc(100vh - 150px);
  }

  .btn {
    width: 80px;
  }

  .order-footer {
    margin-top: 10px;
  }
</style>