基本完成

2025-11-05 10:37:23 +08:00
parent bd12e4998b
commit 1f51334015
5 changed files with 204 additions and 30 deletions
--- 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"
  }
--- 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 {
--- 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>
+</style>
--- 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 {
--- a/src/utils.js
+++ b/src/utils.js
@@ -0,0 +1,4 @@
+function requset(url) {
+  return fetch(url).then((res) => res.json());
+}
+export default requset;