vue美团电影模拟实现
Vue美团电影模拟实现
由于没有接口，只能算个半成品。但是我认为需要的请求参数都有获取，一旦有接口可以轻松请求数据。
请求参数代码中有注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>电影票</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style lang="less">
*{margin: 0;padding: 0;}
ul li{
list-style: none;
}
li{
display: inline-block;
}
.head{
background: #47464a;
height: 60px;
text-align: center;
}
.head ul li {
padding:0 50px;
line-height: 60px;
color:#999;
cursor: pointer;
}
.active{
color:red!important;
}
.ListBox{
margin:30px auto;
border:1px solid gainsboro;
}
.ListBox>div{
padding:20px;
border-bottom: 1px solid gainsboro;
}
dt{
font-size: 14px;
color:#999;
display: inline-block;
cursor: pointer;
}
dd{
font-size: 14px;
padding: 3px 9px;
margin-left: 12px;
color:#333;
display: inline-block;
cursor: pointer;
}
.L_active{
background: #f34d41;
border-radius: 14px;
color:#fff;
appearance: none;
}
main{
width:1200px;
margin:0 auto;
}
.choose_box{
font-size: 14px;
}
input[type=radio]{
height:15px;
width:15px;
vertical-align: middle;
}
label{
cursor: pointer;
margin-right:20px ;
}
.z_title{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-align: center;
}
.pingfen{
text-align: center;
}
.item_li{
display: inline-block;
width:160px;
margin-right: 30px;
}
.item_box{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="app">
<!-- 头部 -->
<div class="head">
<ul>
<li v-for="n in hList" :key="n.id" :class="{active:current==n.id?true:false}" @click="handleChange(n.id)">{{n.name}}</li>
</ul>
</div>
<!-- 中间内容 -->
<main>
<!-- 类别组件 -->
<list></list>
<!-- 排序组件 -->
<choose></choose>
<!-- 电影列表组件 -->
<myitem></myitem>
</main>
</div>
<script>
var Myitem = {
data(){
return{
ItemArr:[//将请求返回的数据赋值给该数组即可渲染
{
_id:"001",
src:"https://p0.meituan.net/movie/37e835fdaf68e48dd002b6757374251d6793835.jpg@160w_220h_1e_1c",
title:"紫罗兰永恒花园 外传：永远与自动手记人偶",
pingfen:9.5
}
]
}
},
template:`
<div class="item_box">
<ul>
<li v-for="n in ItemArr" :key="n.id" class="item_li">
<img :src="n.src">
<p class="z_title">{{n.title}}</p>
<p class="pingfen">{{n.pingfen}}</p>
</li>
</ul>
</div>
`,
methods: {
},
}
var Choose={
data(){
return{
picked:"hot"//通过这个值发送排序的请求
}
},
template:`
<div class="choose_box">
<label for="hot">
<input type="radio" id="hot" v-model="picked" value="hot">
<span>按热门排序</span>
</label>
<label for="time">
<input type="radio" id="time" v-model="picked" value="time">
<span>按时间排序</span>
</label>
<label for="tlak">
<input type="radio" id="tlak" v-model="picked" value="tlak">
<span>按评价排序</span>
</label>
</div>
`,
methods: {
},
}
var List = {
data(){
return{
TypeArr:[{
id:"001",
name:"全部"
},{
id:"002",
name:"爱情"
},{
id:"003",
name:"喜剧"
},{
id:"004",
name:"动画"
},{
id:"005",
name:"剧情"
},{
id:"006",
name:"恐怖"
},{
id:"007",
name:"纪录片"
},{
id:"008",
name:"短片"
},{
id:"009",
name:"黑色电影"
},{
id:"010",
name:"歌舞"
},{
id:"011",
name:"传记"
},{
id:"012",
name:"历史"
},{
id:"013",
name:"武侠"
},{
id:"014",
name:"战争"
},{
id:"015",
name:"古装"
},{
id:"016",
name:"悬疑"
},{
id:"017",
name:"动作"
},{
id:"018",
name:"其他"
}],
CityArr:[{
id:"001",
name:"全部"
},{
id:"002",
name:"大陆"
},{
id:"003",
name:"美国"
},{
id:"004",
name:"欧美"
},{
id:"005",
name:"日韩"
},{
id:"006",
name:"中国香港"
},{
id:"007",
name:"中国澳门"
},{
id:"008",
name:"中国台湾"
},{
id:"009",
name:"法国"
},{
id:"010",
name:"德国"
},{
id:"011",
name:"荷兰"
},{
id:"012",
name:"新加坡"
},{
id:"013",
name:"加拿大"
},{
id:"014",
name:"其他"
}],
TimeArr:[{
id:"001",
name:"全部"
},{
id:"002",
name:"2019"
},{
id:"003",
name:"2010"
},{
id:"004",
name:"2005"
},{
id:"005",
name:"2000"
},{
id:"006",
name:"1995"
},{
id:"007",
name:"1990"
},{
id:"008",
name:"1980"
},{
id:"009",
name:"1970"
},{
id:"010",
name:"1960"
},{
id:"011",
name:"1950"
},{
id:"012",
name:"更早"
}],
Type_active:"001",
City_active:"001",
Time_active:"001",
TextArr:[]//通过这个数组 发送请求
}
},
methods: {
handleType(id,name){
this.Type_active=id
this.TextArr[0]=name
},
handleCity(id,name){
this.City_active=id
this.TextArr[1]=name
},
handleTime(id,name){
this.Time_active=id
this.TextArr[2]=name
}
},
template:`
<div class="ListBox">
<div class="L_box_01">
<dl>
<dt>类型:</dt>
<dd v-for="n in TypeArr" :key="n.id" @click="handleType(n.id,n.name)"
:class="{L_active:Type_active==n.id?true:false}">{{n.name}}</dd>
</dl>
</div>
<div class="L_box_02">
<dl>
<dt>区域:</dt>
<dd v-for="n in CityArr" :key="n.id" @click="handleCity(n.id,n.name)"
:class="{L_active:City_active==n.id?true:false}">{{n.name}}</dd>
</dl>
</div>
<div class="L_box_03">
<dl>
<dt>年代:</dt>
<dd v-for="n in TimeArr" :key="n.id" @click="handleTime(n.id,n.name)"
:class="{L_active:Time_active==n.id?true:false}">{{n.name}}</dd>
</dl>
</div>
</div>
`
}
var app = new Vue({
el:"#app",
data:{
hList:[{
id:"zhengzai",
name:"正在热映"
},{
id:"jijiang",
name:"即将上映"
},{
id:"jingdian",
name:"经典电影"
}],
current:"zhengzai",
},
methods: {
//头部点击事件，并发送请求
handleChange(id){
this.current=id
// 发送请求，渲染界面
}
},
components:{
List,
Choose,
Myitem
}
})
</script>
</body>
</html>
