|
|
@@ -1,89 +1,220 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <view class="login-title">
|
|
|
- <u-icon name="qichexiangguan-chongdianzhan" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
|
|
|
- <h3>电动自行车智能充电系统</h3>
|
|
|
- </view>
|
|
|
- <view class="login-main">
|
|
|
- <u-form :model="form" ref="uForm" >
|
|
|
- <u-form-item label="手机号码" prop="phone" label-width="150" label-position="top">
|
|
|
- <u-input :border="border" placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="验证码" prop="code" label-width="150" label-position="top">
|
|
|
- <u-input :border="border" placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
|
|
|
- <view class="login-code" @click="getCode">
|
|
|
- {{codeTips}}
|
|
|
- </view>
|
|
|
- </u-form-item>
|
|
|
- </u-form>
|
|
|
- </view>
|
|
|
- <view class="login-btn">
|
|
|
- <u-button type="primary" :custom-style="customStyle" shape="square">登录</u-button>
|
|
|
- </view>
|
|
|
- <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- form: {
|
|
|
- phone: '',
|
|
|
- code: '',
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="login-title">
|
|
|
+ <u-icon name="qichexiangguan-chongdianzhan" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
|
|
|
+ <h3>电动自行车智能充电系统</h3>
|
|
|
+ </view>
|
|
|
+ <view class="login-main">
|
|
|
+ <u-form :model="form" ref="uForm">
|
|
|
+ <u-form-item label="手机号码" prop="phone" label-width="150" label-position="top">
|
|
|
+ <u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="验证码" prop="code" label-width="150" label-position="top">
|
|
|
+ <u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
|
|
|
+ <view class="login-code" @click="getCode">
|
|
|
+ {{codeTips}}
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+ </u-form>
|
|
|
+ </view>
|
|
|
+ <view class="login-btn">
|
|
|
+ <u-button type="primary" :custom-style="customStyle" @click="finish" shape="square">登录</u-button>
|
|
|
+ </view>
|
|
|
+ <u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start">
|
|
|
+ </u-verification-code>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/login.js'
|
|
|
+
|
|
|
+ import {
|
|
|
+ checkPhone
|
|
|
+ } from '@/utils'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ phone: '',
|
|
|
+ code: '',
|
|
|
},
|
|
|
- codeTips: '',
|
|
|
- customStyle: {
|
|
|
- background: '#1677ff'
|
|
|
- }
|
|
|
- }
|
|
|
+ backUrl:"",
|
|
|
+ message:"",
|
|
|
+ codeTips: '',
|
|
|
+ isSendMsgIng: false,
|
|
|
+ sendMsgSecond: 60 * 2,
|
|
|
+ customStyle: {
|
|
|
+ background: '#1677ff'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- methods: {
|
|
|
- codeChange(text) {
|
|
|
- this.codeTips = text;
|
|
|
+ onLoad(op){
|
|
|
+
|
|
|
+ this.message=op.message;
|
|
|
+ this.backUrl=op.back;
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ codeChange(text) {
|
|
|
+ this.codeTips = text;
|
|
|
+ },
|
|
|
+ //倒计时
|
|
|
+
|
|
|
+ end() {
|
|
|
+ this.sendMsgSecond = 2 * 60;
|
|
|
+ this.isSendMsgIng = false;
|
|
|
},
|
|
|
- // 获取验证码
|
|
|
- getCode() {
|
|
|
- if(this.$refs.uCode.canGetCode) {
|
|
|
- // 模拟向后端请求验证码
|
|
|
+ finish(){
|
|
|
+ uni.redirectTo({
|
|
|
+ url:'pages/user/index'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ if(!this.carhelp.getOpenId()){
|
|
|
+ uni.showToast({
|
|
|
+ title:"请使用“微信”访问本系统登录"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title:"加载中",mask:true,
|
|
|
+ })
|
|
|
+ API.validateCode({
|
|
|
+ verifyCode: this.form.code,
|
|
|
+ telephone:this.form.phone,
|
|
|
+ openId:this.carhelp.getOpenId(),
|
|
|
+
|
|
|
+ }).then((response) => {
|
|
|
+ var token = response ? response.data.token : '';
|
|
|
+ this.carhelp.setToken(token);
|
|
|
+ this.carhelp.setPersonInfo(response.data.jobUser );
|
|
|
+ //this.gotoUrl("pages/user/index")
|
|
|
+ uni.redirectTo({
|
|
|
+ url:'/pages/user/index'
|
|
|
+ })
|
|
|
+ // if(this.backUrl){
|
|
|
+ // window.location.href="#"+this.backUrl.split(",").find(function(item){
|
|
|
+ // return item.indexOf("pages/login/")==-1
|
|
|
+ // });
|
|
|
+ // }else{
|
|
|
+
|
|
|
+ // }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title:error,
|
|
|
+ icon:"none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ start() {
|
|
|
+ if (!this.isSendMsgIng) {
|
|
|
+ this.carhelp.set("getvcodetime", new Date().getTime());
|
|
|
+ console.log("模拟发送成功")
|
|
|
+ return
|
|
|
+
|
|
|
uni.showLoading({
|
|
|
- title: '正在获取验证码',
|
|
|
- mask: true
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
})
|
|
|
- setTimeout(() => {
|
|
|
+ API.getVerifyCode(this.form.phone).then((response) => {
|
|
|
+
|
|
|
+
|
|
|
uni.hideLoading();
|
|
|
- // 这里此提示会被this.start()方法中的提示覆盖
|
|
|
- this.$u.toast('验证码已发送');
|
|
|
- // 通知验证码组件内部开始倒计时
|
|
|
- this.$refs.uCode.start();
|
|
|
- }, 2000);
|
|
|
+ this.carhelp.set("getvcodetime", new Date().getTime());
|
|
|
+
|
|
|
+ if (!"") {
|
|
|
+ //倒计时
|
|
|
+ uni.showToast({
|
|
|
+ title: "发送成功"
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: "您的验证码已经发送[5分钟有效]，请勿重复点击"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ getCode() {
|
|
|
+ if(this.$refs.uCode.canGetCode) {
|
|
|
+
|
|
|
} else {
|
|
|
- this.$u.toast('倒计时结束后再发送');
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: '倒计时结束后再发送',
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ var checkPhoneResult = checkPhone(this.form.phone);
|
|
|
+
|
|
|
+ if (false&&checkPhoneResult !== true) {
|
|
|
+ uni.showToast({
|
|
|
+ title: checkPhoneResult,
|
|
|
+
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$refs.uCode.start();
|
|
|
+ }
|
|
|
+ },onReady(){
|
|
|
+ if(!this.carhelp.getOpenId()){
|
|
|
+ uni.showToast({
|
|
|
+ title:"请使用“微信”访问本系统登录"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }else if(this.message){
|
|
|
+ uni.showToast({
|
|
|
+ title:this.message.split(",")[0],
|
|
|
+ icon:"none"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ var time = this.carhelp.get("getvcodetime");
|
|
|
+ if (time) {
|
|
|
+ //this.$refs.uCode.start();
|
|
|
+ var nowtime = new Date().getTime()
|
|
|
+ var differ = (nowtime - time) / 1000
|
|
|
+ if (differ < 2 * 60) {
|
|
|
+ this.sendMsgSecond = 2 * 60 - parseInt(differ)
|
|
|
+ this.isSendMsgIng = true;
|
|
|
+ this.$refs.uCode.start();
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .login-title{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 40px 30px;
|
|
|
- h3{
|
|
|
- font-size: 20px;
|
|
|
- margin-left: 10rpx;
|
|
|
- color:#1677ff;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- }
|
|
|
- .login-main{
|
|
|
- margin: 0 30px;
|
|
|
- }
|
|
|
- .login-btn{
|
|
|
- margin: 30px;
|
|
|
- }
|
|
|
- .login-code{
|
|
|
- color:#1677ff;
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .login-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 40px 30px;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ color: #1677ff;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-main {
|
|
|
+ margin: 0 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-btn {
|
|
|
+ margin: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-code {
|
|
|
+ color: #1677ff;
|
|
|
+ }
|
|
|
</style>
|
zhengkaixin