广播电台添加地域分类 内容分类条件筛选 试听效果

src/views/music/radio/index.vue

@@ -2,11 +2,19 @@
   <div class="app-container">
     <!-- 搜索 -->
     <el-form inline label-width="100px" size="mini">
-      <el-form-item label="电台分类：">
-        <el-select v-model="form.category_id" placeholder="请选择电台分类">
-          <el-option></el-option>
+      <el-form-item label="地域分类：">
+        <el-select v-model="form.category_id" placeholder="请选择地域分类">
+          <el-option v-for="item in cityOptions" :key="item.id" :label="item.title" :value="item.id" />
         </el-select>
       </el-form-item>
+      <el-form-item label="内容分类：">
+        <el-select v-model="form.contentCategoryId" placeholder="请选择内容分类">
+          <el-option v-for="item in contentOptions" :key="item.id" :label="item.title" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="电台名称：">
+        <el-input v-model="form.name" placeholder="请输入电台名称" />
+      </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>
@@ -14,8 +22,8 @@
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData">
-      <el-table-column prop="id" label="电台ID" align="center" width="80px" />
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column prop="id" label="电台ID" align="center" show-overflow-tooltip/>
       <el-table-column prop="title" label="电台名称" align="center" show-overflow-tooltip />
       <el-table-column label="电台封面" align="center" width="100px">
         <template slot-scope="scope">
@@ -29,13 +37,17 @@
         </template>
       </el-table-column>
       <el-table-column prop="description" label="电台描述" align="center" show-overflow-tooltip />
+      <el-table-column label="试听" align="center" width="400px">
+        <template slot-scope="scope">
+          <audio :src="scope.row.playUrl" controls />
+        </template>
+      </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" @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>
         </template>
       </el-table-column>
     </el-table>
@@ -46,10 +58,16 @@
 </template>
 
 <script>
-import { getPage } from '@/api/music/radio'
+import { getPage, getCategories } from '@/api/music/radio'
 export default {
   data() {
     return {
+      // 遮罩层
+      loading: false,
+      // 地域分类
+      cityOptions: [],
+      // 内容分类
+      contentOptions: [],
       // 列表
       tableData: [],
       // 表单
@@ -60,16 +78,27 @@ export default {
       total: 0
     };
   },
+  created() {
+    // 地域分类 内容分类
+    getCategories().then(res => {
+      if (res.code === 0) {
+        res.data.filter(i => i.name === 'regions').map(j => this.cityOptions = j.records)
+        res.data.filter(i => i.name === 'content').map(j => this.contentOptions = j.records)
+      }
+    })
+  },
   mounted() {
     this.getList()
   },
   methods: {
     // 列表
     getList() {
+      this.loading = true
       getPage(this.form).then(res => {
         if (res.code === 0) {
           this.tableData = res.data.records
           this.total = res.data.total
+          this.loading = false
         }
       })
     },