init
This commit is contained in:
439
pages_tool/login/find.vue
Normal file
439
pages_tool/login/find.vue
Normal file
@@ -0,0 +1,439 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view class="find">
|
||||
<view class="iconfont icon-close" @click="navigateBack()"></view>
|
||||
<view class="header-wrap">
|
||||
<block v-if="stepShow == 0">
|
||||
<view class="title">请输入手机号</view>
|
||||
<view><text class="color-tip">请确认您的账号已绑定此手机号</text></view>
|
||||
</block>
|
||||
|
||||
<block v-if="stepShow == 1">
|
||||
<view class="title">请输入验证码</view>
|
||||
<view>
|
||||
<text class="color-tip">已将验证码发送至手机号:{{ formData.mobile }}</text>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block v-if="stepShow == 2">
|
||||
<view class="title">请设置新的密码</view>
|
||||
<view><text class="color-tip">建议您的新密码以简单好记为标准</text></view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="find-form">
|
||||
<!-- 输入手机号和验证码 -->
|
||||
<block v-if="stepShow == 0">
|
||||
<view class="form-input">
|
||||
<input
|
||||
class="uni-input"
|
||||
placeholder-class="placeholder-class"
|
||||
type="text"
|
||||
maxlength="17"
|
||||
v-model="formData.mobile"
|
||||
:placeholder="$lang('accountPlaceholder')"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-input align-type">
|
||||
<input
|
||||
class="uni-input info-content"
|
||||
placeholder-class="placeholder-class"
|
||||
type="number"
|
||||
maxlength="4"
|
||||
:placeholder="$lang('captchaPlaceholder')"
|
||||
v-model="formData.captcha"
|
||||
/>
|
||||
<image :src="captcha.img" class="captcha" @click="getCaptcha"></image>
|
||||
</view>
|
||||
|
||||
<button type="primary" class="find-btn" @click="nextStep()">{{ $lang('next') }}</button>
|
||||
</block>
|
||||
|
||||
<!-- 输入动态码 -->
|
||||
<block v-if="stepShow == 1">
|
||||
<myp-one :maxlength="4" @input="input" ref="input" :auto-focus="true"></myp-one>
|
||||
<button type="primary" class="find-btn" :disabled="isSend" @click="sendDynaCode">{{ codeText }}</button>
|
||||
</block>
|
||||
<!-- 输入新密码 -->
|
||||
<block v-if="stepShow == 2">
|
||||
<view class="form-input">
|
||||
<input
|
||||
class="uni-input"
|
||||
placeholder-class="placeholder-class"
|
||||
type="text"
|
||||
maxlength="30"
|
||||
password="true"
|
||||
:placeholder="$lang('passwordPlaceholder')"
|
||||
v-model="formData.password"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="form-input">
|
||||
<input
|
||||
class="uni-input"
|
||||
placeholder-class="placeholder-class"
|
||||
type="text"
|
||||
maxlength="30"
|
||||
password="true"
|
||||
:placeholder="$lang('rePasswordPlaceholder')"
|
||||
v-model="formData.rePassword"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<button type="primary" class="find-btn" @click="save">{{ $lang('save') }}</button>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import validate from 'common/js/validate.js';
|
||||
import mypOne from '@/pages_tool/components/myp-one/myp-one.vue';
|
||||
export default {
|
||||
components: {
|
||||
mypOne
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
findMode: 'mobile',
|
||||
codeText: '重新获取',
|
||||
seconds: 120,
|
||||
timer: null,
|
||||
formData: {
|
||||
mobile: '',
|
||||
password: '',
|
||||
rePassword: '',
|
||||
dynacode: '',
|
||||
captcha: ''
|
||||
},
|
||||
stepShow: 0,
|
||||
isSend: false,
|
||||
captcha: {
|
||||
id: '',
|
||||
img: ''
|
||||
},
|
||||
registerConfig: {}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getCaptcha();
|
||||
},
|
||||
onShow() {
|
||||
this.getRegisterConfig();
|
||||
},
|
||||
methods: {
|
||||
input(val) {
|
||||
if (val.length == 4) {
|
||||
this.formData.dynacode = val;
|
||||
this.stepShow += 1;
|
||||
}
|
||||
},
|
||||
// 导航跳转
|
||||
navigateBack() {
|
||||
if (this.stepShow > 0) {
|
||||
this.stepShow -= 1;
|
||||
} else {
|
||||
this.$util.redirectTo('/pages_tool/login/login', '', 'redirectTo');
|
||||
}
|
||||
},
|
||||
// 下一步
|
||||
async nextStep() {
|
||||
let step0Rule = [
|
||||
{
|
||||
name: 'mobile',
|
||||
checkType: 'phoneno',
|
||||
errorMsg: '请输入正确的手机号'
|
||||
},
|
||||
{
|
||||
name: 'captcha',
|
||||
checkType: 'required',
|
||||
errorMsg: this.$lang('captchaPlaceholder')
|
||||
}
|
||||
], //手机验证
|
||||
step0CheckRes;
|
||||
|
||||
step0CheckRes = validate.check(this.formData, step0Rule);
|
||||
|
||||
if (step0CheckRes) {
|
||||
this.findMode = 'mobile';
|
||||
let res = await this.$api.sendRequest({
|
||||
url: '/api/member/checkmobile',
|
||||
data: {
|
||||
mobile: this.formData.mobile
|
||||
},
|
||||
async: false
|
||||
});
|
||||
if (res.code == 0) {
|
||||
this.$util.showToast({
|
||||
title: '该手机号未注册'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: validate.error
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.sendDynaCode();
|
||||
},
|
||||
// 注册表单验证
|
||||
vertify() {
|
||||
let regConfig = this.registerConfig;
|
||||
let rule = [
|
||||
{
|
||||
name: 'password',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入密码'
|
||||
}
|
||||
];
|
||||
if (regConfig.pwd_len > 0) {
|
||||
rule.push({
|
||||
name: 'password',
|
||||
checkType: 'lengthMin',
|
||||
checkRule: regConfig.pwd_len,
|
||||
errorMsg: '密码长度不能小于' + regConfig.pwd_len + '位'
|
||||
});
|
||||
}
|
||||
if (regConfig.pwd_complexity != '') {
|
||||
let passwordErrorMsg = '密码需包含',
|
||||
reg = '';
|
||||
if (regConfig.pwd_complexity.indexOf('number') != -1) {
|
||||
reg += '(?=.*?[0-9])';
|
||||
passwordErrorMsg += '数字';
|
||||
}
|
||||
if (regConfig.pwd_complexity.indexOf('letter') != -1) {
|
||||
reg += '(?=.*?[a-z])';
|
||||
passwordErrorMsg += '、小写字母';
|
||||
}
|
||||
if (regConfig.pwd_complexity.indexOf('upper_case') != -1) {
|
||||
reg += '(?=.*?[A-Z])';
|
||||
passwordErrorMsg += '、大写字母';
|
||||
}
|
||||
if (regConfig.pwd_complexity.indexOf('symbol') != -1) {
|
||||
reg += '(?=.*?[#?!@$%^&*-])';
|
||||
passwordErrorMsg += '、特殊字符';
|
||||
}
|
||||
rule.push({
|
||||
name: 'password',
|
||||
checkType: 'reg',
|
||||
checkRule: reg,
|
||||
errorMsg: passwordErrorMsg
|
||||
});
|
||||
}
|
||||
|
||||
var checkRes = validate.check(this.formData, rule);
|
||||
if (checkRes) {
|
||||
if (this.formData.password != this.formData.rePassword) {
|
||||
this.$util.showToast({
|
||||
title: '两次密码不一致'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: validate.error
|
||||
});
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// 获取验证码
|
||||
getCaptcha() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/captcha/captcha',
|
||||
data: {
|
||||
captcha_id: this.captcha.id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.captcha = res.data;
|
||||
this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 发送动态验证码
|
||||
async sendDynaCode() {
|
||||
if (this.formData.captcha.length == 0) {
|
||||
this.$util.showToast({
|
||||
title: this.$lang('captchaPlaceholder')
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isSend) return;
|
||||
this.isSend = true;
|
||||
|
||||
var url,
|
||||
data = {
|
||||
captcha_id: this.captcha.id,
|
||||
captcha_code: this.formData.captcha
|
||||
};
|
||||
data[this.findMode] = this.formData.mobile;
|
||||
url = '/api/findpassword/mobilecode';
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: url,
|
||||
data: data,
|
||||
success: res => {
|
||||
let data = res.data;
|
||||
if (data.key) {
|
||||
if (this.seconds == 120 && this.timer == null) {
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--;
|
||||
this.codeText = '重新获取(' + this.seconds + 's)';
|
||||
}, 1000);
|
||||
}
|
||||
uni.setStorageSync('forgot_password_token', data.key);
|
||||
this.stepShow += 1;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
this.isSend = false;
|
||||
this.getCaptcha();
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
this.isSend = false;
|
||||
this.getCaptcha();
|
||||
}
|
||||
});
|
||||
},
|
||||
save() {
|
||||
if (this.vertify()) {
|
||||
var url,
|
||||
data = {
|
||||
code: this.formData.dynacode,
|
||||
key: uni.getStorageSync('forgot_password_token'),
|
||||
password: this.formData.password
|
||||
};
|
||||
data[this.findMode] = this.formData.mobile;
|
||||
url = '/api/findpassword/mobile';
|
||||
this.$api.sendRequest({
|
||||
url: url,
|
||||
data: data,
|
||||
success: res => {
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
if (res.code == 0) {
|
||||
setTimeout(() => {
|
||||
uni.removeStorage({
|
||||
key: 'forgot_password_token'
|
||||
});
|
||||
this.$util.redirectTo('/pages_tool/login/login', {}, 'redirectTo');
|
||||
}, 1000);
|
||||
} else {
|
||||
this.stepShow -= 1;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取注册配置
|
||||
*/
|
||||
getRegisterConfig() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/register/config',
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.registerConfig = res.data.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
seconds(value) {
|
||||
if (value == 0) {
|
||||
this.seconds = 120;
|
||||
this.codeText = '重新获取';
|
||||
this.isSend = false;
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #ffffff !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.captcha {
|
||||
width: 170rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.find-form {
|
||||
padding: 100rpx 80rpx 0;
|
||||
|
||||
.form-input {
|
||||
margin-top: 60rpx;
|
||||
height: 60rpx;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
|
||||
input {
|
||||
padding: 0;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.find-btn {
|
||||
margin: 374rpx 0 0;
|
||||
border-radius: $border-radius;
|
||||
color: #fff;
|
||||
|
||||
&[disabled] {
|
||||
background-color: #f7f7f7 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forget-section {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
margin-top: 10rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
|
||||
.align-type {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
margin: calc(120rpx + 88rpx) auto 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: bottom;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-close {
|
||||
font-size: 52rpx;
|
||||
position: fixed;
|
||||
left: 24rpx;
|
||||
top: 72rpx;
|
||||
z-index: 9;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
</style>
|
||||
484
pages_tool/login/login.vue
Normal file
484
pages_tool/login/login.vue
Normal file
@@ -0,0 +1,484 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<scroll-view scroll-y="false" class="container">
|
||||
<view class="header-wrap" :style="{backgroundImage: 'url('+$util.img('public/uniapp/member/head.png')+')'}">
|
||||
<view class="t-b">
|
||||
您好,
|
||||
<br />
|
||||
欢迎使用
|
||||
</view>
|
||||
</view>
|
||||
<view class="body-wrap">
|
||||
<view class="form-wrap">
|
||||
<view class="input-wrap" v-show="loginMode == 'mobile'">
|
||||
<view class="content">
|
||||
<!-- <view class="area-code">+86</view> -->
|
||||
<input type="number" placeholder="请输入您的手机号" placeholder-class="input-placeholder" class="input" maxlength="11" v-model="formData.mobile" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-wrap" v-show="loginMode == 'account'">
|
||||
<view class="content">
|
||||
<input type="text" placeholder="请输入账号" placeholder-class="input-placeholder" class="input" v-model="formData.account" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-wrap" v-show="loginMode == 'account'">
|
||||
<view class="content">
|
||||
<input type="password" placeholder="请输入密码" placeholder-class="input-placeholder" class="input" v-model="formData.password" />
|
||||
<view class="align-right" v-show="loginMode == 'account'">
|
||||
<text @click="forgetPassword">忘记密码?</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="input-wrap" v-show="loginMode == 'mobile'">
|
||||
<view class="content">
|
||||
<input type="text" placeholder="请输入动态码" placeholder-class="input-placeholder" class="input" v-model="formData.dynacode" />
|
||||
<view class="dynacode" :class="dynacodeData.seconds == 120 ? 'color-base-text' : 'color-tip'"
|
||||
@click="sendMobileCode">{{ dynacodeData.codeText }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn_view">
|
||||
<button type="primary" @click="login" class="login-btn color-base-border color-base-bg" style="background: #2796f2 !important;border: none;">登录</button>
|
||||
</view>
|
||||
<view class="regisiter-agreement" style="margin: 0 50rpx;padding-top: 40rpx;line-height: 1.5;display: flex;">
|
||||
<view style="" class="iconfont" :class=" isAgree ? 'icon-fuxuankuang1 color-base-text' : 'icon-fuxuankuang2' " @click="isAgree = !isAgree"></view>
|
||||
<view style="text-align: left;margin-left: 10rpx;padding-top: 2rpx;">若您未注册,则登录后将自动帮您注册。注册即视为同意 <text @click="tourl('/pages_tool/agreement/contenr?type=0')" style="color:#4395ff">《隐私条款》</text> <text @click="tourl('/pages_tool/agreement/contenr?type=1')" style="color:#4395ff">《用户服务协议》</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
<register-reward ref="registerReward"></register-reward>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import validate from 'common/js/validate.js';
|
||||
import registerReward from '@/components/register-reward/register-reward.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isAgree: false,
|
||||
// loginMode: 'account',
|
||||
loginMode: 'mobile',
|
||||
formData: {
|
||||
mobile: '',
|
||||
account: '',
|
||||
password: '',
|
||||
vercode: '',
|
||||
dynacode: '',
|
||||
key: ''
|
||||
},
|
||||
captcha: {
|
||||
id: '',
|
||||
img: ''
|
||||
},
|
||||
isSub: false, // 提交防重复
|
||||
back: '', // 返回页
|
||||
redirect: 'redirectTo', // 跳转方式
|
||||
dynacodeData: {
|
||||
seconds: 120,
|
||||
timer: null,
|
||||
codeText: '获取动态码',
|
||||
isSend: false
|
||||
},
|
||||
registerConfig: {
|
||||
register: 'mobile',
|
||||
login: ''
|
||||
},
|
||||
captchaConfig: 0,
|
||||
authInfo: null
|
||||
};
|
||||
},
|
||||
components: {
|
||||
registerReward
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.back) this.back = option.back;
|
||||
this.getRegisterConfig();
|
||||
// this.getCaptchaConfig();
|
||||
this.authInfo = uni.getStorageSync('authInfo');
|
||||
},
|
||||
onShow() {},
|
||||
onReady() {
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取验证码配置
|
||||
*/
|
||||
getCaptchaConfig() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/config/getCaptchaConfig',
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.captchaConfig = res.data.shop_reception_login;
|
||||
if (this.captchaConfig == 1) this.getCaptcha();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取注册配置
|
||||
*/
|
||||
getRegisterConfig() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/register/config',
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
// this.registerConfig = res.data.value;
|
||||
// if (this.registerConfig.login.indexOf('mobile') != -1) this.loginMode = 'mobile';
|
||||
// else this.loginMode = 'account';
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 切换登录方式
|
||||
*/
|
||||
switchLoginMode() {
|
||||
this.loginMode = this.loginMode == 'mobile' ? 'account' : 'mobile';
|
||||
},
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
getCaptcha() {
|
||||
if (this.captchaConfig == 0) return;
|
||||
this.$api.sendRequest({
|
||||
url: '/api/captcha/captcha',
|
||||
data: {
|
||||
captcha_id: this.captcha.id
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.captcha = res.data;
|
||||
this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 去注册
|
||||
*/
|
||||
toRegister() {
|
||||
if (this.back) this.$util.redirectTo('/pages_tool/login/register', {
|
||||
back: encodeURIComponent(this.back)
|
||||
});
|
||||
else this.$util.redirectTo('/pages_tool/login/register');
|
||||
},
|
||||
/**
|
||||
* 忘记密码
|
||||
*/
|
||||
forgetPassword() {
|
||||
if (this.back) this.$util.redirectTo('/pages_tool/login/find', {
|
||||
back: encodeURIComponent(this.back)
|
||||
});
|
||||
else this.$util.redirectTo('/pages_tool/login/find');
|
||||
},
|
||||
tourl(url){
|
||||
this.$util.redirectTo(url);
|
||||
},
|
||||
/**
|
||||
* 登录
|
||||
*/
|
||||
login() {
|
||||
if (!this.isAgree) {
|
||||
this.$util.showToast({
|
||||
title: '请先阅读并同意协议'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.loginMode == 'account') {
|
||||
var url = '/api/login/login';
|
||||
data = {
|
||||
username: this.formData.account,
|
||||
password: this.formData.password
|
||||
};
|
||||
} else {
|
||||
var url = '/api/login/mobile',
|
||||
data = {
|
||||
mobile: this.formData.mobile,
|
||||
key: this.formData.key,
|
||||
code: this.formData.dynacode
|
||||
};
|
||||
}
|
||||
if (this.captcha.id != '') {
|
||||
data.captcha_id = this.captcha.id;
|
||||
data.captcha_code = this.formData.vercode;
|
||||
}
|
||||
if (this.authInfo) Object.assign(data, this.authInfo);
|
||||
if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');
|
||||
|
||||
if (this.verify(data)) {
|
||||
if (this.isSub) return;
|
||||
this.isSub = true;
|
||||
this.$api.sendRequest({
|
||||
url,
|
||||
data,
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
var can_receive_registergift = res.data.can_receive_registergift;
|
||||
this.$store.commit('setToken', res.data.token);
|
||||
this.$store.dispatch('getCartNumber');
|
||||
this.getMemberInfo(() => {
|
||||
if (can_receive_registergift == 1) {
|
||||
this.$util.showToast({
|
||||
title: '登录成功'
|
||||
});
|
||||
let back = this.back ? this.back : '/pages/member/index';
|
||||
if(this.$refs.registerReward) this.$refs.registerReward.open(back);
|
||||
} else {
|
||||
if (this.back != '') {
|
||||
this.$util.redirectTo(decodeURIComponent(this.back), {}, 'reLaunch');
|
||||
} else {
|
||||
this.$util.redirectTo('/pages/member/index', {}, 'reLaunch');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.isSub = false;
|
||||
this.getCaptcha();
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
this.isSub = false;
|
||||
this.getCaptcha();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 登录验证
|
||||
* @param {Object} data
|
||||
*/
|
||||
verify(data) {
|
||||
let rule = [];
|
||||
// 手机号验证
|
||||
if (this.loginMode == 'mobile') {
|
||||
rule = [{
|
||||
name: 'mobile',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入手机号'
|
||||
}, {
|
||||
name: 'mobile',
|
||||
checkType: 'phoneno',
|
||||
errorMsg: '请输入正确的手机号'
|
||||
}];
|
||||
if (this.captchaConfig == 1) {
|
||||
if (this.captcha.id != '') rule.push({
|
||||
name: 'captcha_code',
|
||||
checkType: 'required',
|
||||
errorMsg: this.$lang('captchaPlaceholder')
|
||||
});
|
||||
}
|
||||
rule.push({
|
||||
name: 'code',
|
||||
checkType: 'required',
|
||||
errorMsg: this.$lang('dynacodePlaceholder')
|
||||
});
|
||||
}
|
||||
|
||||
// 账号验证
|
||||
if (this.loginMode == 'account') {
|
||||
rule = [{
|
||||
name: 'username',
|
||||
checkType: 'required',
|
||||
errorMsg: this.$lang('accountPlaceholder')
|
||||
},
|
||||
{
|
||||
name: 'password',
|
||||
checkType: 'required',
|
||||
errorMsg: this.$lang('passwordPlaceholder')
|
||||
}
|
||||
];
|
||||
if (this.captchaConfig == 1) {
|
||||
if (this.captcha.id != '') rule.push({
|
||||
name: 'captcha_code',
|
||||
checkType: 'required',
|
||||
errorMsg: this.$lang('captchaPlaceholder')
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var checkRes = validate.check(data, rule);
|
||||
if (checkRes) {
|
||||
return true;
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: validate.error
|
||||
});
|
||||
return false;
|
||||
}
|
||||
},
|
||||
mobileAuthLogin(e) {
|
||||
if (e.detail.errMsg == 'getPhoneNumber:ok') {
|
||||
var data = {
|
||||
iv: e.detail.iv,
|
||||
encryptedData: e.detail.encryptedData
|
||||
};
|
||||
if (Object.keys(this.authInfo).length) {
|
||||
Object.assign(data, this.authInfo);
|
||||
if (this.authInfo.nickName) data.nickname = this.authInfo.nickName;
|
||||
if (this.authInfo.avatarUrl) data.headimg = this.authInfo.avatarUrl;
|
||||
}
|
||||
if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');
|
||||
|
||||
if (this.isSub) return;
|
||||
this.isSub = true;
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/tripartite/mobileauth',
|
||||
data,
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
var can_receive_registergift = res.data.can_receive_registergift;
|
||||
this.$store.commit('setToken', res.data.token);
|
||||
this.$store.dispatch('getCartNumber');
|
||||
this.getMemberInfo(() => {
|
||||
if (can_receive_registergift == 1) {
|
||||
let back = this.back ? this.back : '/pages/member/index';
|
||||
if(this.$refs.registerReward) this.$refs.registerReward.open(back);
|
||||
} else {
|
||||
if (this.back != '') {
|
||||
this.$util.redirectTo(decodeURIComponent(this.back), {}, this.redirect);
|
||||
} else {
|
||||
this.$util.redirectTo('/pages/member/index', {}, this.redirect);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
this.isSub = false;
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
this.isSub = false;
|
||||
this.$util.showToast({
|
||||
title: 'request:fail'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 发送手机动态码
|
||||
*/
|
||||
sendMobileCode() {
|
||||
if (this.dynacodeData.seconds != 120 || this.dynacodeData.isSend) return;
|
||||
var data = {
|
||||
mobile: this.formData.mobile,
|
||||
captcha_id: this.captcha.id,
|
||||
captcha_code: this.formData.vercode
|
||||
};
|
||||
var rule = [{
|
||||
name: 'mobile',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入手机号'
|
||||
}, {
|
||||
name: 'mobile',
|
||||
checkType: 'phoneno',
|
||||
errorMsg: '请输入正确的手机号'
|
||||
}];
|
||||
if (this.captchaConfig == 1) {
|
||||
rule.push({
|
||||
name: 'captcha_code',
|
||||
checkType: 'required',
|
||||
errorMsg: '请输入验证码'
|
||||
});
|
||||
}
|
||||
var checkRes = validate.check(data, rule);
|
||||
if (!checkRes) {
|
||||
this.$util.showToast({
|
||||
title: validate.error
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.dynacodeData.isSend = true;
|
||||
this.dynacodeData.timer = setInterval(() => {
|
||||
this.dynacodeData.seconds--;
|
||||
this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
|
||||
}, 1000);
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/login/mobileCode',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.formData.key = res.data.key;
|
||||
} else {
|
||||
this.refreshDynacodeData();
|
||||
this.$util.showToast({
|
||||
title: res.message
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.$util.showToast({
|
||||
title: 'request:fail'
|
||||
});
|
||||
this.refreshDynacodeData();
|
||||
}
|
||||
});
|
||||
},
|
||||
refreshDynacodeData() {
|
||||
this.getCaptcha();
|
||||
clearInterval(this.dynacodeData.timer);
|
||||
this.dynacodeData = {
|
||||
seconds: 120,
|
||||
timer: null,
|
||||
codeText: '获取动态码',
|
||||
isSend: false
|
||||
};
|
||||
},
|
||||
getMemberInfo(callback) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/member/info',
|
||||
success: (res) => {
|
||||
if (res.code >= 0) {
|
||||
// 登录成功,存储会员信息
|
||||
this.$store.commit('setMemberInfo', res.data);
|
||||
if (callback) callback();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'dynacodeData.seconds': {
|
||||
handler(newValue, oldValue) {
|
||||
if (newValue == 0) {
|
||||
this.refreshDynacodeData();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './public/css/common.scss';
|
||||
.color-base-text{
|
||||
color:#2796f2 !important
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
/deep/ .reward-popup .uni-popup__wrapper-box {
|
||||
background: none !important;
|
||||
max-width: unset !important;
|
||||
max-height: unset !important;
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
||||
/deep/ uni-toast .uni-simple-toast__text {
|
||||
background: red !important;
|
||||
}
|
||||
</style>
|
||||
209
pages_tool/login/public/css/common.scss
Normal file
209
pages_tool/login/public/css/common.scss
Normal file
@@ -0,0 +1,209 @@
|
||||
/deep/.uni-scroll-view {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/deep/.uni-scroll-view::-webkit-scrollbar {
|
||||
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
}
|
||||
page {
|
||||
width: 100%;
|
||||
background: #fff !important;
|
||||
}
|
||||
.align-right {
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.t-b {
|
||||
text-align: left;
|
||||
font-size: 42rpx;
|
||||
color: #ffffff;
|
||||
padding: 130rpx 0 50rpx 70rpx;
|
||||
font-weight: bold;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
.header-wrap {
|
||||
// width: 80%;
|
||||
// margin: calc(120rpx + 44px) auto 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: bottom;
|
||||
position: relative;
|
||||
// margin-top:80rpx;
|
||||
background-size: 100% 100%;
|
||||
.title {
|
||||
font-size: 60rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.body-wrap {
|
||||
margin-top: 100rpx;
|
||||
padding-bottom: 100rpx;
|
||||
|
||||
.form-wrap {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 60rpx;
|
||||
margin-top: 60rpx;
|
||||
|
||||
.iconfont {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
line-height: 60rpx;
|
||||
font-size: $font-size-toolbar;
|
||||
color: $color-title;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
height: 60rpx;
|
||||
border-bottom: 2rpx solid $color-line;
|
||||
align-items: center;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
font-size: $font-size-base;
|
||||
color: #bfbfbf;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.captcha {
|
||||
margin: 4rpx;
|
||||
height: 52rpx;
|
||||
width: 140rpx;
|
||||
}
|
||||
|
||||
.dynacode {
|
||||
line-height: 60rpx;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.area-code {
|
||||
line-height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forget-section {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
margin: 40rpx auto;
|
||||
|
||||
view {
|
||||
flex: 1;
|
||||
font-size: $font-size-tag;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.btn_view {
|
||||
width: 100%;
|
||||
margin: 94rpx auto auto;
|
||||
padding: 0 $margin-both;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.login-btn {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: $border-radius;
|
||||
text-align: center;
|
||||
border: 2rpx solid;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.auth-login {
|
||||
margin-top: 20rpx;
|
||||
width: calc(100% - 4rpx);
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: $border-radius;
|
||||
border: 2rpx solid;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-left: 0;
|
||||
background-color: #fff;
|
||||
text {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 70rpx;
|
||||
}
|
||||
.icon-weixin {
|
||||
color: #1aad19;
|
||||
}
|
||||
}
|
||||
|
||||
// .auth-login{
|
||||
|
||||
// background-color: #fff;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// text-align: center;
|
||||
// padding: 0;
|
||||
// text{
|
||||
// color: #D0D0D0;
|
||||
// }
|
||||
// .iconfont{
|
||||
// font-size: 70rpx;
|
||||
// }
|
||||
// }
|
||||
|
||||
.regisiter-agreement {
|
||||
// text-align: center;
|
||||
margin-top: 30rpx;
|
||||
color: #838383;
|
||||
line-height: 60rpx;
|
||||
font-size: $font-size-tag;
|
||||
.tips{
|
||||
margin:0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn-box {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
.login-btn-box.active {
|
||||
margin: 30rpx 0 50rpx;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
font-size: 52rpx;
|
||||
position: fixed;
|
||||
left: 24rpx;
|
||||
top: 72rpx;
|
||||
z-index: 9;
|
||||
color: #000;
|
||||
}
|
||||
.login-mode-box {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: $color-tip;
|
||||
margin: auto;
|
||||
margin-top: 44rpx;
|
||||
font-size: 26rpx;
|
||||
width: 80%;
|
||||
}
|
||||
Reference in New Issue
Block a user