17.vue移动端项目二
Posted zhongchao666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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> </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> </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移动端项目二的主要内容，如果未能解决你的问题，请参考以下文章
pbootcms对接微信扫码登录代码核心片段和步骤（前后端）