assess-app/pages/loan/module/rate_compare.vue

<template>
	<view class="total-page page_env-20 page-box sys-list-background-color task-bg">
		<Nav title="利率对比" :genre="1" is_fixed></Nav>
		<view class="m-20 text-color-12">
			<view class="sys-background-fff p-30 r-30">
				<view class="center">
					<image class="wh-60" :src="businesses.product_icon" mode="aspectFill"></image>
					<text class="size-28 sys-weight-600 m-l20">{{businesses.product_name||''}}</text>
				</view>
				<view class="row-justify-sb center sys-from-background-color p-tb30 p-lr40 r-30 m-t30">
					<view class="column-c">
						<view class="size-26 m-b10">{{businesses.name||''}}</view>
						<text class="size-24 text-color-666">贷款人姓名</text>
					</view>
					<view class="column-c">
						<view class="size-26 m-b10">{{hidePhone(businesses.phone)||''}}</view>
						<text class="size-24 text-color-666">联系方式</text>
					</view>
					<view class="column-c">
						<view class="size-26 m-b10">{{businesses.created_date||''}}</view>
						<text class="size-24 text-color-666">申请时间</text>
					</view>
				</view>
			</view>
			<view class="sys-background-fff p-tb30 r-30 m-t20">
				<view class="container">
					<view class="box left-box">
						<text class="title">核算前年利率</text>
						<text class="number">{{(loan.interest_rate*1).toFixed(2)}}%</text>
					</view>
					<view class="box middle-box">
						<text class="title">差值</text>
						<text class="number">{{(loan.interest_rate-newLoan.interest_rate).toFixed(2)}}%</text>
					</view>
					<view class="box right-box">
						<text class="title">核算后年利率</text>
						<text class="number">{{(newLoan.interest_rate*1).toFixed(2)}}%</text>
					</view>
				</view>
				<view class="p-lr30 flex row-justify-sb">
					<view class="list-item">
            <view class="column-box" >
              <view class="m-t30">
                <text class="center-text">{{(loan.loans_money/10000).toFixed(2)}}万</text>
                <view class="text">贷款金额</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(loan.interest_rate*1).toFixed(2)}}%</text>
                <view class="text">年利率</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{loan.refund_num-loan.residue_num||0}}/{{loan.refund_num||0}}</text>
                <view class="text">贷款期数</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(loan.repayment_money*1).toFixed(2)}}元</text>
                <view class="text">每期还款金额</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(newLoan.repayment_money*1).toFixed(2)}}元</text>
                <view class="text">总利息</view>
              </view>
              <view class="m-t30">
                <text class="center-text">	{{(loan.totalMoney>=1000?loan.totalMoney/10000:loan.totalMoney*1).toFixed(2)}}{{loan.totalMoney>=10000?'万元':'元'}}</text>
                <view class="text">总还款金额</view>
              </view>
            </view>
					</view>
					<view class="list-item">

            <view class=" column-center" >
              <view class="m-t30">
                <text class="center-text">0.00万</text>
                <view class="text">贷款金额</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(loan.interest_rate-newLoan.interest_rate).toFixed(2)}}%</text>
                <view class="text">年利率</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{loan.refund_num-loan.residue_num||0}}/{{loan.refund_num||0}}</text>
                <view class="text">贷款期数</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(loan.repayment_money-newLoan.repayment_money).toFixed(2)}}元</text>
                <view class="text">每期还款金额</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(loan.interestMoney-newLoan.interestMoney).toFixed(2)}}元</text>
                <view class="text">总利息</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(loan.totalMoney-newLoan.totalMoney).toFixed(2)}}元</text>
                <view class="text">总还款金额</view>
              </view>
            </view>
					</view>
					<view class="list-item">
            <view class="column-box" >
              <view class="m-t30">
                <text class="center-text">{{(loan.loans_money/10000).toFixed(2)}}</text>
                <view class="text">贷款金额</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(newLoan.interest_rate*1).toFixed(2)}}%</text>
                <view class="text">年利率</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{loan.refund_num-loan.residue_num||0}}/{{loan.refund_num||0}}</text>
                <view class="text">贷款期数</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(newLoan.repayment_money*1).toFixed(2)}}元</text>
                <view class="text">每期还款金额</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(newLoan.interestMoney).toFixed(2)}}元</text>
                <view class="text">总利息</view>
              </view>
              <view class="m-t30">
                <text class="center-text">{{(newLoan.totalMoney>=1000?newLoan.totalMoney/10000:newLoan.totalMoney*1).toFixed(2)}}{{newLoan.totalMoney>=10000?'万元':'元'}}</text>
                <view class="text">总还款金额</view>
              </view>
            </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from "@/service/tools";
  import {getAdjust} from "@/api/task";

	export default {
		components: {

		},
		data() {
			return {
        loanId: '',
        interest_rate: 0,
        new_interest_rate: '',
        loan: {
          loans_money: 0,
          repayment_money: 0,
          interest_rate: 0,
          residue_num: 0,
          refund_num: 0,
          totalMoney: 0,
          interestMoney: 0,
        },
        businesses: {},
        newLoan: {
          loans_money: 0,
          repayment_money: 0,
          interest_rate: 0,
          residue_num: 0,
          refund_num: 0,
          totalMoney: 0,
          interestMoney: 0,
        },
      }
		},
    onLoad(e) {
      this.interest_rate = e.interestRate * 1;
      this.new_interest_rate = e.newInterestRate * 1;
      this.loanId = e.loanId
      getAdjust({
        loanId: this.loanId
      }).then((res) => {
        if (res.code === 1) {
          this.loan = res.data.loan
          this.businesses = res.data.businesses
          console.log(this.loan)
          if (this.loan.repayment_type === 3) {
            this.loan.totalMoney = ((this.loan.refund_num * this.loan.repayment_money + this.loan
                .loans_money * 1).toFixed(2));
          } else {
            this.loan.totalMoney = (this.loan.refund_num * this.loan.repayment_money).toFixed(2);
          }
          this.loan.interestMoney = this.loan.totalMoney - this.loan.loans_money
          console.log(this.loan)
          this.setNewLoan()
        }
      })
    },
		methods: {
      setNewLoan() {
        console.log(this.loan)
        let newLoan = {
          loans_money: this.loan.loans_money,
          totalMoney: this.loan.totalMoney,
          interestMoney: this.loan.interestMoney,
          interest_rate: this.new_interest_rate,
          refund_num: this.loan.refund_num,
          residue_num: this.loan.residue_num,
          repayment_money: this.loan.repayment_money,
        };
        console.log(newLoan)
        if (this.loan.repayment_type === 1) {
          newLoan.repayment_money = tools.getAverageCapitalPlusInterest(newLoan.loans_money, newLoan.refund_num,newLoan.interest_rate)
        } else if (this.loan.repayment_type === 2) {
          newLoan.repayment_money = tools.getAverageCapital(newLoan.loans_money, newLoan.refund_num, newLoan.interest_rate)
        } else {
          newLoan.repayment_money = tools.getInterestFirst(newLoan.loans_money, newLoan.interest_rate)
        }
        newLoan.repayment_money *= 1;
        if (this.loan.repayment_type === 3) {
          newLoan.totalMoney = newLoan.refund_num * newLoan.repayment_money + newLoan.loans_money * 1;
        } else {
          console.log(newLoan.refund_num * newLoan.repayment_money)
          newLoan.totalMoney = newLoan.refund_num * newLoan.repayment_money;
        }
        newLoan.interestMoney = newLoan.totalMoney - newLoan.loans_money
        this.newLoan = newLoan
      },
			hidePhone(phone) {
        console.log(phone)
        if(!phone){
          return ''
        }
				return tools.hidePhone(phone)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		flex: 1;
		text-align: center;
	}

	.container {
		display: flex;
		justify-content: space-between;
	}

	.box {
		position: relative;
		flex: 1;
		height: 125rpx;
		background-color: red;
		text-align: center;
		color: #fff;
		flex-direction: column;
		display: flex;
		justify-content: center;

		.title {
			font-size: 26rpx
		}

		.number {
			font-size: 28;
			font-weight: 600;
			padding-top: 10rpx;
		}
	}

	.left-box {
		position: relative;
		right: -15px;
		border-radius: 20rpx 0 0 20rpx;
		clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
		background: linear-gradient(270deg, #FEA666 0%, #F9503D 100%);
	}

	.middle-box {
		position: relative;
		clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
		background: linear-gradient(270deg, #745CFF 0%, #3993FD 100%);
	}

	.right-box {

		position: relative;
		left: -15px;
		border-radius: 0 20rpx 20rpx 0;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
		background: linear-gradient(270deg, #F9503D 0%, #FEA666 100%);

	}

	.box::before {
		content: '';
		position: absolute;
		top: -15rpx;
		left: -15rpx;
		right: -15rpx;
		bottom: -15rpx;
		border: 15rpx solid #f0f0f0;
		border-radius: 20rpx;
		pointer-events: none;
	}

	.left-box::before {
		clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
	}

	.middle-box::before {
		clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
	}

	.right-box::before {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
	}

  .column-box {
    color: #333;
    font-size: 28rpx;

    .text {
      color: #666;
      font-size: 24rpx;
      padding-top: 6rpx;
    }
  }

  .column-center {
    color: #333;
    font-size: 28rpx;

    .center-text {
      color: #F91517;
      font-weight: 600;
    }

    .text {
      color: #666;
      font-size: 24rpx;
      padding-top: 6rpx;
    }
  }
</style>