猫眼电影

虎胆小肥羊
191 阅读8分钟

DetailMovie.vue组件

<template>
  <div class="detailMovie">
    <div class="top">
      <img class="image" :src="detailmovie.img" alt="" />
      <div class="content">
        <h2>{{detailmovie.nm}}</h2>
        <p>{{detailmovie.enm}}</p>
        <p>{{detailmovie.cat}}</p>
        <p>{{detailmovie.ver}}</p>
        <p>{{detailmovie.star}}</p>
        <p>{{detailmovie.pubDesc}}</p>
      </div>
    </div>
    <div class="jj">
      <div>简介</div>
      <div>{{detailmovie.dra}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailMovie",
  computed:{
    detailmovie(){
      return this.$store.state.detailmovie
    }
  }
};
</script>

<style scoped>
.detailMovie{
  background: #662929;
  height: 100vh;
  color: white;
  padding: 10px;
}
.top{
  display: flex;
}
.image{
  width: 120px;
}
.content{
  margin-left: 10px;
}
.jj{
  margin-top: 10px;
}

</style>

Header.vue组件

<template>
  <div class="header">
    <img src="../assets/images/logo.png" alt="" />
    <input class="search" type="text" placeholder="请输入电影名" />
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style>
.header {
  background-color: #e5e9f2;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  align-content: center;
}
.search {
    height: 40px;
    outline: none;
    border: none;
    background: white;
    border-radius: 10px;
    text-indent: 10px;
  }
</style>

HotMovie.vue组件

