SmartCommunity/smart/src/views/vehicleInformation/setpPage/recharge.vue

<template>
  <div class="formContent">
    <div>
      <h3>{{this.userName}}</h3>
      <div class="formContent-item_title">充值信息</div>
      <el-row>
        <el-col :span="12">
          <el-col :span="8">车牌类型</el-col>
          <el-col :span="12">月租车</el-col>
        </el-col>
        <!-- 充值类型 -->
        <el-col :span="24">
          <el-col :span="4">费用类型</el-col>
          <el-col :span="20">
            <el-select v-model="valueselected">
              <el-option
                v-for="(item,index) in recharge"
                :key="index"
                :value="item.label"
                :label="item.name"
                @click.native="rechargeDates(item)"
              >
              </el-option>
            </el-select>

          </el-col>
        </el-col>
        <!-- 充值 -->
        <el-col :span="24">
          <el-col :span="12">
            <el-col :span="8">充值天数</el-col>
            <el-col :span="16">
              <el-select v-model="rechargeDays">
                <el-option
                  v-for="(itemes,indexes) in RechargeDaysed"
                  :key="indexes"
                  :value="itemes.name"
                  :label="itemes.label"
                  @click.native="recharges(itemes)"
                ></el-option>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col :span="8">赠送天数</el-col>
            <el-col :span="16">
              <el-select
                disabled
                :placeholder='valueselect'
              >
              </el-select>
            </el-col>
          </el-col>
        </el-col>
        <!-- 日期 -->
        <el-col :span="24">
          <el-col :span="4">开始时间</el-col>
          <el-col :span="20">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期"
              value-format="timestamp"
              @change="datePicker"
            >
            </el-date-picker>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="4">结束时间</el-col>
          <el-col :span="20">
            <el-date-picker
              v-model="value2"
              type="date"
              :placeholder="value2"
              value-format="timestamp"
              disabled
            >
            </el-date-picker>
          </el-col>
          <el-col :span="24">
            <span>车辆未过期，已绑定充值规则，充值开始时间：过期时间+1</span>
          </el-col>
        </el-col>
        <!-- 收费金额 -->
        <el-col :span="24">
          <el-col :span="4">收费金额 </el-col>
          <el-col :span="17">
            <el-input
              :placeholder="chargeAmount"
              :disabled="true"
            >
            </el-input>
          </el-col>
          <el-col
            :span="2"
            style="margin-left: 5px;"
          >元 </el-col>
        </el-col>
        <!-- 支付方式 -->
        <el-col :span="24">
          <el-col :span="4">支付方式</el-col>
          <el-col :span="20">
            <el-select
              v-model="paymentMethod"
              placeholder="请选择"
            >
              <el-option
                value="1"
                label="现金"
              ></el-option>
              <el-option
                value="2"
                label="微信"
              ></el-option>
              <el-option
                value="3"
                label="支付宝"
              ></el-option>
            </el-select>
          </el-col>
        </el-col>
        <!-- 备注 -->
        <el-col :span="24">
          <el-col :span="4">充值备注</el-col>
          <el-col :span="20">
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="inputText"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-col>
        </el-col>
      </el-row>
    </div>

  </div>
</template>





