Skip to content

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

主页单选

上级 ce638afd
显示空白字符变更
内嵌 并排
正在显示 包含 431 行增加 和 112 行删除
src/views/main/Main.vue
浏览文件 @ 87f8365a
......@@ -2,36 +2,61 @@
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-05 14:05:30
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-08-18 13:52:56
* @LastEditTime: 2022-07-28 15:44:01
* @FilePath: \mcep-h5\src\views\main\MainView.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="d-page d-flex flex-column" style=" background-color: #ebedf0">
<div class="d-page d-flex flex-column" style="background-color: #ebedf0">
<div class="rarle">
<tools-bar :title="tatleName" style="width:100%;height: calc(25vh);">
<tools-bar :title="tatleName" style="width: 100%; height: calc(25vh)">
</tools-bar>
</div>
<div class="roolsolt">
<van-row class="roll" background="#ecf9ff" style="background: #ecf9ff;width: 90%;height: 34px;margin: 2% auto; border-radius: 10px;position: absolute; top: 21%;
left: 5%;">
<van-col span="5" class="titleName"
style="height: 34px;margin: 7px auto 0px 8px; border-radius: 12px; color: #a2d2f4;">
<van-row
class="roll"
background="#ecf9ff"
style="
background: #ecf9ff;
width: 90%;
height: 34px;
margin: 2% auto;
border-radius: 10px;
position: absolute;
top: 21%;
left: 5%;
"
>
<van-col
span="5"
class="titleName"
style="
height: 34px;
margin: 7px auto 0px 8px;
border-radius: 12px;
color: #a2d2f4;
"
>
审批进度
</van-col>
<van-col span="18" class="notice">
<van-notice-bar left-icon="volume-o" color="#1989fa" background="#ecf9ff"
style="height: 34px; border-radius: 12px;">
<van-notice-bar
left-icon="volume-o"
color="#1989fa"
background="#ecf9ff"
style="height: 34px; border-radius: 12px"
>
{{ notice }}
</van-notice-bar>
</van-col>
</van-row>
</div>
<div style="background-color: #ffff;height: 18%;">
<div style="background-color: #ffff; height: 18%">
<div class="prudect">
<span style="font-size: 18px;font-weight: 600;margin-left: 4%;">推荐产品</span>
<span style="font-size: 18px; font-weight: 600; margin-left: 4%"
>推荐产品</span
>
</div>
<div>
<!-- <van-tabs v-model="activeName">
......@@ -40,39 +65,156 @@
<van-tab title="期限" name="c"></van-tab>
<van-tab title="利率" name="d"></van-tab>
</van-tabs> -->
<van-dropdown-menu style="height:100%;">
<van-dropdown-item title="综合排序" ref="item" style="height:100%">
<div class="application" v-for="(item, index) in applicaList" :key="index">
<van-dropdown-menu style="height: 100%">
<van-dropdown-item title="综合排序" ref="item" style="height: 100%">
<div
class="application"
v-for="(item, index) in applicaList.slice(0, 1)"
:key="index"
>
<van-row type="flex" class="applicationName">
<van-col span="24">{{ item.name }}</van-col>
</van-row>
<van-row type="flex" class="applicationfale">
<van-col span="10">
<div class="vandiv">{{ item.min }}</div>
</van-col>
<van-col span="2">-</van-col>
<van-col span="10">
<div class="vandiv">{{ item.max }}</div>
</van-col>
</van-row>
<van-row type="flex" gutter="10" class="applicationfole">
<!-- div-->
<van-col span="6">
<div :class="vanvcol11" @click="clickButton1(index,1)">
{{ item.fristsize }}
</div>
</van-col>
<van-col span="6">
<div :class="vanvcol12" @click="clickButton1(index,2)">{{ item.secondsize }}</div>
</van-col>
<van-col span="6">
<div :class="vanvcol13" @click="clickButton1(index,3)">{{ item.thirdsize }}</div>
</van-col>
<van-col span="6">
<div :class="vanvcol14" @click="clickButton1(index,4)">{{ item.foursize }}</div>
</van-col>
</van-row>
<div
class="application"
v-for="(item, index) in applicaList.slice(1, 2)"
:key="index"
>
<van-row type="flex" class="applicationName">
<van-col span="24">{{ item.name }}</van-col>
</van-row>
<van-row type="flex" class="applicationfale">
<van-col span="10">
<div class="vandiv">{{ item.min }}</div>
</van-col>
<van-col span="2">-</van-col>
<van-col span="10">
<div class="vandiv">{{ item.max }}</div>
</van-col>
</van-row>
<van-row type="flex" gutter="10" class="applicationfole">
<!-- div-->
<van-col span="6">
<div :class="vanvcol21" @click="clickButton2(index,1)"> {{ item.fristsize }}
</div>
</van-col>
<van-col span="6">
<div :class="vanvcol22" @click="clickButton2(index,2)">{{ item.secondsize }}</div>
</van-col>
<van-col span="6">
<div :class="vanvcol23" @click="clickButton2(index,3)">{{ item.thirdsize }}</div>
</van-col>
<van-col span="6">
<div :class="vanvcol24" @click="clickButton2(index,4)">{{ item.foursize }}</div>
</van-col>
</van-row>
</div>
<div
class="application"
v-for="(item, index) in applicaList.slice(3, 4)"
:key="index"
>
<van-row type="flex" class="applicationName">
<van-col span="24">{{ item.name }}</van-col>
</van-row>
<van-row type="flex" class="applicationfale">
<van-col span="10">
<div class="vandiv">{{ item.min }}</div>
</van-col>
<van-col span="2">-</van-col>
<van-col span="10">
<div class="vandiv">{{ item.max }}</div>
</van-col>
</van-row>
<van-row type="flex" gutter="10" class="applicationfole">
<!-- div-->
<van-col span="6">
<div class="vandilote">{{ item.fristsize }}</div>
<div :class="vanvcol41" @click="clickButton4(index,1)"> {{ item.fristsize }}
</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.secondsize }}</div>
<div :class="vanvcol42" @click="clickButton4(index,2)">{{ item.secondsize }}</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.thirdsize }}</div>
<div :class="vanvcol43" @click="clickButton4(index,3)">{{ item.thirdsize }}</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.foursize }}</div>
<div :class="vanvcol44" @click="clickButton4(index,4)">{{ item.foursize }}</div>
</van-col>
</van-row>
</div>
<div style="margin-top: 4%;">
<div
class="application"
v-for="(item, index) in applicaList.slice(2, 3)"
:key="index"
>
<van-row type="flex" class="applicationName">
<van-col span="24">{{ item.name }}</van-col>
</van-row>
<van-row type="flex" class="applicationfale">
<van-col span="10">
<div class="vandiv">{{ item.min }}</div>
</van-col>
<van-col span="2">-</van-col>
<van-col span="10">
<div class="vandiv">{{ item.max }}</div>
</van-col>
</van-row>
<van-row type="flex" gutter="10" class="applicationfole">
<!-- div-->
<van-col span="6">
<div :class="vanvcol31" @click="clickButton3(index,1)"> {{ item.fristsize }}
</div>
</van-col>
<van-col span="6">
<div :class="vanvcol32" @click="clickButton3(index,2)">{{ item.secondsize }}</div>
</van-col>
<van-col span="6">
<div :class="vanvcol33" @click="clickButton3(index,3)">{{ item.thirdsize }}</div>
</van-col>
<van-col span="6">
<div :class="vanvcol34" @click="clickButton3(index,4)">{{ item.foursize }}</div>
</van-col>
</van-row>
</div>
</div>
<div style="margin-top: 4%">
<van-row type="flex">
<van-col span="12">
<van-button square block type="default">重置</van-button>
......@@ -84,37 +226,43 @@
</div>
</van-dropdown-item>
<van-dropdown-item title="金额" ref="item">
<div class="application" v-for="(item, index) in applicaform" :key="index">
<div
class="application"
v-for="(item, index) in applicaList.slice(0, 1)"
:key="index"
>
<van-row type="flex" class="applicationName">
<van-col span="24">{{ item.name }}</van-col>
</van-row>
<van-row type="flex" class="applicationfale">
<van-col span="10">
<div class="vandiv">{{ item.max }}</div>
<div class="vandiv">{{ item.min }}</div>
</van-col>
<van-col span="2">-</van-col>
<van-col span="10">
<div class="vandiv">{{ item.min }}</div>
<div class="vandiv">{{ item.max }}</div>
</van-col>
</van-row>
<van-row type="flex" gutter="10" class="applicationfole">
<!-- div-->
<van-col span="6">
<div class="vandilote">{{ item.fristsize }}</div>
<div :class="vanvcol11" @click="clickButton1(index,1)">
{{ item.fristsize }}
</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.secondsize }}</div>
<div :class="vanvcol12" @click="clickButton1(index,2)">{{ item.secondsize }}</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.thirdsize }}</div>
<div :class="vanvcol13" @click="clickButton1(index,3)">{{ item.thirdsize }}</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.foursize }}</div>
<div :class="vanvcol14" @click="clickButton1(index,4)">{{ item.foursize }}</div>
</van-col>
</van-row>
</div>
<div style="margin-top: 4%;">
<div style="margin-top: 4%">
<van-row type="flex">
<van-col span="12">
<van-button square block type="default">重置</van-button>
......@@ -126,37 +274,42 @@
</div>
</van-dropdown-item>
<van-dropdown-item title="期限" ref="item">
<div class="application" v-for="(item, index) in applicaform" :key="index">
<div
class="application"
v-for="(item, index) in applicaList.slice(1, 2)"
:key="index"
>
<van-row type="flex" class="applicationName">
<van-col span="24">{{ item.name }}</van-col>
</van-row>
<van-row type="flex" class="applicationfale">
<van-col span="10">
<div class="vandiv">{{ item.max }}</div>
<div class="vandiv">{{ item.min }}</div>
</van-col>
<van-col span="2">-</van-col>
<van-col span="10">
<div class="vandiv">{{ item.min }}</div>
<div class="vandiv">{{ item.max }}</div>
</van-col>
</van-row>
<van-row type="flex" gutter="10" class="applicationfole">
<!-- div-->
<van-col span="6">
<div class="vandilote">{{ item.fristsize }}</div>
<div :class="vanvcol21" @click="clickButton2(index,1)"> {{ item.fristsize }}
</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.secondsize }}</div>
<div :class="vanvcol22" @click="clickButton2(index,2)">{{ item.secondsize }}</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.thirdsize }}</div>
<div :class="vanvcol23" @click="clickButton2(index,3)">{{ item.thirdsize }}</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.foursize }}</div>
<div :class="vanvcol24" @click="clickButton2(index,4)">{{ item.foursize }}</div>
</van-col>
</van-row>
</div>
<div style="margin-top: 4%;">
<div style="margin-top: 4%">
<van-row type="flex">
<van-col span="12">
<van-button square block type="default">重置</van-button>
......@@ -168,37 +321,42 @@
</div>
</van-dropdown-item>
<van-dropdown-item title="利率" ref="item">
<div class="application" v-for="(item, index) in applicaform" :key="index">
<div
class="application"
v-for="(item, index) in applicaList.slice(2, 3)"
:key="index"
>
<van-row type="flex" class="applicationName">
<van-col span="24">{{ item.name }}</van-col>
</van-row>
<van-row type="flex" class="applicationfale">
<van-col span="10">
<div class="vandiv">{{ item.max }}</div>
<div class="vandiv">{{ item.min }}</div>
</van-col>
<van-col span="2">-</van-col>
<van-col span="10">
<div class="vandiv">{{ item.min }}</div>
<div class="vandiv">{{ item.max }}</div>
</van-col>
</van-row>
<van-row type="flex" gutter="10" class="applicationfole">
<!-- div-->
<van-col span="6">
<div class="vandilote">{{ item.fristsize }}</div>
<div :class="vanvcol31" @click="clickButton3(index,1)"> {{ item.fristsize }}
</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.secondsize }}</div>
<div :class="vanvcol32" @click="clickButton3(index,2)">{{ item.secondsize }}</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.thirdsize }}</div>
<div :class="vanvcol33" @click="clickButton3(index,3)">{{ item.thirdsize }}</div>
</van-col>
<van-col span="6">
<div class="vandilote">{{ item.foursize }}</div>
<div :class="vanvcol34" @click="clickButton3(index,4)">{{ item.foursize }}</div>
</van-col>
</van-row>
</div>
<div style="margin-top: 4%;">
<div style="margin-top: 4%">
<van-row type="flex">
<van-col span="12">
<van-button square block type="default">重置</van-button>
......@@ -211,64 +369,97 @@
</van-dropdown-item>
</van-dropdown-menu>
</div>
<scroller-view v-calculate-height :height="10000" >
<div v-for="(item, index) in productList" :key="index" style="margin: 4% auto;">
<picket-bar :productname="item.productname" :describe="item.describe" :limitrange="item.limitrange"
:interestrate="item.interestrate" :loanterm="item.loanterm" @onClickPicket="onClickPicket"></picket-bar>
<scroller-view v-calculate-height>
<div
v-for="(item, index) in productList"
:key="index"
style="margin: 4% auto"
>
<picket-bar
:productname="item.productname"
:describe="item.describe"
:limitrange="item.limitrange"
:interestrate="item.interestrate"
:loanterm="item.loanterm"
@onClickPicket="onClickPicket"
></picket-bar>
</div>
</scroller-view>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ProductData } from '@/model/entity/ProductData'
import { ProductData } from "@/model/entity/ProductData";
import { i } from "mathjs";
@Component({
name: "Main",
})
export default class Main extends Vue {
tatleName = "线上金融服务平台"
notice = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
tatleName = "线上金融服务平台";
notice = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。";
vanvcol11 = "vandilote";
vanvcol12 ="vandilote";
vanvcol13 ="vandilote";
vanvcol14 ="vandilote";
vanvcol21 = "vandilote";
vanvcol22 ="vandilote";
vanvcol23 ="vandilote";
vanvcol24 ="vandilote";
vanvcol31 = "vandilote";
vanvcol32 ="vandilote";
vanvcol33 ="vandilote";
vanvcol34 ="vandilote";
vanvcol41 = "vandilote";
vanvcol42 ="vandilote";
vanvcol43 ="vandilote";
vanvcol44 ="vandilote";
//测试
demo() {
this.$router.push({
path: "/CustomerMgtView"
}
)
path: "/CustomerMgtView",
});
}
//div列表
applicaList: any = [
{
name: "产品金额（万元）",
max: "最高",
min: "最低",
fristsize: "1-100",
secondsize: "100-500",
thirdsize: "500-1000",
foursize: "1000-2000"
fristsize: "1~100",
secondsize: "100~500",
thirdsize: "500~1000",
foursize: "1000~2000",
select: null,
},
{
name: "产品期限(月)",
max: "最高",
min: "最低",
fristsize: "1-100",
secondsize: "100-500",
thirdsize: "500-1000",
foursize: "1000-2000"
fristsize: "1~12",
secondsize: "1~24",
thirdsize: "12~24",
foursize: "12~36",
select: null,
},
{
name: "产品利率(%)",
max: "最高",
min: "最低",
fristsize: "1-100",
secondsize: "100-500",
thirdsize: "500-1000",
foursize: "1000-2000"
fristsize: "1~3%",
secondsize: "2~4%",
thirdsize: "3~5%",
foursize: "4~6%",
select: null,
},
{
name: "担保方式",
......@@ -277,8 +468,10 @@ export default class Main extends Vue {
fristsize: "抵押",
secondsize: "质押",
thirdsize: "信用",
foursize: "保证"
foursize: "保证",
select: null,
},
// {
// name: "产品金额（万元）",
// max: "最高",
......@@ -306,7 +499,7 @@ export default class Main extends Vue {
// thirdsize: "500-1000",
// foursize: "1000-2000"
// }
]
];
//金额
applicaform: any = [
{
......@@ -316,44 +509,31 @@ export default class Main extends Vue {
fristsize: "1-100",
secondsize: "100-500",
thirdsize: "500-1000",
foursize: "1000-2000"
}
]
foursize: "1000-2000",
},
];
//按钮
tabbarlist: any = {
name: "首页",
flag: true
}
flag: true,
};
productList: ProductData[] = [{
productname: "金融消费贷", //产品名称
describe: "一次核查 三年有效 随用随贷 循环使用",//描述
limitrange: "1000~2000",//额度范围
interestrate: "19%~20%",//利率
loanterm: "89个月",//贷款期限
},
productList: ProductData[] = [
{
productname: "白领贷", //产品名称
describe: "额度较大 使用人群 工薪阶级",//描述
limitrange: "1000~2000",//额度范围
interestrate: "19%~20%",//利率
loanterm: "89个月",//贷款期限
}, {
productname: "金融消费贷", //产品名称
describe: "1年100万",//描述
limitrange: "1000~2000",//额度范围
interestrate: "19%~20%",//利率
loanterm: "89个月",//贷款期限
describe: "1年100万", //描述
limitrange: "1000~2000", //额度范围
interestrate: "19%~20%", //利率
loanterm: "89个月", //贷款期限
},
{
productname: "金融消费贷", //产品名称
describe: "1年100万",//描述
limitrange: "1000~2000",//额度范围
interestrate: "19%~20%",//利率
loanterm: "89个月",//贷款期限
}
describe: "1年100万三年内还清了", //描述
limitrange: "1000~2000", //额度范围
interestrate: "19%~20%", //利率
loanterm: "89个月", //贷款期限
},
];
//点击picket跳转界面
onClickPicket() {
......@@ -363,9 +543,138 @@ export default class Main extends Vue {
// params:{
// data:""
// }
})
});
}
}
//切换
clickButton1(index: number,item:number) {
var select =this.applicaList[index].sellet=item;
console.log( this.applicaList[index].sellet);
if (item=== 1) {
this.vanvcol11 = "vancoll";
this.vanvcol12 = "vandilote";
this.vanvcol13 = "vandilote";
this.vanvcol14 = "vandilote";
console.log( this.applicaList[index].sellet);
} else if(item=== 2){
this.vanvcol11 = "vandilote";
this.vanvcol12 = "vancoll";
this.vanvcol13 = "vandilote";
this.vanvcol14 = "vandilote";
}else if(item=== 3){
this.vanvcol11 = "vandilote";
this.vanvcol12 = "vandilote";
this.vanvcol13 = "vancoll";
this.vanvcol14 = "vandilote";
}
else if(item=== 4){
this.vanvcol11 = "vandilote";
this.vanvcol12 = "vandilote";
this.vanvcol13 = "vandilote";
this.vanvcol14 = "vancoll";
}
}
clickButton2(index: number,item:number) {
var select =this.applicaList[index].sellet=item;
console.log( this.applicaList[index].sellet);
if (item=== 1) {
this.vanvcol21 = "vancoll";
this.vanvcol22 = "vandilote";
this.vanvcol23 = "vandilote";
this.vanvcol24 = "vandilote";
console.log( this.applicaList[index].sellet);
} else if(item=== 2){
this.vanvcol21 = "vandilote";
this.vanvcol22 = "vancoll";
this.vanvcol23 = "vandilote";
this.vanvcol24 = "vandilote";
}else if(item=== 3){
this.vanvcol21 = "vandilote";
this.vanvcol22 = "vandilote";
this.vanvcol23 = "vancoll";
this.vanvcol24 = "vandilote";
}
else if(item=== 4){
this.vanvcol21 = "vandilote";
this.vanvcol22 = "vandilote";
this.vanvcol23 = "vandilote";
this.vanvcol24 = "vancoll";
}
}
clickButton3(index: number,item:number) {
var select =this.applicaList[index].sellet=item;
console.log( this.applicaList[index].sellet);
if (item=== 1) {
this.vanvcol31 = "vancoll";
this.vanvcol32 = "vandilote";
this.vanvcol33 = "vandilote";
this.vanvcol34 = "vandilote";
console.log( this.applicaList[index].sellet);
} else if(item=== 2){
this.vanvcol31 = "vandilote";
this.vanvcol32 = "vancoll";
this.vanvcol33 = "vandilote";
this.vanvcol34 = "vandilote";
}else if(item=== 3){
this.vanvcol31 = "vandilote";
this.vanvcol32 = "vandilote";
this.vanvcol33 = "vancoll";
this.vanvcol34 = "vandilote";
}
else if(item=== 4){
this.vanvcol31 = "vandilote";
this.vanvcol32 = "vandilote";
this.vanvcol33 = "vandilote";
this.vanvcol34 = "vancoll";
}
}
clickButton4(index: number,item:number) {
var select =this.applicaList[index].sellet=item;
console.log( this.applicaList[index].sellet);
if (item=== 1) {
this.vanvcol41 = "vancoll";
this.vanvcol42 = "vandilote";
this.vanvcol43 = "vandilote";
this.vanvcol44 = "vandilote";
console.log( this.applicaList[index].sellet);
} else if(item=== 2){
this.vanvcol41 = "vandilote";
this.vanvcol42 = "vancoll";
this.vanvcol43 = "vandilote";
this.vanvcol44 = "vandilote";
}else if(item=== 3){
this.vanvcol41 = "vandilote";
this.vanvcol42 = "vandilote";
this.vanvcol43 = "vancoll";
this.vanvcol44 = "vandilote";
}
else if(item=== 4){
this.vanvcol41 = "vandilote";
this.vanvcol42 = "vandilote";
this.vanvcol43 = "vandilote";
this.vanvcol44 = "vancoll";
}
}
}
</script>
<style scoped lang="scss">
.roll {
......@@ -379,7 +688,14 @@ export default class Main extends Vue {
border-radius: 12px;
color: #a2d2f4;
}
.vancoll {
text-align: center;
background-color: rgba(242, 242, 242, 1);
font-size: 12px;
line-height: 40px;
border-radius: 4px;
background: #1890ff;
}
.prudect {
line-height: 100%;
margin-top: 40px;
......@@ -453,4 +769,7 @@ export default class Main extends Vue {
overflow: hidden;
height: 100%;
}
#fristsize {
background-color: #1890ff;
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或