提交

1

src/components/hotSearch/index.tsx

@@ -10,21 +10,21 @@ export default defineComponent({
   name: 'hotSearch',
   components: { tagItem },
   props: {
-    type:{
-      type:String,
-      default:'more'
+    type: {
+      type: String,
+      default: 'more'
     }
   },
   setup(props) {
     const state = reactive({
-      hotList:[],
-      type:props.type
+      hotList: [],
+      type: props.type
     })
     const getHotList = async () => {
       try {
         const res = await request.get('/api-website/open/music/sheet/hotTag', {
           params: {
-            status: 1,
+            status: 1
           }
         })
 
@@ -33,7 +33,7 @@ export default defineComponent({
         console.log(e)
       }
     }
-    onMounted(()=>{
+    onMounted(() => {
       getHotList()
     })
     return () => (
@@ -43,22 +43,26 @@ export default defineComponent({
             <img src={hot} class={classes.hotIcon} alt="" />
             <h5>热门搜索：</h5>
             <div class={classes.tagWrap}>
-              {state.hotList.map((item:any)=>{
+              {state.hotList.map((item: any) => {
                 return <tagItem title={item.key}></tagItem>
-              })
-
-              }
-
+              })}
             </div>
           </div>
-          {state.type == 'more'? <div class={classes.wrapRight}>
-            <span>更多</span>
-            <img class={classes.arrow} src={arrow} alt="" />
-          </div>: <div class={[classes.wrapRight,classes.searchWrap]}>
-            <span >筛选</span>
-            <img class={classes.search} src={search} alt="" />
-          </div>}
-
+          {state.type == 'more' ? (
+            <div class={classes.wrapRight}>
+              <span>更多</span>
+              <img class={classes.arrow} src={arrow} alt="" />
+            </div>
+          ) : null}
+          {state.type == 'search' ? (
+            <div class={[classes.wrapRight, classes.searchWrap]}>
+              <span>筛选</span>
+              <img class={classes.search} src={search} alt="" />
+            </div>
+          ) : null}
+        </div>
+        <div class={classes.searchDetail}>
+          <div ></div>
         </div>
       </>
     )

src/components/tagItem/index.module.less

@@ -1,7 +1,6 @@
 .tag {
   cursor: pointer;
   color: #2dc7aa;
-  height: 28px;
   line-height: 28px;
   background: #e9f6f4;
   border-radius: 6px;

src/router/routes-admin.ts

@@ -40,6 +40,35 @@ export default [
       index: 3
     }
   },
+  {
+    path: '/albumDetail',
+    name: 'albumDetail',
+    component: () => import('@/views/albumDetail'),
+    meta: {
+      title: '专辑详情',
+      index: 3
+    }
+  },
+  {
+    path: '/videoDetailList',
+    name: 'videoDetailList',
+    component: () => import('@/views/videoDetailList'),
+    meta: {
+      title: '视频课',
+      index: 3
+    }
+  },
+  {
+    path: '/videoDetail',
+    name: 'videoDetail',
+    component: () => import('@/views/videoDetailList/videoDetail'),
+    meta: {
+      title: '视频课详情',
+      index: 3
+    }
+  },
+  //
+
 
   {
     path: '/teacherAuth',

src/views/albumDetail/index.module.less

@@ -0,0 +1,178 @@
+.wall {
+  height: 70px;
+  margin-bottom: 18px;
+}
+.w1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.wrap {
+  display: flex;
+  flex-direction: row;
+  .albumInfo {
+    padding: 30px;
+    background-color: #fff;
+    .albumInfoTop {
+      display: flex;
+      flex-direction: row;
+      .albumInfoTopImg {
+        position: relative;
+        width: 240px;
+        height: 218px;
+        margin-right: 22px;
+        .albumCover {
+          width: 218px;
+          height: 218px;
+          position: absolute;
+          z-index: 100;
+          background-color: #fff;
+          border-radius: 14px;
+        }
+        .pan {
+          position: absolute;
+          width: 218px;
+          height: 218px;
+          right: 0;
+          top: 0;
+        }
+      }
+      .albumInfoTopConent {
+        h2 {
+          font-size: 26px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #000000;
+          line-height: 37px;
+          margin-bottom: 16px;
+        }
+        p {
+          font-size: 20px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 28px;
+          width: 466px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-wrap: break-word;
+          white-space: normal !important;
+          -webkit-line-clamp: 4;
+          -webkit-box-orient: vertical;
+          height: 112px;
+        }
+        .tagWrap {
+          display: flex;
+          flex-direction: row;
+          margin-top: 22px;
+        }
+      }
+    }
+    .albumInfoBottom {
+      font-size: 18px;
+      color: #000;
+      margin-top: 30px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .albumInfoLeft {
+        display: flex;
+        flex-direction: row;
+        font-size: 18px;
+        img {
+          width: 23px;
+          margin-right: 6px;
+          // height: 18px;
+        }
+        .itemBottomL {
+          margin-right: 21px;
+        }
+        .itemBottomL,
+        .itemBottomR {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+        }
+      }
+      .albumInfoRight {
+        .itemBottomR {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          img {
+            width: 23px;
+            margin-right: 6px;
+          }
+        }
+      }
+    }
+  }
+  .musicWrap {
+    .title {
+      line-height: 48px;
+      font-size: 20px;
+      font-weight: 500;
+      color: #000000;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 15px;
+      .dot {
+        width: 4px;
+        height: 18px;
+        background: #2dc7aa;
+        border-radius: 3px;
+        margin-right: 11px;
+      }
+    }
+  }
+
+  // 右边
+  .right {
+    margin-left: 14px;
+    width: 100%;
+    .some {
+      padding: 20px 24px;
+      background-color: #fff;
+      margin-bottom: 14px;
+      .someTitle {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 18px;
+        .tilteL {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          font-weight: 600;
+          color: #000000;
+          line-height: 30px;
+          font-size: 22px;
+          img {
+            width: 28px;
+            height: 28px;
+            margin-right: 8px;
+          }
+        }
+        .tilteR {
+          cursor: pointer;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          font-size: 18px;
+          color: #666;
+          .arrow {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+      .someWrap {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+    }
+  }
+}

src/views/albumDetail/index.tsx

@@ -0,0 +1,162 @@
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import hold from '@/components/albumItem/images/hold.png'
+import start from '@/components/albumItem/images/start.png'
+import smallPan from '@/components/albumItem/images/pan.png'
+import classes from './index.module.less'
+import arrow from '@/components/musicLIstItem/images/arrow.png'
+import hot from '@/components/hotSearch/images/hot.png'
+import pan from './images/pan.png'
+import somePan from './images/somePan.png'
+import tagItem from '@/components/tagItem'
+import pagination from '@/components/pagination'
+import albumItem from './modals/albumItem'
+import request from '@/helpers/request'
+import musicLIstItem from '@/components/musicLIstItem'
+export default defineComponent({
+  name: 'albumDetail',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  components: { tagItem, pagination, albumItem,musicLIstItem },
+  setup(props, conent) {
+    const state = reactive({
+      title: props.title,
+      hotList: [],
+      hotTagList:[],
+      relatedMusicAlbum:[],
+      musicList: [],
+      pageInfo: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+      details:{} as any
+    })
+    const getList = async () => {
+      try{
+        const res = await request.post('/api-website/open/music/album/detail', {
+          data: {
+            id: 15,
+            page: state.pageInfo.page,
+            rows: state.pageInfo.limit
+          }
+        })
+          state.details = res.data;
+          state.pageInfo.total = res.data.musicSheetList.total;
+          state.musicList = res.data.musicSheetList.rows;
+          state.hotList = res.data.hotMusicAlbum;
+          state.hotTagList = res.data.musicTagNames.split(',')||[]
+          state.relatedMusicAlbum = res.data.relatedMusicAlbum;
+      }catch(e){
+        console.log(e)
+      }
+    }
+    onMounted(()=>{
+      getList()
+    })
+    return () => (
+      <>
+        <div class={classes.wall}></div>
+        <div class={[classes.w1200, classes.wrap]}>
+          <div class={classes.left}>
+            <div class={classes.albumInfo}>
+              <div class={classes.albumInfoTop}>
+                <div class={classes.albumInfoTopImg}>
+                  <img src={state.details.albumCoverUrl?state.details.albumCoverUrl:hold} alt="" class={classes.albumCover} />
+                  <img src={pan} alt="" class={classes.pan} />
+                </div>
+                <div class={classes.albumInfoTopConent}>
+                  <h2>{state.details.albumName}</h2>
+                  <p>
+                    {state.details.albumDesc}
+                  </p>
+                  <div class={classes.tagWrap}>
+                    {state.hotTagList.map((item: any) => {
+                      return <tagItem title={item}></tagItem>
+                    })}
+                  </div>
+                </div>
+              </div>
+              <div class={classes.albumInfoBottom}>
+                <div class={classes.albumInfoLeft}>
+                  <div class={classes.itemBottomL}>
+                    <img src={smallPan} alt="" />
+                    <span>{state.details.musicSheetCount}首</span>
+                  </div>
+                  <div class={classes.itemBottomR}>
+                    <img src={start} alt="" />
+                    <span>{state.details.favorite}人收藏</span>
+                  </div>
+                </div>
+                <div class={classes.albumInfoRight}>
+                  <div class={classes.itemBottomR}>
+                    <img src={start} alt="" />
+                    <span>已收藏</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class={classes.musicWrap}>
+              <div class={classes.title}>
+                <div class={classes.dot}></div>
+                <span>曲目列表</span>
+              </div>
+              <div>
+                {state.musicList.map(item => {
+                  return <musicLIstItem item={item}></musicLIstItem>
+                })}
+              </div>
+            </div>
+            <pagination
+              total={state.pageInfo.total}
+              v-model:page={state.pageInfo.page}
+              limit={state.pageInfo.limit}
+              pageSizes={state.pageInfo.page_size}
+              pagination={getList}
+            ></pagination>
+          </div>
+          <div class={classes.right}>
+            <div class={classes.some}>
+              <div class={classes.someTitle}>
+                <div class={classes.tilteL}>
+                  <img src={somePan} alt="" />
+                  <span>相关专辑</span>
+                </div>
+                <div class={classes.tilteR}>
+                  <span>更多</span>
+                  <img class={classes.arrow} src={arrow} alt="" />
+                </div>
+              </div>
+
+              <div class={classes.someWrap}>
+                {state.relatedMusicAlbum.map(item=> <albumItem detail={item}></albumItem>)}
+
+              </div>
+            </div>
+            <div class={classes.some}>
+              <div class={classes.someTitle}>
+                <div class={classes.tilteL}>
+                  <img src={hot} alt="" />
+                  <span>热门专辑</span>
+                </div>
+                <div class={classes.tilteR}>
+                  <span>更多</span>
+                  <img class={classes.arrow} src={arrow} alt="" />
+                </div>
+              </div>
+
+              <div class={classes.someWrap}>
+              {state.hotList.map(item=> <albumItem detail={item}></albumItem>)}
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/views/albumDetail/modals/albumItem.tsx

@@ -0,0 +1,49 @@
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+
+import classes from './index.module.less'
+import hold from '@/components/albumItem/images/hold.png'
+export default defineComponent({
+  name: 'albumItem',
+  props: {
+    detail: {
+      type: Object,
+      default: {
+        albumCoverUrl: '',
+        albumDesc: '',
+        albumFavoriteCount: 0,
+        albumName: '',
+        albumStatus: 0,
+        albumTag: '',
+        auditVersion: 0,
+        createBy: 0,
+        createTime: '',
+        delFlag: null,
+        hotFlag: null,
+        id: 0,
+        musicSheetCount: 0,
+        musicTagNames: '',
+        sortNumber: 0,
+        topFlag: null,
+        updateBy: 34,
+        updateTime: ''
+      }
+    }
+  },
+  setup(props) {
+    const state = reactive({
+      detail: props.detail
+    })
+    return () => (
+      <>
+        <div class={classes.itemWrap}>
+          <img
+            src={state.detail.albumCoverUrl ? state.detail.albumCoverUrl : hold}
+            alt=""
+            class={classes.hold}
+          />
+          <h2>{state.detail.albumName}</h2>
+        </div>
+      </>
+    )
+  }
+})

src/views/albumDetail/modals/index.module.less

@@ -0,0 +1,43 @@
+.itemWrap {
+  cursor: pointer;
+  &:nth-child(2n){
+    margin-right: 0;
+  }
+  margin-bottom: 28px;
+  margin-right: 14px;
+  border-radius: 4px;
+  overflow: hidden;
+  h2 {
+    line-height: 25px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #000000;
+    margin: 6px 0 0;
+  }
+  .hold {
+    width: 168px;
+  }
+  span {
+    color: #999;
+    font-size: 18px;
+  }
+  .itemBottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    img {
+      width: 19px;
+      margin-right: 4px;
+      // height: 18px;
+    }
+    .itemBottomL {
+      margin-right: 21px;
+    }
+    .itemBottomL, .itemBottomR{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+    }
+  }
+}

src/views/home/index.tsx

@@ -24,9 +24,8 @@ export default defineComponent({
   },
   setup() {
     const state = reactive({
-
       albumList: [],
-      videoList:[]
+      videoList: []
     })
 
     const getAlbumList = async () => {
@@ -46,13 +45,16 @@ export default defineComponent({
     }
     const getVideoList = async () => {
       try {
-        const res = await request.post('/api-website/open/videoLessonGroup/page', {
-          data: {
-            albumStatus: 'PASS',
-            page: 1,
-            rows: 6
+        const res = await request.post(
+          '/api-website/open/videoLessonGroup/page',
+          {
+            data: {
+              albumStatus: 'PASS',
+              page: 1,
+              rows: 6
+            }
           }
-        })
+        )
 
         state.videoList = res.data.rows
       } catch (e) {
@@ -77,11 +79,9 @@ export default defineComponent({
               </div>
               <hotSearch></hotSearch>
               <div class={styles.albumList}>
-                {state.albumList.map(item=>{
-                  return  <albumItem detail={item}></albumItem>
+                {state.albumList.map(item => {
+                  return <albumItem detail={item}></albumItem>
                 })}
-
-
               </div>
             </div>
           </div>
@@ -102,9 +102,8 @@ export default defineComponent({
                 </div>
               </div>
               <div class={styles.videoList}>
-
-              {state.videoList.map(item=>{
-                  return  <videoDetailItem detail={item}></videoDetailItem>
+                {state.videoList.map(item => {
+                  return <videoDetailItem detail={item}></videoDetailItem>
                 })}
               </div>
             </div>
@@ -112,7 +111,6 @@ export default defineComponent({
             {/* <musicLIstItem></musicLIstItem> */}
           </div>
         </div>
-
       </div>
     )
   }

src/views/muiscDetial.vue/index.tsx

@@ -0,0 +1,23 @@
+
+import { defineComponent , toRefs, reactive, onMounted, ref } from 'vue'
+import classes from './index.module.less'
+
+export default defineComponent({
+  name: 'muiscDetial',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, conent) {
+    const state = reactive({
+      title:props.title
+    })
+    return () => (
+      <>
+        <div class={classes.tag}>{state.title}</div>
+      </>
+    )
+  }
+})

src/views/videoDetailList/index.module.less

@@ -0,0 +1,54 @@
+.w1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.videoList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+.detailWrap {
+  display: flex;
+  flex-direction: row;
+  .detailLeft {
+    width: 690px;
+    margin-right: 16px;
+    .detailTopImg {
+      width: 690px;
+      margin-bottom: 20px;
+    }
+  }
+}
+.courseWrap {
+  padding: 20px;
+  background-color: #fff;
+  .courseTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #000000;
+    line-height: 28px;
+    img {
+      width: 26px;
+      height: 26px;
+      margin-right: 8px;
+    }
+  }
+  .courseInfo {
+
+    margin-top: 10px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #f0f0f0;
+    p {
+      font-size: 20px;
+      font-weight: 400;
+      color: #666666;
+      line-height: 28px;
+    }
+  }
+}

src/views/videoDetailList/index.tsx

@@ -0,0 +1,84 @@
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+
+// import classes from './index.module.less'
+import styles from './index.module.less'
+import hotSearch from '@/components/hotSearch'
+import searchInput from '@/components/searchInput'
+import videoDetailItem from '@/components/videoDetailItem'
+import request from '@/helpers/request'
+import pagination from '@/components/pagination'
+export default defineComponent({
+  name: 'videoDetailList',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    hotSearch,
+    searchInput,
+    videoDetailItem,
+    pagination
+  },
+  setup(props, conent) {
+    const state = reactive({
+      title: props.title,
+      videoList: [],
+      pageInfo: {
+        // 分页规则
+        limit: 9, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [9, 20, 40, 50] // 选择限制显示条数
+      }
+    })
+
+    const getVideoList = async () => {
+      try {
+        const res = await request.post(
+          '/api-website/open/videoLessonGroup/page',
+          {
+            data: {
+              albumStatus: 'PASS',
+              page: state.pageInfo.page,
+              rows: state.pageInfo.limit
+            }
+          }
+        )
+        state.videoList = res.data.rows
+        state.pageInfo.total = res.data.total;
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    onMounted(() => {
+      getVideoList()
+    })
+    return () => (
+      <>
+        <div>
+          <div class="wall" style={{ height: '70px' }}></div>
+          <div class={styles.w1200}>
+            <div class={styles.section}>
+              <searchInput isWhile={true}></searchInput>
+              <hotSearch type={'search'}></hotSearch>
+            </div>
+            <div class={styles.videoList}>
+              {state.videoList.map(item => {
+                return <videoDetailItem detail={item}></videoDetailItem>
+              })}
+            </div>
+            <pagination
+              total={state.pageInfo.total}
+              v-model:page={state.pageInfo.page}
+              limit={state.pageInfo.limit}
+              pageSizes={state.pageInfo.page_size}
+              pagination={getVideoList}
+            />
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/views/videoDetailList/videoDetail.tsx

@@ -0,0 +1,91 @@
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+
+// import classes from './index.module.less'
+import detaile from '@/components/videoDetailItem/images/detaile.png'
+import courseIcon from './images/courseIcon.png'
+import peopleIcon from './images/peopleIcon.png'
+import teacherIcon from './images/teacherIcon.png'
+import TimetableIcon from './images/TimetableIcon.png'
+import styles from './index.module.less'
+import videoDetailItem from '@/components/videoDetailItem'
+import request from '@/helpers/request'
+import pagination from '@/components/pagination'
+export default defineComponent({
+  name: 'videoDetailList',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    videoDetailItem,
+    pagination
+  },
+  setup(props, conent) {
+    const state = reactive({
+      title: props.title,
+      videoList: [],
+      pageInfo: {
+        // 分页规则
+        limit: 9, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [9, 20, 40, 50] // 选择限制显示条数
+      }
+    })
+
+    const getVideoList = async () => {
+      try {
+        const res = await request.post(
+          '/api-website/open/videoLessonGroup/page',
+          {
+            data: {
+              albumStatus: 'PASS',
+              page: state.pageInfo.page,
+              rows: state.pageInfo.limit
+            }
+          }
+        )
+        state.videoList = res.data.rows
+        state.pageInfo.total = res.data.total;
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    onMounted(() => {
+      getVideoList()
+    })
+    return () => (
+      <>
+        <div>
+          <div class="wall" style={{ height: '70px' }}></div>
+          <div class={[styles.w1200,styles.detailWrap]}>
+          <div class={styles.detailLeft}>
+            <img src={detaile} class={styles.detailTopImg} alt="" />
+            <div class={styles.courseWrap}>
+            <div class={styles.courseTitle}>
+              <img src={courseIcon} alt="" />
+              <span>课程介绍</span>
+            </div>
+            <div  class={styles.courseInfo} >
+              <p>小酷老师带您零基础学习竖笛，通过8节课的学习掌握竖笛演奏的基本方式，培养良好的吐息习惯。</p>
+            </div>
+            </div>
+          <pagination
+              total={state.pageInfo.total}
+              v-model:page={state.pageInfo.page}
+              limit={state.pageInfo.limit}
+              pageSizes={state.pageInfo.page_size}
+              pagination={getVideoList}
+            />
+          </div>
+          <div class={styles.detailRight}></div>
+
+
+          </div>
+        </div>
+      </>
+    )
+  }
+})