From 1f51334015efb5a5a7e04479f4d64c5ce9cb1336 Mon Sep 17 00:00:00 2001
From: NCJOAQ <2627723488@qq.com>
Date: Wed, 5 Nov 2025 10:37:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                |   1 +
 src/pages/home/components/MyMostPopular.vue |  69 +++++++++---
 src/pages/home/components/MyMovieList.vue   | 115 +++++++++++++++++++-
 src/pages/home/index.vue                    |  45 ++++++--
 src/utils.js                                |   4 +
 5 files changed, 204 insertions(+), 30 deletions(-)
 create mode 100644 src/utils.js

diff --git a/package.json b/package.json
index 61361b3..fa2bb60 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "less": "^4.4.2",
+    "prettier": "3.6.2",
     "vite": "^7.1.11",
     "vite-plugin-vue-devtools": "^8.0.3"
   }
diff --git a/src/pages/home/components/MyMostPopular.vue b/src/pages/home/components/MyMostPopular.vue
index 11ee500..8f5b95a 100644
--- a/src/pages/home/components/MyMostPopular.vue
+++ b/src/pages/home/components/MyMostPopular.vue
@@ -2,10 +2,18 @@
   <div class="mostpopular">
     <p class="title">最受好评电影</p>
     <ul>
-      <li class="movie" v-for="movie in data">
+      <li class="movie" v-for="movie in displayData" :key="movie.id || movie.nm">
         <a href="#">
-          <img :src="movie.img" alt="">
-          <h5>{{ movie.name }}</h5>
+          <div class="img">
+            <div class="mark">
+              <div class="score" v-if="movie.sc">观众评分&nbsp;&nbsp;{{ movie.sc }}</div>
+              <div class="score" v-else>
+                <template v-if="movie.wish">{{ movie.wish }}人想看</template>
+              </div>
+            </div>
+            <img :src="movie.img" alt="">
+          </div>
+          <h5>{{ movie.nm }}</h5>
         </a>
       </li>
     </ul>
@@ -16,16 +24,20 @@ export default {
   inject: {
     data: {
       from: "mostpopular",
-      default: [{ name: "啥也没有", img: "src/assets/img/1.png" },
-      { name: "啥也没有", img: "src/assets/img/1.png" },
-      { name: "啥也没有", img: "src/assets/img/1.png" },
-      { name: "啥也没有", img: "src/assets/img/1.png" },
-      { name: "啥也没有", img: "src/assets/img/1.png" },
-      { name: "啥也没有", img: "src/assets/img/1.png" },
-      { name: "啥也没有", img: "src/assets/img/1.png" },
-      { name: "啥也没有", img: "src/assets/img/1.png" },
-      { name: "啥也没有", img: "src/assets/img/1.png" },
-      { name: "啥也没有", img: "src/assets/img/1.png" }]
+      default: () => ({})
+    }
+  },
+  computed: {
+    displayData() {
+      if (!this.data || !this.data.length) {
+        return [
+          { nm: "啥也没有", img: "src/assets/img/1.png", globalRealse: true },
+          { nm: "啥也没有", img: "src/assets/img/1.png", globalRealse: true },
+          { nm: "啥也没有", img: "src/assets/img/1.png", globalRealse: true },
+          { nm: "啥也没有", img: "src/assets/img/1.png", globalRealse: false }
+        ];
+      }
+      return this.data;
     }
   }
 }
