购买视频课

src/views/order-detail/order-video/index.module.less

@@ -11,10 +11,14 @@
     vertical-align: middle;
   }
   .title {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 500;
     color: #333333;
   }
+  .titleSong {
+    font-size: 14px;
+    color: #ff802c;
+  }
 
   .teacher {
     margin-left: 5px;
@@ -51,6 +55,16 @@
       color: var(--van-primary);
     }
   }
+
+  .line {
+    margin-right: 6px;
+    display: inline-block;
+    width: 4px;
+    height: 14px;
+    background: #2dc7aa;
+    border-radius: 2px;
+    vertical-align: middle;
+  }
   :global {
     .van-cell-group {
       margin-bottom: 10px;
@@ -58,4 +72,17 @@
       overflow: hidden;
     }
   }
+
+  .img {
+    width: 56px;
+    height: 56px;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-right: 12px;
+  }
+  .titleClass {
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+  }
 }

src/views/order-detail/order-video/index.tsx

@@ -15,8 +15,33 @@ export default defineComponent({
       default: {}
     }
   },
+  computed: {
+    album() {
+      const courseInfo = this.item.courseInfo || []
+      const albumList = [] as any
+      courseInfo.map((course: any) => {
+        course.musicAlbumInfos &&
+          course.musicAlbumInfos.map((info: any) => {
+            info.relationType === 'ALBUM' && albumList.push(info)
+          })
+      })
+      return [...albumList]
+    },
+    music() {
+      const courseInfo = this.item.courseInfo || []
+      const albumList = [] as any
+      courseInfo.map((course: any) => {
+        course.musicAlbumInfos &&
+          course.musicAlbumInfos.map((info: any) => {
+            info.relationType === 'MUSIC' && albumList.push(info)
+          })
+      })
+      return [...albumList]
+    }
+  },
   render() {
     const item = this.item
+    console.log(item)
     return (
       <div class={styles.videoOrder}>
         <CellGroup border={false}>
@@ -51,6 +76,69 @@ export default defineComponent({
             }}
           />
         </CellGroup>
+
+        {this.album.length > 0 && (
+          <CellGroup border={false}>
+            <Cell
+              center
+              v-slots={{
+                title: () => (
+                  <div
+                    class={[styles.title, 'van-ellipsis']}
+                    style={{ display: 'flex', alignItems: 'center' }}
+                  >
+                    <span class={styles.line}></span>
+                    附带专辑
+                  </div>
+                ),
+                value: () => <span class={styles.titleSong}>· 赠送</span>
+              }}
+            />
+
+            {this.album.map((album: any) => (
+              <Cell
+                center
+                v-slots={{
+                  icon: () => <Image src={album.cover} class={styles.img} />
+                }}
+                title={album.name}
+                titleClass={styles.titleClass}
+                label={album.remark || ''}
+              />
+            ))}
+          </CellGroup>
+        )}
+        {this.music.length > 0 && (
+          <CellGroup border={false}>
+            <Cell
+              center
+              v-slots={{
+                title: () => (
+                  <div
+                    class={[styles.title, 'van-ellipsis']}
+                    style={{ display: 'flex', alignItems: 'center' }}
+                  >
+                    <span class={styles.line}></span>
+                    附带乐谱
+                  </div>
+                ),
+                value: () => <span class={styles.titleSong}>· 赠送</span>
+              }}
+            />
+
+            {this.music.map((album: any) => (
+              <Cell
+                center
+                v-slots={{
+                  icon: () => <Image src={album.cover} class={styles.img} />
+                }}
+                title={album.name}
+                titleClass={styles.titleClass}
+                label={'作者：' + (album.remark || '')}
+              />
+            ))}
+          </CellGroup>
+        )}
       </div>
     )
   }