分情况发放优惠券

<template>
  <div id="app">
    <el-container>
      <el-header>
        <h1>停车记录管理</h1>
      </el-header>

      <el-main>
        <el-form label-width="120px">
          <el-form-item label="停车费用">
            <el-input
              v-model="parkingAmount"
              placeholder="输入停车费用"
              type="number"
              @blur="formatParkingAmount"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="addParking"
            >添加停车记录</el-button>
          </el-form-item>
        </el-form>

        <h2>用户信息</h2>
        <el-card>
          <p>停车次数: {{ parkingCount }}</p>
          <p>总停车费用: {{ totalAmount.toFixed(2) }}元</p>
          <p>已获得乘车券: {{ coupons.join(', ') }}</p>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parkingCount: 0,
      totalAmount: 0,
      parkingAmount: '',
      coupons: []
    };
  },
  methods: {
    addParking() {
      const amount = parseFloat(this.parkingAmount);
      if (isNaN(amount) || amount <= 0) {
        this.$message.error('请输入有效的停车费用（大于零，最多两位小数）');
        return;
      }

      this.parkingCount++;
      this.totalAmount += amount;

      this.checkCouponEligibility();

      // 清空输入框
      this.parkingAmount = '';
    },
    checkCouponEligibility() {
      // 满50次停车
      if (this.parkingCount >= 50 && !this.coupons.includes('3元乘车券（停车次数）')) {
        this.issueCoupon('3元乘车券（停车次数）');
      }
      
      // 总费用超过100元
      if (this.totalAmount > 100 && !this.coupons.includes('3元乘车券（停车金额）')) {
        this.issueCoupon('3元乘车券（停车金额）');
      }
    },
    issueCoupon(coupon) {
      this.coupons.push(coupon);
      this.$message.success(`获得了${coupon}`);
    },
    formatParkingAmount() {
      // 格式化为最多两位小数且大于零
      let value = parseFloat(this.parkingAmount);
      if (!isNaN(value) && value > 0) {
        this.parkingAmount = value.toFixed(2);
      } else {
        this.parkingAmount = '';
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  padding: 30px;
}
</style>