Skip to content

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

修改登录 注册 修改密码 页面布局

上级 543358b0
显示空白字符变更
内嵌 并排
正在显示 包含 471 行增加 和 431 行删除
src/views/authentication/LoginView.vue
浏览文件 @ a0c4a07f
...@@ -17,14 +17,17 @@ ...@@ -17,14 +17,17 @@
<p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">登录</span> </p> <p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">登录</span> </p>
</van-col> </van-col>
<van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial'; <van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
}">请使用手机号登录</span></van-col> }">请使用手机号或身份证号登录</span></van-col>
</van-row> </van-row>
<van-form> <van-form>
<div class="logindiv"> <div class="logindiv">
<span class="sopan">手机号</span> <span class="sopan">账号</span>
<van-field v-model="phone" label="+86 |" :border="true" placeholder="请输入手机号" <van-field v-model="loginNo" :border="true" placeholder="请输入手机号或身份证号"
:rules="[{ validator: verifyPhone, message: '请输入正确的手机号码' }]" /> />
<!-- :rules="[{ validator: verifyPhone, message: '请输入正确的手机号码' }]" -->
</div> </div>
<van-divider :style="{ margin: 0 }"></van-divider>
<!-- <div class="logindiv"> --> <!-- <div class="logindiv"> -->
<span class="sopan">密码</span> <span class="sopan">密码</span>
...@@ -36,9 +39,11 @@ ...@@ -36,9 +39,11 @@
</span> </span>
</template> </template>
</van-field> </van-field>
<!-- <van-divider :style="{ margin: 0 }"></van-divider> -->
<!-- <van-divider /> --> <!-- <van-divider /> -->
<!-- </div> --> <!-- </div> -->
<div class="d-flex "> <!-- <div class="d-flex ">
<div class="p-2 mr-auto "> <div class="p-2 mr-auto ">
<span class="sopan">验证码</span> <span class="sopan">验证码</span>
<van-field center clearable v-model="imageSrcValue" placeholder="请输入验证码" /> <van-field center clearable v-model="imageSrcValue" placeholder="请输入验证码" />
...@@ -46,7 +51,7 @@ ...@@ -46,7 +51,7 @@
<div class="p-2 "> <div class="p-2 ">
<img :src="imageSrc" style="max-width: 100px; max-height: 200px;" @click="_updatePicCode()" /> <img :src="imageSrc" style="max-width: 100px; max-height: 200px;" @click="_updatePicCode()" />
</div> </div>
</div> </div> -->
<!-- <template > <!-- <template >
<img :src="imageSrc" style="max-width: 100px; max-height: 200px;" /> <img :src="imageSrc" style="max-width: 100px; max-height: 200px;" />
...@@ -56,11 +61,13 @@ ...@@ -56,11 +61,13 @@
<van-row class=""> <van-row class="">
<van-col span="16"> <van-col span="16">
<van-field v-model="sms" center clearable placeholder="请输入短信验证码"> <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
<!-- <van-divider /> -->
</van-field> </van-field>
</van-col> </van-col>
<van-col span="8"><a style="color:#3672F1" @click="getPhonePost()">{{ getCmstotal }}</a></van-col> <van-col span="8"><a style=" color:#3672F1; display:inline-block;font-size:12px;line-height:44px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
</van-row> </van-row>
<van-divider :style="{ margin: 0 }"></van-divider>
<div style="margin: 16px;"> <div style="margin: 16px;">
<van-button square block type="info" native-type="submit" @click="loginSystem()">登录</van-button> <van-button square block type="info" native-type="submit" @click="loginSystem()">登录</van-button>
</div> </div>
...@@ -99,9 +106,9 @@ import { log } from "mathjs"; ...@@ -99,9 +106,9 @@ import { log } from "mathjs";
[VanImage.name]: VanImage, [VanImage.name]: VanImage,
}) })
export default class LoginView extends Vue { export default class LoginView extends Vue {
getCmstotal = "获取短信验证码"; getCmstotal = "获取验证码";
tatleName = "用户登录"; tatleName = "用户登录";
phone: string = "";//电话 loginNo: string = "";//登录账号
password: string = "";//密码 password: string = "";//密码
imageSrc: any = "";//图形 imageSrc: any = "";//图形
imageSrcValue: string = "";//图形验证码 imageSrcValue: string = "";//图形验证码
...@@ -122,9 +129,9 @@ export default class LoginView extends Vue { ...@@ -122,9 +129,9 @@ export default class LoginView extends Vue {
} }
//手机号 //手机号
verifyPhone() { // verifyPhone() {
return /^1\d{10}$/.test(this.phone) // 返回true或false // return /^1\d{10}$/.test(this.phone) // 返回true或false
} // }
//获取图形验证码 //获取图形验证码
_updatePicCode() { _updatePicCode() {
//请求图形验证码 //请求图形验证码
...@@ -151,7 +158,7 @@ export default class LoginView extends Vue { ...@@ -151,7 +158,7 @@ export default class LoginView extends Vue {
//获取短信验证码 //获取短信验证码
getPhonePost() { getPhonePost() {
let param = { let param = {
phoneCode: this.phone phoneCode: this.loginNo
} }
apiService.general(commonApi.getPicCode, param, undefined, undefined).then((response: RestfulResponse) => { apiService.general(commonApi.getPicCode, param, undefined, undefined).then((response: RestfulResponse) => {
...@@ -169,7 +176,7 @@ export default class LoginView extends Vue { ...@@ -169,7 +176,7 @@ export default class LoginView extends Vue {
//验证码失败刷新 //验证码失败刷新
//this._updatePicCode(); //this._updatePicCode();
let param = { let param = {
phone: this.phone, phone: this.loginNo,
//图形验证码 //图形验证码
imageVerifyKey: this.imageSrcValue, imageVerifyKey: this.imageSrcValue,
//渠道 //渠道
...@@ -202,7 +209,7 @@ export default class LoginView extends Vue { ...@@ -202,7 +209,7 @@ export default class LoginView extends Vue {
this.$router.push({ this.$router.push({
name: `ForgetPass`, name: `ForgetPass`,
params: { params: {
phone: this.phone phone: this.loginNo
} }
}); });
} }
......
src/views/login/ForgetPassView.vue
浏览文件 @ a0c4a07f
...@@ -28,21 +28,22 @@ ...@@ -28,21 +28,22 @@
class="font-size-12-dhc" class="font-size-12-dhc"
style="font-weight: 400; font-family: 'Arial Normal', 'Arial'; style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
}" }"
>请使用注册手机号进行密码重置</span >请使用注册手机号或身份证号进行密码重置</span
></van-col ></van-col
> >
</van-row> </van-row>
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<div class="logindiv"> <div class="logindiv">
<span class="sopan">手机号码</span> <span class="sopan">账号</span>
<van-field <van-field
v-model="phone" v-model="loginNo"
label="+86 |"
:border="true" :border="true"
placeholder="请输入手机号" placeholder="请输入手机号或身份证号"
/> />
<van-divider />
</div> </div>
<van-divider :style="{ margin: 0 }"></van-divider>
<div class="logindiv"> <div class="logindiv">
<span class="sopan">新密码</span> <span class="sopan">新密码</span>
...@@ -64,8 +65,9 @@ ...@@ -64,8 +65,9 @@
</van-field> </van-field>
<!-- <van-divider /> --> <!-- <van-divider /> -->
</div> </div>
<van-divider :style="{ margin: 0 }"></van-divider>
<div class="logindiv"> <div class="logindiv">
<span class="sopan">新密码</span> <span class="sopan">确认密码</span>
<van-field <van-field
v-model="restpassword" v-model="restpassword"
:type="password" :type="password"
...@@ -84,6 +86,7 @@ ...@@ -84,6 +86,7 @@
</van-field> </van-field>
<!-- <van-divider /> --> <!-- <van-divider /> -->
</div> </div>
<van-divider :style="{ margin: 0 }"></van-divider>
<span class="sopan">短信验证码</span> <span class="sopan">短信验证码</span>
<div> <div>
<van-row> <van-row>
...@@ -98,10 +101,11 @@ ...@@ -98,10 +101,11 @@
</van-field> </van-field>
</van-col> </van-col>
<van-col span="8" <van-col span="8"
><a href="#" @click="getPhonePost()">获取短信验证码</a></van-col ><a href="#" style=" color:#3672F1; display:inline-block;font-size:12px;line-height:44px; margin-left: 25%;" @click="getPhonePost()">获取验证码</a></van-col
> >
</van-row> </van-row>
</div> </div>
<van-divider :style="{ margin: 0 }"></van-divider>
<div style="margin: 16px"> <div style="margin: 16px">
<van-button square block type="info" native-type="submit" <van-button square block type="info" native-type="submit"
>登录</van-button >登录</van-button
...@@ -128,7 +132,7 @@ export default class ForgetPassView extends Vue { ...@@ -128,7 +132,7 @@ export default class ForgetPassView extends Vue {
passwordType="password" passwordType="password"
getCmstotal = "获取短信验证码"; getCmstotal = "获取短信验证码";
tatleName = "密码重置"; tatleName = "密码重置";
phone: string = ""; //电话 loginNo: string = ""; //登录账号
newpassword: string = ""; //密码 newpassword: string = ""; //密码
restpassword: string = ""; //密码 restpassword: string = ""; //密码
imageSrc: string = ""; //图形 imageSrc: string = ""; //图形
...@@ -160,7 +164,7 @@ export default class ForgetPassView extends Vue { ...@@ -160,7 +164,7 @@ export default class ForgetPassView extends Vue {
} }
getPhonePost() { getPhonePost() {
let param = { let param = {
phoneCode: this.phone, phoneCode: this.loginNo,
}; };
apiService apiService
.general(commonApi.getPicCode, param, undefined, undefined) .general(commonApi.getPicCode, param, undefined, undefined)
......
src/views/login/Register.vue
浏览文件 @ a0c4a07f
...@@ -15,28 +15,30 @@ ...@@ -15,28 +15,30 @@
<div class="login"> <div class="login">
<van-row style="padding: 10% 0%;"> <van-row style="padding: 10% 0%;">
<van-col span="24"> <van-col span="24">
<p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">用户注册</span> </p> <p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">注册</span> </p>
</van-col> </van-col>
<van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial'; <van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
}">请使用机号码进行注册</span></van-col> }">请使用机号码或身份证号码进行注册</span></van-col>
</van-row> </van-row>
<van-form> <van-form>
<div class="logindiv"> <div class="logindiv">
<span class="sopan">手机号码</span> <span class="sopan">账号</span>
<van-field v-model="phone" label="+86 |" :border="true" placeholder="请输入手机号" <van-field v-model="phone" :border="true" placeholder="请输入手机号码/身份证号码"
:rules="[{ validator: verifyPhone, message: '请输入正确的手机号码' }]" /> />
<van-divider :style="{ margin: 0 }"></van-divider>
<!-- error-message="请输入手机号码或身份证号码" -->
<!-- :rules="[{ validator: verifyPhone, message: '请输入正确的手机号码/身份证号码' }]" -->
</div> </div>
<div class="logindiv"> <!-- <div class="logindiv">
<span class="sopan">身份证号</span> <span class="sopan">身份证号</span> -->
<van-field v-model="idCard" :border="true" placeholder="请输入身份证号" <!-- <van-field v-model="idCard" :border="true" placeholder="请输入身份证号"
:rules="[{ validator: verifyid, message: '请输入正确的身份证号码' }]" /> :rules="[{ validator: verifyid, message: '请输入正确的身份证号码' }]" /> -->
<!-- <van-divider /> --> <!-- <van-divider /> -->
<van-divider :style="{ margin: 0 }"></van-divider> <!-- <van-divider :style="{ margin: 0 }"></van-divider>
</div> </div> -->
<div class="logindiv"><span class="sopan">短信验证码</span> <div class="logindiv"><span class="sopan">短信验证码</span>
...@@ -46,7 +48,8 @@ ...@@ -46,7 +48,8 @@
<!-- <van-divider /> --> <!-- <van-divider /> -->
</van-field> </van-field>
</van-col> </van-col>
<van-col span="8"><span style="color:blue" @click="getPhonePost()">{{ getCmstotal }}</span></van-col> <van-col span="8"><span style=" color:#3672F1; display:inline-block;font-size:12px;line-height:44px; margin-left: 25%;"
@click="getPhonePost()">{{ getCmstotal }}</span></van-col>
</van-row> </van-row>
<van-divider :style="{ margin: 0 }"></van-divider> <van-divider :style="{ margin: 0 }"></van-divider>
...@@ -170,7 +173,7 @@ export default class ForgetPassView extends Vue { ...@@ -170,7 +173,7 @@ export default class ForgetPassView extends Vue {
this.getCmstotal = this.time + "s重发验证码"; this.getCmstotal = this.time + "s重发验证码";
if (this.time < 0) { if (this.time < 0) {
clearInterval(this.time) clearInterval(this.time)
this.getCmstotal = "获取短信验证码"; this.getCmstotal = "获取验证码";
} }
}, 1000) }, 1000)
......
src/views/main/Main.vue
浏览文件 @ a0c4a07f
...@@ -54,9 +54,36 @@ ...@@ -54,9 +54,36 @@
<div style="background-color: #ffff; height: 18%"> <div style="background-color: #ffff; height: 18%">
<div class="prudect"> <div class="prudect">
<span style="font-size: 18px; font-weight: 600; margin-left: 4%"
>推荐产品</span <van-row type="flex">
<span style="padding:20px 16px; font-size: 18px; font-weight: 600; margin-left: 4% width: 30%; height:44px;" >推荐产品</span>
<van-cell
style="font-size: 18px; padding:15px 16px; width: 72%; "
border="false"
center="true"
:value="outcsinfo.place"
@click="onAddress">
<template #right-icon>
<van-icon name="location-o" />
</template>
</van-cell>
<van-popup
v-model="showAddress"
position="bottom"
:style="{ height: '50%' }"
> >
<van-area
title="请选择地区"
@confirm="changeAddress"
:area-list="areaList"
columns-num="3"
/>
</van-popup>
</van-row>
<!-- <van-area title="选择区域" :area-list="areaList" /> -->
</div> </div>
<div> <div>
<!-- <van-tabs v-model="activeName"> <!-- <van-tabs v-model="activeName">
...@@ -65,8 +92,27 @@ ...@@ -65,8 +92,27 @@
<van-tab title="期限" name="c"></van-tab> <van-tab title="期限" name="c"></van-tab>
<van-tab title="利率" name="d"></van-tab> <van-tab title="利率" name="d"></van-tab>
</van-tabs> --> </van-tabs> -->
<van-dropdown-menu style="height: 100%"> <van-row type="flex" class="tab">
<van-dropdown-item title="综合排序" ref="item" style="height: 100%">
<van-tabs v-model="active" @click="onClick" style="width:75%" >
<van-tab v-for="index in tabsList" :key="index">
<template #title >{{index.name}} <van-icon :name="index.status===1? 'arrow-up' :'arrow-down'"/>
</template>
</van-tab>
</van-tabs>
<van-dropdown-menu style="height: 44px; width:25%;">
<van-dropdown-item title="综合筛选" ref="item" >
<div <div
class="application" class="application"
v-for="(item, index) in applicaList.slice(0, 1)" v-for="(item, index) in applicaList.slice(0, 1)"
...@@ -88,18 +134,24 @@ ...@@ -88,18 +134,24 @@
<van-row type="flex" gutter="10" class="applicationfole"> <van-row type="flex" gutter="10" class="applicationfole">
<!-- div--> <!-- div-->
<van-col span="6"> <van-col span="6">
<div :class="vanvcol11" @click="clickButton1(index,1)"> <div :class="vanvcol11" @click="clickButton1(index, 1)">
{{ item.fristsize }} {{ item.fristsize }}
</div> </div>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<div :class="vanvcol12" @click="clickButton1(index,2)">{{ item.secondsize }}</div> <div :class="vanvcol12" @click="clickButton1(index, 2)">
{{ item.secondsize }}
</div>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<div :class="vanvcol13" @click="clickButton1(index,3)">{{ item.thirdsize }}</div> <div :class="vanvcol13" @click="clickButton1(index, 3)">
{{ item.thirdsize }}
</div>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<div :class="vanvcol14" @click="clickButton1(index,4)">{{ item.foursize }}</div> <div :class="vanvcol14" @click="clickButton1(index, 4)">
{{ item.foursize }}
</div>
</van-col> </van-col>
</van-row> </van-row>
<div <div
...@@ -123,22 +175,28 @@ ...@@ -123,22 +175,28 @@
<van-row type="flex" gutter="10" class="applicationfole"> <van-row type="flex" gutter="10" class="applicationfole">
<!-- div--> <!-- div-->
<van-col span="6"> <van-col span="6">
<div :class="vanvcol21" @click="clickButton2(index,1)"> {{ item.fristsize }} <div :class="vanvcol21" @click="clickButton2(index, 1)">
{{ item.fristsize }}
</div> </div>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<div :class="vanvcol22" @click="clickButton2(index,2)">{{ item.secondsize }}</div> <div :class="vanvcol22" @click="clickButton2(index, 2)">
{{ item.secondsize }}
</div>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<div :class="vanvcol23" @click="clickButton2(index,3)">{{ item.thirdsize }}</div> <div :class="vanvcol23" @click="clickButton2(index, 3)">
{{ item.thirdsize }}
</div>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<div :class="vanvcol24" @click="clickButton2(index,4)">{{ item.foursize }}</div> <div :class="vanvcol24" @click="clickButton2(index, 4)">
{{ item.foursize }}
</div>
</van-col> </van-col>
</van-row> </van-row>
</div> </div>
<div <div
class="application" class="application"
v-for="(item, index) in applicaList.slice(3, 4)" v-for="(item, index) in applicaList.slice(3, 4)"
...@@ -160,75 +218,31 @@ ...@@ -160,75 +218,31 @@
<van-row type="flex" gutter="10" class="applicationfole"> <van-row type="flex" gutter="10" class="applicationfole">
<!-- div--> <!-- div-->
<van-col span="6"> <van-col span="6">
<div :class="vanvcol41" @click="clickButton4(index,1)"> {{ item.fristsize }} <div :class="vanvcol41" @click="clickButton4(index, 1)">
{{ item.fristsize }}
</div> </div>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<div :class="vanvcol42" @click="clickButton4(index,2)">{{ item.secondsize }}</div> <div :class="vanvcol42" @click="clickButton4(index, 2)">
</van-col> {{ item.secondsize }}
<van-col span="6">
<div :class="vanvcol43" @click="clickButton4(index,3)">{{ item.thirdsize }}</div>
</van-col>
<van-col span="6">
<div :class="vanvcol44" @click="clickButton4(index,4)">{{ item.foursize }}</div>
</van-col>
</van-row>
</div> </div>
<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>
<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"> <van-col span="6">
<div :class="vanvcol31" @click="clickButton3(index,1)"> {{ item.fristsize }} <div :class="vanvcol43" @click="clickButton4(index, 3)">
{{ item.thirdsize }}
</div> </div>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<div :class="vanvcol32" @click="clickButton3(index,2)">{{ item.secondsize }}</div> <div :class="vanvcol44" @click="clickButton4(index, 4)">
</van-col> {{ item.foursize }}
<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>
<div style="margin-top: 4%">
<van-row type="flex">
<van-col span="12">
<van-button square block type="default">重置</van-button>
</van-col>
<van-col span="12">
<van-button square block type="info">确定</van-button>
</van-col> </van-col>
</van-row> </van-row>
</div> </div>
</van-dropdown-item>
<van-dropdown-item title="金额" ref="item">
<div <div
class="application" class="application"
v-for="(item, index) in applicaList.slice(0, 1)" v-for="(item, index) in applicaList.slice(2, 3)"
:key="index" :key="index"
> >
<van-row type="flex" class="applicationName"> <van-row type="flex" class="applicationName">
...@@ -247,114 +261,27 @@ ...@@ -247,114 +261,27 @@
<van-row type="flex" gutter="10" class="applicationfole"> <van-row type="flex" gutter="10" class="applicationfole">
<!-- div--> <!-- div-->
<van-col span="6"> <van-col span="6">
<div :class="vanvcol11" @click="clickButton1(index,1)"> <div :class="vanvcol31" @click="clickButton3(index, 1)">
{{ item.fristsize }} {{ item.fristsize }}
</div> </div>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<div :class="vanvcol12" @click="clickButton1(index,2)">{{ item.secondsize }}</div> <div :class="vanvcol32" @click="clickButton3(index, 2)">
</van-col> {{ item.secondsize }}
<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> </div>
<div style="margin-top: 4%">
<van-row type="flex">
<van-col span="12">
<van-button square block type="default">重置</van-button>
</van-col> </van-col>
<van-col span="12">
<van-button square block type="info">确定</van-button>
</van-col>
</van-row>
</div>
</van-dropdown-item>
<van-dropdown-item title="期限" ref="item">
<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"> <van-col span="6">
<div :class="vanvcol21" @click="clickButton2(index,1)"> {{ item.fristsize }} <div :class="vanvcol33" @click="clickButton3(index, 3)">
{{ item.thirdsize }}
</div> </div>
</van-col> </van-col>
<van-col span="6"> <van-col span="6">
<div :class="vanvcol22" @click="clickButton2(index,2)">{{ item.secondsize }}</div> <div :class="vanvcol34" @click="clickButton3(index, 4)">
</van-col> {{ item.foursize }}
<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>
<div style="margin-top: 4%">
<van-row type="flex">
<van-col span="12">
<van-button square block type="default">重置</van-button>
</van-col>
<van-col span="12">
<van-button square block type="info">确定</van-button>
</van-col> </van-col>
</van-row> </van-row>
</div> </div>
</van-dropdown-item>
<van-dropdown-item title="利率" ref="item">
<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%"> <div style="margin-top: 4%">
<van-row type="flex"> <van-row type="flex">
...@@ -368,6 +295,9 @@ ...@@ -368,6 +295,9 @@
</div> </div>
</van-dropdown-item> </van-dropdown-item>
</van-dropdown-menu> </van-dropdown-menu>
</van-row>
</div> </div>
<scroller-view v-calculate-height> <scroller-view v-calculate-height>
<div <div
...@@ -392,7 +322,41 @@ ...@@ -392,7 +322,41 @@
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import { ProductData } from "@/model/entity/ProductData"; import { ProductData } from "@/model/entity/ProductData";
import { i } from "mathjs"; import { i } from "mathjs";
import { Toast } from 'vant';
import { Area } from "vant";
import { Cell, CellGroup } from 'vant';
import { Tabbar, TabbarItem } from 'vant';
import { Tab, Tabs } from 'vant';
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Area);
Vue.use(Toast);
Vue.use(Tab);
Vue.use(Tabs);
// import { areaList } from '@vant/area-data';
// export default {
// data() {
// return { areaList };
// },
// };
const areaList = {
province_list: {
110000: "北京市",
120000: "天津市",
},
city_list: {
110100: "北京市",
120100: "天津市",
},
county_list: {
110101: "东城区",
110102: "西城区",
// ....
},
};
@Component({ @Component({
name: "Main", name: "Main",
}) })
...@@ -400,25 +364,60 @@ export default class Main extends Vue { ...@@ -400,25 +364,60 @@ export default class Main extends Vue {
tatleName = "线上金融服务平台"; tatleName = "线上金融服务平台";
notice = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"; notice = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。";
vanvcol11 = "vandilote"; vanvcol11 = "vandilote";
vanvcol12 ="vandilote"; vanvcol12 = "vandilote";
vanvcol13 ="vandilote"; vanvcol13 = "vandilote";
vanvcol14 ="vandilote"; vanvcol14 = "vandilote";
vanvcol21 = "vandilote"; vanvcol21 = "vandilote";
vanvcol22 ="vandilote"; vanvcol22 = "vandilote";
vanvcol23 ="vandilote"; vanvcol23 = "vandilote";
vanvcol24 ="vandilote"; vanvcol24 = "vandilote";
vanvcol31 = "vandilote"; vanvcol31 = "vandilote";
vanvcol32 ="vandilote"; vanvcol32 = "vandilote";
vanvcol33 ="vandilote"; vanvcol33 = "vandilote";
vanvcol34 ="vandilote"; vanvcol34 = "vandilote";
vanvcol41 = "vandilote"; vanvcol41 = "vandilote";
vanvcol42 ="vandilote"; vanvcol42 = "vandilote";
vanvcol43 ="vandilote"; vanvcol43 = "vandilote";
vanvcol44 ="vandilote"; vanvcol44 = "vandilote";
active=0;
areaList = {
province_list: {
110000: "北京市",
120000: "天津市",
},
city_list: {
110100: "北京市",
120100: "天津市",
},
county_list: {
110101: "东城区",
110102: "西城区",
// ....
},
};
outcsinfo = {
place:'请选择地区',//出行地点
};
showAddress=false;
onAddress(){
this.showAddress=true
};
// 点击地址选择框的确认
changeAddress(event:any){
// console.log(event,'返回格式数组')
this.showAddress=false
let st=''
event.forEach((item:any)=>{
st=st + item.name
})
this.outcsinfo.place=st
};
//测试 //测试
demo() { demo() {
...@@ -427,9 +426,25 @@ export default class Main extends Vue { ...@@ -427,9 +426,25 @@ export default class Main extends Vue {
}); });
} }
//div列表 //div列表
tabsList: any=[
{
name: "金额",
status:0,
},
{
name: "期限",
status:0,
},
{
name: "利率",
status:0,
},
]
applicaList: any = [ applicaList: any = [
{ {
name: "产品金额（万元）", name: "产品金额（万元）",
...@@ -519,6 +534,9 @@ export default class Main extends Vue { ...@@ -519,6 +534,9 @@ export default class Main extends Vue {
flag: true, flag: true,
}; };
productList: ProductData[] = [ productList: ProductData[] = [
{ {
productname: "金融消费贷", //产品名称 productname: "金融消费贷", //产品名称
...@@ -546,135 +564,127 @@ export default class Main extends Vue { ...@@ -546,135 +564,127 @@ export default class Main extends Vue {
}); });
} }
//切换 //切换
clickButton1(index: number,item:number) { clickButton1(index: number, item: number) {
var select =this.applicaList[index].sellet=item; var select = (this.applicaList[index].sellet = item);
console.log( this.applicaList[index].sellet); console.log(this.applicaList[index].sellet);
if (item=== 1) { if (item === 1) {
this.vanvcol11 = "vancoll"; this.vanvcol11 = "vancoll";
this.vanvcol12 = "vandilote"; this.vanvcol12 = "vandilote";
this.vanvcol13 = "vandilote"; this.vanvcol13 = "vandilote";
this.vanvcol14 = "vandilote"; this.vanvcol14 = "vandilote";
console.log( this.applicaList[index].sellet); console.log(this.applicaList[index].sellet);
} else if(item=== 2){ } else if (item === 2) {
this.vanvcol11 = "vandilote"; this.vanvcol11 = "vandilote";
this.vanvcol12 = "vancoll"; this.vanvcol12 = "vancoll";
this.vanvcol13 = "vandilote"; this.vanvcol13 = "vandilote";
this.vanvcol14 = "vandilote"; this.vanvcol14 = "vandilote";
}else if(item=== 3){ } else if (item === 3) {
this.vanvcol11 = "vandilote"; this.vanvcol11 = "vandilote";
this.vanvcol12 = "vandilote"; this.vanvcol12 = "vandilote";
this.vanvcol13 = "vancoll"; this.vanvcol13 = "vancoll";
this.vanvcol14 = "vandilote"; this.vanvcol14 = "vandilote";
} } else if (item === 4) {
else if(item=== 4){
this.vanvcol11 = "vandilote"; this.vanvcol11 = "vandilote";
this.vanvcol12 = "vandilote"; this.vanvcol12 = "vandilote";
this.vanvcol13 = "vandilote"; this.vanvcol13 = "vandilote";
this.vanvcol14 = "vancoll"; this.vanvcol14 = "vancoll";
} }
} }
clickButton2(index: number,item:number) { clickButton2(index: number, item: number) {
var select =this.applicaList[index].sellet=item; var select = (this.applicaList[index].sellet = item);
console.log( this.applicaList[index].sellet); console.log(this.applicaList[index].sellet);
if (item=== 1) { if (item === 1) {
this.vanvcol21 = "vancoll"; this.vanvcol21 = "vancoll";
this.vanvcol22 = "vandilote"; this.vanvcol22 = "vandilote";
this.vanvcol23 = "vandilote"; this.vanvcol23 = "vandilote";
this.vanvcol24 = "vandilote"; this.vanvcol24 = "vandilote";
console.log( this.applicaList[index].sellet); console.log(this.applicaList[index].sellet);
} else if(item=== 2){ } else if (item === 2) {
this.vanvcol21 = "vandilote"; this.vanvcol21 = "vandilote";
this.vanvcol22 = "vancoll"; this.vanvcol22 = "vancoll";
this.vanvcol23 = "vandilote"; this.vanvcol23 = "vandilote";
this.vanvcol24 = "vandilote"; this.vanvcol24 = "vandilote";
}else if(item=== 3){ } else if (item === 3) {
this.vanvcol21 = "vandilote"; this.vanvcol21 = "vandilote";
this.vanvcol22 = "vandilote"; this.vanvcol22 = "vandilote";
this.vanvcol23 = "vancoll"; this.vanvcol23 = "vancoll";
this.vanvcol24 = "vandilote"; this.vanvcol24 = "vandilote";
} } else if (item === 4) {
else if(item=== 4){
this.vanvcol21 = "vandilote"; this.vanvcol21 = "vandilote";
this.vanvcol22 = "vandilote"; this.vanvcol22 = "vandilote";
this.vanvcol23 = "vandilote"; this.vanvcol23 = "vandilote";
this.vanvcol24 = "vancoll"; this.vanvcol24 = "vancoll";
} }
} }
clickButton3(index: number,item:number) { clickButton3(index: number, item: number) {
var select =this.applicaList[index].sellet=item; var select = (this.applicaList[index].sellet = item);
console.log( this.applicaList[index].sellet); console.log(this.applicaList[index].sellet);
if (item=== 1) { if (item === 1) {
this.vanvcol31 = "vancoll"; this.vanvcol31 = "vancoll";
this.vanvcol32 = "vandilote"; this.vanvcol32 = "vandilote";
this.vanvcol33 = "vandilote"; this.vanvcol33 = "vandilote";
this.vanvcol34 = "vandilote"; this.vanvcol34 = "vandilote";
console.log( this.applicaList[index].sellet); console.log(this.applicaList[index].sellet);
} else if(item=== 2){ } else if (item === 2) {
this.vanvcol31 = "vandilote"; this.vanvcol31 = "vandilote";
this.vanvcol32 = "vancoll"; this.vanvcol32 = "vancoll";
this.vanvcol33 = "vandilote"; this.vanvcol33 = "vandilote";
this.vanvcol34 = "vandilote"; this.vanvcol34 = "vandilote";
}else if(item=== 3){ } else if (item === 3) {
this.vanvcol31 = "vandilote"; this.vanvcol31 = "vandilote";
this.vanvcol32 = "vandilote"; this.vanvcol32 = "vandilote";
this.vanvcol33 = "vancoll"; this.vanvcol33 = "vancoll";
this.vanvcol34 = "vandilote"; this.vanvcol34 = "vandilote";
} } else if (item === 4) {
else if(item=== 4){
this.vanvcol31 = "vandilote"; this.vanvcol31 = "vandilote";
this.vanvcol32 = "vandilote"; this.vanvcol32 = "vandilote";
this.vanvcol33 = "vandilote"; this.vanvcol33 = "vandilote";
this.vanvcol34 = "vancoll"; this.vanvcol34 = "vancoll";
} }
} }
clickButton4(index: number,item:number) { clickButton4(index: number, item: number) {
var select =this.applicaList[index].sellet=item; var select = (this.applicaList[index].sellet = item);
console.log( this.applicaList[index].sellet); console.log(this.applicaList[index].sellet);
if (item=== 1) { if (item === 1) {
this.vanvcol41 = "vancoll"; this.vanvcol41 = "vancoll";
this.vanvcol42 = "vandilote"; this.vanvcol42 = "vandilote";
this.vanvcol43 = "vandilote"; this.vanvcol43 = "vandilote";
this.vanvcol44 = "vandilote"; this.vanvcol44 = "vandilote";
console.log( this.applicaList[index].sellet); console.log(this.applicaList[index].sellet);
} else if(item=== 2){ } else if (item === 2) {
this.vanvcol41 = "vandilote"; this.vanvcol41 = "vandilote";
this.vanvcol42 = "vancoll"; this.vanvcol42 = "vancoll";
this.vanvcol43 = "vandilote"; this.vanvcol43 = "vandilote";
this.vanvcol44 = "vandilote"; this.vanvcol44 = "vandilote";
}else if(item=== 3){ } else if (item === 3) {
this.vanvcol41 = "vandilote"; this.vanvcol41 = "vandilote";
this.vanvcol42 = "vandilote"; this.vanvcol42 = "vandilote";
this.vanvcol43 = "vancoll"; this.vanvcol43 = "vancoll";
this.vanvcol44 = "vandilote"; this.vanvcol44 = "vandilote";
} } else if (item === 4) {
else if(item=== 4){
this.vanvcol41 = "vandilote"; this.vanvcol41 = "vandilote";
this.vanvcol42 = "vandilote"; this.vanvcol42 = "vandilote";
this.vanvcol43 = "vandilote"; this.vanvcol43 = "vandilote";
this.vanvcol44 = "vancoll"; this.vanvcol44 = "vancoll";
} }
} }
onClick(index:any) {
this.tabsList[index].status=this.tabsList[index].status === 1?0:1
Toast(this.tabsList[index].status===1?"升序":"降序");
} }
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.roll { .roll {
...@@ -761,15 +771,31 @@ export default class Main extends Vue { ...@@ -761,15 +771,31 @@ export default class Main extends Vue {
bottom: 72px; bottom: 72px;
} }
.van-dropdown-item { ::v-deep .van-dropdown-menu__bar {
position: fixed; position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
height: 44px;
background-color: #ffffff;
box-shadow: none;
}
::v-deep .van-dropdown-item {
position: relative;
right: 0; right: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
} }
#fristsize { #fristsize {
background-color: #1890ff; background-color: #1890ff;
} }
.van-cell__value--alone {
color: #1890ff;
text-align: right;
}
</style> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或