17.vue Mobile Project Two

Filmlist.vue Movie List

<template> <div class= "Mz-film-list" > <!--is aggressively https://m.maizuo.com/v4/api/film/now-playing?__t= 1533018029103&page=1&count=7-<!--coming soon 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 ">  <div class= "Film-desc" > <div class= "film-grade" v-if= "Item.isnowplaying==true" >{{item.grade}}</d iv> <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> Home Theater Release </span> <span class= "Film-count-color" >{{i Tem.watchcount}}</span><span> people Tickets </span> </div> </template> < Template v-else> <div class= "film-premiere-date" > <span>12 month 31st release &LT;/SPAN&GT;&LT;SP an>&nbsp;&nbsp;&nbsp;&nbsp;</span><span> Monday </span> </div> & Lt;/template> </div> <!-- <div class=" Film-desc "> <div class=" film-grade ">8.5</div> <div class=" Film-name "> I'm not a drug god </div&          Gt <div class= "Film-iNtro "> A tug of war on redemption </div> <div class=" film-counts "> <span class=" Film-count-color 1 ">199</span><span> Home theater release </span> <span class=" Film-count-color1 ">0</span>& Lt;span> people tickets </span> </div> <div class= "Film-premiere-date" > <span>1 February 31 release </span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span> Monday </span > </div> </div>--</router-link> </ul> </div></template& Gt;<script>export Default {name: "Mz-film", data () {return {inow:0, types:[{id:Math.random () , type: "Now-playing", Title: "Hot Map"}, {Id:Math.random (), type: "Coming-soon", Title: "Coming Soon"}], Page:1, cou      Nt:7, Isloaded:true, arr:[]}}, methods:{Show (index) {//Data initialization 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.scr      Olltop;      Let scrollheight = Document.body.scrollHeight;      Let clientheight = Document.documentElement.clientHeight;          if (scrolltop + clientheight = = scrollheight) {if (this.isloaded) {this.page++;          Console.log ("In the End", 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%;p adding-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:e Llipsis;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

Detail page, no write style

<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=1533093597327          let 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

Cinema details

<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= "ob J.id "> <p>{{obj.name}}}</p> <p>{{obj.address}}}</p> <p> distance Unknown &lt ;/p> </dd> </template> <template v-else-if= "index!=0" > <dt @click = "Show (i TEM) "class=" title ">{{item.name}}</dt> <!--//{{item.data}}--<dd v-show=" Item.isshow "C lass= "Wraper" v-for= "obj in Item.data": key= "obj.id" > <p>{{obj.name}}}</p> <p>{{obj .address}}}</p> <p> distance Unknown </p> </dd> </template> <!--<dt Clas s= "title" > Shinan District </dt&Gt <dd class= "Wraper" > <p> hengdian Movie City Qingdao Zhongshan Road store </p> <p> Qingdao 67th Zhong Shan Rd., 2-4 Floor, Lok Hei Plaza </p> &L T;p> distance Unknown </p> </dd>-</dl> </div></template><script>import {mapacti Ons,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=1533103317490 Let url = "http://localhost:9000/mz/v      4/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 = {}; Data initialization Cinemas.foreach (item = {//console.log ("item:", Item.id,item.name,json.stringify (ITEM.DIstrict)); Shi-nan-qu if (Ocinema[item.district.pinyin]) {//Add data to each zone Ocinema[item.district.pinyin]. Data.push ({id:item.id, name:item.name, Pinyin:item.pinyin, ad          Dress:item.address}); } else {Ocinema[item.district.pinyin] = {id:Math.random (), name:item.district . Name, Isshow:false, data:[{id:item.id, Name:item.nam           E, 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 SC    Oped>. 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>

17.vue Mobile Project two