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

<template>
  <div class="formContent">
    <el-form
      ref="formDate"
      label-width="80px"
      :rules="rules"
      :model="formDate"
    >
      <div>
        <h3>{{this.userName}}</h3>
        <div class="formContent-item_title">充值信息</div>
        <el-row>
          <el-col :span="12">
            <el-col :span="9">车牌类型</el-col>
            <el-col :span="12">{{this.cardType== 0 ? '临时车'
          : this.cardType == 1 ? 'VIP车'
            : this.cardType == 2 ? '月租车'
              : this.cardType == 3 ? '充时车'
                : this.cardType == 4 ? '时租车'
                  : this.cardType == 5 ? '产权车'
                    : this.cardType == 6 ? '计次车'
                      : this.cardType == 7 ? '贵宾卡'
                        : '员工卡'}}</el-col>
          </el-col>
          <!-- 充值类型 -->
          <el-col :span="24">
            <el-col
              :span="0.5"
              style="content: '*';color: #F56C6C;"
            >*</el-col>
            <el-col :span="4">充值规则</el-col>
            <el-col :span="19">
              <el-form-item
                prop="parkingArea"
                ref="againValue"
              >
                <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-form-item>

            </el-col>
          </el-col>
          <!-- 充值 -->
          <el-col :span="24">
            <el-col :span="12">
              <el-col
                :span="0.5"
                style="content: '*';color: #F56C6C;"
              >*</el-col>
              <el-col :span="8">充值天数</el-col>
              <el-col :span="14">
                <el-form-item
                  prop="parkingDays"
                  ref="againDays"
                >
                  <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-form-item>
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8">赠送天数</el-col>
              <el-col :span="15">
                <el-select
                  disabled
                  :placeholder='valueselect'
                >
                </el-select>
              </el-col>
            </el-col>
          </el-col>
          <!-- 日期 -->
          <el-col :span="24">
            <el-col
              :span="0.5"
              style="content: '*';color: #F56C6C;"
            >*</el-col>
            <el-col :span="4">开始时间</el-col>
            <el-col :span="18">
              <el-form-item
                prop="parkingPicker"
                ref="againPicker"
              >
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  value-format="timestamp"
                  @change="datePicker"
                >
                </el-date-picker>
              </el-form-item>

            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col
              :span="4"
              style="margin-right: 5px;"
            >结束时间</el-col>
            <el-col :span="18">
              <el-date-picker
                v-model="value2"
                type="date"
                :placeholder="value2"
                value-format="timestamp"
                disabled
              >
              </el-date-picker>
            </el-col>
            <el-col
              :span="24"
              v-show="this.carStatus == 2 ? true : false"
              style="margin-left:12px"
            >
              <span>车辆未过期，已绑定充值规则，充值开始时间：过期时间+1</span>
            </el-col>
          </el-col>
          <!-- 收费金额 -->
          <el-col
            :span="24"
            style="margin-top: 8px;"
          >
            <el-col
              :span="4"
              style="margin-right: 5px;"
            >收费金额 </el-col>
            <el-form-item>
              <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-form-item>

          </el-col>
          <!-- 支付方式 -->
          <el-col :span="24">
            <el-col
              :span="0.5"
              style="content: '*';color: #F56C6C;"
            >*</el-col>
            <el-col
              :span="4"
              style="margin-right: -2px;"
            >支付方式</el-col>
            <el-col :span="17">
              <el-form-item
                prop="parkingMethod"
                ref="againMethod"
              >
                <el-select
                  v-model="paymentMethod"
                  placeholder="请选择"
                  @change="method"
                >
                  <el-option
                    value="1"
                    label="微信"
                  ></el-option>
                  <el-option
                    value="2"
                    label="支付宝"
                  ></el-option>
                  <el-option
                    value="3"
                    label="现金"
                  ></el-option>
                  <el-option
                    value="4"
                    label="预存"
                  ></el-option>
                  <el-option
                    value="5"
                    label="其他"
                  ></el-option>
                </el-select>
              </el-form-item>

            </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>
    </el-form>

  </div>
</template>





