src/views/cards/buyCard.vue

<template>
  <div>
    <ul class="choose-area">
      <li>
        <div style="color: #666">卡名称</div>
        <div>微纳园卡</div>
      </li>
      <li>
        <div style="color: #666">选择卡类型</div>
        <div>{{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(startData) }}</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>￥{{unitPrice}}</div>
      </li>
      <li>
        <div style="color: #666">优惠金额</div>
        <div>￥0.00</div>
      </li>
      <li>
        <div style="color: #666">应付金额</div>
        <div style="color: #A31414">￥{{needPay}}</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: "",
      startData: 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: "京A12334",
      carNumberVisible: false,
      parkMoreVisible: false,
      cardNum: 1,
      unitPrice: 10,
      needPay: 0
    };
  },
  methods: {
    //打开时间选择器
    selectData() {
      this.$refs["datePicker"].open();
      // console.log(this.startData)
      // this.endDate = this.startData.setMonth(this.startData.getMonth()+1)
      // console.log(this.endDate)
    },
    handleConfirm() {
      console.log(this.dateVal);
      this.startData = this.$utils.timestampToTime(this.dateVal);
      this.endDate = this.dateVal.setMonth(this.dateVal.getMonth() + 1);
    },
    clickAction(e) {
      console.log(e.name);
      this.carType = e.name;
      this.endDate = this.startData;
    },
    clickActionCarNum(e) {
      this.carNumber = e.name;
    },
    addCardNum() { // 增加购买数量
      this.cardNum++;
      this.calcMoney()
    },
    reduceCarNum() { // 增加购买数量
      if (this.cardNum == 1) {
        return;
      }
      this.cardNum--;
      this.calcMoney()
    },
    calcMoney() {
      this.needPay = this.cardNum*this.unitPrice
    }
  },
  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>