banner 设置

ruoyi-ui/src/api/content/banner.js

@@ -58,4 +58,13 @@ export function delBanner(id) {
     url: '/back/banner/' + id,
     method: 'delete'
   })
+}
+
+// 查询音乐列表
+export function listMusic(query) {
+  return request({
+    url: '/back/music/list',
+    method: 'get',
+    params: query
+  })
 } 

ruoyi-ui/src/views/content/banner/index.vue

@@ -86,9 +86,45 @@
         <el-form-item label="排序" prop="sort" required>
           <el-input-number v-model="form.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" />
         </el-form-item>
-        <el-form-item label="跳转链接" prop="jumpUrl" required>
+        <el-form-item label="跳转类型" prop="jumpType" required>
+          <el-radio-group v-model="form.jumpType" @change="handleJumpTypeChange">
+            <el-radio label="url">跳转链接</el-radio>
+            <el-radio label="music">音乐</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="form.jumpType === 'url'" label="跳转链接" prop="jumpUrl" required>
           <el-input v-model="form.jumpUrl" placeholder="请输入跳转链接" />
         </el-form-item>
+        <el-form-item v-if="form.jumpType === 'music'" label="选择音乐" prop="musicId" required>
+          <el-select 
+            v-model="form.musicId" 
+            placeholder="请选择音乐" 
+            filterable 
+            remote 
+            :remote-method="searchMusic"
+            :loading="musicLoading"
+            style="width: 100%"
+            @change="handleMusicChange">
+            <el-option
+              v-for="music in musicList"
+              :key="music.musicId"
+              :label="`${music.name} - ${music.author}`"
+              :value="music.musicId">
+              <div style="display: flex; align-items: center;">
+                <el-image 
+                  v-if="music.imgAddr" 
+                  :src="getImageUrlMethod(music.imgAddr)" 
+                  style="width: 30px; height: 30px; margin-right: 10px; border-radius: 4px;"
+                  fit="cover">
+                </el-image>
+                <div>
+                  <div style="font-weight: bold;">{{ music.name }}</div>
+                  <div style="color: #999; font-size: 12px;">{{ music.author }}</div>
+                </div>
+              </div>
+            </el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="Banner图片" required>
           <el-upload
             action=""
@@ -113,7 +149,7 @@
 </template>
 
 <script>
-import { listBanner, getBanner, delBanner, addBanner, updateBanner } from "@/api/content/banner";
+import { listBanner, getBanner, delBanner, addBanner, updateBanner, listMusic } from "@/api/content/banner";
 import { getImageUrl } from "@/utils/image.js";
 import request from '@/utils/request';
 
@@ -147,6 +183,10 @@ export default {
       },
       // 表单参数
       form: {},
+      // 音乐相关数据
+      musicList: [],
+      musicLoading: false,
+      musicQuery: '',
       // 表单校验
       rules: {
         name: [
@@ -155,8 +195,14 @@ export default {
         sort: [
           { required: true, message: "排序不能为空", trigger: "blur" }
         ],
+        jumpType: [
+          { required: true, message: "跳转类型不能为空", trigger: "change" }
+        ],
         jumpUrl: [
           { required: true, message: "跳转链接不能为空", trigger: "blur" }
+        ],
+        musicId: [
+          { required: true, message: "请选择音乐", trigger: "change" }
         ]
       }
     };
@@ -189,7 +235,10 @@ export default {
         id: null,
         name: null,
         sort: 0,
+        jumpType: 'url',
         jumpUrl: null,
+        musicId: null,
+        musicName: null,
         bannerAddr: null,
         previewUrl: null,
         file: null
@@ -248,18 +297,35 @@ export default {
           return;
         }
       }
+
+      // 检查跳转类型相关字段
+      if (this.form.jumpType === 'url' && !this.form.jumpUrl) {
+        this.$message.error('请输入跳转链接');
+        return;
+      }
+      if (this.form.jumpType === 'music' && !this.form.musicId) {
+        this.$message.error('请选择音乐');
+        return;
+      }
       
       this.$refs["form"].validate(valid => {
         if (valid) {
+          // 准备提交数据
+          const submitData = {
+            ...this.form,
+            jumpType: this.form.jumpType
+          };
+
           if (this.form.id != null) {
-            // 编辑操作：使用bannerAddr字段（上传后的地址）
-            updateBanner(this.form).then(response => {
+            // 编辑操作
+            updateBanner(submitData).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addBanner(this.form).then(response => {
+            // 新增操作
+            addBanner(submitData).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -331,6 +397,55 @@ export default {
         return false;
       }
       return true;
+    },
+    // 跳转类型改变处理
+    handleJumpTypeChange(value) {
+      if (value === 'url') {
+        this.form.musicId = null;
+        this.form.musicName = null;
+      } else if (value === 'music') {
+        this.form.jumpUrl = null;
+        // 加载音乐列表
+        this.loadMusicList();
+      }
+    },
+    // 加载音乐列表
+    loadMusicList() {
+      this.musicLoading = true;
+      listMusic({
+        pageNum: 1,
+        pageSize: 50,
+        musicType: 'ordinary'
+      }).then(response => {
+        this.musicList = response.rows || [];
+        this.musicLoading = false;
+      }).catch(() => {
+        this.musicLoading = false;
+      });
+    },
+    // 搜索音乐
+    searchMusic(query) {
+      this.musicQuery = query;
+      this.musicLoading = true;
+      listMusic({
+        pageNum: 1,
+        pageSize: 50,
+        musicType: 'ordinary',
+        name: query
+      }).then(response => {
+        this.musicList = response.rows || [];
+        this.musicLoading = false;
+      }).catch(() => {
+        this.musicLoading = false;
+      });
+    },
+    // 音乐选择改变处理
+    handleMusicChange(musicId) {
+      const selectedMusic = this.musicList.find(music => music.musicId === musicId);
+      if (selectedMusic) {
+        this.form.musicName = selectedMusic.name;
+        this.form.jumpUrl = `music:${musicId}`; // 使用特殊格式标识音乐跳转
+      }
     }
   }
 };