用uniapp编写一个房贷计算器代码

接下来，我们需要设置页面布局。因为房贷计算器的页面比较简单，我们只需要一个主页即可。在pages文件夹下创建一个index.vue文件，然后在template标签内添加以下代码：

<view class="container">
  <view class="title">房贷计算器</view>
  <view class="item">
    <view class="label">房屋总价：</view>
    <input type="number" v-model="housePrice">
  </view>
  <view class="item">
    <view class="label">首付比例：</view>
    <input type="number" v-model="downPaymentPercent">
  </view>
  <view class="item">
    <view class="label">贷款年限：</view>
    <picker mode="selector" :range="{{yearsPicker}}" @change="onYearsChange">
      <view class="picker">{{years}}</view>
    </picker>
  </view>
  <view class="item">
    <view class="label">贷款利率：</view>
    <picker mode="selector" :range="{{ratesPicker}}" @change="onRatesChange">
      <view class="picker">{{rate}}%</view>
    </picker>
  </view>
  <view class="item">
    <view class="label">首付金额：</view>
    <input type="text" disabled :value="downPayment">
  </view>
  <view class="item">
    <view class="label">贷款总额：</view>
    <input type="text" disabled :value="loanAmount">
  </view>
  <view class="item">
    <view class="label">每月还款额：</view>
    <input type="text" disabled :value="monthlyPayment">
  </view>
  <view class="item">
    <view class="label">总还款额：</view>
    <input type="text" disabled :value="totalRepayment">
  </view>
  <button class="btn" @click="calculate">计算</button>
</view>

<script>
export default {
  name: 'index',
  data() {
    return {
      housePrice: '',   // 房屋总价
      downPaymentPercent: '',   // 首付比例
      years: 20,   // 贷款年限 - 默认20年
      rates: [3.25, 3.5, 3.75, 4],   // 贷款利率 - 按照银行标准填写
      rate: 3.25,   // 当前选择的贷款利率
      yearsPicker: [],   // 贷款年限选择器内容
      ratesPicker: [],   // 贷款利率选择器内容
      downPayment: '',   // 首付金额
      loanAmount: '',   // 贷款总额
      monthlyPayment: '',   // 每月还款额
      totalRepayment: ''   // 总还款额
    }
  },
  methods: {
    // 计算首付金额、贷款总额、每月还款额和总还款额
    calculate() {
      // 验证数据
      if (!this.housePrice || !this.downPaymentPercent || !this.years) {
        uni.showToast({
          title: '请填写完整信息!',
          icon: 'none'
        });
        return;
      }
      // 首付金额
      this.downPayment = (this.housePrice * this.downPaymentPercent / 100).toFixed(2);
      // 贷款总额
      this.loanAmount = (this.housePrice - this.downPayment).toFixed(2);
      // 每月还款额
      const n = this.years * 12;   // 还款期数
      const i = this.rate / 100 / 12;   // 月利率
      const monthlyPayment = (this.loanAmount * i * Math.pow(1 + i, n) / (Math.pow(1 + i, n) - 1)).toFixed(2);
      this.monthlyPayment = monthlyPayment;
      // 总还款额
      const totalRepayment = (monthlyPayment * n).toFixed(2);
      this.totalRepayment = totalRepayment;
    },
    // 贷款年限选择器改变事件
    onYearsChange(event) {
      this.years = this.yearsPicker[event.detail.value];
    },
    // 贷款利率选择器改变事件
    onRatesChange(event) {
      this.rate = this.ratesPicker[event.detail.value];
    }
  },
  created() {   // 初始化贷款年限、贷款利率选择器内容
    for (let i = 5; i <= 30; i += 5) {
      this.yearsPicker.push(i);
    }
    for (let rate of this.rates) {
      this.ratesPicker.push(rate);
    }
  }
}
</script>

<style>
.container {
  padding: 32rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
  text-align: center;
}
.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 24rpx;
}
.label {
  width: 200rpx;
  font-size: 30rpx;
}
.picker {
  font-size: 30rpx;
}
.btn {
  margin-top: 64rpx;
  width: 100%;
  background-color: #007aff;
  color: #fff;
  border-radius: 10rpx;
  font-size: 36rpx;
  padding: 16rpx 0;
}
input {
  width: 400rpx;
  height: 50rpx;
  padding-left: 20rpx;
  font-size: 28rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  outline: none;
  text-align: right;
}
</style>

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/43436.html