|
@@ -1,41 +1,43 @@
|
|
<template>
|
|
<template>
|
|
<view class="container">
|
|
<view class="container">
|
|
<view class="container_text">
|
|
<view class="container_text">
|
|
- <!-- <image class="banner-img" src="/static/img/img01.png" mode=" scaleToFill"></image> -->
|
|
|
|
<image class="banner-img" src="/static/img/shouye1.png" mode="scaleToFill"></image>
|
|
<image class="banner-img" src="/static/img/shouye1.png" mode="scaleToFill"></image>
|
|
- <view class="banner-img">
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="loginTitle"><text>{{$t('login.a0')}}</text></view>
|
|
<view class="loginTitle"><text>{{$t('login.a0')}}</text></view>
|
|
<view class="login_text">
|
|
<view class="login_text">
|
|
- <view class="login_input flex">
|
|
|
|
|
|
+ <view class="login_input flex_item">
|
|
<view class="login_img"><image src="/static/icon/ze.png"></image></view>
|
|
<view class="login_img"><image src="/static/icon/ze.png"></image></view>
|
|
- <view class="login_name"><input class="uni-input" v-model="account" focus :placeholder="$t('login.a1')"/></view>
|
|
|
|
|
|
+ <view class="login_name"><input class="uni-input" type="text" v-model="account" focus :placeholder="$t('login.a1')" /></view>
|
|
</view>
|
|
</view>
|
|
- <view class="login_input flex">
|
|
|
|
|
|
+ <view class="login_input flex_item">
|
|
<view class="login_img"><image src="/static/icon/ze2.png"></image></view>
|
|
<view class="login_img"><image src="/static/icon/ze2.png"></image></view>
|
|
|
|
+ <view class="login_name"><input class="uni-input" type="password" v-model="password" focus :placeholder="$t('password.a3')" /></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="login_input flex_item">
|
|
|
|
+ <view class="login_img"><image src="/static/icon/ze2.png"></image></view>
|
|
|
|
+ <view class="login_name"><input class="uni-input" type="password" v-model="password2" focus :placeholder="$t('password.a5')" /></view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="login_input flex">
|
|
|
|
+ <view class="login_img"><image class="codeimg" src="/static/icon/ze2.png"></image></view>
|
|
<view class="login_name flex">
|
|
<view class="login_name flex">
|
|
- <input class="uni-input width" v-model="captcha" focus :placeholder="$t('password.a7')" />
|
|
|
|
- <view class="code" @click="verification">{{ countDown == 0 ? $t('password.a7') : countDown }}</view>
|
|
|
|
|
|
+ <input class="uni-input width" v-model="captcha" type="number" focus :placeholder="$t('password.a6')" />
|
|
|
|
+ <view class="code" @click="verification">{{ countDown == 0 ? $t('login.b5') : countDown }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view>
|
|
|
|
- <button type="green" @click="register" class="uni-button uni-button-green">{{$t('login.a4')}}</button>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="uni-button uni-button-green" @click="updatalogin">{{$t('safe.b7')}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-import { mapMutations } from 'vuex';
|
|
|
|
-import { verify, loginMobile, getUserInfo } from '@/api/login.js';
|
|
|
|
|
|
+import { registerReset } from '@/api/set.js';
|
|
|
|
+import { verify } from '@/api/login.js';
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- account: '' ,//用户
|
|
|
|
|
|
+ account: '', //用户
|
|
captcha: '', //验证码
|
|
captcha: '', //验证码
|
|
- // phone: '', //用户
|
|
|
|
- // code: '', //验证码
|
|
|
|
|
|
+ password2: '',
|
|
|
|
+ password: '',
|
|
time: '', //保存倒计时对象
|
|
time: '', //保存倒计时对象
|
|
countDown: 0 //倒计时
|
|
countDown: 0 //倒计时
|
|
};
|
|
};
|
|
@@ -50,51 +52,58 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- ...mapMutations('user', ['setUserInfo', 'login']),
|
|
|
|
- // 手机登录
|
|
|
|
- register() {
|
|
|
|
|
|
+ updatalogin() {
|
|
let obj = this;
|
|
let obj = this;
|
|
if (obj.account == '') {
|
|
if (obj.account == '') {
|
|
- // obj.$api.msg('请输入电话号码');
|
|
|
|
obj.$api.msg(obj.$t("login.a1"));
|
|
obj.$api.msg(obj.$t("login.a1"));
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
- if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.account)) {
|
|
|
|
|
|
+ if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(obj.account) && !/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.account)) {
|
|
obj.$api.msg(obj.$t("safe.b8"));
|
|
obj.$api.msg(obj.$t("safe.b8"));
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
|
|
+ if (obj.password == '') {
|
|
|
|
+ obj.$api.msg(obj.$t("login.a3"));
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ if (obj.password2 == '') {
|
|
|
|
+ obj.$api.msg(obj.$t("login.c6"));
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ if (obj.password2 != obj.password) {
|
|
|
|
+ obj.$api.msg(obj.$t("login.c7"));
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
if (obj.captcha == '') {
|
|
if (obj.captcha == '') {
|
|
obj.$api.msg(obj.$t("login.b6"));
|
|
obj.$api.msg(obj.$t("login.b6"));
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
-
|
|
|
|
- loginMobile({
|
|
|
|
|
|
+ registerReset({
|
|
account: obj.account, //账号
|
|
account: obj.account, //账号
|
|
|
|
+ password: obj.password,
|
|
|
|
+ password2: obj.password2,
|
|
|
|
+ type: 1,
|
|
captcha: obj.captcha
|
|
captcha: obj.captcha
|
|
- }).then(function(e) {
|
|
|
|
- uni.setStorageSync('token', e.data.token);
|
|
|
|
- getUserInfo({}).then(e => {
|
|
|
|
- obj.login();
|
|
|
|
- // 保存返回用户数据
|
|
|
|
- obj.setUserInfo(e.data);
|
|
|
|
- //成功跳转首页
|
|
|
|
- uni.switchTab({
|
|
|
|
- url: '/pages/index/index'
|
|
|
|
|
|
+ })
|
|
|
|
+ .then(function(e) {
|
|
|
|
+ obj.$api.msg(e.msg);
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: '/pages/public/login'
|
|
});
|
|
});
|
|
|
|
+ })
|
|
|
|
+ .catch(e => {
|
|
|
|
+ console.log(e);
|
|
});
|
|
});
|
|
- }).catch((e) => {
|
|
|
|
- console.log(e);
|
|
|
|
- });
|
|
|
|
},
|
|
},
|
|
//发送验证码
|
|
//发送验证码
|
|
verification() {
|
|
verification() {
|
|
let obj = this;
|
|
let obj = this;
|
|
if (this.account == '') {
|
|
if (this.account == '') {
|
|
- this.$api.msg(obj.$t("login.a1"));
|
|
|
|
|
|
+ this.$api.msg(obj.$t("login.c8"));
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
- if (this.account.length < 11) {
|
|
|
|
- this.$api.msg(obj.$t("safe.b8"));
|
|
|
|
|
|
+ if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(obj.account) && !/(^1[3|4|5|6|7|8|9][0-9]{9}$)/.test(this.account)) {
|
|
|
|
+ obj.$api.msg(obj.$t("login.c9"));
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
// 判断是否在倒计时
|
|
// 判断是否在倒计时
|
|
@@ -107,20 +116,21 @@ export default {
|
|
}, 1000);
|
|
}, 1000);
|
|
//调用验证码接口
|
|
//调用验证码接口
|
|
verify({
|
|
verify({
|
|
- account: obj.account,
|
|
|
|
|
|
+ phone: obj.account,
|
|
type: 'login'
|
|
type: 'login'
|
|
})
|
|
})
|
|
- .then(({ data }) => {})
|
|
|
|
|
|
+ .then(({ data }) => {
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: obj.$t("login.c10"),
|
|
|
|
+ duration: 2000,
|
|
|
|
+ position: 'top',
|
|
|
|
+ icon: 'none'
|
|
|
|
+ });
|
|
|
|
+ })
|
|
.catch(err => {
|
|
.catch(err => {
|
|
console.log(err);
|
|
console.log(err);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
- },
|
|
|
|
- login() {
|
|
|
|
- //返回登录
|
|
|
|
- uni.navigateTo({
|
|
|
|
- url: '/pages/public/login'
|
|
|
|
- });
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
@@ -128,15 +138,14 @@ export default {
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
page {
|
|
page {
|
|
- height: 100%;
|
|
|
|
-}
|
|
|
|
-.container {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- background-size: 100%;
|
|
|
|
- background-color: #000000;
|
|
|
|
|
|
+ min-height: 100%;
|
|
|
|
+ background-color: #000;
|
|
|
|
+ .container {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.container_text {
|
|
.container_text {
|
|
|
|
+ position: relative;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 500rpx;
|
|
height: 500rpx;
|
|
top: 0rpx;
|
|
top: 0rpx;
|
|
@@ -146,66 +155,111 @@ page {
|
|
margin-top: 100rpx;
|
|
margin-top: 100rpx;
|
|
margin-left: 302rpx;
|
|
margin-left: 302rpx;
|
|
}
|
|
}
|
|
|
|
+ .title-img {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 50%;
|
|
|
|
+ top: 100rpx;
|
|
|
|
+ margin-left: -130rpx;
|
|
|
|
+ width: 260rpx;
|
|
|
|
+ height: 156rpx;
|
|
|
|
+ .title-image {
|
|
|
|
+ width: 260rpx;
|
|
|
|
+ height: 156rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.loginTitle {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 250rpx;
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ color: #cbb174;
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
+ }
|
|
|
|
+.phone {
|
|
|
|
+ height: 43rpx !important;
|
|
|
|
+ width: 27rpx !important;
|
|
|
|
+}
|
|
|
|
+.codeimg {
|
|
|
|
+ height: 39rpx !important;
|
|
|
|
+ width: 31rpx !important;
|
|
}
|
|
}
|
|
.login_text {
|
|
.login_text {
|
|
- margin: auto 10rpx;
|
|
|
|
|
|
+ margin: -150rpx 0 0;
|
|
position: relative;
|
|
position: relative;
|
|
padding: 100rpx 102rpx;
|
|
padding: 100rpx 102rpx;
|
|
- background-color: #000000;
|
|
|
|
- margin-top: -180rpx;
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
|
|
+ background-color: #000;
|
|
|
|
+
|
|
.login_input {
|
|
.login_input {
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
+ border-bottom: 1px solid #fff;
|
|
margin-bottom: 65rpx;
|
|
margin-bottom: 65rpx;
|
|
.login_img image {
|
|
.login_img image {
|
|
- height: 35rpx;
|
|
|
|
- width: 29rpx;
|
|
|
|
|
|
+ height: 36rpx;
|
|
|
|
+ width: 30rpx;
|
|
|
|
+ margin-right: 20rpx;
|
|
}
|
|
}
|
|
.uni-input {
|
|
.uni-input {
|
|
text-align: left;
|
|
text-align: left;
|
|
- width: 100%;
|
|
|
|
font-size: 28rpx !important;
|
|
font-size: 28rpx !important;
|
|
|
|
+ color: #ffffff;
|
|
}
|
|
}
|
|
.login_name {
|
|
.login_name {
|
|
- color: #fff;
|
|
|
|
- flex-grow: 1;
|
|
|
|
- margin-left: 20rpx;
|
|
|
|
- .width {
|
|
|
|
- width: 325rpx !important;
|
|
|
|
- }
|
|
|
|
- .code {
|
|
|
|
- color: #cbb174;
|
|
|
|
- font-size: 23rpx;
|
|
|
|
- border-left: 1px solid #eeeeee;
|
|
|
|
- width: 150rpx;
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
|
|
+ color: #333333;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .other {
|
|
|
|
+ margin-top: 60rpx;
|
|
|
|
+ .fenge {
|
|
|
|
+ width: 30%;
|
|
|
|
+ height: 2rpx;
|
|
|
|
+ background-color: #eeeeee;
|
|
|
|
+ }
|
|
|
|
+ .qita {
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.uni-button-green {
|
|
.uni-button-green {
|
|
- color: #2a2421;
|
|
|
|
|
|
+ text-align: center;
|
|
|
|
+ color: #ffffff;
|
|
background-color: #feb041;
|
|
background-color: #feb041;
|
|
margin: 40rpx 10rpx;
|
|
margin: 40rpx 10rpx;
|
|
border-radius: 50rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
|
|
+ .uni-button-green-plain {
|
|
|
|
+ border: 1px solid #E6C79D;
|
|
|
|
+ margin: 40rpx 10rpx;
|
|
|
|
+ border-radius: 50rpx;
|
|
|
|
+ color: #E6C79D;
|
|
|
|
+ background-color: #feb041;
|
|
|
|
+ }
|
|
.uni-button {
|
|
.uni-button {
|
|
height: 85rpx;
|
|
height: 85rpx;
|
|
line-height: 85rpx;
|
|
line-height: 85rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-.loginTitle {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 250rpx;
|
|
|
|
- width: 100%;
|
|
|
|
|
|
+
|
|
|
|
+.code {
|
|
|
|
+ color: #E6C79D;
|
|
|
|
+ font-size: 23rpx;
|
|
|
|
+ border-left: 1px solid #eeeeee;
|
|
|
|
+ width: 150rpx;
|
|
|
|
+ flex-shrink: 0;
|
|
text-align: center;
|
|
text-align: center;
|
|
- color: #cbb174;
|
|
|
|
- font-size: 40rpx;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
-uni-button {
|
|
|
|
- height: 80rpx !important;
|
|
|
|
- line-height: 80rpx !important;
|
|
|
|
|
|
+.width {
|
|
|
|
+ width: 325rpx !important;
|
|
}
|
|
}
|
|
|
|
|
|
-</style>
|
|
|
|
|
|
+.login {
|
|
|
|
+ background: #E6C79D;
|
|
|
|
+ margin-top: 96rpx;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 26rpx 0rpx;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+}
|
|
|
|
+</style>
|