From dfb102e3d9f1bf1196be041cd1f4a3f50727bdda Mon Sep 17 00:00:00 2001
From: zhaoxiaoqiang <287285524@qq.com>
Date: Wed, 17 Aug 2022 17:14:14 +0800
Subject: [PATCH] 好学付
---
src/views/user/login.vue | 601 +++++++++++++++++++++++++++---------------------------
1 files changed, 304 insertions(+), 297 deletions(-)
diff --git a/src/views/user/login.vue b/src/views/user/login.vue
index 52379a0..c944dcf 100644
--- a/src/views/user/login.vue
+++ b/src/views/user/login.vue
@@ -1,351 +1,358 @@
<!--
* @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-12 10:08:15
+ * @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.$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 (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: {
- //设置时间
- 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() {
- 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'}
- });
+ }
+ if(sessionStorage.mblNo){
+ this.mblNo = sessionStorage.mblNo
+ }
+ if(sessionStorage.verCode){
+ this.verCode = sessionStorage.verCode
+ }
+
+ this.code = this.getUrlCode("code");
+ console.log('this.code:',this.code)
+ console.log('this.$route.query.whichPage:',this.$route.query.whichPage)
+ if (this.code && !this.$route.query.whichPage) {
+ this.$api.wechatUserInfo({ code: this.code}).then(res => {
+ console.log('res.body.openid:',res.body.openid)
+ localStorage.axx_ins_client_openId = res.body.openid;
+ localStorage.axx_ins_client_userMation = JSON.stringify(res.body);
});
}
+ },
+ methods: {
+ ...mapActions(["login", "getVercode", "openIdLogin"]),
+ //截取code值
+ getUrlCode(name) {
+ return (
+ decodeURIComponent(
+ (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
+ location.href
+ ) || [, ""])[1].replace(/\+/g, "%20")
+ ) || null
+ );
+ },
+ //登录验证
+ loginBut() {
+ let v = this.$tool;
+ if (v.checkValEmpty(this.mblNo)) {
+ v.toast("请输入手机号");
+ return;
+ }
+ 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,
+ });
+ },
+ 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);
+ })
+ // this.$store.dispatch("getVercode", {
+ // vm: this,
+ // mblNo: this.mblNo,
+ // verCodeType: 1
+ // });
+
+ },
+ //发送验证码计时函数
+ 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