Skip to content

S
sfp-program
Commit 640b7a72 by kyle
Options

子女教育

parent b571d345
Showing with 410 additions and 1 deletions
pages.json
...@@ -42,6 +42,15 @@ ...@@ -42,6 +42,15 @@
"navigationBarTitleText": "保单复利单利计算" "navigationBarTitleText": "保单复利单利计算"
} }
} }
,{
"path" : "pages/childEdu/childEdu",
"style" :
{
"topWindow": false,
"navigationBarTitleText": "子女教育金测算"
}
}
], ],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
......
pages/childEdu/childEdu.css 0 → 100644
.listContent li{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E4E4E4;
padding: 16rpx 0;
}
.listContent li.multiline{
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.multilineItem{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 12rpx;
}
.selectBtnContent{
display: flex;
}
.selectBtnContent text{
position: relative;
width: 100rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
position: relative;
border: 1px solid #FED597;
margin-right: 20rpx;
border-radius: 6rpx;
}
.selectBtnContent text.actived::after{
position: absolute;
content: '';
display: block;
bottom: 0;
right: 0;
border: 18rpx solid #FED495;
border-left-color: transparent;
border-top-color: transparent;
}
.selectBtnContent text.actived::before{
content: '√';
position: absolute;
display: block;
right: 0;
z-index: 1;
color: #fff;
bottom: -7px;
}
.listContent li.planGradeRange{
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.listContent li.planGradeRange > div:last-child{
display: flex;
align-items: center;
justify-content: center;
margin: 12rpx auto;
}
.listContent li.planGradeRange > div:last-child text{
position: relative;
width: 80rpx;
height: 1px;
background-color: #E4E4E4;
margin: 0 10rpx;
}
.schoolingContent{
margin-top: 10px;
box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 35%);
border-top-left-radius: 12rpx;
border-top-right-radius: 12rpx;
margin: 20rpx 10rpx;
}
.schoolingContent li{
display: flex;
min-height: 40px;
justify-content: center;
align-items: center;
border-bottom: 1px solid #E4E4E4;
padding: 0 10rpx;
}
.schoolingContent li:first-child{
background: linear-gradient(to right,#CEB07D,#FFDDA9);
color: #6B4000;
}
.schoolingContent li div{
width: 0;
flex: 1;
white-space: nowrap;
text-align: center;
font-size: 28rpx;
}
.settingButton{
border-radius: 8rpx;
background: #F7D295;
color: #6B4000;
padding: 4rpx 6rpx;
}
.summaryContent {
margin: 0 20rpx;
}
.successInfo,.failInfo,.suggestionInfo{
background-color: rgba(35,255,0,0.02);
padding: 20rpx 60rpx;
color: #333;
margin-top: 20rpx;
}
.failInfo{
background-color: #FFE6E6;
}
\ No newline at end of file
pages/childEdu/childEdu.vue 0 → 100644
<template>
<view>
<follow :redirectUrl="'sfp/pages/childEdu/childEdu'" @getFollowData="getFollowData"
v-show="isNeedOfficialAccountQrcode"></follow>
<view class="wrapper" v-show="!isNeedOfficialAccountQrcode">
<view class="banner">
<!--头部技术支持组件-->
<commonHead></commonHead>
<img src="../../static/images/childEduBanner.jpg" alt="banner" srcset="">
</view>
<scroll-view scroll-y="true" class="formInfoContainer" id="formInfoContainer">
<view class="title"><view>小孩信息</view></view>
<view class="listContent">
<ul>
<li>
<div>昵称:</div>
<div><input class="uni-input" maxlength="10" placeholder="昵称长度不超过10" /></div>
</li>
<li>
<div>年龄：</div>
<div><input class="uni-input" type="number" maxlength="3" placeholder="请输入周岁年龄" /></div>
</li>
<li class="multiline">
<div class="multilineItem">
<div>是否已上学：</div>
<div class="selectBtnContent">
<text class="actived">是</text>
<text>否</text>
</div>
</div>
<div class="multilineItem">
<div>最高学历：</div>
<div>
<uni-data-picker placeholder="请选择最高学历" popup-title="请选择最高学历" :localdata="dataTree" v-model="classes"
@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
</uni-data-picker>
</div>
</div>
</li>
<li class="planGradeRange">
<div>规划阶段</div>
<div>
<uni-data-picker placeholder="请选择最高学历" popup-title="请选择最高学历" :localdata="dataTree" v-model="classes"
@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
</uni-data-picker>
<text></text>
<uni-data-picker placeholder="请选择最高学历" popup-title="请选择最高学历" :localdata="dataTree" v-model="classes"
@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
</uni-data-picker>
</div>
</li>
</ul>
</view>
<view class="title"><view>资源信息</view></view>
<view class="listContent">
<ul>
<li>
<div>已备教育资金总额：</div>
<div>万元</div>
</li>
<li>
<div>每年预备投入教育资金总额：</div>
<div>万元</div>
</li>
</ul>
</view>
<view class="title"><view>参数</view></view>
<view class="listContent">
<ul>
<li>
<div>学费增长率：</div>
<div>%</div>
</li>
<li>
<div>资产投资回报率：</div>
<div>%</div>
</li>
</ul>
</view>
<!-- 学费设定 -->
<view class="schoolingContent">
<ul>
<li>
<div>学历</div>
<div>学制（年）</div>
<div>首年预估学费</div>
<div></div>
</li>
<li>
<div>幼儿园</div>
<div><input class="uni-input" maxlength="1" type="number" placeholder="最高不超过10" /></div>
<div><input class="uni-input" maxlength="10" type="digit" placeholder="" /></div>
<div><view class="settingButton">逐年设定</view></div>
</li>
</ul>
</view>
<!-- 测算结果及建议 -->
<view class="title"><view>测算结果及建议</view></view>
<!-- 图表 -->
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<view class="summaryContent">
<view class="successInfo">
<strong>恭喜您！</strong>
<text>经过测算，您的资金可以负担XXX宝贝从XXX到XXX的学费。</text>
</view>
<view class="failInfo">
<strong>很遗憾！</strong>
<text>经过测算，您的资金不可以负担XXX宝贝从XXX到XXX的学费。</text>
</view>
<view class="suggestionInfo">
<view>您可以这样做来实现：</view>
<view>
1.提高教育储蓄到XXX元
</view>
</view>
</view>
<!-- 操作 -->
<view class="optionContent">
<button type="default" plain="true" form-type="reset"
@click="resetData()" >全部清空</button>
<button type="default" plain="true"
class="btn" @click="startCount()">开始计算</button>
</view>
</scroll-view>
</view>
<!--底部技术支持组件-->
<foot></foot>
</view>
</template>
<script>
import {ref} from "vue";
import commonHead from '../header/header.vue';
import follow from '../follow/follow.vue';
import foot from "../footer/footer.vue";
import {eduGradeLists} from "../../util/mock-data";
import * as echarts from 'echarts';
export default {
data() {
return {
isNeedOfficialAccountQrcode:true,
classes:'1-1',
dataTree: eduGradeLists
}
},
methods: {
getFollowData(e){
this.isNeedOfficialAccountQrcode= ref(e);
},
onnodeclick(e) {
console.log(e);
},
onpopupopened(e) {
console.log('popupopened');
},
onpopupclosed(e) {
console.log('popupclosed');
},
onchange(e) {
console.log('onchange:', e);
},
drawLine(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
boundaryGap:true,
axisLabel:{
interval:0
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
},
mounted() {
this.drawLine();
},
components:{
follow,
commonHead,
foot
}
}
</script>
<style>
@import url("childEdu.css");
</style>
pages/nav/nav.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
moduleLists:[ moduleLists:[
{no:'1',name:'增额终身寿和年金险复利、单利计算',path:'/pages/index/index',background:'irrNavBg.jpg',color:'#EA8A49'}, {no:'1',name:'增额终身寿和年金险复利、单利计算',path:'/pages/index/index',background:'irrNavBg.jpg',color:'#EA8A49'},
{no:'2',name:'购房能力测算',path:'/pages/housePurchase/housePurchase',background:'propertyBg.jpg',color:'#6F5AD4'}, {no:'2',name:'购房能力测算',path:'/pages/housePurchase/housePurchase',background:'propertyBg.jpg',color:'#6F5AD4'},
{no:'3',name:'敬请期待',path:'',background:'coming.jpg',color:'#A0A0A0'}, {no:'3',name:'子女教育测算',path:'/pages/childEdu/childEdu',background:'childrenBgNavBg.jpg',color:'#CE8C1B'},
{no:'4',name:'敬请期待',path:'',background:'coming.jpg',color:'#A0A0A0'}, {no:'4',name:'敬请期待',path:'',background:'coming.jpg',color:'#A0A0A0'},
] ]
} }
......
util/mock-data.ts 0 → 100644
const eduGradeLists=[
{
text: "幼儿园",
value: "1",
commonYears:3,
children: [
{text: "1年级",value: "1-1"},
{text: "2年级",value: "1-2"},
{text: "3年级",value: "1-3"}
]
},
{
text: "小学",
value: "2",
commonYears:6,
children: [
{text: "1年级",value: "2-1"},
{text: "2年级",value: "2-2"},
{text: "3年级",value: "2-3"},
{text: "4年级",value: "2-4"},
{text: "5年级",value: "2-5"},
{text: "6年级",value: "2-6"},
]
},
{
text: "初中",
value: "3",
commonYears:3,
children: [
{text: "1年级",value: "3-1"},
{text: "2年级",value: "3-2"},
{text: "3年级",value: "3-3"},
]
},
{
text: "高中",
value: "4",
commonYears:3,
children: [
{text: "1年级",value: "4-1"},
{text: "2年级",value: "4-2"},
{text: "3年级",value: "4-3"},
]
},
{
text: "大学",
value: "5",
commonYears:4,
children: [
{text: "1年级",value: "5-1"},
{text: "2年级",value: "5-2"},
{text: "3年级",value: "5-3"},
{text: "4年级",value: "5-4"},
]
},
{
text: "硕士",
value: "6",
commonYears:2,
children: [
{text: "1年级",value: "6-1"},
{text: "2年级",value: "6-2"}
]
},
{
text: "博士",
value: "7",
commonYears:3,
children: [
{text: "1年级",value: "7-1"},
{text: "2年级",value: "7-2"},
{text: "3年级",value: "7-3"}
]
}
]
export {eduGradeLists};
\ No newline at end of file
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