延迟法定退休年龄计算器源码免费分享

延迟法定退休计算器，废话直接上图和代码

以上结果是依据《关于实施渐进式延迟法定退休年龄的决定》计算的法定退休年龄。
职工达到最低缴费年限，可以自愿选择弹性提前退休，提前时间最长不超过三年，细则详见《决定》。

<template>
  <view class="app">
    <!-- 修改开始 -->
    <view class="background-container" :style="{ backgroundImage: `url(${backgroundImage})` }">
      <view class="container">
        <!-- 输入信息容器 -->
        <view class="form-container">
          <view class="form-title">请输入您的相关信息</view>
          <view class="form-group">
            <label for="gender">性别</label>
            <picker mode="selector" :range="genderOptions" @change="onGenderChange">
              <view class="picker">
                {{ genderOptions[genderIndex] }}
              </view>
            </picker>
          </view>
          <view class="form-group">
            <label for="birthdate">出生年月</label>
            <picker mode="date" fields="month" @change="onDateChange">
              <view class="picker">
                {{ birthdate }}
              </view>
            </picker>
          </view>
          <view class="line-separator"></view>
          <button type="button" @click="calculateRetirement" class="btn">点击计算</button>
          <view v-if="errorMessage" class="error-message">{{ errorMessage }}</view>
        </view>
        <!-- 说明容器 -->
        <view class="info-container">
          <view class="info">
            测算说明：
            <view>根据全国人大常委会《关于实施渐进式延迟法定退休年龄的决定》测算法定退休年龄。</view>
            <view>根据新华社权威解读，选项中原55岁退休女职工的含义为女干部，原50岁退休女职工含义为女工人。</view>
            <view>测算数据仅供参考，具体以官方公布政策为准。</view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="showResultModal" class="result-modal">
      <view class="result-container" :style="{ backgroundImage: `url(${modalBackgroundImage})` }">
        <view class="result-content">
          <view class="result-title">你的法定退休年龄是：</view>
          <view class="result-age">{{ retirementAge.toFixed(2) }}岁</view>
          <view class="result-date">退休日期：{{ retirementDate.getFullYear() }}年{{ retirementDate.getMonth() + 1 }}月</view>
          <view class="result-delay">延迟月数：{{ delayMonths }}个月</view>
          <view class="result-info">以上结果是依据《关于实施渐进式延迟法定退休年龄的决定》计算的法定退休年龄。职工达到最低缴费年限，可以自愿选择弹性提前退休，提前时间最长不超过三年，细则详见《决定》。</view>
          <button class="btn" @click="closeModal">关闭</button>
        </view>
      </view>
    </view>
    <!-- 修改结束 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      genderOptions: ["男", "女（原法定退休年龄55岁）", "女（原法定退休年龄50岁）"],
      genderIndex: 0,
      birthdate: "点击选择日期",
      retirementAge: 0,
      retirementDate: new Date(),
      delayMonths: 0,
      resultsVisible: false,
      showResultModal: false,
      backgroundImage: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhpsvoeh7nuhpsnuvonuhog/activities/retire/retire-header-bg-second.jpg',
      modalBackgroundImage: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhpsvoeh7nuhpsnuvonuhog/activities/retire/retire-cumpute-result-second-2.jpg' 
      // 原创作者Health，微信联系：MRHealt，感谢体验！
    };
  },
  methods: {
    onGenderChange(e) {
      this.genderIndex = e.detail.value;
    },
    onDateChange(e) {
      this.birthdate = e.detail.value;
    },
    calculateRetirement() {
      if (this.birthdate === "点击选择日期" || this.genderIndex === null) {
        this.errorMessage = '请输入相关信息';
        return;
      } else {
        this.errorMessage = ''; // 清空错误信息
      }

      const gender = this.genderIndex;
      const birthMonth = new Date(this.birthdate).getMonth();
      const currentYear = 2024;
      let retirementAge, maxRetirementAge;

      if (gender === 0) {
        maxRetirementAge = 63;
        retirementAge = 60 + 3 * (60 + birthYear - 2021) / 12;
      } else if (gender === 1) {
        maxRetirementAge = 58;
        retirementAge = 55 + 3 * (55 + birthYear - 2021) / 12;
      } else if (gender === 2) {
        maxRetirementAge = 55;
        retirementAge = 50 + 3 * (50 + birthYear - 2021) / 12;
      }
      let retirementDate = new Date(birthYear, birthMonth);
      retirementDate.setFullYear(Math.floor(birthYear + retirementAge));
      retirementDate.setMonth(birthMonth);
      const currentRetirementAge = gender === 0 ? 60 : (gender === 1 ? 55 : 50);
      const delayMonths = (retirementAge - currentRetirementAge) * 12;
      this.retirementAge = retirementAge;
      this.retirementDate = retirementDate;
      this.delayMonths = Math.round(delayMonths);
      this.showResultModal = true;
    },
    closeModal() {
      this.showResultModal = false;
    },
    resetForm() {
      this.genderIndex = 0;
      this.birthdate = "点击选择日期";
      this.resultsVisible = false;
    }
  }
};
</script>

<style scoped>
.background-container {
  width: 100%;
  height: 100vh;
  background-size: contain;
 background-position: top;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-color: #fecdb7;
}

.container {
  background: #fff;
  width: calc(100% - 40px);
  padding: 20px;
  border-radius: 10px;
  margin-top: 60px;
}

.form-container, .info-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.form-title {
  font-size: 18px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

label {
  flex: 1;
}

.picker {
  flex: 2;
  padding: 10px;
  background-color: #f1f1f1;
  border-radius: 5px;
}

.line-separator {
  height: 1px;
  background-color: #ccc;
  margin: 20px 0;
}

.error-message {
  color: red; /* 错误信息样式 */
  margin-top: 10px;
}

.btn {
  width: 50%;
  height: 46px;
/*  padding: 15px; */
  background: linear-gradient(to right,#f99b6f, #fec66b);
  color: white;
/*  border: none; */
  border-radius:30px;
/*  cursor: pointer; */
  font-size: 16px;
  margin-top: 10px;
}

.info {
  font-size: 14px;
  line-height: 1.6;
}

/* 新增遮罩层和结果容器样式 */
.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.result-container {
  width: 90%;
  background-color: #fecdb7;
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
/*  padding: 40px; */
  border-radius: 20px;

}

.result-content {
  background: rgba(255, 255, 255, 1);
  padding: 10px;
  border-radius: 10px;

  margin: 20px;
}

.result-title {
  font-size: 20px;
  margin-bottom: 20px;
}

.result-age {
  font-size: 36px;
  color: #ffc26b;
  margin-bottom: 20px;
  font-weight: 900;
}

.result-date,
.result-delay {
  font-size: 16px;
  margin-bottom: 10px;
}

.result-info {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

 // 原创作者Health，微信联系：MRHealt，感谢体验！

</style>
在这里插入代码片