实现 存款利息计算器 工具

分类：general ｜ 标签：存款、利息、理财 本金/利率/存期算本息

2.1 功能说明

本金/利率/存期算本息

2.1.1 使用指南

功能说明

输入本金、年利率、存期与计息方式（单利/年复利/月复利），计算到期本息与利息。

使用场景

闲钱理财、定存/大额存单测算。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const principal = ref('')
const rate = ref('')
const years = ref('')
const mode = ref('year')
const error = ref('')

const p = computed(() => Number(principal.value.trim()))
const r = computed(() => Number(rate.value.trim()))
const y = computed(() => Number(years.value.trim()))
const ok = computed(() => {
  error.value = ''
  if (principal.value.trim() === '' || isNaN(p.value) || p.value < 0) return false
  if (rate.value.trim() === '' || isNaN(r.value) || r.value < 0) return false
  if (years.value.trim() === '' || isNaN(y.value) || y.value <= 0) return false
  return true
})
const interest = computed(() => {
  if (!ok.value) return '0'
  const rr = r.value / 100
  let amt
  if (mode.value === 'simple') amt = p.value * (1 + rr * y.value)
  else if (mode.value === 'year') amt = p.value * Math.pow(1 + rr, y.value)
  else amt = p.value * Math.pow(1 + rr / 12, y.value * 12)
  return (amt - p.value).toFixed(2)
})
const amount = computed(() => ok.value ? (Number(interest.value) + p.value).toFixed(2) : '0')

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/deposit