<template>
  <div class="hotMovie">
    <div class="hot">正在热映</div>
    <MoreComingList></MoreComingList>
    <div class="list">
      <div @click="$router.push('/movie/'+item.id)" class="item" v-for="(item,index) in movieList" :key="index">
        <img :src="item.img" class="image" />
        <div class="content">
          <h2>{{item.nm}}</h2>
          <p>2D/3D：{{item.version}}</p>
          <p>主演：{{item.star}}</p>
          <p>上映时间：{{item.rt}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MoreComingList from "./MoreComingList.vue";
export default {
  name: "HotMovie",
  components: {
    MoreComingList,
  },
  computed:{
    movieList(){
      return this.$store.state.movieOnInfoList.movieList
    }
  }
};
</script>

<style scoped>

.hot {
  background: #df2d2d;
  color: white;
  text-align: center;
  height: 35px;
  line-height: 35px;
}
.list{
  margin-top: 10px;
  background: #eee;
}
.item {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.image {
  width: 110px;
  height: 160px;
}
.content{
  margin-left:10px;
  color: #666;
}
</style>

MoreComingList.vue组价

<template>
  <div class="moreComingList">
    <div class="title">近期最受期待</div>
    <div class="list">
      <div class="item" v-for="(item, index) in moreComingList" :key="index">
        <img class="image" :src="item.img" alt="" />
        <div class="name">{{ item.nm }}</div>
        <div class="time">{{ item.comingTitle }}</div>
        <div class="wish">{{ item.wish }}人想看</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MoreComingList",
  computed: {
    // 返回近期最受期待的电影数组
    moreComingList() {
      return this.$store.state.moreComingList.coming;
    },
  },
};
</script>

<style scoped>
.moreComingList {
  padding: 0 10px;
}
.title {
  color: #666;
}
.list {
  display: flex;
  width: 100vw;
  overflow: scroll;
  margin-top: 10px;
}
.item {
  width: 85px;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  font-size: 12px;
  position: relative;
}
.image {
  width: 85px;
  height: 115px;
}
.name {
  color: black;
}
.time {
  color: #666;
  white-space: nowrap;
  overflow: hidden;
}
.wish{
  position: absolute;
  top:95px;
  color: #faaf00;
  text-align: center;
  width: 85px;
}
</style>

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [

    {
        path: '/',
        component: () =>
            import ('../components/HotMovie.vue')
    },
    {
        path: '/movie/:movieId',
        props: true,
        component: () =>
            import ('../components/DetailMovie.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

store index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        movieOnInfoList: {
            coming: [],
            movieIds: [1277939, 1250700, 1230121, 1225993, 342146, 503342, 334625, 1277982, 1219701, 1178432, 1260354, 359377, 1298794, 1211270, 1285563, 1280694, 1222078, 1258394, 1242130, 1190383, 1263074, 1298696, 1238399, 1170287, 360504, 1227611, 1240752, 1243361, 1215605, 1234382, 1284333, 1296308, 672155, 1200783, 1245196, 1296325, 1284264, 1285074, 14106, 1299776, 1299556, 1299565, 789, 502751, 1299754, 1240821, 1242975, 1227456, 1263987, 1282858, 1299808, 1297565, 1299807, 1250668, 1227013, 1261165, 1276038, 1280943, 1278409, 1260459, 1239976, 1203775, 1246335, 1219314],
            "stid": "576591972453269000",
            "stids": [
                { "movieId": 1277939, "stid": "576591972453269000_a1277939_c0" },
                { "movieId": 1250700, "stid": "576591972453269000_a1250700_c1" },
                { "movieId": 1230121, "stid": "576591972453269000_a1230121_c2" },
                { "movieId": 1225993, "stid": "576591972453269000_a1225993_c3" },
                { "movieId": 342146, "stid": "576591972453269000_a342146_c4" },
                { "movieId": 503342, "stid": "576591972453269000_a503342_c5" },
                { "movieId": 334625, "stid": "576591972453269000_a334625_c6" },
                { "movieId": 1277982, "stid": "576591972453269000_a1277982_c7" },
                { "movieId": 1219701, "stid": "576591972453269000_a1219701_c8" },
                { "movieId": 1178432, "stid": "576591972453269000_a1178432_c9" },
                { "movieId": 1260354, "stid": "576591972453269000_a1260354_c10" },
                { "movieId": 359377, "stid": "576591972453269000_a359377_c11" }
            ],
            "total": 64,
            "movieList": [{ "id": 1277939, "haspromotionTag": false, "img": "http://p0.meituan.net/moviemachine/b2c5c74d33e45745fd3462e44b3698e18336620.jpg", "version": "v2d imax", "nm": "我和我的祖国", "preShow": false, "sc": 9.7, "globalReleased": true, "wish": 578308, "star": "黄渤,张译,吴京", "rt": "2019-09-30", "showInfo": "今天218家影院放映3496场", "showst": 3, "wishst": 0 }, { "id": 1250700, "haspromotionTag": false, "img": "http://p0.meituan.net/movie/4c01895cfd53e82f7c3048c407974a6b4739229.jpg", "version": "v2d imax", "nm": "攀登者", "preShow": false, "sc": 9.4, "globalReleased": true, "wish": 558579, "star": "吴京,章子怡,张译", "rt": "2019-09-30", "showInfo": "今天213家影院放映2723场", "showst": 3, "wishst": 0 }, { "id": 1230121, "haspromotionTag": false, "img": "http://p0.meituan.net/movie/cddf92d0ac6a0db837a1bc488b241c42267927.jpg", "version": "v2d imax", "nm": "中国机长", "preShow": false, "sc": 9.4, "globalReleased": true, "wish": 561040, "star": "张涵予,欧豪,杜江", "rt": "2019-09-30", "showInfo": "今天215家影院放映2498场", "showst": 3, "wishst": 0 }, { "id": 1225993, "haspromotionTag": false, "img": "http://p0.meituan.net/movie/cbfd89ee598b5837c7d6b7bb6f6d9e0a1744668.jpg", "version": "v3d", "nm": "雪人奇缘", "preShow": false, "sc": 0, "globalReleased": false, "wish": 55816, "star": "汪可盈,张子枫,丹增·诺盖·特雷纳", "rt": "2019-10-01", "showInfo": "今天1家影院放映1场", "showst": 4, "wishst": 0 }, { "id": 342146, "haspromotionTag": false, "img": "http://p1.meituan.net/movie/542bf28aa45e7239c44046ca974d86f0856817.jpg", "version": "", "nm": "犯罪现场", "preShow": false, "sc": 0, "globalReleased": false, "wish": 37855, "star": "古天乐,张继聪,宣萱", "rt": "2019-10-12", "showInfo": "2019-10-12 下周六上映", "showst": 4, "wishst": 0 }, { "id": 503342, "haspromotionTag": false, "img": "http://p0.meituan.net/movie/6826f897e8d6f598ae8e9ed3b80ba0f44345302.jpg", "version": "v3d", "nm": "双子杀手", "preShow": false, "sc": 0, "globalReleased": false, "wish": 34222, "star": "威尔·史密斯,玛丽·伊丽莎白·温斯特德,克里夫·欧文", "rt": "2019-10-18", "showInfo": "2019-10-18上映", "showst": 4, "wishst": 0 }, { "id": 334625, "haspromotionTag": false, "img": "http://p0.meituan.net/moviemachine/592ec23e6200e762e6a05d59c9937ec42083713.jpg", "version": "", "nm": "美食大冒险之英雄烩", "preShow": false, "sc": 0, "globalReleased": false, "wish": 81929, "star": "孟宇,张喆,郭政建", "rt": "2019-10-02", "showInfo": "2019-10-02 本周三重映", "showst": 4, "wishst": 0 }, { "id": 1277982, "haspromotionTag": false, "img": "http://p0.meituan.net/movie/d5bc40a51534c26acbafd49c1dc484e24634457.jpg", "version": "", "nm": "决胜时刻", "preShow": false, "sc": 9.2, "globalReleased": true, "wish": 20655, "star": "唐国强,刘劲,黄景瑜", "rt": "2019-09-20", "showInfo": "今天65家影院放映141场", "showst": 3, "wishst": 0 }, { "id": 1219701, "haspromotionTag": false, "img": "http://p0.meituan.net/movie/c8c17eb7c9c82d189771e3bfdd4d95061444262.jpg", "version": "", "nm": "急速逃脱", "preShow": false, "sc": 0, "globalReleased": false, "wish": 11204, "star": "沃坦·维尔克·默林,汉娜·赫茨施普龙,克里斯蒂安娜·保罗", "rt": "2019-10-12", "showInfo": "2019-10-12 下周六上映", "showst": 4, "wishst": 0 }, { "id": 1178432, "haspromotionTag": false, "img": "http://p0.meituan.net/movie/b4eaaffc5b0dac68ce9503b5bfba7d2e1246458.jpg", "version": "", "nm": "丑娃娃", "preShow": false, "sc": 0, "globalReleased": false, "wish": 9151, "star": "凯莉·克拉克森,徐畅繁,尼克·乔纳斯", "rt": "2019-10-04", "showInfo": "2019-10-04 本周五上映", "showst": 4, "wishst": 0 }, { "id": 1260354, "haspromotionTag": false, "img": "http://p0.meituan.net/movie/3e337ad3f8c0afd03a833f247742e7a22051226.jpg", "version": "", "nm": "亲密旅行", "preShow": false, "sc": 0, "globalReleased": false, "wish": 13391, "star": "沙俊伯,沙溢,姚晨", "rt": "2019-10-03", "showInfo": "2019-10-03 本周四上映", "showst": 4, "wishst": 0 }, { "id": 359377, "haspromotionTag": false, "img": "http://p0.meituan.net/movie/2918a5e403dde6e4254941968d7719ce3942369.jpg", "version": "", "nm": "罗小黑战记", "preShow": false, "sc": 9.3, "globalReleased": true, "wish": 167173, "star": "山新,郝翔海,皇贞季", "rt": "2019-09-07", "showInfo": "今天14家影院放映24场", "showst": 3, "wishst": 0 }],
        },
        detailmovie: {
            albumImg: "",
            availableEpisodes: 0,
            awardUrl: "",
            backgroundColor: "#662C29",
            bingeWatch: 6663,
            bingeWatchst: 0,
            cat: "剧情",
            comScorePersona: true,
            commented: false,
            dir: "陈凯歌,张一白,管虎,薛晓路,徐峥,宁浩,文牧野",
            distributions: [
                { movieScoreLevel: "9-10分", proportion: "92.44" },
                { movieScoreLevel: "5-8分", proportion: "7.24" },
                { movieScoreLevel: "1-4分", proportion: "0.32" }
            ],
            dra: "七位导演分别取材新中国成立70周年以来，祖国经历的无数个历史性经典瞬间。讲述普通人与国家之间息息相关密不可分的动人故事。聚焦大时代大事件下，小人物和国家之间，看似遥远实则密切的关联，唤醒全球华人共同回忆。",
            dur: 155,
            egg: false,
            enm: "My People，My Country",
            episodeDur: 155,
            episodes: 0,
            globalReleased: true,
            id: 1277939,
            img: "http://p0.meituan.net/moviemachine/b2c5c74d33e45745fd3462e44b3698e18336620.jpg",
            latestEpisode: 0,
            modcsSt: false,
            movieType: 0,
            multiPub: false,
            musicName: "我和我的祖国",
            musicNum: 2,
            musicStar: "王菲",
            nm: "我和我的祖国",
            onSale: true,
            onlinePlay: false,
            orderSt: 0,
            oriLang: "国语",
            photos: [
                "http://p0.meituan.net/85.115/movie/f3b173ad32919ca954784a9d77edf6c1103371.jpg@2500w_2500h_1l_0e",
                "http://p1.meituan.net/85.115/movie/6515e3860d06075b3aa4096972598b5150126.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/c257c00bb3486fdc487e942fc25c3d2a55694.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/bd01cc97f70715e3b9c2cde78f6bddf339354.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/a218a4eb9b79e46d8ca8fc562a99baaa26135.jpg@2500w_2500h_1l_0e",
                "http://p1.meituan.net/85.115/movie/8001dead23da3cab34f320efe2b0dfd564973.jpg@2500w_2500h_1l_0e",
                "http://p1.meituan.net/85.115/movie/44e47e0b2a4db388ffae41d0619118f5124491.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/aaaeff861a8cf4cdffbba51ea34c2f2f91080.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/e45d8f763ea635fda1600447ba5d566471860.jpg@2500w_2500h_1l_0e",
                "http://p1.meituan.net/85.115/movie/005bce514584add471d50fcda85f763e77857.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/a787f600c296e7b988957eab4f2c16fa49373.jpg@2500w_2500h_1l_0e",
                "http://p1.meituan.net/85.115/movie/837d2eb6e4cb62fb4a50108f74c0a8b239502.jpg@2500w_2500h_1l_0e",
                "http://p1.meituan.net/85.115/movie/5c14ef15cf29a7efdb292fa0febba99389415.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/31df07ecc9006959815f74d33112878780606.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/3bc0f70f386552a99ce02abe18b0206059415.jpg@2500w_2500h_1l_0e",
                "http://p1.meituan.net/85.115/movie/d556b51931c0dea3eea7ddb963adb9a346631.jpg@2500w_2500h_1l_0e",
                "http://p1.meituan.net/85.115/movie/1eccabe80b22dec06cab09b92052f81c76317.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/005e9cfd604ee33c5b034fdad3062b4877379.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/759f44afc814a09e28dfcf14138368a175419.jpg@2500w_2500h_1l_0e",
                "http://p0.meituan.net/85.115/movie/2a30e332aa13dcb721904699b8cd741445581.jpg@2500w_2500h_1l_0e"
            ],
            pn: 282,
            preScorePersona: false,
            proScore: 0,
            proScoreNum: 3,
            pubDesc: "2019-09-30 09:00大陆上映",
            rt: "2019-09-30",
            sc: 9.7,
            scm: "",
            scoreLabel: "猫眼购票评分",
            showst: 3,
            snum: 795941,
            src: "中国大陆",
            star: "黄渤,张译,韩昊霖",
            type: 0,
            vd: "http://maoyan.meituan.net/movie/videos/854x480872c58e1ab304a0ab1ff7a606bce115a.mp4",
            ver: "2D/IMAX 2D/中国巨幕/全景声",
            videoImg: "http://p1.meituan.net/moviemachine/1cc9dd2dc4911c29e99ab32771eecab67883519.jpg",
            videoName: "终极版预告片 献给每一位平凡而真实的中国人",
            videourl: "http://maoyan.meituan.net/movie/videos/854x480872c58e1ab304a0ab1ff7a606bce115a.mp4",
            viewedSt: 0,
            vnum: 27,
            vodFreeSt: 0,
            vodPlay: false,
            vodSt: 0,
            watched: 770520,
            wish: 578308,
            wishst: 0,
            version: "v2d imax"
        },
        moreComingList: {
            "coming": [{
                    "id": 1217023,
                    "img": "http://p0.meituan.net/85.115/movie/b5c913630f1fe53775d957b8f115ed5d929026.jpg",
                    "wish": 549435,
                    "wishst": 0,
                    "nm": "唐人街探案3",
                    "comingTitle": "2020年1月25日 周六"
                },
                {
                    "id": 1211269,
                    "img": "http://p0.meituan.net/85.115/moviemachine/2d4056b18bff5dfee1928db167cbb42890437.jpg",
                    "wish": 157709,
                    "wishst": 0,
                    "nm": "姜子牙",
                    "comingTitle": "2020年1月25日 周六"
                },
                {
                    "id": 1190122,
                    "img": "http://p0.meituan.net/85.115/movie/4bfb08bfe0b8dd20776c6efc4015de6d995158.jpg",
                    "wish": 124667,
                    "wishst": 0,
                    "nm": "叶问4",
                    "comingTitle": "12月20日 周五"
                },
                {
                    "id": 461076,
                    "img": "http://p0.meituan.net/85.115/moviemachine/7c0b961c49c2cc1a5d1ed4615beb8dbf6695755.jpg",
                    "wish": 116155,
                    "wishst": 0,
                    "nm": "紧急救援",
                    "comingTitle": "2020年1月25日 周六"
                },
                {
                    "id": 247949,
                    "img": "http://p0.meituan.net/85.115/moviemachine/58ee13be6dc60bf5e636cf915bbbaaa55787785.jpg",
                    "wish": 77456,
                    "wishst": 0,
                    "nm": "冰雪奇缘2",
                    "comingTitle": "11月22日 周五"
                },
                {
                    "id": 1217041,
                    "img": "http://p0.meituan.net/85.115/movie/63643ac762a8b8e50a1a9967dd0ba3dc694226.jpg",
                    "wish": 72692,
                    "wishst": 0,
                    "nm": "南方车站的聚会",
                    "comingTitle": "12月6日 周五"
                },
                {
                    "id": 246300,
                    "img": "http://p1.meituan.net/85.115/movie/b9abe12e6bd785d29abef9c98518eec62044645.jpg",
                    "wish": 70932,
                    "wishst": 0,
                    "nm": "一生有你",
                    "comingTitle": "11月29日 周五"
                },
                {
                    "id": 1250696,
                    "img": "http://p1.meituan.net/85.115/movie/6573aca4bed234dc22d44a0f2d419ac9477072.jpg",
                    "wish": 67000,
                    "wishst": 0,
                    "nm": "囧妈",
                    "comingTitle": "2020年1月25日 周六"
                },
                {
                    "id": 1217123,
                    "img": "http://p0.meituan.net/85.115/movie/7176eb3a1e76980ec711d2c8dc77dd52297157.jpg",
                    "wish": 58333,
                    "wishst": 0,
                    "nm": "中国女排",
                    "comingTitle": "2020年1月25日 周六"
                },
                {
                    "id": 1237938,
                    "img": "http://p1.meituan.net/85.115/movie/4abee68965dda5194d0c7e7e20111dc914241667.jpg",
                    "wish": 48196,
                    "wishst": 0,
                    "nm": "凌晨两点半2",
                    "comingTitle": "12月20日 周五"
                }
            ],
            "paging": { "hasMore": true, "limit": 10, "offset": 0, "total": 158 }
        }
    },
    mutations: {},
    actions: {},
    modules: {}
})

App.vue

<template>
  <div id="app">
    <Header></Header>
    <router-view/>
  </div>
</template>
<script>
import Header from './components/Header.vue'
export default {
  components:{
    Header,
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>
avatar
文章
阅读
粉丝