732 lines
18 KiB
Vue
732 lines
18 KiB
Vue
<template>
|
||
<div class="login-wrapper">
|
||
<div
|
||
class="shading"
|
||
:style="{
|
||
marginTop: current == 1 ? '100rpx' : '200rpx'
|
||
}"
|
||
>
|
||
<view>星梦供应链</view>
|
||
</div>
|
||
<div class="whiteBg" v-if="formItem === 1">
|
||
<div class="list" v-if="current === 0">
|
||
<form @submit.prevent="submit">
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
|
||
<input type="text" class="texts" placeholder="请输入用户名" v-model="formData.account" required />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
|
||
<input type="password" class="texts" placeholder="请输入密码" v-model="formData.password" required />
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<view style="display: flex; align-items: center; justify-content: space-between; color: #e93323; opacity: 0.7">
|
||
<view @click="currentChange(3)">找回账号</view>
|
||
<view @click="currentChange(2)">忘记密码？立即找回</view>
|
||
</view>
|
||
</div>
|
||
<div class="list" v-if="current === 1">
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
|
||
<input type="text" class="texts" placeholder="请输入用户名" v-model="formData.account" />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/code_2.png" style="width: 24rpx; height: 34rpx"></image>
|
||
<input type="password" class="texts" placeholder="请输入密码" v-model="formData.passwd" />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/code_2.png" style="width: 24rpx; height: 34rpx"></image>
|
||
<input type="password" class="texts" placeholder="请确认密码" v-model="passwdss" />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
|
||
<input type="text" class="texts" placeholder="请输入邀请码" v-model="formData.shareCode" />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
|
||
<input type="text" class="texts" placeholder="请输入手机号" v-model="formData.phone" />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
|
||
<input type="text" placeholder="填写验证码" class="texts" v-model="formData.captcha" />
|
||
<button class="code" :class="disabled === true ? 'on' : ''" @click="code">
|
||
{{ text }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 忘记密码 -->
|
||
<div class="list" v-if="current === 2">
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
|
||
<input type="text" class="texts" placeholder="请输入用户名" v-model="formData.account" required />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
|
||
<input type="password" class="texts" placeholder="请输入新密码" v-model="formData.passwd" required />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
|
||
<input type="text" class="texts" placeholder="请输入手机号" v-model="formData.phone" />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
|
||
<input type="text" placeholder="填写验证码" class="texts" v-model="formData.captcha" />
|
||
<button class="code" :class="disabled === true ? 'on' : ''" @click="code">
|
||
{{ text }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 找回账号 -->
|
||
<div class="list" v-if="current === 3">
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
|
||
<input type="text" class="texts" placeholder="请输入手机号" v-model="formData.phone" />
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="acea-row row-middle">
|
||
<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
|
||
<input type="text" placeholder="填写验证码" class="texts" v-model="formData.captcha" />
|
||
<button class="code" :class="disabled === true ? 'on' : ''" @click="code">
|
||
{{ text }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="logon" @click="submit" v-if="current === 0">登录</div>
|
||
<div class="logon" style="opacity: 0.7; margin-top: 50rpx" @click="currentChange(1)" v-if="current === 0">立即注册</div>
|
||
<div class="logon" @click="loginMobile" v-if="current === 1">注册</div>
|
||
<div class="logon" style="opacity: 0.7; margin-top: 50rpx" @click="currentChange(0)" v-if="current === 1">立即登录</div>
|
||
<div class="logon" @click="wangPass" v-if="current === 2">确认</div>
|
||
<div class="logon" @click="zhaoUser" v-if="current === 3">立即找回</div>
|
||
<div class="logon" style="opacity: 0.7; margin-top: 50rpx" @click="currentChange(0)" v-if="current === 2 || current === 3">前往登录</div>
|
||
</div>
|
||
<div class="bottom"></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import dayjs from '@/plugin/dayjs/dayjs.min.js';
|
||
import sendVerifyCode from '@/mixins/SendVerifyCode';
|
||
import {
|
||
loginH5,
|
||
registerVerify,
|
||
register,
|
||
// getCodeApi,
|
||
getUserInfo,
|
||
saveOpenIdByWxCode,
|
||
forgotPassword,
|
||
forgotUserName
|
||
} from '@/api/user';
|
||
import attrs, { required, alpha_num, chs_phone } from '@/utils/validate';
|
||
import { validatorDefaultCatch } from '@/utils/dialog';
|
||
import { getLogo, appAuth, appleLogin } from '@/api/public';
|
||
import { VUE_APP_API_URL } from '@/utils';
|
||
|
||
import { registerMobile } from '@/api/api';
|
||
|
||
const BACK_URL = 'login_back_url';
|
||
|
||
export default {
|
||
name: 'Login',
|
||
mixins: [sendVerifyCode],
|
||
data: function () {
|
||
return {
|
||
navList: ['快速登录', '账号登录'],
|
||
current: 0,
|
||
account: '',
|
||
password: '',
|
||
captcha: '',
|
||
formItem: 1,
|
||
type: 'login',
|
||
logoUrl: '',
|
||
keyCode: '',
|
||
codeUrl: '',
|
||
codeVal: '',
|
||
isShowCode: false,
|
||
platform: '',
|
||
appLoginStatus: false, // 微信登录强制绑定手机号码状态
|
||
appUserInfo: null, // 微信登录保存的用户信息
|
||
appleLoginStatus: false, // 苹果登录强制绑定手机号码状态
|
||
appleUserInfo: null,
|
||
appleShow: false, // 苹果登录版本必须要求ios13以上的
|
||
passwdss: '',
|
||
formData: {
|
||
account: '',
|
||
captcha: '',
|
||
passwd: '',
|
||
phone: '',
|
||
shareCode: ''
|
||
},
|
||
shareCode: ''
|
||
};
|
||
},
|
||
watch: {
|
||
formItem: function (nval, oVal) {
|
||
if (nval == 1) {
|
||
this.type = 'login';
|
||
} else {
|
||
this.type = 'register';
|
||
}
|
||
}
|
||
},
|
||
mounted: function () {
|
||
this.getCode();
|
||
this.getLogoImage();
|
||
},
|
||
onLoad() {
|
||
const invite_code = uni.getStorageSync('user_shareCode');
|
||
if (invite_code) {
|
||
this.formData.shareCode = invite_code;
|
||
this.shareCode = invite_code;
|
||
}
|
||
|
||
let self = this;
|
||
uni.getSystemInfo({
|
||
success: function (res) {
|
||
if (res.platform.toLowerCase() == 'ios' && res.system.split(' ')[1] >= 13) {
|
||
self.appleShow = true;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
currentChange(e) {
|
||
this.current = e;
|
||
switch (e) {
|
||
case 0:
|
||
this.formData = {
|
||
account: '',
|
||
password: ''
|
||
};
|
||
break;
|
||
case 1:
|
||
this.formData = {
|
||
account: '',
|
||
captcha: '',
|
||
passwd: '',
|
||
phone: '',
|
||
shareCode: this.shareCode
|
||
};
|
||
break;
|
||
case 2:
|
||
this.formData = {
|
||
account: '',
|
||
passwd: '',
|
||
phone: '',
|
||
captcha: ''
|
||
};
|
||
break;
|
||
case 3:
|
||
this.formData = {
|
||
phone: '',
|
||
captcha: ''
|
||
};
|
||
break;
|
||
}
|
||
},
|
||
wxLoginGo(userInfo) {
|
||
appAuth(userInfo)
|
||
.then((res) => {
|
||
if (res.data.type === 'register') {
|
||
uni.navigateTo({
|
||
url: '/pages/users/app_login/index?authKey=' + res.data.key
|
||
});
|
||
}
|
||
if (res.data.type === 'login') {
|
||
this.$store.commit('LOGIN', {
|
||
token: res.data.token
|
||
});
|
||
this.getUserInfo(res.data);
|
||
}
|
||
})
|
||
.catch((res) => {
|
||
that.$util.Tips({
|
||
title: res
|
||
});
|
||
});
|
||
},
|
||
again() {
|
||
this.codeUrl = VUE_APP_API_URL + '/sms_captcha?' + 'key=' + this.keyCode + Date.parse(new Date());
|
||
},
|
||
getCode() {
|
||
let that = this;
|
||
},
|
||
async getLogoImage() {
|
||
let that = this;
|
||
getLogo().then((res) => {
|
||
that.logoUrl = res.data.logoUrl ? res.data.logoUrl : '/static/images/live-logo.gif';
|
||
});
|
||
},
|
||
|
||
wangPass() {
|
||
let that = this;
|
||
if (!that.formData.account)
|
||
return that.$util.Tips({
|
||
title: '请填写用户名'
|
||
});
|
||
if (!that.formData.passwd)
|
||
return that.$util.Tips({
|
||
title: '请填写密码'
|
||
});
|
||
if (!that.formData.phone)
|
||
return that.$util.Tips({
|
||
title: '请填写手机号'
|
||
});
|
||
if (!that.formData.captcha)
|
||
return that.$util.Tips({
|
||
title: '请填写验证码'
|
||
});
|
||
forgotPassword(that.formData).then((res) => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '密码已修改',
|
||
showCancel: false,
|
||
confirmText: '确认',
|
||
success: () => {
|
||
this.current = 0;
|
||
}
|
||
});
|
||
});
|
||
},
|
||
zhaoUser() {
|
||
let that = this;
|
||
if (!that.formData.phone)
|
||
return that.$util.Tips({
|
||
title: '请填写手机号'
|
||
});
|
||
if (!that.formData.captcha)
|
||
return that.$util.Tips({
|
||
title: '请填写验证码'
|
||
});
|
||
forgotUserName(that.formData).then((res) => {
|
||
uni.showModal({
|
||
title: '已找回的用户名',
|
||
content: res.data.userNames.join(','),
|
||
showCancel: false,
|
||
confirmText: '确认',
|
||
success: () => {
|
||
uni.setClipboardData({
|
||
data: res.data.userNames.join(','), //要被复制的内容
|
||
success: () => {
|
||
//复制成功的回调函数
|
||
uni.showToast({
|
||
//提示
|
||
title: '已复制用户名'
|
||
});
|
||
this.current = 0;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
},
|
||
async loginMobile() {
|
||
let that = this;
|
||
if (!that.formData.account)
|
||
return that.$util.Tips({
|
||
title: '请填写用户名'
|
||
});
|
||
if (!that.formData.passwd)
|
||
return that.$util.Tips({
|
||
title: '请填写密码'
|
||
});
|
||
|
||
if (that.formData.passwd != that.passwdss)
|
||
return that.$util.Tips({
|
||
title: '两次密码输入不一致'
|
||
});
|
||
if (!that.formData.shareCode)
|
||
return that.$util.Tips({
|
||
title: '请填写邀请码'
|
||
});
|
||
if (!that.formData.phone)
|
||
return that.$util.Tips({
|
||
title: '请填写手机号'
|
||
});
|
||
if (!that.formData.captcha)
|
||
return that.$util.Tips({
|
||
title: '请填写验证码'
|
||
});
|
||
|
||
registerMobile(that.formData)
|
||
.then((res) => {
|
||
that.$util.Tips({
|
||
title: '注册成功'
|
||
});
|
||
that.current = 0;
|
||
that.formData.passwd = '';
|
||
that.formData.shareCode = '';
|
||
that.formData.phone = '';
|
||
that.formData.captcha = '';
|
||
that.passwdss = '';
|
||
})
|
||
.catch((res) => {
|
||
that.$util.Tips({
|
||
title: res
|
||
});
|
||
});
|
||
},
|
||
async register() {
|
||
let that = this;
|
||
if (!that.account)
|
||
return that.$util.Tips({
|
||
title: '请填写手机号码'
|
||
});
|
||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
|
||
return that.$util.Tips({
|
||
title: '请输入正确的手机号码'
|
||
});
|
||
if (!that.captcha)
|
||
return that.$util.Tips({
|
||
title: '请填写验证码'
|
||
});
|
||
if (!/^[\w\d]+$/i.test(that.captcha))
|
||
return that.$util.Tips({
|
||
title: '请输入正确的验证码'
|
||
});
|
||
if (!that.password)
|
||
return that.$util.Tips({
|
||
title: '请填写密码'
|
||
});
|
||
if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password))
|
||
return that.$util.Tips({
|
||
title: '您输入的密码过于简单'
|
||
});
|
||
register({
|
||
account: that.account,
|
||
captcha: that.captcha,
|
||
password: that.password,
|
||
spread: that.$Cache.get('spread')
|
||
})
|
||
.then((res) => {
|
||
that.$util.Tips({
|
||
title: res
|
||
});
|
||
that.formItem = 1;
|
||
})
|
||
.catch((res) => {
|
||
that.$util.Tips({
|
||
title: res
|
||
});
|
||
});
|
||
},
|
||
async code() {
|
||
let that = this;
|
||
if (!that.formData.phone)
|
||
return that.$util.Tips({
|
||
title: '请填写手机号码'
|
||
});
|
||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.formData.phone))
|
||
return that.$util.Tips({
|
||
title: '请输入正确的手机号码'
|
||
});
|
||
if (that.formItem == 2) that.type = 'register';
|
||
await registerVerify(that.formData.phone)
|
||
.then((res) => {
|
||
that.$util.Tips({ title: res.message });
|
||
that.sendCode();
|
||
})
|
||
.catch((err) => {
|
||
return that.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
},
|
||
navTap: function (index) {
|
||
this.current = index;
|
||
},
|
||
async submit() {
|
||
// let data = {
|
||
// code: '000000',
|
||
// msg: '操作成功',
|
||
// resp_time: '20241129145034',
|
||
// resp_data: {
|
||
// merchant_no: '8225850553300UN',
|
||
// channel_id: '95',
|
||
// out_order_no: '202411291106',
|
||
// order_create_time: '20241129145034',
|
||
// order_efficient_time: '20241201145034',
|
||
// pay_order_no: '24112911012001101011279773541',
|
||
// total_amount: '1',
|
||
// counter_url:
|
||
// 'https://pay.lakala.com/r/0000?pageStyle%3DV2%26token%3DCCSSDVvTh2uC7cMMVJLYg8gRw4thq1rVOYD88VZKXYGDvWebqiJgVEsQHIEwDgwQBLDF1zGzjQan-8nuhQ%3D%3D%26amount%3D1%26payOrderNo%3D24112911012001101011279773541%26mndf%3D1'
|
||
// }
|
||
// };
|
||
|
||
// wx.openEmbeddedMiniProgram({
|
||
// appId: 'wx889424d565967811',
|
||
// path: `payment-cashier/pages/checkout/index?source=WECHATMINI&counterUrl=${encodeURIComponent(data.resp_data.counter_url)}`,
|
||
// envVersion: 'release',
|
||
// // release: 正式版 trial: 体验版
|
||
// success(res) {
|
||
// // 打开成功
|
||
// }
|
||
// });
|
||
// return;
|
||
let that = this;
|
||
if (!that.formData.account)
|
||
return that.$util.Tips({
|
||
title: '请填写账号'
|
||
});
|
||
if (!that.formData.password)
|
||
return that.$util.Tips({
|
||
title: '请填写密码'
|
||
});
|
||
|
||
loginH5({
|
||
account: that.formData.account,
|
||
password: that.formData.password,
|
||
spread: that.$Cache.get('spread')
|
||
})
|
||
.then(({ data }) => {
|
||
this.$store.commit('LOGIN', {
|
||
token: data.token
|
||
});
|
||
|
||
// that.getUserInfo(data);
|
||
|
||
uni.login({
|
||
success({ code }) {
|
||
saveOpenIdByWxCode({ loginCode: code }).then((res) => {
|
||
that.getUserInfo(data);
|
||
});
|
||
}
|
||
});
|
||
})
|
||
.catch((e) => {
|
||
that.$util.Tips({
|
||
title: e
|
||
});
|
||
});
|
||
},
|
||
getUserInfo(data) {
|
||
this.$store.commit('SETUID', data.uid);
|
||
getUserInfo().then((res) => {
|
||
this.$store.commit('UPDATE_USERINFO', res.data);
|
||
let backUrl = this.$Cache.get(BACK_URL) || '/pages/index/index';
|
||
if (backUrl.indexOf('/pages/users/login/index') !== -1) {
|
||
backUrl = '/pages/index/index';
|
||
}
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
});
|
||
return;
|
||
console.log(69999);
|
||
console.log(backUrl);
|
||
uni.reLaunch({
|
||
url: backUrl
|
||
});
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #fff;
|
||
}
|
||
|
||
.appLogin {
|
||
margin-top: 60rpx;
|
||
|
||
.hds {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #b4b4b4;
|
||
|
||
.line {
|
||
width: 68rpx;
|
||
height: 1rpx;
|
||
background: #cccccc;
|
||
}
|
||
|
||
p {
|
||
margin: 0 20rpx;
|
||
}
|
||
}
|
||
|
||
.btn-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 30rpx;
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.apple-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 30rpx;
|
||
background: #000;
|
||
border-radius: 34rpx;
|
||
font-size: 40rpx;
|
||
|
||
.icon-s-pingguo {
|
||
color: #fff;
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 40rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.wx {
|
||
margin-right: 30rpx;
|
||
background-color: #61c64f;
|
||
}
|
||
|
||
.mima {
|
||
background-color: #28b3e9;
|
||
}
|
||
|
||
.yanzheng {
|
||
background-color: #f89c23;
|
||
}
|
||
}
|
||
}
|
||
|
||
.code img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.acea-row.row-middle {
|
||
// input {
|
||
// flex: 1;
|
||
// margin-left: 20rpx;
|
||
// }
|
||
}
|
||
|
||
.login-wrapper {
|
||
padding: 30rpx;
|
||
|
||
.shading {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
|
||
/* #ifdef APP-VUE */
|
||
margin-top: 50rpx;
|
||
/* #endif */
|
||
/* #ifndef APP-VUE */
|
||
|
||
margin-top: 200rpx;
|
||
/* #endif */
|
||
|
||
view {
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
.whiteBg {
|
||
margin-top: 100rpx;
|
||
|
||
.list {
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
|
||
.item {
|
||
border-bottom: 1px solid #f0f0f0;
|
||
background: #fff;
|
||
|
||
.row-middle {
|
||
position: relative;
|
||
padding: 16rpx 45rpx;
|
||
|
||
.texts {
|
||
// flex: 1;
|
||
margin-left: 20rpx;
|
||
font-size: 28rpx;
|
||
height: 80rpx;
|
||
// line-height: 80rpx;
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
}
|
||
|
||
// input {
|
||
// flex: 1;
|
||
// font-size: 28rpx;
|
||
// height: 80rpx;
|
||
// line-height: 80rpx;
|
||
// }
|
||
|
||
.code {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
color: $theme-color;
|
||
font-size: 26rpx;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.logon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 86rpx;
|
||
margin-top: 80rpx;
|
||
background-color: $theme-color;
|
||
border-radius: 120rpx;
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.tips {
|
||
margin: 30rpx;
|
||
text-align: center;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
</style>
|