BJ_web_developers / wxgzh

<template>
  <div>
    <ul class="choose-area">
      <li>
        <div style="color: #666">卡名称</div>
        <div>微纳园卡</div>
      </li>

      <li>
        <div style="color: #666">选择卡类型</div>
        <div @click="popupVisible = true">{{carType}}</div>
        <div class="arrow">></div>
      </li>


      <li>
        <div style="color: #666">绑定车牌</div>
        <div @click="carNumberVisible = true">{{carNumber}}</div>
        <div class="arrow">></div>
      </li>

      <li>
        <div style="color: #A31414">生效时间</div>
        <div style="color: #A31414" @click="selectData">{{ $utils.timestampToTime(time) }}</div>
        <div class="arrow">></div>
      </li>

      <li>
        <div style="color: #666">有效期至</div>
        <div>{{ $utils.timestampToTime(endDate)}}</div>
      </li>


      <li>
        <div style="color: #666">购买数量</div>
        <div class="choose-num">
          <span @click="addCardNum">+</span>
          <span>{{cardNum}}</span>
          <span @click="reduceCarNum">-</span>
        </div>
      </li>

      <li>
        <div style="color: #666">单价</div>
        <div>￥10.00</div>
      </li>


      <li>
        <div style="color: #666">优惠金额</div>
        <div>￥0.00</div>
      </li>

      <li>
        <div style="color: #666">应付金额</div>
        <div style="color: #A31414">￥30.00</div>
      </li>

    </ul>

    <div class="parkArea leftRightPadding">
      <p class="parkAreaTitle">
        <span>本卡同时适用于以下停车场：</span>
        <span class="parkMore" @click="parkMoreVisible = true">查看更多</span>
      </p>

      <p>停车场停车场停车停车场</p>
    </div>

    <div  style="margin-top: 34px" class="leftRightPadding">
      <mt-button type="danger" size="large">确定购买</mt-button>
    </div>

    <!-- @touchmove.prevent 阻止默认事件，在选择时间时阻止页面也跟着滚动-->
    <div @touchmove.prevent>
      <mt-datetime-picker
        lockScroll="true"
        ref="datePicker"
        v-model="dateVal"
        type="date"
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日"
        :startDate="startDate"
        @confirm="handleConfirm()"
      ></mt-datetime-picker>
    </div>


    <mt-actionsheet
      :actions="actions"
      v-model="popupVisible">
    </mt-actionsheet>

    <mt-actionsheet
      :actions="carNumList"
      v-model="carNumberVisible">
    </mt-actionsheet>

    <mt-popup
      v-model="parkMoreVisible" class="park-list-wrap"
      >
      <ul class="park-list">
        <li v-for="(i, index) in 10">{{index+1}}、停车场{{i}}</li>
      </ul>
    </mt-popup>

  </div>
</template>

<script>
import { timestampToTime } from '../../utils/utils.js'

export default {
  name: 'buyCard',
  data() {
    return {
      startDate: new Date(),
      dateVal: '',
      selectedValue: '',
      time: new Date(),
      endDate:new Date(),
      popupVisible: false,
      actions: [
        {name:'月卡',num:1, method: this.clickAction },
        {name:'季卡',num:3, method: this.clickAction },
        {name:'年卡',num:12, method: this.clickAction },

      ],
      carType:'月卡',
      carNumList:[
        {name:'停车场1',method: this.clickActionCarNum },
        {name:'停车场2',method: this.clickActionCarNum },
        {name:'停车场3',method: this.clickActionCarNum },
        {name:'停车场4',method: this.clickActionCarNum },
        {name:'停车场5',method: this.clickActionCarNum },
      ],
      carNumber:'',
      carNumberVisible:false,
      parkMoreVisible:false,
      cardNum:1
    }
  },
  methods: {
    //打开时间选择器
    selectData() {

      this.$refs['datePicker'].open()
    },
    handleConfirm() {
      console.log(this.dateVal)
      this.time = this.$utils.timestampToTime(this.dateVal);
    },
    clickAction(e){
      console.log(e.name)
      this.carType = e.name
      this.endDate = this.time
    },
    clickActionCarNum(e){
      this.carNumber = e.name
    },
    addCardNum(){ // 增加购买数量
      this.cardNum ++
    },
    reduceCarNum(){ // 增加购买数量
      if(this.cardNum==1){
        return
      }
      this.cardNum --
    },



  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date)
    }
  },
}
</script>

<style scoped lang="scss">
  .choose-area {
    background: #fff;
    padding: 0 10px;
  }

  .choose-area > li {
    padding-right: 20px;
    position: relative;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    justify-content: space-between;
    .arrow {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 16px;
    }
    &:last-child {
      border-bottom: 0;
    }
  }
  .choose-num{
    height: 28px;
    margin-top: 5px;
    line-height: 28px;
    display: flex;
    border: 1px solid #D8D8D8;
    span{
      display: inline-block;
      &:nth-of-type(1){
        width: 28px;
        height: 28px;
        text-align: center;
        cursor: pointer;
      }
      &:nth-of-type(2){
        width: 50px;
        text-align: center;
        border-left: 1px solid #D8D8D8;
        border-right: 1px solid #D8D8D8;
      }
      &:nth-of-type(3){
        width: 28px;
        height: 28px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
  .parkArea{
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 10px;
    background: #fff;
    color: #999;
  }
  .parkAreaTitle{
    display: flex;
    justify-content: space-between;
    color: #666;
  }
  .parkMore{
    cursor: pointer;
  }
  .park-list-wrap{
    width: 80%;
    max-height: 70%;
    overflow-y: scroll;
    border-radius: 5px;
  }
  .park-list{

    /*width: 80%;*/
    li{
      padding-left: 20px;
      line-height: 25px;
    }
  }

</style>