Vue学习：四

一、rem 和swiper组件

<template>
  <div class="swiper-container zzy">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'
export default {
  props: {
    loop: {
      type: Boolean,
      default: true
    }
  },
  mounted() {
    // console.log("mounted")
    new Swiper('.zzy', {
      // direction:"vertical", //垂直
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      },
      loop: this.loop,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      }
    })
  }
}
</script>

<template>
  <div class="swiper-slide">
    <slot></slot>
  </div>
</template>

<template>
  <div>
    <ul>
      <!-- vue-router(3之前，包括3) -1- 声明式导航 -->

      <!-- <router-link to="/films" active-class="zzyactive" tag="li">电影</router-link>

        <router-link to="/cinemas" active-class="zzyactive" tag="li">影院</router-link> -->

      <!-- vue-router（4） -2- 声明式导航 -->

      <router-link to="/films" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'zzyactive' : ''">电影</li>
      </router-link>
      <router-link to="/cinemas" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'zzyactive' : ''">影院</li>
      </router-link>
      <router-link to="/center" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'zzyactive' : ''">我的</li>
      </router-link>
    </ul>

    <!-- 路由容器 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  }
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

.zzyactive {
  color: red;
}
</style>

二、正在热映

<template>
  <div>
    <tabbar></tabbar>
    <!-- 路由容器 -->
    <section>
      <router-view></router-view>
    </section>
  </div>
</template>
<script>
import tabbar from '@/mycomponents/Tabbar'
export default {
  data () {
    return {

    }
  },
  components: {
    tabbar
  }
}
</script>
<style lang="scss">
*{
  margin:0;
  padding: 0;
}
html,body{
  height: 100%;
}
ul{
  list-style: none;
}
section{
  padding-bottom: 2.722222rem;
}
</style>

<template>
  <ul>
    <router-link to="/films/nowplaying" custom v-slot="{ navigate, isActive }">
      <li @click="navigate">
        <span :class="isActive ? 'zzyactive' : ''">正在热映</span>
      </li>
    </router-link>

    <router-link to="/films/comingsoon" custom v-slot="{ navigate, isActive }">
      <li @click="navigate">
        <span :class="isActive ? 'zzyactive' : ''">即将上映</span>
      </li>
    </router-link>
  </ul>
</template>
<style lang="scss" scoped>
ul {
  display: flex;
  height: 2.722222rem;
  line-height: 2.722222rem;

  li {
    flex: 1;
    text-align: center;
  }
}

.zzyactive {
  color: red;
  border-bottom: 2px solid red;
}
</style>

<template>
    <div class="swiper-container zzy">
        <div class="swiper-wrapper">
          <slot></slot>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'
export default {
  props: {
    loop: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    // console.log("mounted")
    new Swiper('.zzy', {
      // direction:"vertical", //垂直
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      },
      loop: this.loop,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      }
    })
  }
}
</script>

三、详情

<template>
    <div>
        center--abc
    </div>
</template>
<script>
export default {
  // 路由生命周期
//   beforeRouteEnter (to, from, next) {
//     // 在渲染该组件的对应路由被 confirm 前调用
//     // 不！能！获取组件实例 `this`
//     // 因为当守卫执行前，组件实例还没被创建
//     if (localStorage.getItem('token')) {
//       next()
//     } else {
//       next({
//         path: '/login',
//         query: { redirect: to.fullPath }
//       })
//     }
//   }
}
</script>

<template>
  <div v-if="filmInfo">
    <!-- <img :src="filmInfo.poster"/> -->
    <div
      :style="{
        backgroundImage: 'url(' + filmInfo.poster + ')',
      }"
      class="poster"
    ></div>
    <div class="content">
      <div>{{ filmInfo.name }}</div>
      <div>
        <div class="detail-text">{{ filmInfo.category }}</div>
        <div class="detail-text">
          {{ filmInfo.premiereAt | dateFilter }}上映
        </div>
        <div class="detail-text">
          {{ filmInfo.nation }} | {{ filmInfo.runtime }}分钟
        </div>
        <div
          class="detail-text"
          style="line-height: 15px"
          :class="isHidden ? 'hidden' : ''"
        >
          {{ filmInfo.synopsis }}
        </div>

        <div style="text-align: center">
          <i
            class="iconfont"
            @click="isHidden = !isHidden"
            :class="isHidden ? 'icon-moreunfold' : 'icon-less'"
          ></i>
        </div>
      </div>

      <div>
        <div>演职人员</div>
        <detail-swiper>
          <detail-swiper-item
            v-for="(data, index) in filmInfo.actors"
            :key="index"
          >
            <div
              :style="{
                backgroundImage: 'url(' + data.avatarAddress + ')',
              }"
              class="avatar"
            >
            </div>
            <div style="text-align:center;font-size:12px">{{ data.name }}</div>
            <div style="text-align:center;font-size:13px">{{ data.role }}</div>
          </detail-swiper-item>
        </detail-swiper>
      </div>
    </div>
  </div>
