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

今天写了支付的界面，完成了逻辑上的代码，但是调不了接口有点难度，经过我们商量之后，这个小小的功能暂时放弃，用户支付完成后还可以自动生成取票码，明天继续。

<template>
    <div id="pay">
      <div class="top">
        <span class="icon-back" @click="back"></span>
        <span class="name ellipsis">支付订单</span>
      </div>
      <div class="order-info">
        <div class="time-down">
          <div class="title">支付剩余时间</div>
          <div class="time">
            <div class="minute"><span>{{countdown_m_b}}</span><span>{{countdown_m_s}}</span></div>
            <p>:</p>
            <div class="second"><span>{{countdown_s_b}}</span><span>{{countdown_s_s}}</span></div>
          </div>
        </div>
        <div class="order-num">
          <span class="left icon-shop"></span>
          <div class="right">
            <div class="total">¥{{Number(this.$cookies.get('total_price')).toFixed(2)}}</div>
            <div class="num">订单编号：{{this.$cookies.get('order_num')}}</div>
          </div>
        </div>
      </div>
      <div class="pay-type">
        <div class="wechat type"><span class="icon icon-wechat"></span><p>微信支付</p><span :class="[{'icon-circle-selected-fill':selectPayType},{'icon-circle-unselect':!selectPayType}]" @click="selectPayType?selectPayType:selectPayType=!selectPayType"></span></div>
        <div class="alipay type"><span class="icon icon-alipay"></span><p>支付宝</p><span :class="[{'icon-circle-selected-fill':!selectPayType},{'icon-circle-unselect':selectPayType}]" @click="!selectPayType?selectPayType:selectPayType=!selectPayType"></span></div>
      </div>
      <div class="bottom">
        <div class="pay-btn" @click="handlePay">确认支付</div>
      </div>
    </div>
</template>

