ohplay_system/src/views/music/radio/index.vue

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline label-width="100px" size="mini">
      <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-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="电台ID：">
        <el-input placeholder="请输入电台ID"></el-input>
      </el-form-item>
      <el-form-item label="电台名称：">
        <el-input placeholder="请输入电台名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        <el-button type="primary" icon="el-icon-upload2" plain @click="getDetail()">上传音频文件</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData">
      <el-table-column prop="id" label="电台ID" align="center" width="80px"></el-table-column>
      <el-table-column prop="name" label="电台名称" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="img" label="电台封面" align="center"></el-table-column>
      <el-table-column prop="radio" label="电台分类" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="title" label="标签分类" align="center"></el-table-column>
      <el-table-column prop="pay" label="付费类型" align="center"></el-table-column>
      <el-table-column prop="origin" label="原价" align="center" width="80px"></el-table-column>
      <el-table-column prop="discount" label="折扣价" align="center" width="80px"></el-table-column>
      <el-table-column prop="platform" label="资源平台" align="center"></el-table-column>
      <el-table-column prop="status" label="当前状态" align="center" width="80px"></el-table-column>
      <el-table-column prop="date" label="更新时间" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="getDetail(scope.row.id)">查看</el-button>
          <el-button type="text">编辑</el-button>
          <el-button type="text">上架</el-button>
          <!-- <el-button type="text">下架</el-button> -->
          <el-button type="text">试听</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:[{
        id:'1',
        name: 'CNR中国之声',
        img:'',
        radio: '国家台，咨询台',
        title: '测试',
        pay: '免费',
        origin: '0',
        discount: '0',
        platform: '官方平台',
        status: '下架',
        date: '2022/3/17 09:54:00'
      }]
    };
  },
  methods: {
    getDetail(id) {
      this.$router.push({
        path: `/music/radio/detail`,
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style>
</style>