Skip to content

M
mcep-h5
提交 e91c52fd 编写于 作者: “grape”'s avatar “grape”
浏览文件
操作

修改下拉框

上级 14c3b2cb
隐藏空白字符变更
内嵌 并排
正在显示 包含 214 行增加 和 64 行删除
src/views/DepositInterestTrial/DepositInterestTrial.vue
浏览文件 @ e91c52fd
...@@ -17,37 +17,120 @@ ...@@ -17,37 +17,120 @@
</div> </div>
</div> </div>
<div class="card" v-if="flag" :model="test"> <div class="card" v-if="flag" :model="test">
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">储蓄方式
<!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%">储蓄方式
<a-select v-model:value="test.saveType" :options="saveTypes" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto"> <a-select v-model:value="test.saveType" :options="saveTypes" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto">
</a-select> </a-select>
</div> </div> -->
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">定期类型
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field is-link readonly :value="this.typeValue" label="储蓄方式" input-align="right" placeholder="请选择储蓄方式" @click="showTypes = true" />
<van-popup v-model="showTypes" round position="bottom">
<van-picker
show-toolbar
:columns="saveTypes"
@cancel="showTypes = false"
@confirm="onConfirmTypes"
/>
</van-popup>
</van-col>
</van-row>
<!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%">定期类型
<a-select v-model:value="test.timeType" :options="timeTypes" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto"> <a-select v-model:value="test.timeType" :options="timeTypes" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto">
</a-select> </a-select>
</div> </div> -->
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">期限
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field is-link readonly :value="timeTypeValue" label="定期类型" input-align="right" placeholder="请选择定期类型" @click="showTimeTypes = true"/>
<van-popup v-model="showTimeTypes" round position="bottom">
<van-picker
show-toolbar
:columns="timeTypes"
@cancel="showTimeTypes = false"
@confirm="onConfirmTimeTypes"
/>
</van-popup>
</van-col>
</van-row>
<!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%">期限
<a-select v-model:value="test.time" :options="times" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto"> <a-select v-model:value="test.time" :options="times" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto">
</a-select> </a-select>
</div> </div> -->
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">年利率(%)<van-field v-model="test.yearRate" placeholder="请输入" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">存入金额(元)<van-field v-model="test.depositAmt" placeholder="请输入" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field is-link readonly :value="timeValue" label="期限" input-align="right" placeholder="请选择期限" @click="showTimes = true"/>
<van-popup v-model="showTimes" round position="bottom">
<van-picker
show-toolbar
:columns="times"
@cancel="showTimes = false"
@confirm="onConfirmTimes"
/>
</van-popup>
</van-col>
</van-row>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">年利率(%)<van-field v-model="test.yearRate" placeholder="请输入" style="width: 50%;margin-top: -4%;margin-left: auto" input-align="right"></van-field></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">存入金额(元)<van-field v-model="test.depositAmt" placeholder="请输入" style="width: 50%;margin-top: -4%;margin-left: auto" input-align="right"></van-field></div>
</div> </div>
<!-- <div v-if="flag" style="margin-top: 160px; text-align: right; margin-right: 10px; font-size: 12px; color: #3672F1" @click="toDepositRate">--> <!-- <div v-if="flag" style="margin-top: 160px; text-align: right; margin-right: 10px; font-size: 12px; color: #3672F1" @click="toDepositRate">-->
<!-- 查看基准存款利率--> <!-- 查看基准存款利率-->
<!-- </div>--> <!-- </div>-->
<div class="card" v-if="!flag" :model="test2"> <div class="card" v-if="!flag" :model="test2">
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款金额(元)<van-field v-model="test2.loanAmt" placeholder="请输入贷款金额" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div> <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款金额(元)<van-field v-model="test2.loanAmt" placeholder="请输入贷款金额" style="width: 50%;margin-top: -4%;margin-left: auto;" input-align="right"></van-field></div>
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款期限(月)<van-field v-model="test2.loanTime" placeholder="请输入贷款期限" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div> <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款期限(月)<van-field v-model="test2.loanTime" placeholder="请输入贷款期限" style="width: 50%;margin-top: -4%;margin-left: auto" input-align="right"></van-field></div>
<!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%">计划月还款(元)<van-field v-model="test2.planMonthRepay" placeholder="请输入计划月还款" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>--> <!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%">计划月还款(元)<van-field v-model="test2.planMonthRepay" placeholder="请输入计划月还款" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>-->
<div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款利率(%)<van-field v-model="test2.loanRate" placeholder="请输入贷款利率" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div> <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款利率(%)<van-field v-model="test2.loanRate" placeholder="请输入贷款利率" style="width: 50%;margin-top: -4%;margin-left: auto;" input-align="right"></van-field></div>
<!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款种类--> <!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款种类-->
<!-- <a-select v-model:value="test2.loanType" :options="loanTypes" placeholder="请选择贷款种类" style="width: 50%;margin-top: -2%;margin-left: auto">--> <!-- <a-select v-model:value="test2.loanType" :options="loanTypes" placeholder="请选择贷款种类" style="width: 50%;margin-top: -2%;margin-left: auto">-->
<!-- </a-select>--> <!-- </a-select>-->
<!-- </div>--> <!-- </div>-->
<div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式 <!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式
<a-select v-model:value="test2.repayType" :options="choices" placeholder="请选择还款方式" style="width: 60%;margin-top: -2%;margin-left: auto"> <a-select v-model:value="test2.repayType" :options="choices" placeholder="请选择还款方式" style="width: 60%;margin-top: -2%;margin-left: auto">
</a-select> </a-select>
</div> </div> -->
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field style="color: red;" is-link readonly :value="choiceValue" label="还款方式" input-align="right" placeholder="请选择还款方式" @click="showChoices = true"/>
<van-popup v-model="showChoices" round position="bottom">
<van-picker
show-toolbar
:columns="choices"
@cancel="showChoices = false"
@confirm="onConfirmChoices"
/>
</van-popup>
</van-col>
</van-row>
</div> </div>
<div v-if="flag"> <div v-if="flag">
<van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary" @click="countA">计算</van-button> <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary" @click="countA">计算</van-button>
...@@ -77,61 +160,117 @@ export default class DepositInterestTrial extends Vue{ ...@@ -77,61 +160,117 @@ export default class DepositInterestTrial extends Vue{
label : "无抵押", label : "无抵押",
} }
]; ];
saveTypes: any[] = [ typeValue:any= "";
{ showTypes:any=false;
value : "定期", // saveTypes: any[] = [
label : "定期", // {
},{ // value : "定期",
value : "非定期", // label : "定期",
label : "非定期", // },{
} // value : "非定期",
// label : "非定期",
// }
// ];
saveTypes: any[] = [
"定期","非定期",
]; ];
choices: any[] = [
{ onConfirmTypes(typeValue: string) {
value : "利随本清", this.typeValue = typeValue;
label : "利随本清", this.showTypes = false;
},{ }
value : "等额本金", // choices: any[] = [
label : "等额本金", // {
},{ // value : "利随本清",
value : "等额本息", // label : "利随本清",
label : "等额本息", // },{
}, // value : "等额本金",
{ // label : "等额本金",
value : "按季结息(到期一次性还本)", // },{
label : "按季结息(到期一次性还本)", // value : "等额本息",
},{ // label : "等额本息",
value : "按月结息(到期一次性还本)", // },
label : "按月结息(到期一次性还本)", // {
},{ // value : "按季结息(到期一次性还本)",
value : "按年结息(到期一次性还本)", // label : "按季结息(到期一次性还本)",
label : "按年结息(到期一次性还本)", // },{
} // value : "按月结息(到期一次性还本)",
// label : "按月结息(到期一次性还本)",
// },{
// value : "按年结息(到期一次性还本)",
// label : "按年结息(到期一次性还本)",
// }
// ];
choiceValue:any= "";
showChoices:any=false;
choices: any[] = [
"利随本清",
"等额本金",
"等额本息",
"按季结息(到期一次性还本)",
"按月结息(到期一次性还本)",
"按年结息(到期一次性还本)",
]; ];
timeTypes: any[] = [
{ onConfirmChoices(choiceValue: string) {
value : "定存整取", this.choiceValue = choiceValue;
label : "定存整取", this.showChoices = false;
},{ }
value : "零存整取", // timeTypes: any[] = [
label : "零存整取", // {
},{ // value : "定存整取",
value : "整存整取", // label : "定存整取",
label : "整存整取", // },{
} // value : "零存整取",
// label : "零存整取",
// },{
// value : "整存整取",
// label : "整存整取",
// }
// ];
timeTypeValue:any= "";
showTimeTypes:any=false;
timeTypes: any[] = [
"定存整取",
"定存整取",
"零存整取",
"零存整取",
"整存整取",
"整存整取",
]; ];
times: any[] = [ onConfirmTimeTypes(timeTypeValue: string) {
{ this.timeTypeValue = timeTypeValue;
value : "1", this.showTimeTypes = false;
label : "一年", }
},{
value : "2",
label : "两年", timeValue:any= "";
},{ showTimes:any=false;
value : "3", // times: any[] = [
label : "三年", // {
} // value : "1",
// label : "一年",
// },{
// value : "2",
// label : "两年",
// },{
// value : "3",
// label : "三年",
// }
// ];
times: any[] = [
"一年",
"两年",
"三年",
]; ];
onConfirmTimes(timeValue: string) {
this.timeValue = timeValue;
this.showTimes = false;
}
test2: any = { test2: any = {
loanAmt: "", loanAmt: "",
loanTime: "", loanTime: "",
...@@ -233,7 +372,18 @@ export default class DepositInterestTrial extends Vue{ ...@@ -233,7 +372,18 @@ export default class DepositInterestTrial extends Vue{
margin-left: 5%; margin-left: 5%;
margin-top: -30%; margin-top: -30%;
} }
.layoutName {
font-family: "Arial Normal", "Arial";
font-weight: 400;
font-style: normal;
font-size: 13px;
color: rgba(0, 0, 0, 0.65);
}
::v-deep .ant-select-selection { ::v-deep .ant-select-selection {
border: none; border: none;
} }
::v-deep .van-field__label {
color:#000000A6;
}
</style> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或