08.详情页面

详情页面简单实现

效果图

1.编写Detail页面

//===>src/views/Film/Detail.vue
<template>
  <div v-if="filminfo">
    <img :src="filminfo.poster" class="poster" />
    <h2>{{filminfo.name}}</h2>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      filminfo: null
    };
  },
  props: ["id"],
  mounted() {
    console.log("要id获取详情信息", this);
    axios({
      url: `https://m.maizuo.com/gateway?filmId=${this.$route.params.id}&k=9160839`,
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"159065562332628866547713"}',
        "X-Host": "mall.film-ticket.film.info"
      }
    }).then(res => {
      console.log(res.data);
      this.filminfo = res.data.data.film;
    });
  }
};
</script>

<style lang="scss" scoped>
.poster {
  width: 100%;
}
</style>

效果

详情轮播

写一个动态轮播组件
Swiper的用法，还是去查之前的官网。这里，我们给Swiper组件写了自定义属性myclassname，目的是DetailSwiper.vue组件在mounted生命周期中，通过new Swiper()方法，new出了对应的组件不同的名字（不设置或者设置成一样的话，渲染的时候不知道谁对谁，会出现错乱问题。）vue拿着他们的class去根据new Swiper()设置的名字去渲染

//===>src/views/Detail/DetailSwiper.vue
<template>
  <div class="swiper-container">
    <div class="swiper-wrapper filmswiper">
      <slot></slot>
    </div>
    <div class="swiper-pagination film-swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  props: ["perview", "myclassname"],
  mounted() {
    console.log("swiper-mounted");
    new Swiper("." + this.myclassname, {
      slidesPerView: this.perview,
      spaceBetween: this.myclassname === "actorswiper" ? 20 : 10,
      freeMode: true
    });
  }
};
</script>

<style lang="scss" scoped>
.swiper-wrapper {
  img {
    width: 100%;
  }
}
.film-swiper-pagination {
  text-align: right;
}
</style>

引入组件到Detail页面

//===>src/views/Film/Detail.vue
<template>
  <div v-if="filminfo">
    <img :src="filminfo.poster" class="poster" />
    <h2>{{filminfo.name}}</h2>

    <h3>演职人员</h3>
    <swiper perview="4" class="actorswiper" myclassname="actorswiper">
      <div class="swiper-slide" v-for="data in filminfo.actors" :key="data.name">
        <img :src="data.avatarAddress" />
        <p>{{data.name}}</p>
      </div>
    </swiper>
    <h3>剧照</h3>
    <swiper perview="3" class="photoswiper" myclassname="photoswiper">
      <div class="swiper-slide" v-for="(data,index) in filminfo.photos" :key="index">
        <img :src="data" />
      </div>
    </swiper>
  </div>
</template>
<script>
import axios from "axios";
import swiper from "@/views/Detail/DetailSwiper";
export default {
  data() {
    ...
  },
  props: ["id"],
  mounted() {
   ...
  },
  components: {
    swiper
  }
};
</script>

<style lang="scss" scoped>
.poster {
  width: 100%;
}
</style>

最终效果