四十四、进阶之vue---mintUI（index List的使用）

实现功能：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>