<script>
export default {
  props: ['params'],
  data () {
    return {
      valueselected: '',
      valueselect: '',//天数
      value1: '',//日期时间
      value2: '',
      rechargeDays: '',//充值时间
      chargeAmount: '',//收费金额
      paymentMethod: '',//支付方式
      inputText: '',//备注
      id: '',



      userName: "",
      cardType: "",
      parkId: "",
      cardId: "",


      recharge: [],
      RechargeDaysed: [],
      complimentaryDays: [],
      idType: '',
      valueselectName: "",
      chargeNumber: '',
      timeValue1: '',
      timeValue2: '',
      rechargeDate: [],
    }
  },
  methods: {
    rechargeDates (item) {
      debugger
      // item.nameId
      // this.rechargeDate[item.nameId]
      // this.valueselected = '';
      this.rechargeDays = '';
      this.valueselect = '';
      this.valueselectName = '';
      this.idType = '';
      this.chargeAmount = '';
      this.chargeNumber = '';

      this.RechargeDaysed = [];
      this.complimentaryDays = [];

      this.RechargeDaysed.push({
        label: this.rechargeDate[item.nameId].rechargeAmount * (this.rechargeDate[item.nameId].rechargeType == 0 ? (1 * 1 / 100) : this.rechargeDate[item.nameId].rechargeType == 1 ? (1 * 1) : this.rechargeDate[item.nameId].rechargeType == 2 ? (1 * 1) : this.rechargeDate[item.nameId].rechargeType == 3 ? (1 * 1) : (1 * 1)) + (this.rechargeDate[item.nameId].rechargeType == 0 ? '元' : this.rechargeDate[item.nameId].rechargeType == 1 ? '月' : this.rechargeDate[item.nameId].rechargeType == 2 ? '天' : this.rechargeDate[item.nameId].rechargeType == 3 ? '小时' : '次'),
        name: this.rechargeDate[item.nameId].rechargeAmount * (this.rechargeDate[item.nameId].rechargeType == 0 ? (1 * 1 / 100) : this.rechargeDate[item.nameId].rechargeType == 1 ? (1 * 1) : this.rechargeDate[item.nameId].rechargeType == 2 ? (1 * 1) : this.rechargeDate[item.nameId].rechargeType == 3 ? (1 * 1) : (1 * 1)),
        id: item.nameId,
      })


      this.complimentaryDays.push({
        idType: this.rechargeDate[item.nameId].rechargeType,
        name: this.rechargeDate[item.nameId].sentAmount * (this.rechargeDate[item.nameId].sentType == 0 ? (1 * 1 / 100) : this.rechargeDate[item.nameId].sentType == 1 ? (1 * 1) : this.rechargeDate[item.nameId].sentType == 2 ? (1 * 1) : this.rechargeDate[item.nameId].sentType == 3 ? (1 * 1) : (1 * 1)),
        label: this.rechargeDate[item.nameId].sentAmount * (this.rechargeDate[item.nameId].sentType == 0 ? (1 * 1 / 100) : this.rechargeDate[item.nameId].sentType == 1 ? (1 * 1) : this.rechargeDate[item.nameId].sentType == 2 ? (1 * 1) : this.rechargeDate[item.nameId].sentType == 3 ? (1 * 1) : (1 * 1)) + (this.rechargeDate[item.nameId].sentType == 0 ? '元' : this.rechargeDate[item.nameId].sentType == 1 ? '月' : this.rechargeDate[item.nameId].sentType == 2 ? '天' : this.rechargeDate[item.nameId].sentType == 3 ? '小时' : '次'),
        chargeAmount: this.rechargeDate[item.nameId].basicMoney
      })
      debugger

    },
    datePicker () {

      // valueselect赠送
      // rechargeDays 天数
      if (this.idType == 0) {
        var time = this.value1;
      } else if (this.idType == 1) {
        debugger
        var time = ((parseInt(this.valueselectName) + parseInt(this.rechargeDays * 30)) * 86400000) + this.value1;
      } else if (this.idType == 2) {
        var time = ((parseInt(this.valueselectName) + parseInt(this.rechargeDays)) * 86400000) + this.value1;
      } else if (this.idType == 3) {
        var time = ((parseInt(this.valueselectName) + parseInt(this.rechargeDays)) * 3600000) + this.value1;
      } else if (this.idType == 4) {
        var time = this.value1;
      }
      // var time = ((parseInt(this.valueselected) + parseInt(this.rechargeDays)) * 86400000) + this.value1;
      var timeCode = new Date(time);
      var year = timeCode.getFullYear();
      var month = timeCode.getMonth() + 1;
      var date = timeCode.getDate();
      this.value2 = year + "-" + (month.toString().length == 1 ? ('0' + month) : month) + "-" + (date.toString().length == 1 ? ('0' + date) : date);

      var timeCodes = new Date(this.value1);
      var year = timeCodes.getFullYear();
      var month = timeCodes.getMonth() + 1;
      var date = timeCodes.getDate();
      this.timeValue1 = year + "-" + (month.toString().length == 1 ? ('0' + month) : month) + "-" + (date.toString().length == 1 ? ('0' + date) : date) + ' ' + '00:00:00';
      this.timeValue2 = this.value2 + ' ' + '23:59:59';
    },
    // 充值规则
    rechargeRules () {
      // /sc-community-web/parkingCar/queryRechargeRules
      this.$http
        .get('/sc-community-web/parkingCar/queryRechargeRules', { carType: this.cardType, parkingId: this.parkId })
        .then(({ data, msg, status }) => {
          console.log('data', data);
          this.rechargeDate = data;
          for (let i = 0; i < data.length; i++) {
            this.recharge.push({
              name: data[i].ruleName,
              label: data[i].ruleId,
              nameId: i
            })

          }


        })
        .catch(() => { });
    },
    recharges (item) {
      debugger
      this.id = item.id;
      this.valueselect = this.complimentaryDays[0].label;
      this.valueselectName = this.complimentaryDays[0].name;
      this.idType = this.complimentaryDays[0].idType;
      this.chargeAmount = this.complimentaryDays[0].chargeAmount;
      this.chargeNumber = item.name;
    },
    submit () {
      this.$http.post('/sc-community-web/parkingCar/carCharge', {
        amount: this.chargeAmount,
        carType: this.cardType,
        cardId: this.cardId,
        chargeMethod: this.idType,
        chargeNumber: this.chargeNumber,
        freeNumber: this.valueselectName,
        // orderNo: '',
        parkId: this.parkId,
        payChannel: this.paymentMethod,
        remark: this.inputText,
        validFrom: this.timeValue1,
        validTo: this.timeValue2
      }).then(({ data, status, msg }) => {
      })
      this.$emit('close');
    },
  },
  created () {
    console.log('11111')
    this.params;
    this.userName = this.params.userName;
    this.cardType = this.params.cardType;
    this.parkId = this.params.parkId;
    this.cardId = this.params.cardId;


    this.rechargeRules();

  }
}

</script>


<style scoped>
h3 {
    margin-bottom: 15px;
}
.el-col {
    margin-top: 10px !important;
    line-height: 30px;
}
.el-select {
    width: 90%;
}
.el-col > span {
    font-size: 12px;
    font-weight: 400;
    color: #ff7171;
    line-height: 17px;
    display: flex;
    justify-content: center;
}
</style>