17.vue移動端項目二

標籤：for   rop   temp   limit   idt   onscroll   auto   address   dex   

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

影院詳情

<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=1533103317490      let 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-qu          if(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>

17.vue移動端項目二