Skip to content

S
sfp-program
Commit 5e891439 by Sweet Zhang
Options

批量导入页面

parent dbb56158
Showing with 300 additions and 2 deletions
pages.json
......@@ -5,6 +5,12 @@
"style": {
"navigationBarTitleText": "金融工具"
}
},
{
"path": "pages/dataImport/data-import",
"style": {
"navigationBarTitleText": "批量数据计算"
}
}
],
"globalStyle": {
......
pages/dataImport/data-import.vue
<template>
<view class="batchDataImportContainer">
<view class="selectStepContainer">
<view class="selectStepContent">
<text>我想测算每隔</text>
<view class="stepContent">
<picker @change="bindPickerChange" :value="index" :range="stepLists">
<view class="uni-input">{{stepLists[index]}}</view>
</picker>
<svg t="1661847421137" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1364" width="16" height="16"><path d="M917.4 302.8c-14.2-14.2-37.2-14.2-51.4 0L518.6 650.3c-2.9 2.8-7.5 2.8-10.3 0L160.8 302.8c-14.2-14.2-37.2-14.2-51.4 0-14.2 14.2-14.2 37.2 0 51.4l347.4 347.4c15.6 15.6 36 23.4 56.5 23.4s41-7.8 56.5-23.4l347.4-347.4c14.3-14.2 14.3-37.2 0.2-51.4z" p-id="1365" fill="#666666"></path></svg>
</view>
<text>年的单利复利</text>
</view>
<!-- 自定义 -->
<view>
<button class="mini-btn" type="default" size="mini" @click="selectCustomPolicyYear">自定义</button>
</view>
</view>
<!-- 提示信息-->
<view class="tips">
<text>(如需指定任意保单年度，可通过点击右上角<text>“自定义”</text>按钮完成)</text>
</view>
<view class="dataOptionContainer">
<!-- 粘贴数据区域 -->
<view class="uni-textarea">
<textarea v-model="pasteData" placeholder-style="color:#999999;font-size:14px;padding-left:9px;padding-top:3px" placeholder="请根据左侧保单年度进行现金价值数据粘贴"/>
<button class="mini-btn pasteDiscernment" type="default" size="mini">粘贴并识别</button>
</view>
<!-- 批量数据输入区域 -->
<view class="batchDataLists">
<view class="batchDataTh">
<text>保单年度</text>
<text>现金价值</text>
</view>
<view class="batchDataTd" v-for="item in irrAndSimpleInfos">
<text>{{item.nyear}}</text>
<text>{{item.cashValue}}</text>
</view>
</view>
</view>
<!-- 操作 -->
<view class="optionContent">
<button type="default" plain="true" form-type="reset">全部清空</button>
<button type="default" plain="true" @click="calcute()">{{calcuteMethod=='2' ? '输入批量数据' : '开始计算'}}</button>
</view>
<!-- 保单年度选择弹窗 -->
<view class="policySelectContainer">
<view class="policyYearContainer">
<view class="modalTitle">
<text></text>
<text>选择保单年度<text>（可多选）</text></text>
<icon :type="'clear'" size="26"/>
</view>
<view class="policyStepContainer">
<button type="default" plain="true" class="actived">1~40</button>
<button type="default" plain="true">41~80</button>
<button type="default" plain="true">81~105</button>
</view>
<view class="policyYearItemContainer">
<view v-for="item of 40">
<text>{{item}}</text>
</view>
</view>
<view class="confirm">
<button type="default" plain="true">确定</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
index:0,
stepLists:[1,5,10,15,20],
pasteData:"",
irrAndSimpleInfos:[{nyear:1,cashValue:''}]
}
},
methods:{
// 选择间隔
bindPickerChange(e){
this.index = e.detail.value
},
// 选择自定义
selectCustomPolicyYear(){
}
}
}
</script>
<style>
/* 保单年度弹窗 */
.policySelectContainer{
position: fixed;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.35);
}
.policySelectContainer .policyYearContainer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 57%;
background-color: #fff;
border-top-left-radius: 40rpx;
border-top-right-radius: 40rpx;
padding: 20rpx 30rpx 0;
box-sizing: border-box;
}
.policyYearContainer .modalTitle{
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
.policyYearContainer .modalTitle text:last-child{
color: #FF0000;
}
.policyYearItemContainer{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.policyYearItemContainer view{
width: 9%;
height: 0;
padding-bottom: 9%;
margin: 20rpx 0;
color: #fff;
border-radius: 50%;
position: relative;
margin-right: 6rpx;
color: #333;
font-weight: bold;
}
.policyYearItemContainer view.actived{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
color:#6B4000;
}
.policyYearItemContainer view text{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-55%);
}
.policyStepContainer{
display: flex;
justify-content: space-around;
margin-top: 40rpx;
}
.policyStepContainer button{
flex: 0 0 30%;
font-size: 32rpx;
color:#000;
font-weight:bold;
border:1px solid #CEB07D;
}
.policyStepContainer uni-button::after{
border:1px solid #CEB07D;
}
.policyStepContainer button.actived{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
color: #6B4000;
}
.policyStepContainer button.actived,.policyStepContainer button.actived::after{
border:none;
}
.confirm button{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
color: #6B4000;
font-weight: bold;
font-size: 36rpx;
margin-top: 56rpx;
width: 300rpx;
}
.confirm button,.confirm button::after{
border: none ;
}
.uni-textarea{
position: relative;
}
.pasteDiscernment{
position: absolute;
right: 0;
bottom: 0;
height: 50rpx;
background: #9B8055;
border-radius: 100px;
color: #fff;
font-size: 24rpx;
}
.batchDataImportContainer{
background-color: #fbfbfb;
height: 90vh;
}
.batchDataLists{
margin-top: 20rpx;
background: #fff;
}
.batchDataLists > view{
display: flex;
text-align: center;
border-bottom: 1px solid #e4e4e4;
}
.batchDataLists > view:last-child{
border: none;
}
.batchDataLists > view text:first-child{
width: 0;
flex: 0 0 35%;
border-right: 1px solid #e4e4e4;
}
.batchDataLists > view text:last-child{
width: 0;
flex: 0 0 65%;
}
.batchDataLists > view.batchDataTh{
height: 60rpx;
background:linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
line-height: 60rpx;
border-top-left-radius: 12rpx;
border-top-right-radius: 12rpx;
}
.batchDataLists > view.batchDataTd{
height: 80rpx;
line-height: 80rpx;
}
.dataOptionContainer{
margin: 20rpx 20rpx 0;
margin-bottom: 34rpx;
}
.dataOptionContainer .uni-textarea{
background-color: #fff;
margin-bottom: 20rpx;
}
.tips{
font-size: 24rpx;
color: #666;
padding: 0 20rpx 20rpx;
background-color: #fff;
}
.tips text text{
font-size: 28rpx;
color: #9B8055;
font-weight: bold;
}
.selectStepContent,.selectStepContainer{
display: flex;
align-items: center;
}
.selectStepContainer{
justify-content: space-between;
padding: 20rpx 20rpx 0;
background-color: #fff;
}
.stepContent{
display: flex;
align-items: center;
border-bottom: 1px solid #e4e4e4;
padding: 0 5px;
}
.selectStepContainer button{
background-color: transparent;
}
.selectStepContainer button::after{
border: 1px solid #CEB07D;
}
.optionContent{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
.optionContent button{
flex: 0 0 46%;
border:2rpx solid #e7c793;
color: #6B4000;
font-size: 36rpx;
}
.optionContent button:last-child{
background: linear-gradient(135deg, #CEB07D 0%, #FFDDA9 56%, #FED495 100%, #FED495 100%);
border: none;
}
</style>
\ No newline at end of file
pages/index/index.vue
......@@ -144,7 +144,7 @@
</view>
<!-- 操作 -->
<view class="optionContent">
<button type="default" plain="true">清空</button>
<button type="default" plain="true" form-type="reset">清空</button>
<button type="default" plain="true" @click="calcute()">{{calcuteMethod=='2' ? '输入批量数据' : '开始计算'}}</button>
</view>
......@@ -178,7 +178,7 @@
}else if(this.calcuteMethod === '2'){
// 输入批量数据
uni.redirectTo({
url: 'test?id=1'
url: '/pages/dataImport/data-import'
});
}
}
......@@ -402,6 +402,7 @@
font-size: 30rpx;
color: #333333;
box-sizing: border-box;
line-height: initial;
}
.cashValueContent .title button::after{
border: 1px solid #CEB07D;
......
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