音频管理 歌单

src/views/music/menu/detail.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="app-container">
+    <el-form label-width="100px">
+      <el-form-item label="歌单名称：">
+        <el-input placeholder="请输入歌单名称" />
+      </el-form-item>
+      <el-form-item label="歌单介绍：">
+        <el-input type="textarea" rows="5" placeholder="请输入歌单介绍" />
+      </el-form-item>
+      <el-form-item label="歌单创建者：">
+        <el-input placeholder="请输入歌单创建者名称" />
+      </el-form-item>
+      <el-form-item label="资源平台：">
+        <el-select placeholder="请选择资源平台">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="歌单封面：">
+        <Upload listType="picture-card" />
+      </el-form-item>
+      <el-form-item label="创建者头像：">
+        <Upload listType="picture-card" />
+      </el-form-item>
+      <el-form-item label="歌曲列表：" style="width: 1000px">
+        <el-button type="primary" icon="el-icon-plus">添加歌曲</el-button>
+        <!-- 列表 -->
+        <el-table>
+          <el-table-column type="index" label="序号" align="center" />
+          <el-table-column label="ID" align="center" />
+          <el-table-column label="歌曲名称" align="center" />
+          <el-table-column label="歌手名称" align="center" />
+          <el-table-column label="播放时长" align="center" />
+          <el-table-column label="当前状态" align="center" />
+          <el-table-column label="操作" align="center">
+            <template>
+              <el-button type="text">试听</el-button>
+              <el-button type="delete">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
+    <div class="form-btn">
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Upload from '@/components/Upload/index.vue'
+export default {
+  components: {
+    Upload
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    cancel() {
+      this.$tab.closeOpenPage("/music/menu");
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  width: 500px;
+}
+
+.form-btn {
+  margin-top: 20px;
+}
+</style>

src/views/music/menu/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline size="mini">
+      <el-form-item label="歌单名称：">
+        <el-input placeholder="请输入歌单名称" />
+      </el-form-item>
+      <el-form-item label="资源平台：">
+        <el-select placeholder="请选择资源平台">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="当前状态：">
+        <el-select placeholder="请选择当前状态">
+          <el-option />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        <el-button icon="el-icon-refresh">重置</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" @click="getDetail()">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table>
+      <el-table-column label="ID" align="center" />
+      <el-table-column label="歌单名称" align="center" />
+      <el-table-column label="歌单封面" align="center"></el-table-column>
+      <el-table-column label="歌单创建者" align="center" />
+      <el-table-column label="创建者头像" align="center"></el-table-column>
+      <el-table-column label="资源平台" align="center" />
+      <el-table-column label="歌曲数量" align="center" />
+      <el-table-column label="当前状态" align="center" />
+      <el-table-column label="操作" align="center">
+        <template>
+          <el-button type="text">查看</el-button>
+          <el-button type="text">编辑</el-button>
+          <el-button type="text">上架</el-button>
+          <el-button type="text">下架</el-button>
+          <el-button type="delete">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+    // 新增 / 查看 / 编辑
+    getDetail(id) {
+      this.$router.push({
+        path: `/music/menu/detail`,
+        query: {
+          id: id,
+        },
+      })
+    }
+  },
+};
+</script>