Skip to content

S
sfp-program
Commit dbb56158 by Sweet Zhang
Options

计算器首页

parent cb75b321
Showing with 282 additions and 52 deletions
pages.json
......@@ -5,8 +5,6 @@
"style": {
"navigationBarTitleText": "金融工具"
}
},{
"path": "pages/index/home"
}
],
"globalStyle": {
......
pages/index/home.vue deleted 100644 → 0
<template>
<text>nnnnnn</text>
</template>
<script>
import { saveEducationEstimate } from './api/api.ts';
export default {
date(){
return{
resData: {}
}
},
mounted(){
const par = {arg1: "arg1Value"};
//调用api
saveEducationEstimate(par).then(res=>{
//请求成功 返回res
this.saveEducationEstimate = res.data;
}).catch(err=>{
//请求失败s
})
}
}
</script>
<style>
</style>
\ No newline at end of file
pages/index/index.vue
......@@ -5,8 +5,8 @@
</view>
<scroll-view scroll-y="true" class="formInfoContainer">
<view class="tabTitle">
<text>增额</text>
<text>年金</text>
<text @click="switchTab('1')" :class="{ 'actived': calcuteType==='1' }">增额</text>
<text @click="switchTab('2')" :class="{ 'actived': calcuteType==='2' }">年金</text>
</view>
<form @submit="formSubmit" @reset="formReset">
<!-- 保单信息 -->
......@@ -14,44 +14,142 @@
<view class="title">保单信息</view>
<view class="inputItem">
<text>交费年限：</text>
<input class="uni-input" type="number" placeholder="请输入" /><label for="">年</label>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" /><label for="">年</label>
</view>
</view>
<view class="inputItem">
<text>年交保费：</text>
<input class="uni-input" type="number" placeholder="请输入" /><label for="">元</label>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" /><label for="">元</label>
</view>
</view>
<view class="inputItem" v-if="calcuteType==='2'">
<text>万能账户首年交费<text style="font-size: 24rpx;">(如有)</text>：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" /><label for="">元</label>
</view>
</view>
</view>
<!-- 提领信息 -->
<view class="claimInfomationContent">
<view class="title">提领信息</view>
<view class="title">
<text>提领信息</text>
<view style="display: flex;" @click="withdrawalType = withdrawalType==='1' ? '2' : '1'" v-if="calcuteType==='1'">
<view class="radioButton" :class="{'selected':withdrawalType==='2'}"></view>
<text style="margin-left: 10rpx;">减保取现</text>
</view>
</view>
<!-- 年金提领信息 -->
<view class="annuityContent" v-if="calcuteType==='2'">
<view class="inputItem">
<text>从第几个保单年度开始提取：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" /><label for="">年</label>
</view>
</view>
<view class="inputItem">
<text>每年提取金额：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" /><label for="">元</label>
</view>
</view>
</view>
<!-- 增额减保取现 -->
<view class="reduceInsuranceContent" v-if="withdrawalType==='2' && calcuteType==='1'">
<view class="tableTh">
<text>起领年度</text>
<text>止领年度</text>
<text class="withdrawNumber">年提取金额（元）</text>
<text></text>
</view>
<view class="tableTd">
<input class="uni-input" type="number" placeholder="请输入" />
<input class="uni-input" type="number" placeholder="请输入" />
<input class="uni-input withdrawNumber" type="number" placeholder="请输入" />
<view>
<text>+</text>
<text>-</text>
</view>
</view>
</view>
</view>
<!-- 现金价值信息 -->
<view class="cashValueContent">
<view class="title">现金价值</view>
<view class="title">
<text>现金价值</text>
<view class="calcTypeOption">
<button class="mini-btn" type="default" size="mini" @click="calcuteMethod='1'" :class="{'actived':calcuteMethod=='1'}">单次</button>
<button class="mini-btn" type="default" size="mini" @click="calcuteMethod='2'" :class="{'actived':calcuteMethod=='2'}">批量</button>
</view>
</view>
<view class="simpleCalculateContent" v-if="calcuteMethod==='1'">
<view class="inputItem">
<text>第：</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" /><label for="">年</label>
</view>
</view>
<view class="inputItem">
<text>总生存利益<text style="font-size: 14px;">（总领取金额+现金价值）</text>:</text>
<view class="inputContent">
<input class="uni-input" type="number" placeholder="请输入" /><label for="">元</label>
</view>
</view>
</view>
<view class="batchCalculateContent" v-if="calcuteMethod==='2'">
<img src="/static/images/batchFileImport.png" alt="" style="width: 50%;">
<text>暂无数据</text>
<text style="font-size: 28rpx;margin-top: 10rpx;">点击下方按钮输入批量数据</text>
</view>
</view>
<!-- 结果展示 -->
<!-- 现金价值单利复利结果展示 -->
<view class="resultContent">
<view class="simpleDataResult">
<!-- 单次计算显示结果 -->
<view class="simpleDataResult" v-if="resultShowFlag">
<view class="inputItem">
<text class="title">IRR复利</text>
<text>0%</text>
<text class="resultTitle">IRR复利</text>
<text class="calcNumber">0%</text>
</view>
<view class="inputItem">
<text class="title">单利</text>
<text>0%</text>
<text class="resultTitle">单利</text>
<text class="calcNumber">0%</text>
</view>
</view>
<!-- 批量计算显示结果 -->
<view class="batchDataResult" v-if="resultShowFlag">
<scroll-view scroll-y="true" class="scroll-Y">
<view class="scroll-view-item">
<view class="resultTh">
<text>保单年度</text>
<text>现金价值</text>
<text>IRR复利</text>
<text>单利</text>
</view>
<view class="resultTd">
<text>10</text>
<text>567,789</text>
<text class="resultNumber">37.125%</text>
<text class="resultNumber">10.123%</text>
</view>
<view class="resultTd">
<text>10</text>
<text>567,789</text>
<text class="resultNumber">37.125%</text>
<text class="resultNumber">10.123%</text>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 操作 -->
<view class="optionContent">
<button type="default" plain="true">清空</button>
<button type="default" plain="true">开始计算</button>
<button type="default" plain="true" @click="calcute()">{{calcuteMethod=='2' ? '输入批量数据' : '开始计算'}}</button>
</view>
</form>
<view class="formContent">
</view>
</scroll-view>
</view>
</template>
......@@ -59,20 +157,62 @@
<script>
export default {
data() {
return {
title: 'Hello'
return {
calcuteType:'1', //计算类型(1:增额; 2:年金)
withdrawalType:'1', //提领方式(1:正常提领; 2:减保取现)
resultShowFlag:false,
calcuteMethod:'1', //计算方式(1:单次; 2:批量)
}
},
onLoad() {
},
methods: {
switchTab(e){
this.calcuteType = e;
},
// 判断是导入还是计算
calcute(){
if(this.calcuteMethod==='1'){
// 计算
}else if(this.calcuteMethod === '2'){
// 输入批量数据
uni.redirectTo({
url: 'test?id=1'
});
}
}
}
}
</script>
<style>
.batchCalculateContent{
display: flex;
flex-direction: column;
align-items: center;
}
.claimInfomationContent{
margin-bottom: 40rpx;
}
.radioButton{
position: relative;
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border: 1px solid #CEB07D;
}
.radioButton.selected::after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 20rpx;
height: 20rpx;
transform: translate(10rpx,10rpx);
border-radius: 50%;
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
}
.logo {
width: 100%;
}
......@@ -93,7 +233,7 @@
.tabTitle text{
position: relative;
}
.tabTitle text::after{
.tabTitle text.actived::after{
position: absolute;
bottom: -4rpx;
left: 0;
......@@ -111,6 +251,30 @@
border-top-left-radius: 30rpx;
padding: 30rpx;
box-sizing: border-box;
font-size: 30rpx;
color: #333333;
}
.title{
display: flex;
justify-content: space-between;
align-items: center;
color: #CEB07D;
font-weight: bold;
font-size: 32rpx;
position: relative;
padding-left: 28rpx;
margin: 20rpx 0;
height: 50rpx;
}
.title::before{
content: '';
position: absolute;
left: 0;
top: 15rpx;
width: 6rpx;
height: 20rpx;
background-color: #CEB07D;
border-radius: 8rpx;
}
.inputItem{
display: flex;
......@@ -119,6 +283,19 @@
height: 88rpx;
border-bottom: 1px solid #E4E4E4;
}
.inputItem .inputContent{
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 51%;
}
.inputContent .uni-input{
margin-right: 20rpx;
text-align: right;
}
.inputItem text{
flex: 0 0 49%;
}
.simpleDataResult{
background: #FFFFFF;
box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0,0,0,0.1);
......@@ -127,6 +304,14 @@
margin: 30rpx 15rpx 56rpx;
padding: 15rpx 17rpx;
}
.simpleDataResult .resultTitle{
font-size: 32rpx;
font-weight: bold;
color: #CEB07D;
}
.simpleDataResult .calcNumber{
text-align: right;
}
.simpleDataResult .inputItem:last-child{
border:none;
}
......@@ -134,6 +319,32 @@
color: #CEB07D;
font-weight: bold;
}
.reduceInsuranceContent .tableTh,.reduceInsuranceContent .tableTd{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
}
.reduceInsuranceContent .tableTh text{
flex: 1;
}
.reduceInsuranceContent .tableTh text.withdrawNumber,.reduceInsuranceContent .tableTd text.withdrawNumber{
flex: 2;
}
.reduceInsuranceContent .tableTd .uni-input,.reduceInsuranceContent .tableTh text{
text-align: center;
border-bottom: 1px solid #E4E4E4;
padding: 6rpx 24rpx;
margin-right: 20rpx;
}
.reduceInsuranceContent .tableTh text{
border:none;
white-space: nowrap;
}
.resultContent{
margin-bottom: 60rpx;
padding-bottom: 60rpx;
}
.optionContent{
position: fixed;
bottom: 0;
......@@ -142,15 +353,65 @@
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
.optionContent button{
flex: 0 0 46%;
border:2rpx solid #e7c793;
color: #e7c793;
color: #6B4000;
font-size: 36rpx;
}
.optionContent button:last-child{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
border: none;
}
.batchDataResult{
box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.1);
margin-top: 32rpx;
}
.batchDataResult .resultTh{
height: 60rpx;
line-height: 60rpx;
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
border-top-left-radius: 12rpx;
border-top-right-radius: 12rpx;
color: #6B4000;
font-weight: bold;
display: flex;
}
.batchDataResult .resultTd{
display: flex;
height: 60rpx;
align-items: center;
border-bottom: 1px solid #E4E4E4;
}
.batchDataResult .resultTd:last-child{
border-bottom: none;
}
.batchDataResult .resultTh text,.batchDataResult .resultTd text{
flex: 1;
text-align: center;
font-weight: bold;
color: #333333;
}
.batchDataResult .resultTd text.resultNumber{
color: #CEB07D;
}
.cashValueContent .title button{
background-color: transparent;
font-size: 30rpx;
color: #333333;
box-sizing: border-box;
}
.cashValueContent .title button::after{
border: 1px solid #CEB07D;
border-radius: 12rpx;
}
.cashValueContent .title button:first-child{
margin-right: 40rpx;
}
.cashValueContent .title button.actived{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
color: #6B4000;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment