实现功能:1. 通过index List实现城市列表的效果
2. 选择城市(通过cookie获取该城市的id),显示该城市的电影院信息
3. 注意:之前请求的链接都包含相应的城市编号
(1)创建City.vue,并显示城市列表(City.vue)
1. 首先利用axios获取卖座网的城市信息
2. 对获取的城市信息进行过滤,将其过滤为对象数组的形式。
每个对象有一个key值和数组,如{‘A’,["鞍山","安徽"]}
3. 将获取的城市信息通过双重for循环显示到页面,并为每个城市添加点击事件。(使用了indexList组件)
4.点击事件的定义。当点击某个城市时,跳转到影院页面。
将城市id存入到Local Storage中后,点击北京
(2)根据城市id,在影院页面显示对应城市的电影院以及地址(Cinema.vue)
(3)源码
City.vue
<template>
<div>
<mt-index-list ref="mylist">
<!-- 遍历,依次显示每一个字母data.index所对应的城市。 -->
<mt-index-section :index="data.index" v-for="data in datalist" :key="data.index">
<!-- 显示字母data.index所对应的城市。
由于组件mt-cell不支持点击事件,因此将其放到div内,为div添加点击事件 -->
<div v-for="city in data.list" :key="city.cityId" @click="handleClick(city.cityId)">
<mt-cell :title="city.name" >
</mt-cell>
</div>
</mt-index-section>
</mt-index-list>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
//datalist是对象数组。每个对象有一个key值和数组,如{‘A’,["鞍山","安徽"]}
datalist:[] //存放城市信息
}
},
mounted () {
//获取城市信息
axios({
url:"https://m.maizuo.com/gateway?k=8269543",
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1615895162724483673423873","bc":"310100"}',
'X-Host': 'mall.film-ticket.city.list'
}
}).then(res=>{
//console.log(res.data)
//对获取的数据进行过滤,将其转化为对象数组的形式,并赋值给datalist
this.datalist = this.handleCity(res.data.data.cities)
})
},
methods: {
handleCity(data){
console.log(data)
var letterArr=[] //存放26个大写英文字母。65对应'A'
for(var i=65;i<91;i++){
letterArr.push(String.fromCharCode(i))
}
//对象数组,存放过滤后的数据。每个对象有一个key值和数组,如{‘A’,["鞍山","安徽"]}
var newlist=[]
//依次获取每个字母开头所对应的城市数组
for(var j=0;j<letterArr.length;j++){
//过滤出以字母letterArr[j]开头的城市数组
var arr = data.filter(item=>item.pinyin.substring(0,1)===letterArr[j].toLowerCase())
//如果以字母letterArr[j]开头的城市数组不为空,则放到newlist,作为一个对象
if(arr.length>0){
newlist.push({
index:letterArr[j],
list:arr
})
}
}
console.log(newlist)
return newlist
},
handleClick(id){
console.log(id)
//点击某城市时,将该城市对应的id保存下来
localStorage.setItem("cityId",id)
//并且跳转到影院cinema页面
this.$router.push(`/cinema`)
}
}
}
</script>
<style lang="scss" scoped>
</style>
Cinema.vue
<template>
<!-- div的高度设置为“整个页面的高度” 减 “底部选项栏的高度”
因此为其设置动态样式
-->
<div class="cinema" :style="mystyle">
<ul>
<li v-for="data in datalist" :key="data.cinemaId">
{{data.name}}
<p style="font-size:12px">{{data.address}}</p>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
//导入BetterScroll
import BetterScroll from 'better-scroll'
export default {
data(){
return{
datalist:[],
mystyle:{
height:0
}
}
},
mounted () {
//最外层div的高度设置为“整个页面的高度” 减 “底部选项栏的高度50px”
this.mystyle.height = document.documentElement.clientHeight-50+'px';
//从Local Storage中获取城市id
var id = localStorage.getItem("cityId")
axios({
//根据不同的城市,获取对应城市的影院信息
url:`https://m.maizuo.com/gateway?cityId=${id}&ticketFlag=1&k=9681514`,
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1615895162724483673423873","bc":"110100"}',
'X-Host': 'mall.film-ticket.cinema.list'
}
}).then(res=>{
console.log(res.data)
this.datalist = res.data.data.cinemas
//Better-Scroll需要所有数据插到dom结点结束时,才可初始化。
//this.$nextTick:所有数据插入到节点后,再执行其内容
this.$nextTick(()=>{
//.cinema:添加平滑滚动效果的div的class名
//除了添加这个属性,还可以添加滚动条
new BetterScroll(".cinema",{
scrollbar:{//属性2,添加滚动条
fade:true,
interactive:false
}
})//Better-Scroll初始化
})
})
}
}
</script>
<style lang="scss" scoped>
li{
height: 50px;
}
.cinema{
overflow: hidden; //溢出隐藏
position: relative; //避免滚动条滚出div
}
</style>