<script>
    import {order,getScheduleById,updateScheduleSeat} from '../../api/index'
    import {Indicator,MessageBox,Toast} from 'mint-ui'
    export default {
        name: "Pay",
        data(){
          return{
            scheduleInfo:{},
            seatInfo:[],
            countdown_m_b:'',
            countdown_m_s:'',
            countdown_s_b:'',
            countdown_s_s:'',
            selectPayType:true,//微信
            timer:'',
          }
        },
        created(){
          Indicator.open('Loading...');
          this.loadInfo();
          if (this.$cookies.get('countdown_m')&&this.$cookies.get('countdown_m')){
            if (!this.$cookies.get('countdown_m')[1]) {
              this.countdown_m_s = Number(this.$cookies.get('countdown_m')[0]);
              this.countdown_m_b = 0;
            }
            if (!this.$cookies.get('countdown_s')[1]) {
              this.countdown_s_s = Number(this.$cookies.get('countdown_s')[0]);
              this.countdown_s_b = 0;
            }
            this.countdown_m_s = Number(this.$cookies.get('countdown_m')[1]);
            this.countdown_m_b = Number(this.$cookies.get('countdown_m')[0]);
            this.countdown_s_s = Number(this.$cookies.get('countdown_s')[1]);
            this.countdown_s_b = Number(this.$cookies.get('countdown_s')[0]);
          }
          this.timer = setInterval(()=>{
              if (this.countdown_s_s!==0){
                this.countdown_s_s-=1;
              } else{
                if (this.countdown_s_b!==0){
                  this.countdown_s_b -=1;
                  this.countdown_s_s-=1;
                  this.countdown_s_s = 9;
                } else{
                  if (this.countdown_m_s!==0){
                    this.countdown_m_s-=1;
                    this.countdown_s_b=5;
                    this.countdown_s_s-=1;
                    this.countdown_s_s = 9;
                  } else{
                    if (this.countdown_m_b!==0) {
                      this.countdown_m_b-=1;
                      this.countdown_m_s=1;
                      this.countdown_s_b=5;
                      this.countdown_s_s-=1;
                      this.countdown_s_s = 9;
                    } else{
                      clearInterval(this.timer);
                      this.back();
                    }
                  }
                }
              }
          },1000);
        },
        methods:{
          async loadInfo(){
            let json = await getScheduleById(this.$route.query.schedule_id);
            if (json.success_code===200){
              this.scheduleInfo = json.data;
              this.seatInfo = this.scheduleInfo.seat_info;
              this.seatInfo = JSON.parse(this.seatInfo);
            }
            Indicator.close();
          },
          async back(){
            this.$cookies.remove('countdown_m');
            this.$cookies.remove('countdown_s');
            this.$cookies.remove('order_num');
            this.$cookies.remove('total_price');
              let currentIndex;
              if (this.$cookies.get('seat_1')) {
                this.seatInfo.forEach((value,index)=>{
                  if (Number(this.$cookies.get('seat_1'))===value){
                    currentIndex = index;
                  }
                });
                this.seatInfo.splice(currentIndex,1);
              }
              if (this.$cookies.get('seat_2')) {
                this.seatInfo.forEach((value,index)=>{
                  if (Number(this.$cookies.get('seat_2'))===value){
                    currentIndex = index;
                  }
                });
                this.seatInfo.splice(currentIndex,1);
              }
              if (this.$cookies.get('seat_3')) {
                this.seatInfo.forEach((value,index)=>{
                  if (Number(this.$cookies.get('seat_3'))===value){
                    currentIndex = index;
                  }
                });
                this.seatInfo.splice(currentIndex,1);
              }
              if (this.$cookies.get('seat_4')) {
                this.seatInfo.forEach((value,index)=>{
                  if (Number(this.$cookies.get('seat_4'))===value){
                    currentIndex = index;
                  }
                });
                this.seatInfo.splice(currentIndex,1);
              }
              let json = await updateScheduleSeat(this.$route.query.schedule_id,JSON.stringify(this.seatInfo));
              if (json.success_code===200){
                this.$cookies.remove('seat_1');
                this.$cookies.remove('seat_2');
                this.$cookies.remove('seat_3');
                this.$cookies.remove('seat_4');
                this.$cookies.remove('seat_count');
                this.$cookies.remove('order_phone');
                clearInterval(this.timer);
                Toast({
                  message: '解除座位锁定成功',
                  position: 'middle',
                  duration: 2000
                });
                this.$router.go(-2);
              }
          },
          async handlePay(){
            let info;
            if (this.selectPayType){
              info = '您的微信将支付￥'+(Number(this.$cookies.get('total_price')).toFixed(2))+'元';
            } else{
              info = '您的支付宝将支付￥'+(Number(this.$cookies.get('total_price')).toFixed(2))+'元';
            }
            MessageBox.confirm(info,'支付提示').then(async action =>{
              if (action==='confirm'){
                  let seatArr = [];
                  if (this.$cookies.get('seat_1')) {
                    seatArr.push(Number(this.$cookies.get('seat_1')));
                  }
                  if (this.$cookies.get('seat_2')) {
                    seatArr.push(Number(this.$cookies.get('seat_2')));
                  }
                  if (this.$cookies.get('seat_3')) {
                    seatArr.push(Number(this.$cookies.get('seat_3')));
                  }
                  if (this.$cookies.get('seat_4')) {
                    seatArr.push(Number(this.$cookies.get('seat_4')));
                  }
                  let json = await order(
                    this.$cookies.get('user_id'),
                    this.$route.query.schedule_id,
                    this.$cookies.get('order_phone'),
                    new Date().getFullYear()+'-'+(Number(new Date().getMonth())+1)+'-'+new Date().getDate(),
                    seatArr.length,
                    this.$cookies.get('total_price'),
                    JSON.stringify(seatArr),
                    (this.selectPayType?0:1)
                  );
                  if (json.success_code===200){
                    MessageBox.alert('您的取票码为:'+json.data.phone_code,'支付成功');
                  }
                  this.$cookies.remove('seat_1');
                  this.$cookies.remove('seat_2');
                  this.$cookies.remove('seat_3');
                  this.$cookies.remove('seat_4');
                  this.$cookies.remove('seat_count');
                  this.$cookies.remove('order_phone');
                  this.$cookies.remove('countdown_m');
                  this.$cookies.remove('countdown_s');
                  this.$cookies.remove('order_num');
                  this.$cookies.remove('total_price');
                  clearInterval(this.timer);
                  this.$router.push('/home');
              }
            });
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  #pay
    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
      .icon-back
        font-size .4rem
        position absolute
        left .3rem
      .name
        width 60%
        font-size .345rem
        text-align center
    .order-info
      margin-top 1rem
      height 3rem
      border-bottom .04rem dashed #f1f1f1
      .time-down
        display flex
        justify-content center
        align-items center
        flex-flow column
        padding-bottom .25rem
        border-bottom .04rem dashed #ccc
        margin 0 .25rem
        .title
          padding .2rem 0
          font-size .28rem
        .time
          display flex
          justify-content center
          align-items center
          span
            font-size .25rem
            display inline-block
            text-align center
            line-height .36rem
            width .36rem
            height .36rem
            background-color: #333
            color #fff
            &:first-child
              margin-right .12rem
          p
            padding 0 .12rem
      .order-num
        display flex
        justify-content center
        align-items center
        padding-top .4rem
        position relative
        .left
          font-size 1rem
          position absolute
          left .8rem
          top .4rem
        .right
          position absolute
          left 2.2rem
          top .4rem
          display flex
          flex-flow column
          .total
            font-size .46rem
            margin-bottom .21rem
          .num
            font-size .28rem
            letter-spacing .02rem
    .pay-type
      border-top .2rem solid #f1f1f1
      position fixed
      width 100%
      left 0
      top 4rem
      bottom 0
      background-color #f1f1f1
      .type
        padding .25rem .3rem
        display flex
        justify-content space-between
        align-items center
        position relative
        border-bottom .04rem solid #f1f1f1
        background-color #fff
        span
          font-size .6rem
        p
          position absolute
          left 1.2rem
    .bottom
      border-top .02rem solid #f1f1f1
      position fixed
      width 100%
      left 0
      bottom 0
      display flex
      justify-content center
      align-items center
      flex-flow column
      padding .25rem
      box-sizing border-box
      z-index 999
      .pay-btn
        width 100%
        background-color #fe9900
        color #fff
        height .8rem
        display flex
        justify-content center
        align-items center
        border-radius .12rem
        font-size .28rem
</style>

<template>
    <div id="select-cinema">
      <div class="top">
        <span class="icon-back" @click="$router.go(-1)"></span>
        <span class="name ellipsis">{{movieInfo.name}}</span>
      </div>
      <ly-tab
        v-model="selectedId"
        :items="items"
        :options="options"
        class="ly-tab"
        v-if="hackReset"
        @change="changeLyTabItem"
      />
      <div class="content">
        <div class="item" v-for="(item,index) in dateCinemaSchedule" :key="index" @click="$router.push({path:'/cinema_detail',query:{movie_id:$route.query.movie_id,cinema_id:item.cinema_id}})">
          <div class="left">
            <div class="name ellipsis">{{item.cinema_name}}</div>
            <div class="address ellipsis">{{item.specified_address}}</div>
            <div class="label-block"><span>小吃</span><span>4D厅</span><span>杜比全景声厅</span><span>巨幕厅</span></div>
          </div>
          <!--<div class="right">-->
            <!--<div class="price-block"><span class="price">23</span>元起</div>-->
          <!--</div>-->
        </div>
      </div>
    </div>
</template>

<script>
    import {getMovieDetail,getCurrentMovieSchedule} from '../../api/index'
    import {formatDate} from '../../common/util/util'
    import {Indicator} from 'mint-ui'
    import Vue from 'vue'
    import LyTab from 'ly-tab'
    Vue.use(LyTab);
    export default {
        name: "SelectCinema",
        data(){
          return{
            movieInfo:'',
            selectedId:0,
            hasCinemaInfo:[],
            cinemaScheduleInfo:[],
            dateCinemaSchedule:[],
            hackReset:true,
            items:[],
            options:{
              activeColor: '#dd2727',
            },
          }
        },
        created() {
          Indicator.open('Loading...');
          this.loadInfo();
        },
        methods:{
          async loadInfo(){
            let json =await getMovieDetail(this.$route.query.movie_id);
            if (json.success_code===200){
              this.movieInfo = json.data[0];
            }
            json = await getCurrentMovieSchedule(this.$route.query.movie_id);
            if (json.success_code===200){
              this.hasCinemaInfo = json.data.hasCinemaInfo;
              this.cinemaScheduleInfo = json.data.cinemaScheduleInfo;
              this.cinemaScheduleInfo.forEach((value)=>{
                this.removeRepeat(value, 'cinema_id');
              });
              this.hasCinemaInfo.forEach((value)=>{
                this.items.push({label:formatDate(new Date(value[0].show_date),true),date:value[0].show_date});
              });
              this.hackReset = false;
              this.$nextTick(() => {
                this.hackReset = true;
              });
              this.dateCinemaSchedule = this.cinemaScheduleInfo[0];
            }
            Indicator.close();
          },
          //切换日期
          changeLyTabItem(item){
            this.hasCinemaInfo.forEach((value,index)=>{
              if (value[0].show_date===item.date){
                this.dateCinemaSchedule = this.cinemaScheduleInfo[index];
              }
            });
          },
          //去除重复的影院
          removeRepeat(arr, key){
            for(let i = 0; i < arr.length; i++) {
              for(let j = i+1; j < arr.length; j++) {
                if(arr[i][key] === arr[j][key]){
                  arr.splice(j, 1); j = j-1;
                }
              }
            }
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  #select-cinema
    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
      .icon-back
        font-size .4rem
        position absolute
        left .3rem
      .name
        width 60%
        font-size .375rem
        line-height .375rem
        text-align center
    .ly-tab
      position fixed
      top 1rem
      left 0
    .select
      position fixed
      left 0
      top 1.68rem
      width 100%
      height .8rem
      display flex
      justify-content space-around
      align-items center
      border-bottom .03rem solid #f1f1f1
      border-top .03rem solid #f1f1f1
      box-sizing border-box
      background-color #fff
      .option
        width 33.33%
        box-sizing border-box
        padding .1rem .6rem
        display flex
        justify-content center
        align-items flex-end
        font-size .28rem
        border-right .02rem solid #f1f1f1
        &:last-child
          border-right none
        .arrow
          margin-left .1rem
          padding-bottom .05rem
          &::after
            content ''
            width 0
            height 0
            overflow hidden
            font-size 0
            line-height 0
            border-width .1rem
            border-style solid
            border-color #888 transparent transparent transparent
    .content
      margin-top 2rem
      font-size .3125rem
      .item
        display flex
        justify-content center
        align-items center
        box-sizing border-box
        padding .25rem
        width 100%
        margin-bottom .25rem
        .left
          width 100%
          .name
            font-size .345rem
            line-height .36rem
            font-weight 700
            margin-bottom .25rem
          .address
            font-size .28rem
            height .3rem
            color #666
            margin-bottom .25rem
          .label-block
            display flex
            span
              padding .06rem
              font-size .1rem
              border .01rem solid #f90
              margin-right .1rem
              border-radius .04rem
              color #f90
        .right
          width 20%
          text-align center
          .price-block
            color #dd2727
            .price
              font-size .38rem
</style>