更新

src/views/student-info/my-follow/item.tsx

@@ -11,8 +11,15 @@ import {
 } from 'element-plus'
 // import iconVip from '../images/icon_vip.png'
 import iconVip from '../../user-info/images/icon_vip.png'
+import iconVipDefault from '../../user-info/images/icon_vip_default.png'
 import request from '@/helpers/request'
 
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../../user-info/images/${fileName}`
+  const modules = import.meta.globEager('../../user-info/images/*')
+  return modules[path].default
+}
+
 export default defineComponent({
   name: 'item',
   props: {
@@ -48,27 +55,95 @@ export default defineComponent({
           //
         }
       })
+    },
+    checkBadge(type: string) {
+      // tag : 老师点亮图标
+      // STYLE:个人风采
+      // VIDEO：视频课
+      // LIVE：直播课，
+      // MUSIC：曲目 逗号隔开
+      let status = false
+      const { teacher } = this.item
+      switch (type) {
+        case 'STYLE':
+        case 'VIDEO':
+        case 'LIVE':
+        case 'MUSIC':
+          if (teacher.tag) {
+            status = teacher.tag.indexOf(type) > -1
+          }
+          break
+        case 'VIP':
+          status = teacher.isVip > 0
+          break
+        default:
+          status = false
+          break
+      }
+      return status
     }
   },
   render() {
     const item = this.item
     return (
-      <div class="w-[158px] rounded-[10px] pt-10  mb-4 m-auto user-shadow relative">
-        <div class="bg-[#CFF2FF] absolute left-2.5 top-2.5 text-[#0089B9] text-xs py-0.5 px-2 rounded-[10px]">
+      <div class="w-[334px] rounded-[10px] mb-4 m-auto user-shadow relative">
+        <div class="bg-[#CFF2FF] absolute right-4 top-5 text-[#0089B9] text-xs py-0.5 px-2 rounded-[10px]">
           老师
         </div>
-        <div class="flex flex-col items-center">
+        <div class="p-[18px] flex">
           <ElImage
             src={item.avatar || iconTeacher}
             class="w-12 h-12 rounded-full border-2 border-[#2DC7AA] object-cover"
           />
-          {item.isVip > 0 && <ElImage src={iconVip} class="h-7 -mt-4" />}
+          <div class="flex flex-col pl-5">
+            <p class="text-base text-[#333] font-semibold leading-tight pb-0">
+              {item.userName}
+            </p>
+            <div class="flex items-center">
+              <ElImage
+                src={
+                  this.checkBadge('VIP')
+                    ? getAssetsHomeFile('icon_vip.png')
+                    : getAssetsHomeFile('icon_vip_default.png')
+                }
+                class="h-7 -ml-1"
+              />
+              <img
+                src={
+                  this.checkBadge('STYLE')
+                    ? getAssetsHomeFile('icon_cert.png')
+                    : getAssetsHomeFile('icon_cert_default.png')
+                }
+                class="h-[26px] px-1"
+              />
+              <img
+                src={
+                  this.checkBadge('VIDEO')
+                    ? getAssetsHomeFile('icon_video.png')
+                    : getAssetsHomeFile('icon_video_default.png')
+                }
+                class="h-[26px] px-1"
+              />
+              <img
+                src={
+                  this.checkBadge('LIVE')
+                    ? getAssetsHomeFile('icon_live.png')
+                    : getAssetsHomeFile('icon_live_default.png')
+                }
+                class="h-[26px] px-1"
+              />
+              <img
+                src={
+                  this.checkBadge('MUSIC')
+                    ? getAssetsHomeFile('icon_music.png')
+                    : getAssetsHomeFile('icon_music_default.png')
+                }
+                class="h-[26px] px-1"
+              />
+            </div>
+          </div>
         </div>
-
-        <p class="text-base text-[#333] font-semibold leading-tight pb-5 pt-2 text-center">
-          {item.userName}
-        </p>
-        <p class="mx-4 text-center mb-3">
+        <p class="mx-4 mb-3">
           {this.subjects.map(subject => (
             <ElTag
               effect="dark"

src/views/student-info/my-follow/list.tsx

@@ -52,7 +52,6 @@ export default defineComponent({
           this.loading = false
         }, 200)
       }
-      // this.loading = true
     }
   },
   render() {
@@ -63,27 +62,30 @@ export default defineComponent({
             loading={this.loading}
             animated
             class="w-full m-auto flex flex-wrap"
-            count={4}
+            count={2}
             v-slots={{
               template: () => (
-                <div class="w-[158px] rounded-[10px] pt-10 pb-7 mb-4 m-auto flex items-center justify-center flex-col user-shadow relative">
-                  <ElSkeletonItem
-                    variant="circle"
-                    style={{ width: '48px', height: '48px' }}
-                  ></ElSkeletonItem>
+                <div class="w-[334px] rounded-[10px] p-[18px] flex mb-4 m-auto flex-col user-shadow relative">
+                  <div class="flex w-full">
+                    <ElSkeletonItem
+                      variant="circle"
+                      style={{ width: '48px', height: '48px' }}
+                    ></ElSkeletonItem>
 
-                  <ElSkeletonItem
-                    variant="h3"
-                    style={{
-                      width: '50%',
-                      marginTop: '8px',
-                      marginBottom: '20px'
-                    }}
-                  ></ElSkeletonItem>
-                  <ElSkeletonItem
-                    variant="p"
-                    style={{ width: '60%', marginTop: '6px' }}
-                  ></ElSkeletonItem>
+                    <div class="flex flex-1 flex-col pl-5">
+                      <ElSkeletonItem
+                        variant="h3"
+                        style={{
+                          width: '50%',
+                          marginBottom: '8px'
+                        }}
+                      ></ElSkeletonItem>
+                      <ElSkeletonItem
+                        variant="p"
+                        style={{ width: '60%' }}
+                      ></ElSkeletonItem>
+                    </div>
+                  </div>
                   <ElSkeletonItem
                     variant="p"
                     style={{ width: '60%', marginTop: '6px' }}
@@ -94,7 +96,7 @@ export default defineComponent({
           >
             <div class="flex flex-wrap">
               {this.list.map((item: any) => (
-                <div class="basis-1/4">
+                <div class="basis-1/2">
                   <Item item={item} getList={this.getList} />
                 </div>
               ))}

src/views/user-info/music-operation/index.module.less

@@ -28,6 +28,19 @@
     .el-dialog__body {
       padding-top: 0;
     }
+
+    .el-select .el-select__tags .el-tag {
+      background-color: #dffff8;
+      border: 1px solid #4bb39e;
+      color: #4bb39e !important;
+      border-radius: 10px;
+      margin: 0 6px 0 0;
+      height: 30px;
+    }
+    .el-tag .el-icon {
+      color: #4bb39e;
+      background-color: transparent;
+    }
   }
 }
 

src/views/user-info/music-operation/index.tsx

@@ -235,42 +235,79 @@ export default defineComponent({
               extraTips="文件最大不能超过5MB"
             />
           </ElFormItem>
+
           <ElFormItem
-            label="是否带节拍器"
-            prop="hasBeat"
-            rules={[{ required: true, message: '请选择是否带节拍器' }]}
+            label="播放类型"
+            prop="audioType"
+            rules={[{ required: true, message: '请选择播放类型' }]}
           >
-            <ElRadioGroup v-model={this.form.hasBeat}>
-              <ElRadioButton label={0} class="mr-3 w-24">
-                否
+            <ElRadioGroup v-model={this.form.audioType}>
+              <ElRadioButton label={'MIDI'} class="mr-3 w-24">
+                MIDI
               </ElRadioButton>
-              <ElRadioButton label={1} class="w-24">
-                是
+              <ElRadioButton label={'MP3'} class="w-24">
+                MP3
               </ElRadioButton>
             </ElRadioGroup>
           </ElFormItem>
-          <ElFormItem label="伴奏文件" prop="mp3Url">
-            <ColUpload
-              v-model:modelValue={this.form.mp3Url}
-              bucket={'cloud-coach'}
-              accept={'.mp3'}
-              uploadType={'file'}
-              extraTips="文件最大不能超过5MB"
-            />
-          </ElFormItem>
-          <ElFormItem
-            label="原音文件"
-            prop="bgmp3Url"
-            rules={[{ required: true, message: '请选择原音文件' }]}
-          >
-            <ColUpload
-              v-model:modelValue={this.form.bgmp3Url}
-              bucket={'cloud-coach'}
-              accept={'.mp3'}
-              uploadType={'file'}
-              extraTips="文件最大不能超过5MB"
-            />
-          </ElFormItem>
+
+          {this.form.audioType === 'MP3' ? (
+            <>
+              <ElFormItem
+                label="是否带节拍器"
+                prop="hasBeat"
+                rules={[{ required: true, message: '请选择是否带节拍器' }]}
+              >
+                <ElRadioGroup v-model={this.form.hasBeat}>
+                  <ElRadioButton label={0} class="mr-3 w-24">
+                    否
+                  </ElRadioButton>
+                  <ElRadioButton label={1} class="w-24">
+                    是
+                  </ElRadioButton>
+                </ElRadioGroup>
+              </ElFormItem>
+              <ElFormItem label="伴奏文件" prop="mp3Url">
+                <ColUpload
+                  v-model:modelValue={this.form.mp3Url}
+                  bucket={'cloud-coach'}
+                  accept={'.mp3'}
+                  uploadType={'file'}
+                  size={8}
+                  extraTips="文件最大不能超过8MB"
+                />
+              </ElFormItem>
+              <ElFormItem
+                label="原音文件"
+                prop="bgmp3Url"
+                rules={[{ required: true, message: '请选择原音文件' }]}
+              >
+                <ColUpload
+                  v-model:modelValue={this.form.bgmp3Url}
+                  bucket={'cloud-coach'}
+                  accept={'.mp3'}
+                  uploadType={'file'}
+                  extraTips="文件最大不能超过8MB"
+                />
+              </ElFormItem>
+            </>
+          ) : (
+            <ElFormItem
+              label="MIDI文件"
+              prop="midiUrl"
+              rules={[{ required: true, message: '请选择MIDI文件' }]}
+            >
+              <ColUpload
+                v-model:modelValue={this.form.midiUrl}
+                bucket={'cloud-coach'}
+                accept={'.midi'}
+                uploadType={'file'}
+                size={8}
+                extraTips="文件最大不能超过8MB"
+              />
+            </ElFormItem>
+          )}
+
           <ElFormItem
             label="曲目名称"
             prop="musicSheetName"