@@ -58,6 +70,7 @@ export default {
       margin-right: 10px;
       flex-shrink: 0;
 
+
       >a {
         width: 100%;
         height: 100%;
@@ -65,9 +78,37 @@ export default {
         flex-direction: column;
         justify-content: space-between;
 
-        >img {
+        >.img {
           width: 100%;
           height: 115px;
+          position: relative;
+
+          >img {
+            width: 100%;
+            height: 100%;
+          }
+
+          .ps {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+          }
+
+          >.mark {
+            .ps();
+            width: 100%;
+            height: 35px;
+            background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
+
+            >.score {
+              .ps();
+              font-size: 11px;
+              color: #faaf00;
+              font-weight: 600;
+              margin: 5px;
+            }
+          }
+
         }
 
         >h5 {
diff --git a/src/pages/home/components/MyMovieList.vue b/src/pages/home/components/MyMovieList.vue
index 98800d3..14b8da8 100644
--- a/src/pages/home/components/MyMovieList.vue
+++ b/src/pages/home/components/MyMovieList.vue
@@ -1,18 +1,125 @@
 <template>
   <div class="movielist">
+    <div class="movie" v-for="movie in data">
+      <div class="img">
+        <img :src="movie.img" alt="">
+      </div>
+      <div class="info">
+        <div class="txt">
+          <p>{{ movie.nm }}</p>
+          <p v-if="movie.sc && movie.globalReleased">观众评<span class="sc">{{ movie.sc }}</span></p>
+          <p v-else-if="movie.globalReleased">暂无评分</p>
+          <p v-else><span class="sc">{{ movie.wish }}人想看</span></p>
+          <p>主演：{{ movie.star }}</p>
+          <p></p>
+        </div>
 
+        <div class="btn-box">
+          <div class="btn">购买</div>
+        </div>
+      </div>
+
+    </div>
   </div>
 </template>
 <script>
+import requset from "@/utils.js";
 export default {
-
-}
+  inject: {
+    data: {
+      from: "movieList",
+      default: () => ({}),
+    },
+  },
+};
 </script>
 <style lang="less">
 .movielist {
   width: 100%;
   min-height: 200px;
-  background-color: white;
 
+  >.movie {
+    background-color: white;
+    padding-left: 15px;
+    width: 375px;
+    height: 114px;
+    padding-top: 12px;
+    display: flex;
+    margin-bottom: 1px;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 14px;
+
+    .img {
+      width: 64px;
+      min-width: 64px;
+      height: 90px;
+      overflow: hidden;
+      >img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+
+    >.info {
+      display: flex;
+
+
+      >.txt {
+        width: 224px;
+
+        >p {
+          font-size: @ssfont;
+          color: @font-color2;
+          //不换行，超出省略
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          line-height: 1;
+          margin-top: 6px;
+
+          &:first-child {
+            font-size: @mfont;
+            font-weight: 600;
+            color: black;
+            margin-bottom: 7px;
+            margin-top: 0;
+          }
+
+          >.sc {
+            white-space: nowrap;
+            color: #faaf00;
+            font-weight: 700;
+            font-size: @sfont;
+          }
+        }
+      }
+
+
+      >.btn-box {
+        overflow: hidden;
+        // padding: 0 5px;
+
+        >.btn {
+          width: 54px;
+          height: 28px;
+          background-color: #F03D37;
+          border-radius: 13.5px;
+          font-size: @ssfont;
+          color: white;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          transform: translateY(15px);
+        }
+      }
+    }
+
+
+    >* {
+      flex-wrap: 0;
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 354f28e..45842c0 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -5,28 +5,49 @@
     <Main />
     <Footer />
   </div>
-
 </template>
 <script>
-import Headera from "@/pages/home/components/MyHeader.vue"
-import Nav from "@/pages/home/components/MyNav.vue"
-import Main from '@/pages/home/components/MyMain.vue'
-import Footer from "@/pages/home/components/MyFooter.vue"
+import Headera from "@/pages/home/components/MyHeader.vue";
+import Nav from "@/pages/home/components/MyNav.vue";
+import Main from "@/pages/home/components/MyMain.vue";
+import Footer from "@/pages/home/components/MyFooter.vue";
+import requset from "@/utils";
+import { computed } from "vue";
 export default {
+  data() {
+    return { rated: {}, movies: {} };
+  },
+  mounted() {
+    requset("http://101.35.148.193:3000/api/rated/list").then((data) => {
+      if (data.success) {
+        this.rated = data.data;
+      } else {
+        this.rated = undefined;
+      }
+    });
+    requset("http://101.35.148.193:3000/api/movies/list").then((data) => {
+      if (data.success) {
+        this.movies = data.data;
+      } else {
+        this.rated = undefined;
+      }
+    });
+  },
   components: {
     Headera,
     Nav,
     Main,
-    Footer
-  }, provide() {
+    Footer,
+  },
+  provide() {
     return {
       // 最受好评的电影数据依赖
-      // mostpopular: "",
+      mostpopular: computed(() => this.rated),
       // 电影列表数据依赖
-      // movelist;""
-    }
-  }
-}
+      movieList: computed(() => this.movies),
+    };
+  },
+};
 </script>
 <style lang="less" scoped>
 .home {
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..cb20f96
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,4 @@
+function requset(url) {
+  return fetch(url).then((res) => res.json());
+}
+export default requset;