From 1aabe35193870f66acae5013fb10003a5bb16b96 Mon Sep 17 00:00:00 2001
From: zhaoxiaoqiang <l287285524@qq.com>
Date: Fri, 05 Aug 2022 01:12:50 +0800
Subject: [PATCH] 还原
---
src/components/upload/uploadIdCard.vue | 304 +++++++++-----------
src/views/user/login.vue | 566 ++++++++++++++++++-------------------
2 files changed, 408 insertions(+), 462 deletions(-)
diff --git a/src/components/upload/uploadIdCard.vue b/src/components/upload/uploadIdCard.vue
index 65ecf03..4ecaabc 100644
--- a/src/components/upload/uploadIdCard.vue
+++ b/src/components/upload/uploadIdCard.vue
@@ -1,7 +1,7 @@
<!--
* @Date: 2019-08-30 18:04:49
* @LastEditors: zxq
- * @LastEditTime: 2022-08-04 16:08:29
+ * @LastEditTime: 2022-06-10 14:38:34
* @Description:
-->
<template>
@@ -10,37 +10,33 @@
<!--上传按钮-->
<div class="pic-item-box-z" @click="handleUploadPicture(1)">
<img v-if="picZ.fileUrl" :src="picZ.fileUrl" alt />
- <img v-if="!picZ.fileUrl && cardFont" :src="cardFont" alt />
+ <img v-if="!picZ.fileUrl&&cardFont" :src="cardFont" alt />
</div>
<!--上传按钮-->
<div class="pic-item-box-f" @click="handleUploadPicture(2)">
<img v-if="picF.fileUrl" :src="picF.fileUrl" alt />
- <img v-if="!picF.fileUrl && cardBack" :src="cardBack" alt />
+ <img v-if="!picF.fileUrl&&cardBack" :src="cardBack" alt />
</div>
</div>
<!-- 真正的上传按钮-->
<div>
- <!-- <label class="upload" > -->
- <input
- style="cursor:pointer"
- type="file"
-
- ref="uploadImg"
- @change="handlePhotoChange($event, 1)"
- accept="image/jpg, image/jpeg, image/png"
- />
- <!-- </label> -->
- <!-- <label class="upload" > -->
- <input
- style="cursor:pointer"
- type="file"
-
- ref="androidInputFileCapture"
- @change="handlePhotoChange($event, 2)"
- accept="image/*"
- capture="camera"
- />
- <!-- </label> -->
+ <input
+ style="display: none;cursor:pointer"
+ type="file"
+ id='androidInputFileImage'
+ ref="androidInputFileImage"
+ @change="handlePhotoChange($event,1)"
+ accept="image/jpg, image/jpeg, image/png"
+ />
+ <input
+ style="display: none;cursor:pointer;"
+ type="file"
+ id='androidInputFileCapture'
+ ref="androidInputFileCapture"
+ @change="handlePhotoChange($event,2)"
+ accept="image/*"
+ capture="camera"
+ />
</div>
<!--选择上传图片还是拍照-->
<van-action-sheet
@@ -73,42 +69,42 @@
picZ: {},
picF: {},
zOrf: "",
- isFirst: true,
+ isFirst: true
};
},
props: {
cardFont: {
- type: String,
+ type: String
},
cardBack: {
- type: String,
- },
+ type: String
+ }
},
watch: {
- cardFont: function (newVal, oldVal) {
+ cardFont: function(newVal, oldVal) {
if (newVal) {
this.picList[0].fileId = this.cardFont.slice(1);
this.picList[0].fileUrl = this.cardFont;
}
},
- cardBack: function (newVal, oldVal) {
+ cardBack: function(newVal, oldVal) {
if (this.cardBack) {
this.picList[1].fileId = this.cardBack.slice(1);
this.picList[1].fileUrl = this.cardBack;
}
- },
+ }
},
methods: {
...mapMutations([SET_APP_LOADING]),
// 处理图片上传的事件(deleteIndex---删除图片的索引)
- handlePhotoChange: function (evt, type) {
+ handlePhotoChange: function(evt,type) {
let that = this;
let shebei = this.judgeBrand(navigator.userAgent.toLowerCase());
that.SET_APP_LOADING(true);
// 图片是单选还是多选
const files = Array.prototype.slice.call(evt.target.files);
// 图片的处理
- files.forEach(function (file, i) {
+ files.forEach(function(file, i) {
// 图片的拍摄方向
var orientation;
// 格式是否支持的判断
@@ -120,86 +116,86 @@
// 获取文件内容
let reader = new FileReader();
// reader.readAsArrayBuffer(file);
- reader.onload = function (e) {
- // EXIF.getData(file, function() {
- // orientation = EXIF.getTag(this, "Orientation");
- // console.log(orientation)
- // 使用exif，处理图片的旋转问题，然后执行回调函数(orientation永远是0);
- // if(type==2&&orientation){
- // // 拍照上传
- // that.getImgData(e.target.result, orientation, function(data) {
- // // 这里可以使用校正后的图片data了
- // var img = new Image();
- // img.src = data;
- // // 图片加载完毕之后进行压缩，然后上传
- // if (img.complete) {
-
- // callback();
- // } else {
- // img.onload = callback;
- // }
- // // 图片的路径获取成功后
- // function callback(){
- // // 压缩后的图片的base64字符串
- // let data = that.compress(img);
- // // 调取接口上传图片
- // that.submitUploadImg(that.fileType, data);
- // }
- // });
- // }else{
- var comimg = new Image();
- comimg.src = e.target.result;
- comimg.onload = function (eimg) {
- let num = 1;
- if (this.width < this.height) {
- num = 8;
- }
- that.getImgData(e.target.result, num, function (data) {
- // 这里可以使用校正后的图片data了
- var img = new Image();
- img.src = data;
- // 图片加载完毕之后进行压缩，然后上传
- if (img.complete) {
- callback();
- } else {
- img.onload = callback;
- }
- // 图片的路径获取成功后
- function callback() {
- // 压缩后的图片的base64字符串
- console.log(img.width, img.height);
- let data = that.compress(img);
- // 调取接口上传图片
- that.submitUploadImg(that.fileType, data);
- }
- });
- };
- // }
- // })
+ reader.onload = function(e) {
+ // EXIF.getData(file, function() {
+ // orientation = EXIF.getTag(this, "Orientation");
+ // console.log(orientation)
+ // 使用exif，处理图片的旋转问题，然后执行回调函数(orientation永远是0);
+ // if(type==2&&orientation){
+ // // 拍照上传
+ // that.getImgData(e.target.result, orientation, function(data) {
+ // // 这里可以使用校正后的图片data了
+ // var img = new Image();
+ // img.src = data;
+ // // 图片加载完毕之后进行压缩，然后上传
+ // if (img.complete) {
+
+ // callback();
+ // } else {
+ // img.onload = callback;
+ // }
+ // // 图片的路径获取成功后
+ // function callback(){
+ // // 压缩后的图片的base64字符串
+ // let data = that.compress(img);
+ // // 调取接口上传图片
+ // that.submitUploadImg(that.fileType, data);
+ // }
+ // });
+ // }else{
+ var comimg = new Image();
+ comimg.src = e.target.result;
+ comimg.onload = function(eimg){
+ let num = 1;
+ if(this.width<this.height){
+ num = 8
+ }
+ that.getImgData(e.target.result, num, function(data) {
+ // 这里可以使用校正后的图片data了
+ var img = new Image();
+ img.src = data;
+ // 图片加载完毕之后进行压缩，然后上传
+ if (img.complete) {
+ callback();
+ } else {
+ img.onload = callback;
+ }
+ // 图片的路径获取成功后
+ function callback() {
+ // 压缩后的图片的base64字符串
+ console.log(img.width,img.height)
+ let data = that.compress(img);
+ // 调取接口上传图片
+ that.submitUploadImg(that.fileType, data);
+ }
+ });
+ }
+ // }
+ // })
};
reader.readAsDataURL(file);
});
},
// type文件上传的路径，data图片的base64字符串(删除图片即重新上传)
- submitUploadImg: function (type, base64) {
+ submitUploadImg: function(type, base64) {
let that = this;
// 防止操作的模态窗
let submitInfo = {
base64Data: base64.split(",")[1], // 文件base64
- suffix: base64.split(",")[0].split(";")["0"].split("/")[1],
+ suffix: base64.split(",")[0].split(";")["0"].split("/")[1]
};
this.$api.uploadFile(submitInfo).then(
- (res) => {
+ res => {
if (that.zOrf == 1) {
that.picZ = {
fileUrl: res.body.fileUrl,
- fileId: res.body.fileId,
+ fileId: res.body.fileId
};
that.picList[0] = that.picZ;
} else {
that.picF = {
fileUrl: res.body.fileUrl,
- fileId: res.body.fileId,
+ fileId: res.body.fileId
};
that.picList[1] = that.picF;
}
@@ -208,7 +204,7 @@
}
that.SET_APP_LOADING(false);
},
- (error) => {
+ error => {
this.SET_APP_LOADING(false);
}
);
@@ -219,9 +215,9 @@
this.$api
.getIdCardInfo({
idBackId: this.picList[1].fileId,
- idFrontId: this.picList[0].fileId,
+ idFrontId: this.picList[0].fileId
})
- .then((res) => {
+ .then(res => {
let obj = res.body;
obj.idBackUrl = this.picList[1].fileUrl;
obj.idFrontUrl = this.picList[0].fileUrl;
@@ -230,14 +226,14 @@
}
},
// 图片旋转处理
- getImgData: function (img, dir, next) {
+ getImgData: function(img, dir, next) {
// @param {string} img 图片的base64
// @param {int} dir exif获取的方向信息
// @param {function} next 回调方法，返回校正方向后的base64
var image = new Image();
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
- image.onload = function () {
+ image.onload = function() {
let resultWidth = 0;
let resultHeight = 0;
let maxWidthOrHeight = 1024;
@@ -286,23 +282,23 @@
image.src = img;
},
compress(img) {
- let quality = 0.92, //压缩比例
+ let quality = 0.92, //压缩比例
w = img.width,
h = img.height,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
- canvas.width = w;
- canvas.height = h;
- ctx.drawImage(img, 0, 0, w, h);
- return canvas.toDataURL("image/jpeg", quality);
+ canvas.width = w;
+ canvas.height = h;
+ ctx.drawImage(img, 0, 0, w, h);
+ return canvas.toDataURL("image/jpeg", quality);
},
checkAuth(id) {
// authStatus: 0 未授权 1授权---用户授权后才能执行下一步
this.$api
.checkAuth({
- fileId: id,
+ fileId: id
})
- .then((res) => {
+ .then(res => {
if (res.body.authStatus === 1) {
this.$emit("on-check-auth", "下一步");
}
@@ -317,22 +313,10 @@
},
// 选择拍照或者相册选项
handleMenuSelect(item, index) {
- console.log(this.$refs);
- console.log(this.$refs.androidInputFileCapture);
- console.log(this.$refs.uploadImg);
- console.log(document.getElementById('androidInputFileCapture'));
if (index === 0) {
- // this.$refs.androidInputFileCapture.dispatchEvent(
- // new MouseEvent("click")
- // );
- this.$nextTick(()=>{
- this.$refs.androidInputFileCapture.click();
- })
+ this.$refs.androidInputFileCapture.click();
} else {
- this.$refs.uploadImg.dispatchEvent(new MouseEvent("click"));
- // this.$nextTick(()=>{
- // this.$refs.uploadImg.click();
- // })
+ this.$refs.androidInputFileImage.click();
}
this.selectModel = false;
},
@@ -341,60 +325,42 @@
this.selectModel = true;
},
judgeBrand(sUserAgent) {
- var isIphone = sUserAgent.match(/iphone/i) == "iphone";
- var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
- var isHonor = sUserAgent.match(/honor/i) == "honor";
- var isOppo = sUserAgent.match(/oppo/i) == "oppo";
- var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
- var isVivo = sUserAgent.match(/vivo/i) == "vivo";
- var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
- var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
- var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
- var isSamsung = sUserAgent.match(/sm-/i) == "sm-";
- if (isIphone) {
- return "iphone";
- } else if (isHuawei || isHonor) {
- return "huawei";
- } else if (isOppo || isOppoR15) {
- return "oppo";
- } else if (isVivo) {
- return "vivo";
- } else if (isXiaomi || isRedmi || isXiaomi2s) {
- return "xiaomi";
- } else if (isSamsung) {
- return "samsung";
- } else {
- return "default";
- }
- },
+ var isIphone = sUserAgent.match(/iphone/i) == "iphone";
+ var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
+ var isHonor = sUserAgent.match(/honor/i) == "honor";
+ var isOppo = sUserAgent.match(/oppo/i) == "oppo";
+ var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
+ var isVivo = sUserAgent.match(/vivo/i) == "vivo";
+ var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
+ var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
+ var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
+ var isSamsung = sUserAgent.match(/sm-/i) == "sm-";
+ if (isIphone) {
+ return 'iphone';
+ } else if (isHuawei || isHonor) {
+ return 'huawei';
+ } else if (isOppo || isOppoR15) {
+ return 'oppo';
+ } else if (isVivo) {
+ return 'vivo';
+ } else if (isXiaomi || isRedmi || isXiaomi2s) {
+ return 'xiaomi';
+ } else if (isSamsung) {
+ return 'samsung';
+ } else {
+ return 'default';
+ }
+ }
+ },
+ created(){
+ // let
+ // console.log(shebei);
}
};
</script>
-<style lang="less" scoped>
+<style lang="less" scoped >
.component-photo-upload {
- .upload {
- cursor: pointer;
- display: block;
- width: 100px;
- height: 100px;
- line-height: 100px;
- position: relative;
- text-align: center;
- overflow: hidden;
- }
-
- .sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
- margin: -1px;
- }
.pic-title {
h4 {
padding: 10px 0;
diff --git a/src/views/user/login.vue b/src/views/user/login.vue
index 5b807de..ae7a3d3 100644
--- a/src/views/user/login.vue
+++ b/src/views/user/login.vue
@@ -1,351 +1,331 @@
<!--
* @Author: 小明丶
- * @Date: 2020-05-23 11:05:09
+ * @Date: 2019-08-15 10:20:56
* @LastEditors: zxq
- * @LastEditTime: 2022-07-08 14:54:57
- * @Description: 上传身份证
--->
+ * @LastEditTime: 2022-08-04 10:42:08
+ * @Description: 登录页面
+ -->
<template>
- <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 class="login-page">
+ <div class="logo-box">
+ <div class="logo-img-box">
+ <img src="../../../static/img/logo.png" alt="logo" class="logo-pic" />
</div>
+ <p>爱享学</p>
</div>
- <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>
+ <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>
<div class="btn-box">
- <button @click="goNext">下一步</button>
+ <button @click="loginBut">登录</button>
</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 class="idcard-box">
+ <upLoadIdCard :cardBack="idCardMation.idBackUrl" :cardFont="idCardMation.idFrontUrl"></upLoadIdCard>
+ </div> -->
</div>
</template>
-<script>
-import Bus from "../../bus";
-import Vue from "vue";
-import { DatetimePicker } from "vant";
-import { Popup } from "vant";
+<script>
+import { mapActions } from "vuex";
+import Vue from "vue";
+import { RadioGroup, Radio } from "vant";
+import { Checkbox, CheckboxGroup } from "vant";
+import { Popup } from "vant";
+import { Icon } from "vant";
+Vue.use(Icon);
Vue.use(Popup);
-Vue.use(DatetimePicker);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+
export default {
data() {
return {
- 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:{},//身份证照片信息
+ 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: "", //协议
};
},
- computed: {
- idDate() {
- if (
- this.idCardMation.idCardValidBegin &&
- this.idCardMation.idCardValidEnd
- ) {
- return (
- this.idCardMation.idCardValidBegin +
- "-" +
- this.idCardMation.idCardValidEnd
- );
- }
- },
- // 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
- // })
+ // 存储倒计时
+ 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
+ }
+ }
+ if(sessionStorage.mblNo){
+ this.mblNo = sessionStorage.mblNo
+ }
+ if(sessionStorage.verCode){
+ this.verCode = sessionStorage.verCode
+ }
},
methods: {
- //设置时间
- setTime(picker, arr) {
- if (!this.timepicker && picker) {
- this.timePicker = picker;
- }
- let v = arr ? arr : picker.getValues(),
- time = v[0] + "." + v[1] + "." + v[2];
- if (this.timeIndex === 0) {
- this.startDay = time;
- } else {
- this.endDay = time;
- }
- },
- 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);
- }
- },
- // 时间切换刷新统计数据
- 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() {
+ ...mapActions(["login", "getVercode"]),
+ //登录验证
+ loginBut() {
let v = this.$tool;
- if(v.checkValEmpty(this.idCardMation.idFrontUrl)){
- v.toast('请上传身份证正面')
- return
+ if (v.checkValEmpty(this.mblNo)) {
+ v.toast("请输入手机号");
+ return;
}
- if(v.checkValEmpty(this.idCardMation.idBackUrl)){
- v.toast('请上传身份证反面')
- return
+ if (!v.checkPhone(this.mblNo)) {
+ v.toast("请输入正确手机号");
+ return;
}
- if(v.checkValEmpty(this.idCardMation.idCardAddr)){
- v.toast('请输入身份证详细地址')
- return
+ if (v.checkValEmpty(this.verCode)) {
+ 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'}
- });
+ 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)
+ } else {
+ this.btnDis = true;
+ this.btnText = "验证码(" + wait + "s)";
+ wait--;
+ this.timer = setTimeout(function() {
+ _this.getSecond(wait);
+ }, 1000);
+ }
+ },
+ // 展示协议
+ 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'
+ }
+ })
+ }
+ },
+ },
+
+ beforeRouteLeave (to, from, next) {
+ // ...
+ clearTimeout(this.timer)
+ next()
}
};
</script>
<style lang="less" scoped>
-.upload-IDcard-page {
- & {
- min-height: 100vh;
- }
- .steps-box {
+.login-page {
+ padding-top: 42px;
+ box-sizing: border-box;
+ .logo-box {
& {
- display: flex;
+ text-align: center;
+ font-size: 18px;
+ margin-bottom: 30px;
}
- div {
- width: 50%;
+ img {
+ width: 55px;
+ height: 83px;
}
- .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;
+ .logo-img-box {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
background: rgba(255, 255, 255, 1);
- box-shadow: 0px 0px 10px 0px rgba(47, 103, 192, 0.1);
- border-radius: 5px;
- margin: auto;
+ box-shadow: 0px 0px 12px 0px rgba(34, 105, 209, 0.2);
+ border-radius: 15px;
box-sizing: border-box;
- padding: 16px 17px;
+ padding-top: 11px;
}
- p:nth-of-type(1) {
- margin-bottom: 10px;
- font-size: 16px;
+ p {
+ margin-top: 16px;
+ font-size: 17px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
- p:nth-of-type(2) {
- font-size: 12px;
- font-family: PingFang SC;
- font-weight: 500;
- color: rgba(153, 153, 153, 1);
- }
}
- .idcard-box {
- & {
- margin-top: 29px;
- }
+ .myipt {
+ margin-top: 51px;
}
- .id-mation-box {
+ .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;
- 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;
+ .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;
+ }
}
}
.btn-box {
- text-align: center;
- margin-top: 32px;
- padding-bottom: 37px;
+ & {
+ width: 100%;
+ text-align: center;
+ margin-top: 37px;
+ }
button {
- width: 320px;
+ width: 80%;
height: 44px;
- background: rgba(81, 148, 254, 1);
+ 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);
border-radius: 22px;
- color: #fff;
- border: 0;
outline: none;
+ border: 0;
+ color: #fff;
}
}
- .time-label {
- .lh(65px);
- color: @c-text-999;
+ .agreenBox {
+ width: 80vw;
+ height: 70vh;
+ padding: 60px 20px 30px 20px;
+ position: relative;
+ }
- .active {
- color: @c-text-default;
- }
+ .agreen-html {
+ width: 100%;
+ height: 100%;
+ overflow: scroll;
+ box-sizing: border-box;
}
- .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;
+
+ .close-agreen {
+ .lh(30px);
+ .flex(center, center);
+
+ .van-icon {
+ font-size: @font-16;
+ }
}
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.8.0