FilmList.vue 电影列表

<template><div class="mz-film-list"><!-- 正在热映 https://m.maizuo.com/v4/api/film/now-playing?__t=1533018029103&page=1&count=7 --><!-- 即将上映 https://m.maizuo.com/v4/api/film/coming-soon?__t=1533018029121&page=1&count=7 --><ul class="film-list-nav"><li @click="show(index)" v-for="(item,index) in types" :class="{[item.type]:true,active:iNow==index}" :key="item.id">{{item.title}}</li></ul><ul class="film-list-wrap"><router-link tag="li" :to="{name:'filmdetail',params:{id:item.id}}" v-for="item in arr" :key="item.id"><img class="fl film-item-img" :src="item.poster.thumbnail" /><div class="film-desc"><div class="film-grade" v-if="item.isNowPlaying==true">{{item.grade}}</div><div class="film-name">{{item.name}}</div><div class="film-intro">{{item.intro}}</div><template  v-if="item.isNowPlaying==true"><div class="film-counts"><span class="film-count-color">{{item.cinemaCount}}</span><span>家影院上映</span><span class="film-count-color" >{{item.watchCount}}</span><span>人购票</span></div></template><template v-else><div class="film-premiere-date"><span>12月31日上映</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>星期一</span></div></template></div><!-- <img class="fl film-item-img" src="https://pic.maizuo.com/usr/movie/aa7872b51e94b5f85a73a34bb93bd21b.jpg?x-oss-process=image/resize,m_fixed,h_0,w_300" /><div class="film-desc"><div class="film-grade">8.5</div><div class="film-name">我不是药神</div><div class="film-intro">一场关于“救赎”的拉锯战</div><div class="film-counts"><span class="film-count-color1">199</span><span>家影院上映</span><span class="film-count-color1" >0</span><span>人购票</span></div><div class="film-premiere-date"><span>12月31日上映</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>星期一</span></div></div> --></router-link></ul></div>
</template><script>
export default {name:"mz-film",data(){return {iNow:0,types:[{id:Math.random(),type:"now-playing",title:"正在热映"},{id:Math.random(),type:"coming-soon",title:"即将上映"}],page:1,count:7,isLoaded:true,arr:[]}},methods:{show(index){//数据初始化this.iNow = index;this.isLoaded = true;this.page = 1;this.arr = [];this.getFilms();},getFilms(){if(!this.isLoaded){return;}let params = {__t:Date.now(),page:this.page,count:this.count};let url = `http://localhost:9000/mz/v4/api/film/${this.types[this.iNow].type}`;this.$http.get(url,{params}).then(res=>{this.arr=this.arr.concat(res.data.data.films);console.log(this.arr);if(res.data.data.films.length == 0){this.isLoaded = false;}});}},created(){this.getFilms();},mounted(){window.onscroll = () =>{let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;let scrollHeight = document.body.scrollHeight;let clientHeight = document.documentElement.clientHeight;if(scrollTop + clientHeight == scrollHeight){if(this.isLoaded){this.page++;console.log("到底了",this.page);this.getFilms();}}};}
}
</script>
<style>
.mz-film-list{padding-left: 15px;padding-right: 15px;}
.film-list-nav {height: 46px;margin: 0 auto;border-bottom: solid #fe6e00 1px;
}.film-list-nav li{float: left;width: 50%;height: 100%;text-align: center;font-size: 16px;line-height: 46px;color: #6a6a6a;cursor: pointer;
}
.film-list-nav li.active {color: #fe6e00; border-bottom: solid;
}.film-list-wrap li{width:345px; height: 125px;padding: 20px 0;border-bottom: dashed 1px #c9c9c9;cursor: pointer;}.film-list-wrap .film-item-img {width: 60px;float: left;overflow: hidden;
}.film-list-wrap .film-desc {width: 75%;padding-left: 15px;display: inline-block;
}
.film-list-wrap .film-desc .film-grade {float: right;font-size: 16px;line-height: 32px;color: #fc7103;
}
.film-list-wrap .film-desc .film-intro{color: #8e8e8e;font-size: 12px;line-height: 32px;
}
.film-list-wrap .film-desc .film-name {font-size: 16px; line-height: 32px;color: #000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.film-list-wrap .film-desc .film-counts {line-height: 32px;line-height: 24px;color: #8e8e8e;font-size: 12px;
}
.film-list-wrap .film-desc .film-count-color {color: #8aa2bf;}
.film-list-wrap .film-desc .film-premiere-date {line-height: 32px;line-height: 24px;color: #ffb375;font-size: 12px;
}
</style>

FilmDetail.vue

详情页,没写样式

<template><div class="mz-film-detail">mz-film-detail xxx {{film}}</div>
</template><script>
export default {name: "mz-detail",props:["id"],data () {return {film:{},}},methods:{getFilmDeatil(){//now-playing | coming-soon//https://m.maizuo.com/v4/api/film/4266?__t=1533093597327let params = {__t:Date.now()};  let url = `http://localhost:9000/mz/v4/api/film/${this.id}`;this.$http.get(url,{params}).then(res=>{ this.film = res.data.data.film;});}},created(){  this.getFilmDeatil();}
}
</script>
<style>
.mz-film-list{padding-left: 15px;padding-right: 15px;}</style>

Cinema.vue

影院详情

<template><div class="mz-cinema"><dl class="district" v-for="(item,key,index) in oCinema" :key="item.id"><template v-if="index==0"><dt @click="show(item)" class="title">{{item.name}}</dt><!-- //{{item.data}} --><dd v-show="!item.isShow" class="wraper" v-for="obj in item.data" :key="obj.id"><p>{{obj.name}}}</p><p>{{obj.address}}}</p><p>距离未知</p></dd> </template><template v-else-if="index!=0"><dt @click="show(item)" class="title">{{item.name}}</dt><!-- //{{item.data}} --><dd v-show="item.isShow" class="wraper" v-for="obj in item.data" :key="obj.id"><p>{{obj.name}}}</p><p>{{obj.address}}}</p><p>距离未知</p></dd> </template><!-- <dt class="title">市南区</dt><dd class="wraper"><p>横店电影城青岛中山路店</p><p>青岛市市南区中山路６７号乐喜客来广场２-４层</p><p>距离未知</p></dd>  --> </dl></div>
</template><script>
import {mapActions,mapMutations,mapState,mapGetters} from "vuex";
export default {name: "mz-cinema",data() {return {oCinema:{}, }},methods:{ ...mapActions({yingyuan:"yingyuanAction"}),show(item){ item.isShow = !item.isShow;console.log(item.isShow);},getCinemas(){//https://m.maizuo.com/v4/api/cinema?__t=1533103317490let url = "http://localhost:9000/mz/v4/api/cinema";let params = {params:{__t:Date.now()}};this.$http.get(url,params).then(res=>{this.arr = res.data.data.cinemas;let cinemas = res.data.data.cinemas;let oCinema = {};//数据初始化cinemas.forEach(item => {//console.log("item:",item.id,item.name,JSON.stringify(item.district));//shi-nan-quif(oCinema[item.district.pinyin]){//在每个区里面添加数据oCinema[item.district.pinyin].data.push({id:item.id,name:item.name,pinyin:item.pinyin,address:item.address});} else {oCinema[item.district.pinyin] = {id:Math.random(),name:item.district.name,isShow:false,data:[{id:item.id,name:item.name,pinyin:item.pinyin,address:item.address}]}; } });this.oCinema = oCinema;});}},created(){this.getCinemas();this.yingyuan() },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>.district .title {height: 40px;line-height: 40px;font-size: 14px;padding-left: 16px;background: #e1e1e1;margin-bottom: 1px;color: #636363;cursor: pointer;
}.district .wraper{margin: 0 auto;border-bottom: 1px solid #e1e1e1;cursor: pointer;min-width: 320px;
}
</style>