admin

12_vuecli/mediaapp/src/views/tv/TvPage.vue

@@ -1,29 +1,29 @@
 <template>
     <div class="tv-container">
         <div class="tv-list">
-            <div class="tv-item">
+            <div class="tv-item" v-for="item in dataList" :key="item.id">
                 <div class="tv-img">
                     <div class="left-img">
-                        <img src="https://images.weserv.nl/?url=https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2918313491.jpg" alt="">
+                        <img :src="'https://images.weserv.nl/?url='+item.pic.normal" alt="">
                     </div>
                     <div class="right-img">
-                        <img src="https://images.weserv.nl/?url=https://img1.doubanio.com/view/photo/m/public/p2909919779.jpg" alt="" srcset="">
+                        <img :src="'https://images.weserv.nl/?url='+item.photos[0]" alt="" srcset="">
                     </div>
                 </div>
                 <div class="tv-info">
                     <div class="info-left">
-                        <div class="tv-title">难哄(2025)</div>
+                        <div class="tv-title">{{item.title}}({{item.year}})</div>
                         <div class="tv-rate">
-                            <TvRate :val="rateObj"></TvRate>
+                            <TvRate :val="item.rating"></TvRate>
                         </div>
-                        <div class="tv-int"> 2025 / 中国大陆 / 剧情 爱情 / 瞿友宁 / 白敬亭 章若楠 </div>
+                        <div class="tv-int"> {{item.card_subtitle}} </div>
                     </div>
                     <div class="info-right">
                         <i class="iconfont icon-xiangkan"></i>
                     </div>
                 </div>
                 <div class="tv-desc">
-                     <DescComp :val="testDesc"/>
+                     <DescComp :val="item.comment"/>
                 </div>
             </div>
         </div>
@@ -33,6 +33,7 @@
     .tv-list .tv-item{
         border-bottom: 1px solid #ccc;
         padding-bottom: .2rem;
+        margin-bottom: .2rem;
     }
     .tv-list{
         padding:.2rem
@@ -109,19 +110,38 @@ export default {
             rateObj:{
                 star_count:2.5,
                 value: 0
-            }
+            },
+            dataList:[]
         }
     },
     beforeMount() {
         this.$emit('changePage','1001')
     },
     created() {
-        axios.get("/api/subject_collection/tv_domestic/items?start=0&count=18").then((res)=>{
+        axios.get("/api/subject_collection/tv_domestic/items",{
+            params:{
+                count:10,
+                start:0
+            }
+        }).then((res)=>{
             console.log(res)
+            this.dataList = res.data.subject_collection_items;
         }).catch((err)=>{
             console.log(err)
         })
     },
+    mounted() {
+        let dom = document.documentElement;
+        window.onscroll = ()=>{
+            //scrollTop 滚动条滚动时距离顶部的距离
+            let scrollTop = dom.scrollTop;
+            // clientHeight 可视区域的高度
+            let clientHeight = dom.clientHeight;
+            // scrollHeight 滚动条的总高度
+            let scrollHeight = dom.scrollHeight;
+            console.log(scrollHeight,clientHeight,scrollTop)
+        }
+    },
     components:{
         TvRate,
         DescComp