2021年5月1日 团队冲刺阶段05

时间:1.5个小时左右

代码:130行左右

博客:1

学习内容：美化了影院管理、影厅管理的页面

<template>
    <div id="tab-bar">
      <span class="tab-item" @click="switchTo('/home')">
        <img :src="$route.path.includes('/home') ? tabBarImgArr[0].active:tabBarImgArr[0].normal">
        <span :class="{on:$route.path.includes('/home')}">首页</span>
      </span>
      <span class="tab-item" @click="switchTo('/movie')">
        <img :src="$route.path.includes('/movie') ? tabBarImgArr[1].active:tabBarImgArr[1].normal">
        <span :class="{on:$route.path.includes('/movie')}">电影</span>
      </span>
      <span class="tab-item" @click="switchTo('/cinema')">
        <img :src="$route.path.includes('/cinema') ? tabBarImgArr[2].active:tabBarImgArr[2].normal">
        <span :class="{on:$route.path.includes('/cinema')}">影院</span>
      </span>
      <span class="tab-item" @click="switchTo('/my')">
        <img :src="$route.path.includes('/my') ? tabBarImgArr[3].active:tabBarImgArr[3].normal">
        <span :class="{on:$route.path.includes('/my')}">我的</span>
      </span>
    </div>
</template>

<script>
    export default {
        name: "TabBar",
        data(){
          return{
            tabBarImgArr:[
              {normal:require('./images/home_light.svg'),active:require('./images/home_fill_light.svg')},
              {normal:require('./images/movie_light.svg'),active:require('./images/movie_fill_light.svg')},
              {normal:require('./images/cinema_light.svg'),active:require('./images/cinema_fill_light.svg')},
              {normal:require('./images/my_light.svg'),active:require('./images/my_fill_light.svg')},
            ]
          }
        },
        methods:{
          switchTo(path){
            this.$router.replace(path);
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  #tab-bar
    width 100%
    height 1.041rem
    position fixed
    left 0
    bottom 0
    right 0
    z-index 999
    display flex
    background-color: #fff;
    border-top 1px solid #f1f1f1
    .tab-item
        display flex
        flex 1
        justify-content center
        align-items center
        flex-direction column
        font-size 0.21rem
        margin-bottom 0.041rem
        color #333
        img
          margin-bottom 0.041rem
          width 32%
        .on
          color red
</style>

<template>
  <div>
    <div class="movie-item" v-if="movieList.length" v-for="(item,index) in movieList" :key="index">
      <img :src="server+item.poster" alt="" @click="$router.push({path:'/movie_detail',query:{movie_id:item.movie_id}})">
      <div class="info">
        <div class="name" @click="$router.push({path:'/movie_detail',query:{movie_id:item.movie_id}})">{{item.name}}</div>
        <div v-if="new Date()-new Date(item.public_date)>=0">
          <div class="descInfo" v-if="item.score">评分：<span class="number">{{item.score.toFixed(1)}}</span></div>
          <div class="descInfo" v-else>暂无评分</div>
        </div>
        <div v-else>
          <div class="descInfo" v-if="item.wish_num">想看：<span class="number">{{item.wish_num}}</span>人想看</div>
          <div class="descInfo" v-else>暂无想看</div>
        </div>
        <div class="descInfo">类型：{{item.type}}</div>
        <div class="descInfo ellipsis">主演：<span>{{item.actor}}</span></div>
      </div>
      <span class="buy" :class="{pre_sell: new Date(item.public_date)-new Date()>0}" @click="$router.push({path:'/select_cinema',query:{movie_id:item.movie_id}})">{{new Date(item.public_date)-new Date()>0?'预售':'购票'}}</span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "MovieItem",
        data(){
          return{
            //服务器地址
            server:'http://localhost:3000',
          }
        },
        props: {
          movieList: {
            type: Array,
            require: true,
            default: []
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .movie-item
    display flex
    justify-content space-around
    align-items center
    padding .2rem 0
    img
      display inline-block
      width 20%
    .info
      width 68%
      display flex
      flex-flow column
      padding .25rem
      font-size .28rem
      color #9d9d9d
      .name
        font-weight 700
        font-size .345rem
        padding-bottom .2rem
        color #333
      .descInfo
        padding-bottom .12rem
        .number
          color #ffb400
          font-family PingFangSC-Regular,Hiragino Sans GB,sans-serif
          font-weight 700
          font-size .315rem
    .buy
      background-color #dd2727
      border-radius .08rem
      font-size .25rem
      color #fff
      width 12%
      padding .16rem .12rem
      text-align center
    .pre_sell
      background-color #2d98f3
</style>