|
|
@@ -0,0 +1,256 @@
|
|
|
+<template>
|
|
|
+ <view class="page-box login-box">
|
|
|
+ <view class="login-form sys-radius-50 sys-background-fff">
|
|
|
+ <view class="from-box animate__animated animate__fadeIn">
|
|
|
+
|
|
|
+ <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===3}" >
|
|
|
+ <en-input type="number" class="login-input" placeholder="请输入手机号" v-model="accountData.phone" ></en-input>
|
|
|
+ </view>
|
|
|
+ <view class="input-item input-send sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===4}">
|
|
|
+ <en-input type="number" class="login-input" placeholder="请输入验证码" v-model="accountData.code" maxlength="6"></en-input>
|
|
|
+ <view class="login-send text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode" v-if="timeNum<=0">发送验证码</view>
|
|
|
+ <view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>{{ timeNum }} s</view>
|
|
|
+ </view>
|
|
|
+ <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(shakeNum===5 || shakeNum===7)}" >
|
|
|
+ <en-input type="password" class="login-input" placeholder="请输入密码" v-model="accountData.password" ></en-input>
|
|
|
+ </view>
|
|
|
+ <view class="input-item sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(shakeNum===6 || shakeNum===7)}">
|
|
|
+ <en-input type="password" class="login-input" placeholder="请再次输入密码" v-model="accountData.passwordTwo" ></en-input>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <agreement v-model="isConsent" ref="agreement"></agreement>
|
|
|
+
|
|
|
+ <view
|
|
|
+ class="input-but sys-background-dominant text-color-fff sys-size-30 sys-radius-100 sys-weight-600"
|
|
|
+ :class="{'sys-selected-but':isRegister,'sys-unselected-but':!isRegister}"
|
|
|
+ @click="retrievePassword"
|
|
|
+ >确认</view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="register-box">
|
|
|
+ <view class="register-text sys-weight-400 sys-size-24 text-color-666">已有账号？</view>
|
|
|
+ <view class="register-text text-color-dominant sys-size-24 sys-weight-400" @click="goToUrl(1)">去登录</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import EnInput from "../../components/en-from/en-input/index.vue";
|
|
|
+import tools from "../../service/tools";
|
|
|
+import {commonSend} from "../../api/common";
|
|
|
+import Agreement from "@/pages/login/model/agreement.vue";
|
|
|
+import {register, retrievePassword, wxLogin} from "@/api/login";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {Agreement, EnInput},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ accountData: {
|
|
|
+ 'phone': '',
|
|
|
+ 'password': '',
|
|
|
+ 'passwordTwo': '',
|
|
|
+ 'code': '',
|
|
|
+ },
|
|
|
+ timeNum: 0,
|
|
|
+ timer: null,
|
|
|
+ isAJAX: false,
|
|
|
+ isConsent: false,
|
|
|
+ isRegister: false,
|
|
|
+ shakeNum: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'accountData': {
|
|
|
+ handler() {
|
|
|
+ this.verifyData(false)
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goToUrl(type) {
|
|
|
+ uni.reLaunch({
|
|
|
+ 'url': '/pages/login/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ verifyData(type) {
|
|
|
+ let isRegister = true;
|
|
|
+ if (!this.accountData.phone) {
|
|
|
+ isRegister = false
|
|
|
+ if (type) {
|
|
|
+ this.shakeNum = 3
|
|
|
+ tools.error('请输入手机号码');
|
|
|
+ }
|
|
|
+ } else if (!this.accountData.password) {
|
|
|
+ isRegister = false
|
|
|
+ if (type) {
|
|
|
+ this.shakeNum = 5
|
|
|
+ tools.error('请输入密码');
|
|
|
+ }
|
|
|
+ } else if (!this.accountData.passwordTwo) {
|
|
|
+ isRegister = false
|
|
|
+ if (type) {
|
|
|
+ this.shakeNum = 6
|
|
|
+ tools.error('请确认密码');
|
|
|
+ }
|
|
|
+ } else if (this.accountData.password !== this.accountData.passwordTwo) {
|
|
|
+ isRegister = false
|
|
|
+ if (type) {
|
|
|
+ this.shakeNum = 7
|
|
|
+ tools.error('密码输入不一致');
|
|
|
+ }
|
|
|
+ } else if (!this.accountData.code) {
|
|
|
+ isRegister = false
|
|
|
+ if (type) {
|
|
|
+ this.shakeNum = 4
|
|
|
+ tools.error('请输入验证码');
|
|
|
+ }
|
|
|
+ } else if (!this.isConsent) {
|
|
|
+ isRegister = false
|
|
|
+ if (type) {
|
|
|
+ this.shakeNum = 8
|
|
|
+ tools.error('请阅读并同意协议');
|
|
|
+ this.$refs.agreement.setConsentShake()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!isRegister) {
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.shakeNum > 0) this.shakeNum = 0
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ this.isRegister = isRegister
|
|
|
+
|
|
|
+ },
|
|
|
+ retrievePassword() {
|
|
|
+ this.verifyData(true)
|
|
|
+ if (!this.isRegister) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.isAJAX) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.isAJAX = true
|
|
|
+ retrievePassword(this.accountData).then((res) => {
|
|
|
+ if (res.code === 1) {
|
|
|
+ tools.setLoginData(res.data, false)
|
|
|
+ tools.success('修改成功')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isAJAX = false;
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/login/index'
|
|
|
+ });
|
|
|
+ }, 1500)
|
|
|
+ } else {
|
|
|
+ this.isAJAX = false;
|
|
|
+ tools.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getVerifiedCode() {
|
|
|
+ if (this.timeNum > 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.accountData.phone === '') {
|
|
|
+ tools.error("请输入手机号码")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let regPhone = /^(?:(?:\+|00)86)?1\d{10}$/;
|
|
|
+ if (!regPhone.test(this.accountData.phone)) {
|
|
|
+ tools.error("手机号码格式错误")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ commonSend({
|
|
|
+ 'phone': this.accountData.phone,
|
|
|
+ 'send_type': 'register'
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === 1) {
|
|
|
+ tools.success(res.msg);
|
|
|
+ this.timeNum = 60;
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.timeNum--;
|
|
|
+ if (this.timeNum <= 0) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ tools.error(res.msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import "/static/css/login.css";
|
|
|
+
|
|
|
+.page-box {
|
|
|
+ padding-top: 370rpx;
|
|
|
+
|
|
|
+ .login-form {
|
|
|
+ margin: 0 30rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding: 40rpx 45rpx;
|
|
|
+ animation-delay: 0.8s;
|
|
|
+
|
|
|
+ .input-item {
|
|
|
+ height: 96rpx;
|
|
|
+ padding: 28rpx 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 30rpx;
|
|
|
+
|
|
|
+ .login-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-item:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-send {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .login-input {
|
|
|
+ width: calc(100% - 140rpx);
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-send {
|
|
|
+ width: 140rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-but {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 96rpx;
|
|
|
+ line-height: 96rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .register-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 60rpx;
|
|
|
+
|
|
|
+ .register-text {
|
|
|
+ height: 34rpx;
|
|
|
+ line-height: 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .register-text:last-child {
|
|
|
+ margin-right: 5rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
WIN-20230912WHV\Administrator