17.vue移动端项目二

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>

原文地址：https://www.cnblogs.com/zhongchao666/p/9463028.html