feat: 添加电影影评

src/components/Common/ReviewItem.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="reviewItem">
+    <router-link
+      :to="`/review/${review.id}`"
+    >
+      <h3>{{ review.title }}</h3>
+      <div class="authorDetail">
+        <strong>{{ review.author.name }}</strong>
+        <star
+          :average="average"
+          :length="0.24"
+        />
+      </div>
+      <p>{{ review.summary }}</p>
+    </router-link>
+  </div>
+</template>
+
+<script>
+import Star from './Star';
+
+export default {
+  name: 'ReviewItem',
+
+  components: {
+    Star,
+  },
+
+  props: ['review'],
+
+  computed: {
+    average() {
+      const { value, max } = this.review.rating;
+      return (value / max * 10); // eslint-disable-line
+    },
+  },
+};
+</script>
+
+<style scoped>
+.reviewItem {
+  padding: 0.2rem 0.36rem 0.3rem;
+}
+
+h3 {
+  color: #494949;
+  font-weight: 500;
+  font-size: 0.34rem;
+  line-height: 1.41;
+  margin-bottom: 0.12rem;
+}
+
+strong {
+  color: #494949;
+  font-size: 0.24rem;
+  margin-right: 0.04rem;
+}
+
+.authorDetail {
+  display: flex;
+  align-items: center;
+}
+
+p {
+  color: #aaa;
+  font-size: 0.24rem;
+  line-height: 1.5;
+  margin-top: 0.1rem;
+}
+</style>

src/components/Template.vue

@@ -6,11 +6,6 @@
 <script>
 export default {
   name: 'Template',
-  data() {
-    return {
-      msg: 'template',
-    };
-  },
 };
 </script>
 

src/containers/Comments.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="comments">
+    comments
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Comments',
+};
+</script>
+
+<style scoped>
+</style>

src/containers/MovieDetail.vue

@@ -12,6 +12,22 @@
           :comment="item"
           :key="item.id"
         />
+        <router-link
+          :to="`/comments/${currentMovie.id}`"
+          class="goCommentsOrReviews"
+        >查看全部短评</router-link>
+      </div>
+      <div class="reviews">
+        <h2>{{ `${currentMovie.title}的影评(${currentMovie.reviews_count})` }}</h2>
+        <review-item
+          v-for="item in currentMovie.popular_reviews"
+          :review="item"
+          :key="item.id"
+        />
+        <router-link
+          :to="`/reviews/${currentMovie.id}`"
+          class="goCommentsOrReviews"
+        >查看全部影评</router-link>
       </div>
       <page-end />
     </section>
@@ -23,6 +39,7 @@ import { mapState } from 'vuex';
 import TopHeader from '../components/Common/TopHeader';
 import Infos from '../components/MovieDetail/Infos';
 import CommentItem from '../components/Common/CommentItem';
+import ReviewItem from '../components/Common/ReviewItem';
 import PageEnd from '../components/Common/PageEnd';
 
 export default {
@@ -33,6 +50,7 @@ export default {
     Infos,
     PageEnd,
     CommentItem,
+    ReviewItem,
   },
 
   data() {
@@ -55,10 +73,19 @@ export default {
   padding-top: 1.34rem;
 }
 
-.comments h2 {
+h2 {
   font-size: 0.3rem;
   margin: 0.6rem auto 0.3rem;
   color: #aaa;
   width: 7.14rem;
 }
+
+.goCommentsOrReviews {
+  display: block;
+  text-align: center;
+  padding: 0.3rem 0;
+  font-size: 0.32rem;
+  color: #42bd56;
+  font-weight: bold;
+}
 </style>

src/containers/Review.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="review">
+    Review
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Review',
+};
+</script>
+
+<style scoped>
+</style>

src/containers/Reviews.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="reviews">
+    Reviews
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Reviews',
+};
+</script>
+
+<style scoped>
+</style>

src/router/index.js

@@ -6,6 +6,9 @@ import more from './routes/more';
 import tag from './routes/tag';
 import error from './routes/error';
 import search from './routes/search';
+import comments from './routes/comments';
+import review from './routes/review';
+import reviews from './routes/reviews';
 import store from './../store';
 import * as types from './../store/mutation-types';
 
@@ -19,6 +22,9 @@ const router = new Router({
     more,
     tag,
     search,
+    comments,
+    review,
+    reviews,
     error, // 404页面一定要在最后面
   ],
 });

src/router/routes/comments.js

@@ -0,0 +1,13 @@
+import Comments from '../../containers/Comments';
+import store from '../../store';
+import * as types from '../../store/mutation-types';
+
+export default {
+  path: '/comments/:currentMovieId',
+  component: Comments,
+  beforeEnter: (to, before, next) => {
+    document.title = '短评 - 电影 - 豆瓣';
+    store.commit(types.LOADING_FLAG, false);
+    next();
+  },
+};

src/router/routes/review.js

@@ -0,0 +1,13 @@
+import Review from '../../containers/Review';
+import store from '../../store';
+import * as types from '../../store/mutation-types';
+
+export default {
+  path: '/review/:currentReviewId',
+  component: Review,
+  beforeEnter: (to, before, next) => {
+    document.title = '影评 - 电影 - 豆瓣';
+    store.commit(types.LOADING_FLAG, false);
+    next();
+  },
+};

src/router/routes/reviews.js

@@ -0,0 +1,13 @@
+import Reviews from '../../containers/Reviews';
+import store from '../../store';
+import * as types from '../../store/mutation-types';
+
+export default {
+  path: '/reviews/:currentMovieId',
+  component: Reviews,
+  beforeEnter: (to, before, next) => {
+    document.title = '影评 - 电影 - 豆瓣';
+    store.commit(types.LOADING_FLAG, false);
+    next();
+  },
+};