登录弹窗
This commit is contained in:
parent
ddb5369a26
commit
f0286d54cb
|
|
@ -1,369 +1,378 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<u-toast ref="uToast" />
|
<u-toast ref="uToast" />
|
||||||
<u-popup class="coreshop-bottom-popup-box" v-if="showLogin" v-model="showLogin" mode="center">
|
<u-popup class="coreshop-bottom-popup-box" v-if="showLogin" v-model="showLogin" mode="center">
|
||||||
<view class="radius coreshop-bg-white" @tap.stop style="background: none;overflow: visible;">
|
<view class="radius coreshop-bg-white" @tap.stop style="background: none;overflow: visible;">
|
||||||
<view class="modal-box">
|
<view class="modal-box">
|
||||||
<view class="detail">
|
<view class="detail">
|
||||||
<view class="shopDesc">
|
<view class="shopDesc">
|
||||||
<view class="coreshop-avatar sm round margin-left">
|
<view class="coreshop-avatar sm round margin-left">
|
||||||
<u-image width="48rpx" height="48rpx" :src="shopLogo"></u-image>
|
<u-image width="48rpx" height="48rpx" :src="shopLogo"></u-image>
|
||||||
</view>
|
</view>
|
||||||
<text class="shopName">
|
<text class="shopName">
|
||||||
{{ shopName || '用户登录' }}
|
用户登录
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="title3">请输入您的账号密码</view>
|
<view class="title3">请输入您的账号密码</view>
|
||||||
|
|
||||||
<!-- 登录表单 -->
|
<!-- 登录表单 -->
|
||||||
<view class="login-form">
|
<view class="login-form">
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<u-input v-model="loginForm.mobile" placeholder="请输入手机号" type="number" maxlength="11"
|
<u-input v-model="loginForm.mobile" placeholder="请输入手机号" type="number" maxlength="11"
|
||||||
:clearable="true" @input="onInputChange" />
|
:clearable="true" @input="onInputChange" />
|
||||||
</view>
|
</view>
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<u-input v-model="loginForm.password" placeholder="请输入密码" type="password"
|
<u-input v-model="loginForm.password" placeholder="请输入密码" type="password"
|
||||||
:clearable="true" @input="onInputChange" />
|
:clearable="true" @input="onInputChange" />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!--服务协议-->
|
<!--服务协议-->
|
||||||
<view class="u-margin-top-30 u-margin-bottom-30 agreement-checked-view">
|
<view class="u-margin-top-30 u-margin-bottom-30 agreement-checked-view">
|
||||||
<u-checkbox v-model="agreement" @change="checkboxChange" size="30"
|
<u-checkbox v-model="agreement" @change="checkboxChange" size="30"
|
||||||
active-color="#19be6b"></u-checkbox>
|
active-color="#19be6b"></u-checkbox>
|
||||||
<view class="coreshop-text-black-view">
|
<view class="coreshop-text-black-view">
|
||||||
<text class="coreshop-text-black">同意</text>
|
<text class="coreshop-text-black">同意</text>
|
||||||
<text class="text-blue" @tap="goUserAgreementPage">《服务协议》</text>
|
<text class="text-blue" @tap="goUserAgreementPage">《服务协议》</text>
|
||||||
<text class="coreshop-text-black">与</text>
|
<text class="coreshop-text-black">与</text>
|
||||||
<text class="text-blue" @tap="goUserPrivacyPolicy">《隐私协议》</text>
|
<text class="text-blue" @tap="goUserPrivacyPolicy">《隐私协议》</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="u-flex u-row-between u-padding-left-30 u-padding-right-30">
|
<view class="u-flex u-row-between u-padding-left-30 u-padding-right-30">
|
||||||
<u-button @click="closeAuth">取消</u-button>
|
<u-button @click="closeAuth">取消</u-button>
|
||||||
<u-button type="success" :disabled="isDisabled" @click="handleLogin"
|
<u-button type="success" :disabled="isDisabled" @click="handleLogin"
|
||||||
v-if="isDisabled">登录</u-button>
|
v-if="isDisabled">登录</u-button>
|
||||||
<u-button type="success" @click="handleLogin" v-else>登录</u-button>
|
<u-button type="success" @click="handleLogin" v-else>登录</u-button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
* 登录提示页
|
* 登录提示页
|
||||||
* @property {Boolean} value=showLoginTip - 由v-model控制显示隐藏。
|
* @property {Boolean} value=showLoginTip - 由v-model控制显示隐藏。
|
||||||
* @property {Boolean} forceOauth - 小程序端特制的全屏登录提示。
|
* @property {Boolean} forceOauth - 小程序端特制的全屏登录提示。
|
||||||
*/
|
*/
|
||||||
import { mapMutations, mapActions, mapState } from 'vuex';
|
import {
|
||||||
import { goods, articles, commonUse, tools } from '@/common/mixins/mixinsHelper.js'
|
mapMutations,
|
||||||
export default {
|
mapActions,
|
||||||
mixins: [goods, articles, commonUse, tools],
|
mapState
|
||||||
name: 'coreshopLoginModal',
|
} from 'vuex';
|
||||||
components: {},
|
import {
|
||||||
data() {
|
goods,
|
||||||
return {
|
articles,
|
||||||
agreement: false,
|
commonUse,
|
||||||
isDisabled: true,
|
tools
|
||||||
loginForm: {
|
} from '@/common/mixins/mixinsHelper.js'
|
||||||
mobile: '',
|
export default {
|
||||||
password: ''
|
mixins: [goods, articles, commonUse, tools],
|
||||||
}
|
name: 'coreshopLoginModal',
|
||||||
};
|
components: {},
|
||||||
},
|
data() {
|
||||||
props: {
|
return {
|
||||||
value: {},
|
agreement: false,
|
||||||
modalType: {
|
isDisabled: true,
|
||||||
type: String,
|
loginForm: {
|
||||||
default: ''
|
mobile: '',
|
||||||
}
|
password: ''
|
||||||
},
|
}
|
||||||
computed: {
|
};
|
||||||
...mapState({
|
},
|
||||||
showLoginTip: state => state.showLoginTip,
|
props: {
|
||||||
sessionAuthId: state => state.sessionAuthId,
|
value: {},
|
||||||
hasLogin: state => state.hasLogin,
|
modalType: {
|
||||||
}),
|
type: String,
|
||||||
shopLogo() {
|
default: ''
|
||||||
return this.$store.state.config.shopLogo
|
}
|
||||||
},
|
},
|
||||||
shopName() {
|
computed: {
|
||||||
return this.$store.state.config.shopName;
|
...mapState({
|
||||||
},
|
showLoginTip: state => state.showLoginTip,
|
||||||
showLogin: {
|
sessionAuthId: state => state.sessionAuthId,
|
||||||
get() {
|
hasLogin: state => state.hasLogin,
|
||||||
return this.showLoginTip;
|
}),
|
||||||
},
|
shopLogo() {
|
||||||
set(val) {
|
return this.$store.state.config.shopLogo
|
||||||
this.$store.commit('showLoginTip', val);
|
},
|
||||||
}
|
shopName() {
|
||||||
},
|
return this.$store.state.config.shopName;
|
||||||
sessionAuthIdTool: {
|
},
|
||||||
get() {
|
showLogin: {
|
||||||
return this.sessionAuthId;
|
get() {
|
||||||
},
|
return this.showLoginTip;
|
||||||
set(val) {
|
},
|
||||||
this.$store.commit('sessionAuthId', val);
|
set(val) {
|
||||||
}
|
this.$store.commit('showLoginTip', val);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
sessionAuthIdTool: {
|
||||||
// 初始化时清空表单
|
get() {
|
||||||
this.loginForm = {
|
return this.sessionAuthId;
|
||||||
mobile: '',
|
},
|
||||||
password: ''
|
set(val) {
|
||||||
};
|
this.$store.commit('sessionAuthId', val);
|
||||||
},
|
}
|
||||||
//watch: {
|
}
|
||||||
// 'hasLogin': {
|
},
|
||||||
// handler(newVal) {
|
mounted() {
|
||||||
// console.log(newVal);
|
// 初始化时清空表单
|
||||||
// if (newVal == false) {
|
this.loginForm = {
|
||||||
// console.log("watch监听");
|
mobile: '',
|
||||||
// this.doToken();
|
password: ''
|
||||||
// }
|
};
|
||||||
// },
|
},
|
||||||
// deep: true,
|
//watch: {
|
||||||
// immediate: true,
|
// 'hasLogin': {
|
||||||
// }
|
// handler(newVal) {
|
||||||
//},
|
// console.log(newVal);
|
||||||
methods: {
|
// if (newVal == false) {
|
||||||
doToken() {
|
// console.log("watch监听");
|
||||||
const _this = this
|
// this.doToken();
|
||||||
console.log("重新获取用户数据");
|
// }
|
||||||
_this.getCode(function (code) {
|
// },
|
||||||
var data = {
|
// deep: true,
|
||||||
code: code
|
// immediate: true,
|
||||||
}
|
// }
|
||||||
_this.$u.api.onLogin(data).then(res => {
|
//},
|
||||||
if (res.status) {
|
methods: {
|
||||||
if (res.data.auth) {
|
doToken() {
|
||||||
_this.$db.set('userToken', res.data.auth.token)
|
const _this = this
|
||||||
_this.$store.commit('hasLogin', true);
|
console.log("重新获取用户数据");
|
||||||
}
|
_this.getCode(function(code) {
|
||||||
if (res.data.user) {
|
var data = {
|
||||||
_this.$store.commit('userInfo', res.data.user);
|
code: code
|
||||||
}
|
}
|
||||||
_this.sessionAuthIdTool = res.otherData;
|
_this.$u.api.onLogin(data).then(res => {
|
||||||
console.log("成功后获取sessionAuthIdTool：" + _this.sessionAuthIdTool);
|
if (res.status) {
|
||||||
} else {
|
if (res.data.auth) {
|
||||||
_this.sessionAuthIdTool = res.otherData;
|
_this.$db.set('userToken', res.data.auth.token)
|
||||||
console.log("失败后获取sessionAuthIdTool：" + _this.sessionAuthIdTool);
|
_this.$store.commit('hasLogin', true);
|
||||||
}
|
}
|
||||||
})
|
if (res.data.user) {
|
||||||
})
|
_this.$store.commit('userInfo', res.data.user);
|
||||||
},
|
}
|
||||||
// 勾选版权协议
|
_this.sessionAuthIdTool = res.otherData;
|
||||||
checkboxChange(e) {
|
console.log("成功后获取sessionAuthIdTool：" + _this.sessionAuthIdTool);
|
||||||
this.agreement = e.value;
|
} else {
|
||||||
this.checkFormValid();
|
_this.sessionAuthIdTool = res.otherData;
|
||||||
},
|
console.log("失败后获取sessionAuthIdTool：" + _this.sessionAuthIdTool);
|
||||||
|
}
|
||||||
// 输入框内容变化时触发
|
})
|
||||||
onInputChange() {
|
})
|
||||||
this.checkFormValid();
|
},
|
||||||
},
|
// 勾选版权协议
|
||||||
|
checkboxChange(e) {
|
||||||
|
this.agreement = e.value;
|
||||||
|
this.checkFormValid();
|
||||||
|
},
|
||||||
|
|
||||||
// 检查表单是否有效
|
// 输入框内容变化时触发
|
||||||
checkFormValid() {
|
onInputChange() {
|
||||||
const isValid = this.agreement &&
|
this.checkFormValid();
|
||||||
this.loginForm.mobile.length === 11 &&
|
},
|
||||||
this.loginForm.password.length >= 6;
|
|
||||||
this.isDisabled = !isValid;
|
|
||||||
return isValid;
|
|
||||||
},
|
|
||||||
// 隐藏登录弹窗
|
|
||||||
hideModal() {
|
|
||||||
this.showLogin = false;
|
|
||||||
},
|
|
||||||
// 取消登录
|
|
||||||
closeAuth() {
|
|
||||||
this.showLogin = false;
|
|
||||||
this.resetForm();
|
|
||||||
},
|
|
||||||
|
|
||||||
// 重置表单
|
// 检查表单是否有效
|
||||||
resetForm() {
|
checkFormValid() {
|
||||||
this.loginForm = {
|
const isValid = this.agreement &&
|
||||||
mobile: '',
|
this.loginForm.mobile.length === 11 &&
|
||||||
password: ''
|
this.loginForm.password.length >= 6;
|
||||||
};
|
this.isDisabled = !isValid;
|
||||||
this.agreement = false;
|
return isValid;
|
||||||
this.isDisabled = true;
|
},
|
||||||
},
|
// 隐藏登录弹窗
|
||||||
|
hideModal() {
|
||||||
|
this.showLogin = false;
|
||||||
|
},
|
||||||
|
// 取消登录
|
||||||
|
closeAuth() {
|
||||||
|
this.showLogin = false;
|
||||||
|
this.resetForm();
|
||||||
|
},
|
||||||
|
|
||||||
// 处理登录
|
// 重置表单
|
||||||
handleLogin() {
|
resetForm() {
|
||||||
if (!this.checkFormValid()) {
|
this.loginForm = {
|
||||||
this.$u.toast('请完善登录信息');
|
mobile: '',
|
||||||
return;
|
password: ''
|
||||||
}
|
};
|
||||||
|
this.agreement = false;
|
||||||
|
this.isDisabled = true;
|
||||||
|
},
|
||||||
|
|
||||||
// 验证手机号格式
|
// 处理登录
|
||||||
const mobileReg = /^1[3-9]\d{9}$/;
|
handleLogin() {
|
||||||
if (!mobileReg.test(this.loginForm.mobile)) {
|
if (!this.checkFormValid()) {
|
||||||
this.$u.toast('请输入正确的手机号');
|
this.$u.toast('请完善登录信息');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.doPasswordLogin();
|
// 验证手机号格式
|
||||||
},
|
const mobileReg = /^1[3-9]\d{9}$/;
|
||||||
// 密码登录
|
if (!mobileReg.test(this.loginForm.mobile)) {
|
||||||
doPasswordLogin() {
|
this.$u.toast('请输入正确的手机号');
|
||||||
const _this = this;
|
return;
|
||||||
const data = {
|
}
|
||||||
mobile: this.loginForm.mobile,
|
|
||||||
password: this.loginForm.password
|
|
||||||
};
|
|
||||||
|
|
||||||
// // 显示加载状态
|
this.doPasswordLogin();
|
||||||
// this.$u.loading.show({
|
},
|
||||||
// title: '登录中...'
|
// 密码登录
|
||||||
// });
|
doPasswordLogin() {
|
||||||
|
const _this = this;
|
||||||
|
const data = {
|
||||||
|
mobile: this.loginForm.mobile,
|
||||||
|
password: this.loginForm.password
|
||||||
|
};
|
||||||
|
|
||||||
this.$u.api.loginByPassword(data).then(res => {
|
// // 显示加载状态
|
||||||
// this.$u.loading.hide();
|
// this.$u.loading.show({
|
||||||
console.log('登录结果:', res);
|
// title: '登录中...'
|
||||||
|
// });
|
||||||
|
|
||||||
if (res.status) {
|
this.$u.api.loginByPassword(data).then(res => {
|
||||||
if (res.data && res.data.token) {
|
// this.$u.loading.hide();
|
||||||
// 登录成功，保存token和用户信息
|
console.log('登录结果:', res);
|
||||||
_this.$db.set('userToken', res.data.token);
|
|
||||||
_this.$store.commit('hasLogin', true);
|
|
||||||
|
|
||||||
if (res.data.user) {
|
if (res.status) {
|
||||||
_this.$store.commit('userInfo', res.data.user);
|
if (res.data && res.data.token) {
|
||||||
}
|
// 登录成功，保存token和用户信息
|
||||||
|
_this.$db.set('userToken', res.data.token);
|
||||||
|
_this.$store.commit('hasLogin', true);
|
||||||
|
|
||||||
_this.showLogin = false;
|
if (res.data.user) {
|
||||||
_this.resetForm();
|
_this.$store.commit('userInfo', res.data.user);
|
||||||
_this.$refs.uToast.show({
|
}
|
||||||
title: '登录成功',
|
|
||||||
type: 'success'
|
_this.showLogin = false;
|
||||||
});
|
_this.resetForm();
|
||||||
} else {
|
_this.$refs.uToast.show({
|
||||||
_this.$u.toast('登录失败，请检查账号密码');
|
title: '登录成功',
|
||||||
}
|
type: 'success'
|
||||||
} else {
|
});
|
||||||
_this.$u.toast(res.msg || '登录失败，请重试');
|
} else {
|
||||||
}
|
_this.$u.toast('登录失败，请检查账号密码');
|
||||||
}).catch(err => {
|
}
|
||||||
this.$u.loading.hide();
|
} else {
|
||||||
console.error('登录错误:', err);
|
_this.$u.toast(res.msg || '登录失败，请重试');
|
||||||
_this.$u.toast('网络错误，请重试');
|
}
|
||||||
});
|
}).catch(err => {
|
||||||
}
|
this.$u.loading.hide();
|
||||||
}
|
console.error('登录错误:', err);
|
||||||
};
|
_this.$u.toast('网络错误，请重试');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.modal-box {
|
.modal-box {
|
||||||
width: 610rpx;
|
width: 610rpx;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
z-index: 11111;
|
z-index: 11111;
|
||||||
|
|
||||||
.head-bg {
|
.head-bg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 210rpx;
|
height: 210rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail {
|
.detail {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.title1 {
|
.title1 {
|
||||||
color: #46351b;
|
color: #46351b;
|
||||||
font-size: 35rpx;
|
font-size: 35rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title2 {
|
.title2 {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #999;
|
color: #999;
|
||||||
padding-top: 20rpx;
|
padding-top: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title3 {
|
.title3 {
|
||||||
color: #46351b;
|
color: #46351b;
|
||||||
font-size: 35rpx;
|
font-size: 35rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 35rpx;
|
line-height: 35rpx;
|
||||||
padding: 30rpx 0 30rpx 30rpx;
|
padding: 30rpx 0 30rpx 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
line-height: 40rpx;
|
line-height: 40rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
background: #f7f8fa;
|
background: #f7f8fa;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-avatar {
|
.user-avatar {
|
||||||
width: 160rpx;
|
width: 160rpx;
|
||||||
height: 160rpx;
|
height: 160rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-bottom: 40rpx;
|
margin-bottom: 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-name {
|
.user-name {
|
||||||
font-size: 35rpx;
|
font-size: 35rpx;
|
||||||
font-family: PingFang SC;
|
font-family: PingFang SC;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #845708;
|
color: #845708;
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.shopDesc {
|
.shopDesc {
|
||||||
padding: 30rpx 0rpx 0rpx 0rpx;
|
padding: 30rpx 0rpx 0rpx 0rpx;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
.shopName {
|
.shopName {
|
||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
line-height: 40rpx;
|
line-height: 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.get {
|
.get {
|
||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
line-height: 40rpx;
|
line-height: 40rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.agreement-checked-view {
|
.agreement-checked-view {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 18.18rpx 0rpx 18.18rpx 30rpx;
|
padding: 18.18rpx 0rpx 18.18rpx 30rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 10rpx 0;
|
margin: 10rpx 0;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
|
|
||||||
.coreshop-checked {
|
.coreshop-checked {
|
||||||
transform: scale(0.7);
|
transform: scale(0.7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
padding: 20rpx 30rpx;
|
padding: 20rpx 30rpx;
|
||||||
|
|
||||||
.form-item {
|
.form-item {
|
||||||
margin-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user