四十三、进阶之vue---mintUI（常用功能的使用）

(1) minUI的下载与引入

1. 下载

npm install --save mint-ui

2. 引入（main.js）

//引入mintUI
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

(2) 使用minUI创建按钮（center.vue）

(3) 使用minUI的Indicator，在Film.vue页面中添加 加载符号 (Film.vue)

1.  引入

2.  使用

3. 进入该页面时，显示加载符号

（4）使用mintUI的Infinite scroll，实现无限滚动（Nowplaying.vue）

1.  获取卖座官网滚动到底时的数据

通过对卖座的正在热映页面进行滑动，可以发现滚动到底其数据链接的规律（只需修改pageNum）

第一次滚动到底：https://m.maizuo.com/gateway?cityId=110100&pageNum=2&pageSize=10&type=1&k=459034

第二次滚动到底：https://m.maizuo.com/gateway?cityId=110100&pageNum=3&pageSize=10&type=1&k=1553550

2.  实现无限滚动

Nowplaying.vue

<template>
    <div>
        <ul   v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading" 
              infinite-scroll-distance="0">
            <li v-for="data in datalist" :key="data.filmId" @click="handelclick(data.filmId)">
                    <img :src="data.poster"/>
                    <h3>{{data.name}}</h3>
                    <p>观众评分{{data.grade}}</p>
                    <!--主演是一个对象数组，需要通过过滤器进行处理
                        actorfilter过滤器名（随意）
                    -->
                    <p>主演{{data.actors | actorfilter}}</p> 
            </li>
        </ul>
        <div v-show="isShow">正在加载中.....</div>
    </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'

//创建过滤器actorfilter。data为传过来的原始数据
Vue.filter("actorfilter",function(data){
    //将演员数组中每一项的名字取出，放到newlist
    var newlist = data.map(item=>item.name)
    //将演员名字用空格连接
    return newlist.join(' ')
})
    export default{
        data(){
            return{
                datalist:[],
                current:1, //正在热映页面，当前显示的页数
                total:0,  //记录热映页面电影的总数量
                isShow:true
            }
        },
        mounted () {
          //使用axios的完整写法
          axios({//请求的链接
              url:"https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=9643352",
              headers:{//两个验证字段（直接在官网负值）
                  'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1615895162724483673423873"}',
                    'X-Host': 'mall.film-ticket.film.list'
              }
          }).then(res=>{
              console.log(res.data)
              this.total = res.data.data.total //获取热映页面电影的总数量
              this.datalist = res.data.data.films //将获取的电影信息赋给datalist
          })
        },
        methods: {
            handelclick(id){//点击li触发该事件，跳转到detail页面
                //编程式导航
                //this.$router.push(`/detail/${id}`)
                this.$router.push({name:"cchh",params:{myid:id}})
            },
            loadMore() {
                console.log("到底了")
                this.isShow = false
                this.loading = true; //不再加载

                this.current++; //每次到底之后，当前页面+1，访问下一个页面

                if(this.datalist.length===this.total){ //避免重复访问
                    return;
                }

                //获取下一个页面的数据
                 axios({//请求的链接
                    url:`https://m.maizuo.com/gateway?cityId=110100&pageNum=${this.current}&pageSize=10&type=1&k=459034`,
                    headers:{//两个验证字段（直接在官网负值）
                        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1615895162724483673423873","bc":"110100"}',
                        'X-Host': 'mall.film-ticket.film.list'
                    }
                 }).then(res=>{
                    //将原数据 与 获取的当前页数据合并
                    this.datalist = [...this.datalist,...res.data.data.films] 
                    //获取数据后，加载复活
                    this.loading = false;
                 })
            }
        }
    }
</script>
<style lang="scss" scoped>
ul{
    li{
        padding: 10;
        overflow: hidden;
        img{
            float: left;
            width: 100px;
        }

    }
}
</style>

(5) 使用mintUI的Message box，实现弹窗功能（Comingsoon.vue）

实现功能：

点击即将上映中的某个电影，如果还未预售，则出现弹框。

如果确定，则回到首页；如果取消，则留在当前电影的详情页

                      

1.  引入，并在li中为每个电影添加点击事件

第一个参数：该电影是否预售

第二个参数：该电影id（便于跳转到其详情页）

2. 弹框跳转设置

3. Comingsoon.vue代码

<template>
    <div>
        <!--将数据显示到页面-->
        <ul>
            <li v-for="data in this.$store.getters.comingListGet" :key="data.filmId" @click="handleClick(data.isPresale,data.filmId)">
                    <img :src="data.poster"/>
                    <h3>{{data.name}}</h3>
                    <p>观众评分{{data.grade}}</p>
                    <!--主演是一个对象数组，需要通过过滤器进行处理
                        actorfilter过滤器名（随意）
                    -->
                    <p>主演{{data.actors | actorfilter}}</p> 
            </li>
        </ul>
        
    </div>
</template>
<script>

//引入MessageBox
import { MessageBox } from 'mint-ui';

export default {
    mounted () {
        
        //没有缓存数据，在store/index.js中进行ajax请求，并缓存数据
        if(this.$store.state.comingList.length==0){
            //getComingList是store/index.js action中执行的方法（随意取名）
            //dispatch是分发的意思，触发action进行异步处理
            this.$store.dispatch("getComingListAction")
        }else{//已有缓存数据
            console.log("使用缓存中的数据")
        }
    },
    methods: {
        handleClick(data,id){//data:布尔值（是否预售） id：电影id
            if(!data){//不能预售
                MessageBox({
                    title: '提示',
                    message: '没有上映，看其他电影吧',
                    showCancelButton: true
                }).then(res=>{
                    if(res==='confirm'){//点击确认按钮
                        console.log("回到首页")
                        this.$router.push(`/film/nowplaying`)
                    }
                })
            }
            //页面跳转(进入对应的电影页面) cchh为Detail路由起的名字
            this.$router.push({name:"cchh",params:{myid:id}})
        }
    }
}
</script>
<style lang="scss" scoped>
ul{
    li{
        padding: 10;
        overflow: hidden;
        img{
            float: left;
            width: 100px;
        }

    }
}
</style>

(6) 使用mintUI的Swipe，实现轮播功能

由于在main.js中已将mintUI全部导入，不需再导入（MinUI可全局使用）

在center.vue中使用

注意：默认高度为0，需要为其添加高度