2021年6月13日 团队冲刺第二阶段10

今天将代码总结了一下，基本上可以实现支付功能，完善了一下逻辑思路，又将所有的代码汇总了一下。

<template>
    <div id="cinema-detail">
      <div class="top">
        <span class="icon-back" @click="$router.go(-1)"></span>
        <span class="name ellipsis">{{currentCinemaInfo.cinema_name}}</span>
      </div>
      <div class="cinema-info">
        <span class="name">{{currentCinemaInfo.cinema_name}}</span>
        <span class="address"><span class="icon icon-address"></span>{{currentCinemaInfo.specified_address}}</span>
        <span class="tel"><span class="icon icon-tel"></span>{{currentCinemaInfo.cinema_phone}}</span>
      </div>
      <el-carousel
        :autoplay=false
        type="card"
        height="5rem"
        arrow="never"
        :loop=false
        :initial-index=initMovieId
        indicator-position="none"
        @change="changeCarousel"
        v-if="carouselReset"
      >
        <el-carousel-item v-for="(item,index) in hasMovieInfo" :key="index">
          <a href="#" @click.prevent="$router.push({path:'/movie_detail',query:{movie_id:item.movie_id}})"><img :src="server+item.poster" alt=""></a>
        </el-carousel-item>
      </el-carousel>
      <div class="movie-info" v-for="(item,index) in hasMovieInfo" :key="index" v-show="movieIndex===Number(index)">
        <span class="arrow"></span>
        <span class="main"><span class="name">{{item.name}}</span><span class="score"><span class="num" v-if="item.score">{{item.score.toFixed(1)}}分</span><span v-else style="font-size: .28rem">暂无评分</span></span></span>
        <span class="intro">
        <span class="time">{{item.movie_long}}</span><span class="split">|</span><span class="type">{{item.type}}</span><span class="split">|</span><span class="actors">{{item.actor}}</span>
        </span>
      </div>
      <ly-tab
        v-model="selectedId"
        :items="items"
        :options="options"
        class="ly-tab"
        v-if="hackReset"
        @change="changeLyTabItem"
      />
      <div class="ticket-container">
        <div class="item" v-for="(item,index) in movieDaySchedule" :key="index">
          <div class="left">
            <span class="start-date">{{item.show_time}}</span>
            <span class="end-date">{{endDate(item)}}散场</span>
          </div>
          <div class="center">
            <div class="info">
              <span class="language">{{item.language}}3D</span>
              <span class="hall">{{item.hall_name}}</span>
            </div>
            <div class="price">{{item.price.toFixed(2)}}元</div>
          </div>
          <div class="right">
            <span class="buy-btn" @click="$router.push({path:'/select_seat',query:{cinema_id:item.cinema_id,movie_id:item.movie_id,schedule_id:item.schedule_id,}})">购票</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import {getCurrentCinemaDetail,getCurrentCinemaMovieSchedule} from '../../api/index'
    import Vue from 'vue'
    import {Indicator} from 'mint-ui';
    import {Carousel,CarouselItem} from 'element-ui'
    import LyTab from 'ly-tab'
    import { formatDate } from '../../common/util/util';
    Vue.use(Carousel);
    Vue.use(CarouselItem);
    Vue.use(LyTab);
    export default {
        name: "CinemaDetail",
        data(){
          return{
            initMovieId:0,
            //当前影院信息
            currentCinemaInfo:{},
            //影院的电影信息
            hasMovieInfo:[],
            //所有的电影安排
            allMovieSchedule:[],
            //电影某天的安排
            movieDaySchedule:[],
            hackReset:false,
            carouselReset:true,
            movieIndex:0,
            //服务器地址
            server:'http://localhost:3000',
            selectedId:0,
            items:[],
            options:{
              activeColor: '#dd2727',
            },
          }
        },
        created() {
          Indicator.open('Loading...');
          this.loadCinemaDetail();
        },
        methods:{
          async loadCinemaDetail(){
            if (this.$route.query.cinema_id) {
              let json = await getCurrentCinemaDetail(this.$route.query.cinema_id);
              if (json.success_code===200){
                this.currentCinemaInfo = json.data;
              }
              json = await getCurrentCinemaMovieSchedule(this.$route.query.cinema_id);
              if (json.success_code===200){
                this.hasMovieInfo = json.data.hasMovieInfo;
                if(this.$route.query.movie_id){
                  this.hasMovieInfo.forEach((val,index)=>{
                    if (this.$route.query.movie_id==val.movie_id) {
                      this.initMovieId = index;
                      this.carouselReset = false;
                      this.$nextTick(() => {
                        this.carouselReset = true;
                      });
                    }
                  });
                }
                let movieScheduleInfo = json.data.movieScheduleInfo;
                let allMovieSchedule = [];
                movieScheduleInfo.forEach((value,index)=>{
                  let movieDate = [];
                  let movieInfo = [];
                  value.forEach((val)=>{
                    if(new Date()-new Date(val.show_date+','+val.show_time)<=0){
                      let flag = true;
                      movieDate.forEach((value)=>{
                        if (value.label===val.show_date) {
                          flag = false;
                        }
                      });
                      if (flag){
                        movieDate.push({label:formatDate(new Date(val.show_date),true),date:val.show_date});
                      }
                      movieInfo.push({
                        cinema_id:val.cinema_id,
                        movie_id:val.movie_id,
                        schedule_id:val.schedule_id,
                        show_date:val.show_date,
                        show_time:val.show_time,
                        language:val.language,
                        movie_long:val.movie_long,
                        hall_name:val.hall_name,
                        price:val.price
                      });
                    }
                  });
                  movieDate.sort((a,b)=>{
                    return a.date-b.date;
                  });
                  movieInfo.sort((a,b)=>{
                    return a.date-b.date;
                  });
                  this.allMovieSchedule[index]={movieDate,movieInfo};
                });
                this.items = this.allMovieSchedule[0].movieDate;
                this.hackReset = false;
                this.$nextTick(() => {
                  this.hackReset = true;
                });
                this.allMovieSchedule[0].movieInfo.forEach((value)=>{
                  if (value.show_date === this.allMovieSchedule[0].movieDate[0].date){
                    this.movieDaySchedule.push(value);
                  }
                });
                this.movieDaySchedule.sort((a,b)=>{
                  return new Date(a.show_date+','+a.show_time)-new Date(b.show_date+','+b.show_time);
                });
              }
            }
            Indicator.close();
          },
          //切换轮播图
          changeCarousel(index){
            this.movieIndex = index;
            this.items = this.allMovieSchedule[index].movieDate;
            this.hackReset = false;
            this.$nextTick(() => {
              this.hackReset = true;
            });
            this.selectedId = 0;
            this.movieDaySchedule = [];
            this.allMovieSchedule[index].movieInfo.forEach((value)=>{
              if (value.show_date === this.allMovieSchedule[index].movieDate[0].date){
                this.movieDaySchedule.push(value);
              }
            });
            this.movieDaySchedule.sort((a,b)=>{
              return new Date(a.show_date+','+a.show_time)-new Date(b.show_date+','+b.show_time);
            });
          },
          //切换日期
          changeLyTabItem(item){
            this.movieDaySchedule = [];
            this.allMovieSchedule[this.movieIndex].movieInfo.forEach((value)=>{
              if (value.show_date === item.date){
                this.movieDaySchedule.push(value);
              }
            });
            this.movieDaySchedule.sort((a,b)=>{
              return new Date(a.show_date+','+a.show_time)-new Date(b.show_date+','+b.show_time);
            });
          },
          //影片结束时间
          endDate(item){
            let h = parseInt(Number(item.show_time.split(':')[0])+(parseInt(item.movie_long)/60));
            let m = Number(item.show_time.split(':')[1])+parseInt(item.movie_long)%60;
            if (m>59){
              return ((h+parseInt(m/60))<10?'0'+(h+parseInt(m/60)):(h+parseInt(m/60)))+':'+((m%60)<10?'0'+(m%60):(m%60));
            } else{
              return (h<10?'0'+h:h)+':'+(m<10?'0'+m:m);
            }
          }
        },
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  #cinema-detail
    width 100%
    height 100%
    color #000
    font-size .3125rem
    .top
      width 100%
      height 1rem
      display flex
      justify-content center
      align-items center
      position fixed
      top 0
      left 0
      background-color #dd2727
      color #fff
      z-index 999
      .icon-back
        font-size .4rem
        position absolute
        left .3rem
      .name
        width 60%
        font-size .375rem
        text-align center
        line-height .375rem
    .cinema-info
      margin-top 1rem
      color #888
      display flex
      flex-flow column
      padding .25rem
      .name
        color #000
        font-size .345rem
        font-weight 700
        margin-bottom .25rem
      .address,.tel
        margin-bottom .12rem
        font-size .28rem
        line-height .375rem
        display flex
        letter-spacing .02rem
        align-items flex-start
        .icon
          font-size .375rem
          margin-right .08rem
    .movie-info
      height 1.4rem
      display flex
      flex-flow column
      align-items center
      .arrow
        border .2rem solid transparent
        border-bottom .2rem solid #fff
        margin-top -.38rem
        z-index 999
      .main
        font-size .345rem
        .name
          line-height .8rem
          font-weight 700
        .score
          color #ffb400
          margin-left .25rem
          font-size .1rem
          .num
            font-size .3125rem
            font-weight 700
            font-family PingFangSC-Regular, Hiragino Sans GB, sans-serif
      .intro
        font-size .25rem
        color #888
        .split
          margin 0 .08rem
    .el-carousel
      background linear-gradient(to bottom, #242342 0%,#11182B 100%)
      .el-carousel__item
        margin-top .25rem
        height 90%
        a
          font-size .3125rem
          padding-top .04rem
          img
            width 100%
            height 100%
            box-sizing border-box
            border 0.06rem solid #fff
    .ly-tab
      color #000
      border none
    .ticket-container
      padding .25rem
      .item
        display flex
        justify-content space-around
        align-items center
        border-bottom 0.02rem solid #f1f1f1
        padding .25rem 0
        .left
          flex 1
          display flex
          flex-flow column
          justify-content center
          .start-date
            font-weight bolder
            font-size .375rem
            margin-bottom .12rem
          .end-date
            color #888
            font-size .25rem
        .center
          flex 3
          display flex
          justify-content space-between
          align-items center
          margin 0 .25rem
          .info
            display flex
            flex-flow column
            justify-content center
            align-items center
            margin-left .25rem
            .language
              font-size .28rem
              margin-bottom .12rem
            .hall
              color #888
              font-size .25rem
          .price
            color #dd2727
            margin-right .25rem
        .right
          flex 1
          text-align center
          border 0.0125rem solid #dd2727
          padding .12rem 0
          border-radius .25rem
          color #dd2727
          font-size .25rem
</style>