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>青岛市市南区中山路67号乐喜客来广场2-4层</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移动端项目二的更多相关文章
- Vue移动端项目总结
使用Vue项目写了一个移动端项目,然后又把项目硬生生的抽离了组件,一直忙着写RN项目没有时间总结心得,今天上午终于下定决心,写点总结. 1.position:absolute: 定位的时候不同手机的浏 ...
- Vue移动端项目模板
一个集成移动端开发插件的Vue移动端模板包含1.css: 使用stylus开发css 集成reset样式文件 修改UI组件文件 统一样式处理(如主题色等)2.UI组件 使用热门的vant与mint-u ...
- 从零开始搭建vue移动端项目到上线的步骤
初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...
- 从零开始搭建vue移动端项目到上线
先来看一波效果图 初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack mypro ...
- Vue移动端项目中下拉刷新和上拉加载
Vue2.0中引入Mint-UI的下拉刷新和上拉加载.简单粗暴 安装Mint-UI npm i mint-ui -S 引入 打开项目的main.js入口文件,引入并使用.注意,为了方便,这里是全部引入 ...
- vue 移动端项目切换页面,页面置顶
之前项目是pc端是使用router的方式实现置顶的 //main.js router.afterEach((to, from, next) => { window.scrollTo(0, 0) ...
- vue 移动端项目总结(mint-ui)
跨域解决方案 config/dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require ...
- vue PC端项目中解决userinfo问题
在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...
- 将Vue移动端项目打包成手机app---HBuilder
将移动端页面打包成app 1.使用 HBuilder 直接编译打包 点击左上角 文件>打开目录>选择目录 选择用Webpack打包好的dist文件目录 由于我添加到项目了,所以会显示该项 ...
随机推荐
- Nginx配置实际案例
user root root;worker_processes 2; #error_log logs/error.log;#error_log logs/error.log notice;#error ...
- ethtool 解决网卡丢包严重和网卡原理
1 概述 最近业务上老有问题,查看发现overruns值不断增加,学习了一下相关的知识.发现数值也在不停的增加.发现这些 errors, dropped, overruns 表示的含义还不大一样. ...
- HashTable代码解析
HashTable继承关系如下: HashTable是一个线程安全的[键-值对]存储结构.其存储结构和HashMap相同,参考这里. 1. HashTable定义了一个类型为Entry<K,V& ...
- python接口自动化测试(三)-requests.post()
上一节介绍了 requests.get() 方法的基本使用,本节介绍 requests.post() 方法的使用: 本文目录: 一.方法定义 二.post方法简单使用 1.带数据的post 2 ...
- cookie 跨域解决方法
1.Nginx 正向和反向代理的区别 正向代理和反向代理的区别:正向代理隐藏真实客户端,反向代理隐藏真实服务端,图示: 2.cookie跨域问题 因为cookie存在跨域问题,其中一个解决方法是,设置 ...
- 各种OJ网站汇总
acmicpc.info acmicpc.info http://acmicpc.info/archives/224 此网站聚合了各种ICPC相关信息. 国内Online Judge 用户体验极佳的v ...
- MySQL 4 种隔离级别的区别
## 测试环境 mysql> select version(); +------------+ | version() | +------------+ -log | +------------ ...
- 同一个tomcat下面放多个项目 每个项目用不同的域名访问
vim ./conf/server.conf <Host name=" appBase="/www/test1/webapps" ##这是war包存放的位置 unp ...
- k8s namespace/volume
https://kubernetes.io/docs/tasks/configure-pod-container/assign-memory-resource/ 只挑个人感觉使用较多/比较重要的点来说 ...
- 微信redirect_uri域名与后台配置不一致,错误代码10003
现象 做好了微信公众号扫描登录后,很稳定的运行,后来增加了微信开放平台,结果偶尔就出现了这个redirect_uri错误.然后重启服务器后,又正常. 探查 网上的说法都是网页授权配置的问题,检查微信公 ...