</template>
<script>
import http from '@/util/http'
import moment from 'moment'
import Vue from 'vue'
import detailSwiper from '@/mycomponents/detail/DetailSwiper'
import detailSwiperItem from '@/mycomponents/detail/DetailSwiperItem'
moment.locale('zh-cn') // 设置成中文
Vue.filter('dateFilter', (date) => {
  return moment(date * 1000).format('YYYY-MM-DD')
})
export default {
  data () {
    return {
      filmInfo: null,
      isHidden: true
    }
  },
  components: {
    detailSwiper,
    detailSwiperItem
  },
  created () {
    // 当前匹配的路由
    console.log('created', this.$route.params.id)

    // axios 利用 id 发请求到详情接口 ，获取详细数据 ，布局页面

    http({
      url: `/gateway?filmId=${this.$route.params.id}&k=5501344`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then((res) => {
      console.log(res.data.data.film)
      this.filmInfo = res.data.data.film
    })
  }
}
</script>
<style lang="scss" scoped>
.poster {
  width: 100%;
  height: 11.666667rem;
  background-position: center;
  background-size: cover;
}
.content {
  padding: 0.833333rem;
  .detail-text {
    color: #797d82;
    font-size: 13px;
    margin-top: 0.222222rem;
  }
}
.hidden {
  overflow: hidden;
  height: 30px;
}
.avatar{
  width: 100%;
  height: 4.722222rem;
  background-position: center;
  background-size: cover;
}
</style>

<template>
    <div>
        <film-swiper :key="datalist.length">
            <film-swiper-item v-for="data in datalist" :key="data.id" class="filmswiperitem">
                <img :src="data.imgUrl"/>
            </film-swiper-item>
        </film-swiper>
        <film-header class="sticky"></film-header>
        <router-view></router-view>
    </div>
</template>
<script>
// webpack
import filmSwiper from '@/mycomponents/films/FilmSwiper'
import filmHeader from '@/mycomponents/films/FilmHeader'
import filmSwiperItem from '@/mycomponents/films/FilmSwiperItem'
import axios from 'axios'
export default {
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    axios.get('/banner.json').then(res => {
      console.log(res.data)
      this.datalist = res.data.banner
    })
  },
  components: {
    filmSwiper,
    filmSwiperItem,
    filmHeader
  }
}
</script>

<style lang="scss" scoped>
.filmswiperitem{
    img{
        width: 100%;
    }
}
.sticky{
    position: sticky;
    top:0px;
    background:white;
}
</style>

<template>
    <div>
        login
        <button @click="handleLogin">登录</button>
    </div>
</template>

<script>
export default {
  methods: {
    handleLogin () {
      setTimeout(() => {
        localStorage.setItem('token', '后端返回的token字段')
        // this.$router.back() // 返回

        // 1. 获取 query字段
        console.log(this.$route.query)
        // 2. 跳转到当时想要跳的页面去
        this.$router.push(this.$route.query.redirect)
      }, 0)
    }
  }
}
</script>

<template>
  <div>
    <tabbar></tabbar>
    <!-- 路由容器 -->
    <section>
      <router-view></router-view>
    </section>
  </div>
</template>
<script>
import tabbar from '@/mycomponents/Tabbar'
export default {
  data () {
    return {

    }
  },
  components: {
    tabbar
  }
}
</script>
<style lang="scss">
*{
  margin:0;
  padding: 0;
}
html,body{
  height: 100%;
}
ul{
  list-style: none;
}
section{
  padding-bottom: 2.722222rem;
}
</style>

四、详情轮播和指令

<template>
  <div>
    <ul>
      <li v-for="data in cinemaList" :key="data.cinemaId">
        <div class="left">
          <div class="cinema_name">{{ data.name }}</div>
          <div class="cinema_text">{{ data.address }}</div>
        </div>

        <div class="right cinema_name">
          <div style="color: red">￥{{ data.lowPrice / 100 }}起</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import http from '@/util/http'
export default {
  data () {
    return {
      cinemaList: []
    }
  },
  mounted () {
    http({
      url: '/gateway?cityId=310100&ticketFlag=1&k=5121167',
      headers: {
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then((res) => {
      //   console.log(res.data.data.cinemas)
      this.cinemaList = res.data.data.cinemas
    })
  }
}
</script>
<style lang="scss" scoped>
li {
  padding: 0.833333rem;

  display: flex;
  justify-content: space-between;
  .left {
    width: 11.777778rem;
  }
  .cinema_name {
    font-size: 15px;
  }
  .cinema_text {
    color: #797d82;
    font-size: 12px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>

<template>
  <div>
    <ul>
      <li
        v-for="data in datalist"
        :key="data.filmId"
        @click="handleChangePage(data.filmId)"
      >
        <img :src="data.poster" />
        <div>
          <div class="title">{{ data.name }}</div>
          <div class="content">
            <div :class="data.grade?'':'hidden'">
              观众评分:<span style="color: red">{{ data.grade }}</span>
            </div>

            <div class="actors">主演： {{ data.actors | actorsFilter }}</div>
            <div>{{ data.nation }} | {{ data.runtime }}分钟</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import http from '@/util/http'
import Vue from 'vue'

Vue.filter('actorsFilter', (data) => {
  // console.log()
  if (data === undefined) return '暂无主演'
  return data.map((item) => item.name).join(' ')
})
export default {
  data () {
    return {
      datalist: []
    }
  },

  mounted () {
    http({
      url:
        '/gateway?cityId=440100&pageNum=1&pageSize=10&type=1&k=5196770',
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then((res) => {
      console.log(res.data.data.films)
      this.datalist = res.data.data.films
    })
  },

  methods: {
    handleChangePage (id) {
      //   console.log(id)
      // 编程式导航
      //   location.href = '#/detail'

      // /detail/1111
      // 1-通过路径跳转
      // this.$router.push(`/detail/${id}`)

      // 2-通过命名路由跳转
      this.$router.push({
        name: 'zzyDetail',
        params: {
          id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
ul {
  li {
    overflow: hidden;
    padding: 0.833333rem;
    img {
      width: 3.666667rem;
      float: left;
    }
    .title {
      font-size: 16px;
    }
    .content {
      font-size: 13px;
      color: gray;
      .actors {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 11.111111rem;
      }
    }
  }
}
.hidden{
  visibility: hidden;
}
</style>

五、组件库

<template>
  <el-container style="height: 100%;">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '2']">
        <el-submenu :index="data.id + ''" v-for="data in sideList" :key="data.id">
          <template slot="title"><i class="el-icon-message"></i>{{ data.title }}</template>
          <el-menu-item :index="item.id + ''" v-for="item in data.children" :key="item.id">
            {{ item.title }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{ myname }}</span>
      </el-header>

      <el-main>
        <el-table :data="tableData">
          <el-table-column prop="date" label="日期" width="140">
          </el-table-column>
          <el-table-column prop="title" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
Vue.use(ElementUI)

export default {
  methods: {
    handlePrimary() {
      console.log('primary')
    }
  },
  data() {
    return {
      myname: 'zzy',
      sideList: [
        {
          id: 1,
          title: '用户管理',
          children: [
            {
              id: 2,
              title: '用户列表'
            },
            {
              id: 3,
              title: '用户权限'
            }
          ]
        },
        {
          id: 4,
          title: '权限管理',
          children: [
            {
              id: 5,
              title: '权限列表'
            },
            {
              id: 6,
              title: '角色列表'
            }
          ]
        }
      ],
      tableData: [
        {
          title: 'zzy',
          address: '江苏',
          date: '2021-05-01'
        },
        {
          title: 'tiechui',
          address: '北京',
          date: '2021-05-02'
        },
        {
          title: 'xiaoming',
          address: '杭州',
          date: '2021-05-03'
        }
      ]
    }
  }

}
</script>

<style>
html,
body {
  height: 100%;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<template>
  <div>
    <van-nav-bar title="影院" ref="navbar">
      <template #left>
        上海<van-icon name="arrow-down" />
      </template>
      <template #right>
        <van-icon name="search" size="28" color="black" />
      </template>
    </van-nav-bar>

    <div class="box" :style="{
      height: height,
    }">
      <ul>
        <li v-for="data in cinemaList" :key="data.cinemaId">
          <div class="left">
            <div class="cinema_name">{{ data.name }}</div>
            <div class="cinema_text">{{ data.address }}</div>
          </div>

          <div class="right cinema_name">
            <div style="color: red">￥{{ data.lowPrice / 100 }}起</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import http from '@/util/http'
import BetterScroll from 'better-scroll'
export default {
  data() {
    return {
      cinemaList: [],
      height: '0px'
    }
  },
  mounted() {
    // console.log(this.$refs.navbar.$el.offsetHeight)
    // 动态结算高度
    this.height =
      document.documentElement.clientHeight -
      this.$refs.navbar.$el.offsetHeight -
      document.querySelector('footer').offsetHeight +
      'px'

    http({
      url: '/gateway?cityId=310100&ticketFlag=1&k=5121167',
      headers: {
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then((res) => {
      //   console.log(res.data.data.cinemas)
      this.cinemaList = res.data.data.cinemas
      //   console.log(document.getElementsByTagName('li').length)

      this.$nextTick(() => {
        new BetterScroll('.box', {
          scrollbar: {
            fade: true
          }
        })
      })
    })
  }
}
</script>
<style lang="scss" scoped>
li {
  padding: 0.833333rem;

  display: flex;
  justify-content: space-between;

  .left {
    width: 11.777778rem;
  }

  .cinema_name {
    font-size: 15px;
  }

  .cinema_text {
    color: #797d82;
    font-size: 12px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.box {
  // height: 34.333333rem;
  overflow: hidden;
  position: relative;
  // 修正滚动条的位置
}
</style>