播客专辑

src/api/music/blog.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 分页
+export function getPage(query) {
+  return request({
+    url: `/podcast/page`,
+    method: 'get',
+    params: query
+  })
+}
+
+// 播客分类
+export function getCategories(query) {
+  return request({
+    url: `/podcast/categories`,
+    method: 'get',
+    params: query
+  })
+}

src/views/music/blog/index.vue

@@ -2,40 +2,14 @@
   <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 label="播客名称：">
+        <el-input v-model="form.name" placeholder="请输入播客名称" />
       </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="标签分类：">
-        <el-select placeholder="请选择标签分类">
-          <el-option></el-option>
+        <el-select v-model="form.category_id" placeholder="请选择播客分类">
+          <el-option v-for="item in categoryOptions" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
-      <el-form-item label="播客ID：">
-        <el-input placeholder="请输入播客ID" />
-      </el-form-item>
-      <el-form-item label="播客名称：">
-        <el-input placeholder="请输入播客名称" />
-      </el-form-item>
-      <el-form-item label="主播名称：">
-        <el-input 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>
@@ -45,48 +19,117 @@
     </el-form>
     <!-- 列表 -->
     <el-table :data="tableData">
-      <el-table-column prop="id" label="播客ID" align="center"></el-table-column>
-      <el-table-column prop="name" label="播客名称" align="center"></el-table-column>
-      <el-table-column prop="img" label="播客封面" align="center"></el-table-column>
-      <el-table-column prop="blogType" label="播客分类" align="center"></el-table-column>
-      <el-table-column prop="anchor" label="主播" align="center"></el-table-column>
-      <el-table-column prop="payType" label="付费类型" align="center"></el-table-column>
-      <el-table-column prop="labelType" label="标签分类" align="center"></el-table-column>
-      <el-table-column prop="number" label="节目数量" align="center"></el-table-column>
-      <el-table-column prop="status" label="当前状态" align="center"></el-table-column>
-      <el-table-column prop="update" label="更新时间" align="center"></el-table-column>
+      <el-table-column prop="id" label="播客ID" align="center" />
+      <el-table-column prop="name" label="播客名称" align="center" />
+      <el-table-column label="播客封面" align="center" width="100px">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.thumb" :preview-src-list="[scope.row.thumb]" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="categoryName" label="播客分类" align="center" />
+      <el-table-column label="主播" align="center" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span v-for="item in scope.row.podcasters" :key="item.id">{{ item.nickname }} </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="charging" label="付费类型" align="center" :formatter="chargingFormatter" />
+      <el-table-column prop="programCount" label="节目数量" align="center" />
+      <el-table-column prop="status" label="当前状态" align="center" :formatter="statusFormatter" />
       <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 v-if="scope.row.status === 1" type="text">上架</el-button>
+          <el-button v-else 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, getCategories } from '@/api/music/blog'
 export default {
   data() {
     return {
+      // 遮罩层
+      loading: true,
       // 列表
-      tableData:[{
-        id: '1',
-        name: '测试',
-        img: '',
-        blogType: '测试分类',
-        anchor: '测试主播',
-        payType: '免费',
-        labelType: '测试',
-        number: '2',
-        status: '下架',
-        update: '2022/3/16 11:25:00'
+      tableData: [],
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 0,
+      // 付费类型
+      chargingOptions: [{
+        value: 1,
+        label: '免费'
+      }, {
+        value: 2,
+        label: '全本购买'
+      }, {
+        value: 3,
+        label: '单集购买'
+      }, {
+        value: 4,
+        label: 'VIP专享'
+      }],
+      // 播客分类
+      categoryOptions: [],
+      // 当前状态
+      statusOptions: [{
+        value: 1,
+        label: '上架'
+      }, {
+        value: 2,
+        label: '下架'
       }]
     };
   },
+  created() {
+    getCategories().then(res => {
+      if (res.code === 0) {
+        this.categoryOptions = res.data
+      }
+    })
+  },
+  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
+        }
+      })
+    },
+
+    // 搜索
+    getSearch() {
+      this.form.pageNum = 1
+      this.getList()
+    },
+
+    // 重置
+    getRefresh() {
+      this.form = {
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.getList()
+    },
+
+    // 新增 / 查看 / 编辑
     getDetail(id) {
       this.$router.push({
         path: `/music/blog/detail`,
@@ -95,6 +138,14 @@ export default {
         },
       });
     },
+
+    // 字典翻译
+    chargingFormatter(row) {
+      return this.selectDictLabel(this.chargingOptions, row.charging)
+    },
+    statusFormatter(row) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    }
   },
 };
 </script>