<script>
export default {
  props: ['params'],
  data () {
    return {

      communityId: '',//社区id
      valueselected: '',
      valueselect: '',//天数
      value1: '',//日期时间
      value2: '',
      rechargeDays: '',//充值时间
      chargeAmount: '',//收费金额
      paymentMethod: '',//支付方式
      inputText: '',//备注
      id: '',



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


      recharge: [],
      RechargeDaysed: [],
      complimentaryDays: [],
      idType: '',
      valueselectName: "",
      chargeNumber: '',
      timeValue1: '',
      timeValue2: '',
      rechargeDate: [],
      fullCarNoStr: '',
      residentId: '',
      ruleId: '',
      ruleNamed: '',
      credit: '',
      rechargeDatesName: '',
      carStatus: '',
      formDate: {
        parkingArea: '',
        parkingDays: '',
        parkingPicker: '',
        parkingMethod: ''
      },
      parking: false,
      rules: {
        parkingArea: [{ required: true, message: '请选择充值规则', trigger: 'change' }],
        parkingDays: [{ required: true, message: '请选择充值天数', trigger: 'change' }],
        parkingPicker: [{ required: true, message: '请选择充值天数', trigger: 'change' }],
        parkingMethod: [{ required: true, message: '请选择充值天数', trigger: 'change' }],
      }
    }
  },
  methods: {
    method () {
      if (this.rules.parkingMethod[0].required == true && this.formDate.parkingMethod == '') {
        this.formDate.parkingMethod = '验证'
        this.rules.parkingMethod[0].required = this.formDate.parking;
        this.clearValidate('againMethod');
      }
    },
    clearValidate (formName) {
      this.$refs[formName].clearValidate();
    },
    rechargeDates (item) {
      if (this.rules.parkingArea[0].required == true && this.formDate.parkingArea == '') {
        this.formDate.parkingArea = '验证'
        this.rules.parkingArea[0].required = this.formDate.parking;
        this.clearValidate('againValue');
      }
      if (item.name != undefined) {
        this.rechargeDatesName = item.name;
      }
      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,
      })

    },
    datePicker () {
      if (this.rules.parkingPicker[0].required == true && this.formDate.parkingPicker == '') {
        this.formDate.parkingPicker = '验证'
        this.rules.parkingPicker[0].required = this.formDate.parking;
        this.clearValidate('againPicker');
      }


      // valueselect赠送
      // rechargeDays 天数
      if (this.idType == 0) {
        var time = this.value1;
      } else if (this.idType == 1) {
        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 () {
      this.$http
        .get('/sc-community/parkingCar/queryRechargeRules', { carType: this.cardType, parkingId: this.parkId })
        .then(({ data, msg, status }) => {
          this.rechargeDate = data;
          var daraRes = {
            nameId: ''
          }
          // daraRes.nameId = this.params.ruleId;
          // this.rechargeDates(daraRes);
          for (let i = 0; i < data.length; i++) {
            if (data[i].ruleId == this.params.ruleId) {
              daraRes.nameId = i;
              this.rechargeDates(daraRes);
            }
            this.recharge.push({
              name: data[i].ruleName,
              label: data[i].ruleId,
              nameId: i
            })
            if (data[i].ruleId == this.params.ruleId) {
              this.rechargeDatesName = data[i].ruleName
            }

          }


        })
        .catch(() => { });
    },
    recharges (item) {
      if (this.rules.parkingDays[0].required == true && this.formDate.parkingDays == '') {
        this.formDate.parkingDays = '验证'
        this.rules.parkingDays[0].required = this.formDate.parking;
        this.clearValidate('againDays');
      }


      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 / 100;
      this.chargeNumber = item.name;
    },
    submit () {
      this.$refs.formDate.validate((valid) => {
        if (valid) {
          this.$http.post('/sc-community/parkingCar/carCharge', {
            amount: this.chargeAmount * 100,
            communityId: this.communityId,
            carType: this.cardType,
            cardId: this.cardId,
            chargeMethod: this.idType,
            chargeNumber: this.chargeNumber,
            freeNumber: this.valueselectName,
            // orderNo: '',
            parkId: this.parkId,
            payChannel: this.paymentMethod,
            payMethod: this.paymentMethod,
            remark: this.inputText,
            validFrom: this.timeValue1,
            validTo: this.timeValue2,
            platNo: this.fullCarNoStr,
            userId: this.residentId,
            // ruleName: '',
            ruleName: this.rechargeDatesName,
            credit: this.valueselectName,//充值月份
            payStatus: this.paymentMethod
          }).then(({ data, status, msg }) => {
            if (status == 0) {
              this.params.callback();
              this.$emit('close');
              this.$message.success('成功');
            }
          })
        } else {
          return false;
        }
      })



      // this.params.callback();
      // this.$emit('close');
    },
  },
  created () {

    // this.formDate.parkingArea = '验证'
    // this.formDate.parkingDays = '验证'
    // this.formDate.parkingPicker = '验证'
    // this.formDate.parkingMethod = '验证'
    debugger
    this.communityId = this.params.communityId;
    this.userName = this.params.userName;
    this.cardType = this.params.cardType;
    this.parkId = this.params.parkId;
    this.cardId = this.params.cardId;
    this.fullCarNoStr = this.params.fullCarNoStr;
    this.residentId = this.params.residentId;
    this.ruleId = this.params.ruleId;
    this.carStatus = this.params.carStatus;
    this.valueselected = this.params.ruleId;

    this.rechargeRules();


  }
}

</script>


<style lang="scss" scoped>
h3 {
    margin-bottom: 15px;
    /* text-align: center !important; */
    font-size: 16px !important;
}
.el-col {
    margin-top: 5px !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;
}
/deep/.el-form-item__content {
    margin-left: 0px !important;
}

.formContent-item_title {
    margin-bottom: 0 !important;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 332px !important;
}
</style>