2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式

1.封装选项卡

App.vue

<template>
  <div>
    <!-- 把选项卡中的电影,个人中心等封装到单独组件tabbar中 -->
    <tabbar></tabbar>
    <router-view></router-view>
  </div>
</template>

<script>
  // 导入组件tabbar
  import tabbar from "./components/tabbar"

  export default {
      name: "App",
      components: {
          tabbar,

      },
  }; 
</script>

src/components/tabbar.vue

<template>
<footer>
    <ul>
      <router-link to="/Film" custom v-slot="{navigate,isActive}">
        <li @click="navigate" :class="isActive?'myactive':''">
           <i class="iconfont icon-dianying">热映电影</i>
        </li>
      </router-link>
      <router-link to="/Cinema" custom v-slot="{navigate,isActive}">
        <li @click="navigate" :class="isActive?'myactive':''">
           <i class="iconfont icon-yingyuan">附近影院</i>
        </li>
      </router-link>
      <router-link to="/Center" custom v-slot="{navigate,isActive}">
        <li @click="navigate" :class="isActive?'myactive':''">
           <i class="iconfont icon-icon_pc">个人中心</i>
        </li>
      </router-link>
  </ul>
</footer>
</template>

<script>
export default {

};
</script>
<style lang="scss" scoped>
  footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2.722222rem;
    background: white;
    ul{
      display: flex;//父元素设置弹性盒
      li{
        //子元素都设置flex: 1:子元素平分并占满父盒子
        flex:1;
        line-height: 2.722222rem;
        text-align: center;
      }
    }
  }
</style>

2.设置iconfont

main.js

import '@/assets/iconfont/iconfont.css'

tabbar.vue

  <i class="iconfont icon-dianying">热映电影</i>
  <i class="iconfont icon-yingyuan">附近影院</i>
  <i class="iconfont icon-yingyuan">个人中心</i>

3.nowPlaying获取数据后写样式

3.1.获取后台数据

详见:2022-11-17 vue移动端卖座电影项目(一) 获取后台数据

3.2.从data对象获取电影海报,标题,评分

  <!-- 获取电影海报 -->
  <img :src="data.poster" alt="">
  <!-- 获取电影标题 -->
  <h3>{{data.name}}</h3>
  <!-- 获取观众评分 -->
  <p>观众评分{{data.grade}}</p>

3.3.过滤data.actor,获取演职员表

使用全局过滤器:actorfilter

<p>{{data.actors | actorfilter}}</p>

注册全局过滤器:actorfilter

import Vue from "vue"
Vue.filter('actorfilter',function(data){
    //回顾map的用法:
    // console.log([0,1,2].map(item=>`我是第${item+1}名`));
    // 处理data.name数组
    var newList=data.map(item=>item.name);
    // console.log(newList);
    return newList.join(' ');
});

3.4.nowPlaying.vue

  <template>
  <div>nowPlaying...
      <ul>
        <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data)">
          <!-- {{data.name}} -->
          <!-- 获取电影海报 -->
          <img :src="data.poster" alt="">
          <!-- 获取电影标题 -->
          <h3>{{data.name}}</h3>
          <!-- 获取观众评分 -->
          <p>观众评分{{data.grade}}</p>
          <!-- 获取导演和主演信息:此处要处理一下数组data.actors(过滤) -->
          <p>{{data.actors | actorfilter}}</p>
        </li>
  </ul>
  </div>

</template>
<script>
import axios from "axios"
// 注册过滤器需要用到Vue,所以引入vue:在哪使用就在哪引入
import Vue from "vue"
Vue.filter('actorfilter',function(data){
    //回顾map的用法:
    // console.log([0,1,2].map(item=>`我是第${item+1}名`));
    // 处理data.name数组
    var newList=data.map(item=>item.name);
    // console.log(newList);
    return newList.join(' ');
});
export default {
  data(){
    return{
      // datalist:["1111","2222","3333"]
      datalist:[]
    }
  },
  methods:{
    handleChangePage(id){
      console.log(id);
      this.$router.push({name:'renameDetail',params:{id:id}});
    }
  },
  mounted(){
    // 网络>复制>复制链接地址
    // axios.get("https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=2318535")
    // 使用axios的完整写法配置字段
    /*字段获取:网络>标头>请求标头>
        X-Client-Info: {"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}
        X-Host: mall.film-ticket.film.list */
        axios({
          url:"https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=2318535",
          headers:{
              'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297"}',
             ' X-Host': 'mall.film-ticket.film.list'
          }
        }).then(res=>{
          console.log("获取数据data:",res.data);
          // console.log("获取数据data:",res.data.data.films);
          this.datalist=res.data.data.films;
        })
  }
}
</script>
<style lang="scss" scoped>
  ul{
    li{
      padding:10px;
      overflow:hidden;
      img{
        float: left;
        width: 100px;
      }
    }
  }
</style>