From c9a0817f7593135080ae814ec55faec903f39269 Mon Sep 17 00:00:00 2001
From: zhaoxiaoqiang <l287285524@qq.com>
Date: Thu, 04 Aug 2022 17:24:43 +0800
Subject: [PATCH] 1
---
src/views/user/login.vue | 568 +++++++++++++++++++++++++++++---------------------------
1 files changed, 294 insertions(+), 274 deletions(-)
diff --git a/src/views/user/login.vue b/src/views/user/login.vue
index ae7a3d3..52379a0 100644
--- a/src/views/user/login.vue
+++ b/src/views/user/login.vue
@@ -1,331 +1,351 @@
<!--
* @Author: 小明丶
- * @Date: 2019-08-15 10:20:56
+ * @Date: 2020-05-23 11:05:09
* @LastEditors: zxq
- * @LastEditTime: 2022-08-04 10:42:08
- * @Description: 登录页面
- -->
+ * @LastEditTime: 2022-07-08 14:54:57
+ * @Description: 上传身份证
+-->
<template>
- <div class="login-page">
- <div class="logo-box">
- <div class="logo-img-box">
- <img src="../../../static/img/logo.png" alt="logo" class="logo-pic" />
+ <div class="upload-IDcard-page">
+ <v-navbar title="订单申请"></v-navbar>
+ <div class="steps-box">
+ <div></div>
+ <div class="steps">
+ <p></p>
+ <div class="step-1">1</div>
+ <div class="step-2">2</div>
+ <div class="step-3">3</div>
</div>
- <p>爱享学</p>
</div>
- <h-ipt
- icon="iconxingming"
- :maxlength="11"
- type="text"
- :getClose="true"
- v-model="mblNo"
- placeholder="请输入手机号"
- class="myipt"
- ></h-ipt>
- <h-ipt icon="iconmima" :maxlength="6" v-model="verCode" placeholder="请输入短信验证码" class="myiptTwo">
- <template slot="right">
- <div>
- <button
- class="getcode"
- :disabled="btnDis"
- :style="btnDis?'color:#E6E6E6':'color:#62A0FF'"
- @click="sendCode"
- >{{btnText}}</button>
- </div>
- </template>
- </h-ipt>
- <div class="text-box">
- <van-checkbox v-model="checked" shape="round" icon-size="16px">
- <template #default>
- <p class="xieyi">
- <span>我已阅读并同意</span>
- <span @click.stop="showAgree(1)">《隐私政策》</span>
- <span @click.stop="showAgree(2)">《用户注册服务协议》</span>
- </p>
- </template>
- </van-checkbox>
+ <div class="tit-box">
+ <p>身份证照片上传</p>
+ <p>请确保照片清晰可见，以便顺利申请</p>
+ </div>
+ <div class="idcard-box">
+ <upLoadIdCard :cardBack="idCardMation.idBackUrl" :cardFont="idCardMation.idFrontUrl"></upLoadIdCard>
+ </div>
+ <div class="id-mation-box">
+ <div class="tit">
+ <p>请核对身份证信息</p>
+ </div>
+ <div class="mation">
+ <h-cell v-model="idCardMation.usrIdName" isMust label="姓名"></h-cell>
+ <h-cell v-model="idCardMation.usrIdCard" isMust readonly label="身份证号"></h-cell>
+ <h-cell v-model="idCardMation.sex" readonly isMust label="性别"></h-cell>
+ <h-cell v-model="idCardMation.idCardAddr" isMust label="身份证地址"></h-cell>
+ <h-cell v-model="idDate" readonly isLink isMust label="有效期" @click.native="isShoTime = true"></h-cell>
+ </div>
</div>
<div class="btn-box">
- <button @click="loginBut">登录</button>
+ <button @click="goNext">下一步</button>
</div>
- <!-- <div class="idcard-box">
- <upLoadIdCard :cardBack="idCardMation.idBackUrl" :cardFont="idCardMation.idFrontUrl"></upLoadIdCard>
- </div> -->
+ <van-popup v-model="isShoTime" position="bottom">
+ <div class="text-center-g flex-around-g time-label">
+ <p
+ class="flex-1-g"
+ :class="[timeIndex===0 ? 'active':'']"
+ @click="setTimeIndex(0)"
+ >开始：{{startDay}}</p>
+ <p
+ class="flex-1-g"
+ :class="[timeIndex===1 ? 'active':'']"
+ @click="setTimeIndex(1)"
+ >结束：{{endDay}}</p>
+ </div>
+ <van-datetime-picker
+ ref="timepicker"
+ item-height='45'
+ visible-item-count='4'
+ :show-toolbar="false"
+ v-model="currentDate"
+ @change="setTime"
+ :min-date="minDate"
+ :max-date="maxDate"
+ type="date"
+ />
+ <van-button class="btn-time" @click="refreshData">确定</van-button>
+ </van-popup>
</div>
</template>
-
<script>
-import { mapActions } from "vuex";
+import Bus from "../../bus";
import Vue from "vue";
-import { RadioGroup, Radio } from "vant";
-import { Checkbox, CheckboxGroup } from "vant";
+import { DatetimePicker } from "vant";
import { Popup } from "vant";
-import { Icon } from "vant";
-Vue.use(Icon);
-Vue.use(Popup);
-Vue.use(Checkbox);
-Vue.use(CheckboxGroup);
-Vue.use(Radio);
-Vue.use(RadioGroup);
+Vue.use(Popup);
+Vue.use(DatetimePicker);
export default {
data() {
return {
- checked: false, //协议勾选
- radio: "",
- //数据
- // 18108048791 1234qwer
- mblNo: "", //用户手机号
- verCode: "", //验证码
- openId: 456, //微信openId
- //点击显示密码为明文,眼睛的样式也是根据这个来判断的
- pwdType: "password",
- test: false,
- loginImg: "static/img/logo.png",
- timer: "",
- showSend: true,
- btnText: "发送验证码",
- btnDis: false,
- miao: 60,
- code: "",
- ShowAgreen: false, //协议展示框
- Agreend: "", //协议
+ readOnlyName: false,
+ readOnlyId: false,
+ readOnlySex: false,
+ minDate: new Date(1990, 0, 1),
+ maxDate: new Date(2030, 11, 31),
+ startDay: "", // 开始时间
+ endDay: "", //结束时间
+ timeIndex: 0,
+ isShoTime: false,
+ timePicker: null,
+ currentDate: new Date(1990, 0, 1),
+ idCardMation: {}, //身份证相关信息
+ //idCardUserInfo:{},//身份证照片信息
};
},
- created() {
- // 存储倒计时
- if(this.$route.query.whichPage && sessionStorage.beforeDate){
- this.miao = Math.round(new Date().getTime()/1000 - sessionStorage.beforeDate/1000)
- if(this.miao < 60){
- this.getSecond(60 - this.miao)
- }else{
- this.miao = 60
+ computed: {
+ idDate() {
+ if (
+ this.idCardMation.idCardValidBegin &&
+ this.idCardMation.idCardValidEnd
+ ) {
+ return (
+ this.idCardMation.idCardValidBegin +
+ "-" +
+ this.idCardMation.idCardValidEnd
+ );
}
- }
- if(sessionStorage.mblNo){
- this.mblNo = sessionStorage.mblNo
- }
- if(sessionStorage.verCode){
- this.verCode = sessionStorage.verCode
- }
+ },
+ // cardBack() {
+ // return this.idCardMation.idBackUrl;
+ // },
+ // cardFont() {
+ // return this.idCardMation.idFrontUrl;
+ // }
+ },
+ created() {
+ this.$api.createInitIdInfo().then(res => {
+ this.idCardMation = res.body;
+ if (this.idCardMation.usrIdName) {
+ this.readOnlyName = true;
+ }
+ if (this.idCardMation.usrIdCard) {
+ this.readOnlyId = true;
+ }
+ if (this.idCardMation.sex) {
+ this.readOnlySex = true;
+ }
+ });
+ },
+ beforeUpdate(){
+ let _this = this
+ Bus.$on('getIdUserInfo',(msg)=>{
+ _this.idCardMation = msg
+ })
},
methods: {
- ...mapActions(["login", "getVercode"]),
- //登录验证
- loginBut() {
- let v = this.$tool;
- if (v.checkValEmpty(this.mblNo)) {
- v.toast("请输入手机号");
- return;
+ //设置时间
+ setTime(picker, arr) {
+ if (!this.timepicker && picker) {
+ this.timePicker = picker;
}
- if (!v.checkPhone(this.mblNo)) {
- v.toast("请输入正确手机号");
- return;
- }
- if (v.checkValEmpty(this.verCode)) {
- v.toast("请输入验证码");
- return;
- }
- if (!this.checked) {
- v.toast("请确认并勾选用户协议");
- return;
- }
- this.login({
- vm: this,
- mblNo: this.mblNo,
- verCode: this.verCode,
- // openId: localStorage.axx_ins_client_openId
- });
- },
- sendCode() {
- let v = this.$tool;
- if (v.checkValEmpty(this.mblNo)) {
- v.toast("请输入手机号");
- return;
- }
- if (!v.checkPhone(this.mblNo)) {
- v.toast("请输入正确手机号");
- return;
- }
- this.$api.getVerCode({
- mblNo: this.mblNo,
- verCodeType: 1
- }).then(res=>{
- sessionStorage.beforeDate = new Date().getTime()
- this.getSecond(60);
- })
- },
- //发送验证码计时函数
- getSecond(wait) {
- let _this = this;
- let _wait = wait;
- if (wait == 0) {
- this.btnText = "获取验证码";
- wait = _wait;
- this.btnDis = false;
- clearTimeout(this.timer)
+ let v = arr ? arr : picker.getValues(),
+ time = v[0] + "." + v[1] + "." + v[2];
+ if (this.timeIndex === 0) {
+ this.startDay = time;
} else {
- this.btnDis = true;
- this.btnText = "验证码(" + wait + "s)";
- wait--;
- this.timer = setTimeout(function() {
- _this.getSecond(wait);
- }, 1000);
+ this.endDay = time;
}
},
- // 展示协议
- showAgree(which) {
- sessionStorage.mblNo = this.mblNo
- sessionStorage.verCode = this.verCode
- if(which == 1){
- this.$router.push({
- path:'/agreement',
- query:{
- from:'login',
- tit:'隐私协议',
- agrUrl:'./static/ys.pdf'
- }
- })
- }
- if(which == 2){
- this.$router.push({
- path:'/agreement',
- query:{
- from:'login',
- tit:'用户注册服务协议',
- agrUrl:'./static/zc.pdf'
- }
- })
+ setTimeIndex(index) {
+ this.timeIndex = index;
+ this.setPickerValue();
+ },
+ // 设置日期的值
+ setPickerValue() {
+ if (this.timePicker) {
+ let timeArr = [];
+ if (this.timeIndex === 0) {
+ timeArr = this.startDay;
+ } else {
+ timeArr = this.endDay;
+ }
+ this.currentDate = new Date(timeArr);
}
},
- },
-
- beforeRouteLeave (to, from, next) {
- // ...
- clearTimeout(this.timer)
- next()
+ // 时间切换刷新统计数据
+ refreshData() {
+ if (this.timePicker) {
+ let arr = this.timePicker.getValues();
+ this.setTime(null, arr);
+ this.idCardMation.idCardValidBegin = this.startDay;
+ this.idCardMation.idCardValidEnd = this.endDay;
+ }
+ this.isShoTime = false;
+ },
+ // 下一步
+ goNext() {
+ let v = this.$tool;
+ if(v.checkValEmpty(this.idCardMation.idFrontUrl)){
+ v.toast('请上传身份证正面')
+ return
+ }
+ if(v.checkValEmpty(this.idCardMation.idBackUrl)){
+ v.toast('请上传身份证反面')
+ return
+ }
+ if(v.checkValEmpty(this.idCardMation.idCardAddr)){
+ v.toast('请输入身份证详细地址')
+ return
+ }
+ // if(!v.checkValEmpty(this.idCardMation.idCardAddr)){
+ // v.toast('请输入正确的身份证详细地址')
+ // return
+ // }
+ this.$api.saveIdInfo({...this.idCardMation,}).then(res => {
+ let str = location.host
+ //保存成功后获取人脸识别地址
+ // this.$api.getFaceUrl({
+ // callbackUrl:`https://${str}/aic_cus/#/order-handling/face-recognition`
+ // }).then(res=>{
+ // window.location.href = res.body.faceUrl
+ // })
+ this.$router.push({
+ path: "/order-handling/face-recognition",
+ query: {isFaceBack:'1'}
+ });
+ });
+ }
}
};
</script>
<style lang="less" scoped>
-.login-page {
- padding-top: 42px;
- box-sizing: border-box;
- .logo-box {
+.upload-IDcard-page {
+ & {
+ min-height: 100vh;
+ }
+ .steps-box {
& {
- text-align: center;
- font-size: 18px;
- margin-bottom: 30px;
+ display: flex;
}
- img {
- width: 55px;
- height: 83px;
+ div {
+ width: 50%;
}
- .logo-img-box {
- display: inline-block;
- width: 100px;
- height: 100px;
+ .steps {
+ height: 65px;
+ position: relative;
+ p {
+ border-bottom: 1px dashed #b3b3b3;
+ height: 32px;
+ }
+ .step-1 {
+ text-align: center;
+ line-height: 30px;
+ color: #fff;
+ width: 30px;
+ height: 30px;
+ background: rgba(81, 148, 254, 1);
+ box-shadow: 0px 0px 8px 0px rgba(81, 148, 254, 0.64);
+ border-radius: 50%;
+ position: absolute;
+ left: -15px;
+ top: 19px;
+ }
+ .step-2 {
+ text-align: center;
+ line-height: 28px;
+ width: 28px;
+ height: 28px;
+ background: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(113, 123, 133, 1);
+ border-radius: 50%;
+ position: absolute;
+ left: 55px;
+ top: 19px;
+ }
+ .step-3 {
+ text-align: center;
+ line-height: 28px;
+ width: 28px;
+ height: 28px;
+ background: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(113, 123, 133, 1);
+ border-radius: 50%;
+ position: absolute;
+ left: 130px;
+ top: 19px;
+ }
+ }
+ }
+ .tit-box {
+ & {
+ width: 343px;
+ height: 75px;
background: rgba(255, 255, 255, 1);
- box-shadow: 0px 0px 12px 0px rgba(34, 105, 209, 0.2);
- border-radius: 15px;
+ box-shadow: 0px 0px 10px 0px rgba(47, 103, 192, 0.1);
+ border-radius: 5px;
+ margin: auto;
box-sizing: border-box;
- padding-top: 11px;
+ padding: 16px 17px;
}
- p {
- margin-top: 16px;
- font-size: 17px;
+ p:nth-of-type(1) {
+ margin-bottom: 10px;
+ font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
- }
- .myipt {
- margin-top: 51px;
- }
- .myiptTwo {
- margin-top: 20px;
- margin-bottom: 17px;
- }
- .getcode {
- font-size: 13px;
- font-family: PingFang SC;
- font-weight: 500;
- text-decoration: underline;
- color: rgba(98, 160, 255, 1);
- outline: none;
- height: 30px;
- border: 0;
- background: #fff;
- }
- .text-box {
- & {
- width: 100%;
- padding: 0 10%;
- box-sizing: border-box;
+ p:nth-of-type(2) {
+ font-size: 12px;
+ font-family: PingFang SC;
+ font-weight: 500;
+ color: rgba(153, 153, 153, 1);
}
- .xieyi {
- span:nth-of-type(1) {
- font-size: 12px;
- font-family: PingFang SC;
- font-weight: 500;
- color: rgba(153, 153, 153, 1);
- }
- span:nth-of-type(2) {
- font-size: 12px;
- font-family: PingFang SC;
- font-weight: 500;
- color: #5194fe;
- }
- span:nth-of-type(3) {
- font-size: 12px;
- font-family: PingFang SC;
- font-weight: 500;
- color: #5194fe;
- }
+ }
+ .idcard-box {
+ & {
+ margin-top: 29px;
+ }
+ }
+ .id-mation-box {
+ & {
+ box-sizing: border-box;
+ padding-left: 17px;
+ margin-top: 27px;
+ }
+ .tit {
+ font-size: 14px;
+ font-family: PingFang SC;
+ font-weight: 500;
+ color: rgba(51, 51, 51, 1);
+ }
+ .mation {
+ box-sizing: border-box;
+ padding: 0 26px;
}
}
.btn-box {
- & {
- width: 100%;
- text-align: center;
- margin-top: 37px;
- }
+ text-align: center;
+ margin-top: 32px;
+ padding-bottom: 37px;
button {
- width: 80%;
+ width: 320px;
height: 44px;
- background: linear-gradient(
- 90deg,
- rgba(82, 142, 255, 1),
- rgba(105, 167, 255, 1)
- );
- box-shadow: 0px 8px 15px 0px rgba(91, 152, 255, 0.28);
+ background: rgba(81, 148, 254, 1);
border-radius: 22px;
- outline: none;
- border: 0;
color: #fff;
+ border: 0;
+ outline: none;
}
}
- .agreenBox {
- width: 80vw;
- height: 70vh;
- padding: 60px 20px 30px 20px;
- position: relative;
- }
+ .time-label {
+ .lh(65px);
+ color: @c-text-999;
- .agreen-html {
- width: 100%;
- height: 100%;
- overflow: scroll;
- box-sizing: border-box;
- }
-
- .close-agreen {
- .lh(30px);
- .flex(center, center);
-
- .van-icon {
- font-size: @font-16;
+ .active {
+ color: @c-text-default;
}
+ }
+ .btn-time {
+ display: block;
+ text-align: center;
+ line-height: 40px;
+ width: 320px;
+ height: 40px;
+ background-color: @c-bg-default;
+ color: @c-text-fff;
+ border-radius: 22px;
+ margin: 15px auto;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0