广播电台

src/api/music/radio.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 分页
+export function getPage(query){
+  return request({
+    url: `/broadcast/page`,
+    method: 'get',
+    params: query
+  })
+}

src/views/music/radio/index.vue

@@ -2,32 +2,11 @@
   <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-select v-model="form.category_id" 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>
@@ -36,50 +15,66 @@
     </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 prop="id" label="电台ID" align="center" width="80px" />
+      <el-table-column prop="title" label="电台名称" align="center" show-overflow-tooltip />
+      <el-table-column label="电台封面" align="center" width="100px">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.thumbs.medium_thumb"
+            :preview-src-list="[scope.row.thumbs.medium_thumb]" />
+        </template>
+      </el-table-column>
+      <el-table-column label="电台分类" align="center" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span v-for="item in scope.row.categories" :key="item.id">{{ item.title }} </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="description" label="电台描述" align="center" show-overflow-tooltip />
       <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" @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>
+    <!-- 分页 -->
+    <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
+      @pagination="getList" />
   </div>
 </template>
 
 <script>
+import { getPage } from '@/api/music/radio'
 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'
-      }]
+      // 列表
+      tableData: [],
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 0
     };
   },
+  mounted() {
+    this.getList()
+  },
   methods: {
+    // 列表
+    getList() {
+      getPage(this.form).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+        }
+      })
+    },
+
+    // 编辑 / 查看
     getDetail(id) {
       this.$router.push({
         path: `/music/radio/detail`,
@@ -88,6 +83,21 @@ export default {
         },
       });
     },
+
+    // 搜索
+    getSearch() {
+      this.form.pageNum = 1
+      this.getList()
+    },
+
+    // 重置
+    getRefresh() {
+      this.form = {
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.getList()
+    }
   },
 };
 </script>