QianNiaoUser/pagesT/public/login.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="login-bg">
			<view class="logo-view"><image :src="base_set_info.images" mode="aspectFit"></image></view>
		</view>
		<view class="login-main">
			<view class="input-view">
				<text class="ibonfont ibonshouji1"></text>
				<input type="number" v-model="user_info.mobile" class="input-input" placeholder="请输入手机号" placeholder-style="color:#999" />
			</view>
			<view class="input-view">
				<text class="ibonfont ibonyanzhengma"></text>
				<input
					type="mobile"
					v-model="user_info.password"
					placeholder="请输入密码"
					class="input-input"
					placeholder-style="color:#999"
					maxlength="20"
					password
					data-key="password"
					@input="inputChange"
				/>
			</view>
			<view class="button-view primary-bg" @click="toLogin">登录</view>
		</view>
		<view class="other-view" @click="smsLogin">
			<view class="other-tit">短信验证码登录</view>
			<view class="other-val">
				<text class="ibonfont ibonshouji"></text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
	data() {
		return {
			mobile: '',
			user_info: {
				mobile: '',
				password: ''
			},
			source: 5,
			logining: false,
			provinceCode: '',
			cityCode: '',
			districtCode: '',
			status: '',
			base_set_info: {}
		};
	},
	onLoad() {
		this.source = this.$common.source();
		this.base_set_info = this.$store.state.baseSet;
	},
	methods: {
		smsLogin() {
			this.goPage('/pagesT/public/wxLogin?loginType=2');
		},
		WXLogin() {
			uni.login({
				provider: 'weixin',
				success: loginRes => {
					console.log(loginRes.authResult);
				}
			});
		},
		//先获取个人资料
		 getCustomerInfo(token) {
			this.$u.api.getCustomerInfo().then(({data})=>{
				if (data.enableStatus === 4) {
					uni.clearStorageSync();
					uni.showModal({
						title: '账号已被禁用，您可以',
						content: '联系电话：' + (data.enterpriseMobile||''),
						confirmText: '联系客服',
						cancelText: '取消',
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: data.enterpriseMobile
								});
							} else {
							}
						}
					});
					return;
				}
				if (data.status === 3) {
					// uni.clearStorageSync();
					// 说明资料不完善，跳转到完善资料的页面
					uni.showModal({
						title: '审核未通过，请重新修改资料',
						content: data.auditFailReason || '',
						cancelText: '联系客服',
						confirmText: '修改资料',
						success: res => {
							if (res.confirm) {
								this.goPage('/pagesT/user/editUserInfo?token=' + token);
							} else if (res.cancel) {
								uni.makePhoneCall({
									phoneNumber: data.enterpriseMobile
								});
							}
						}
					});
				} else if (data.status === 1) {
					// uni.clearStorageSync();
					uni.showModal({
						title: '账号正在审核中，您可以',
						content: '联系电话：' + (data.enterpriseMobile||''),
						confirmText: '先去逛逛',
						cancelText: '联系客服',
						success: res => {
							if (res.confirm) {
								this.goPage('/pages/index/index', 'switchTab');
							} else {
								uni.makePhoneCall({
									phoneNumber: data.enterpriseMobile
								});
							}
						}
					});
				} else {
					// this.$emit('loginSuccess');
					this.goPage(`/pages/index/index`, 'switchTab');
				}
			});

		},
		...mapMutations(['login']),
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this[key] = e.detail.value;
		},
		navBack() {
			uni.navigateBack();
		},
		 toLogin() {
			if (!this.user_info.mobile) {
				uni.showToast({
					title: '请输入您的手机号',
					icon: 'none'
				});
				return false;
			}
			const re = /^1[23456789]\d{9}$/;
			if (!re.test(this.user_info.mobile)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
				return;
			}
			if (!this.user_info.password) {
				uni.showToast({
					title: '请输入您的密码',
					icon: 'none'
				});
				return false;
			}
			this.$u.api.login({ ...this.user_info, source: this.source }).then(data=>{
				const token = data.data.token;
				const expireTime = data.data.expireTime;
				uni.setStorageSync('token', token);
				uni.setStorageSync('expireTime', expireTime);
				// 更新登录状态
				this.$store.commit('commit_hasLogin', true);
				this.getCustomerInfo(token, expireTime);
			});
		}
	}
};
</script>

<style>
@import url('./common.css');
</style>
<style scoped lang="scss">
.other-view {
	position: fixed;
	left: 0;
	width: 100%;
	bottom: 300upx;
	text-align: center;
	color: #999;
	font-size: 24upx;
	font-weight: 300;
	margin-top: 100upx;
	.other-val {
		.ibonshouji {
			font-size: 60upx;
			color: $uni-color-warning;
			display: inline-block;
			margin: 30upx 0 20upx;
		}
		.ibonweixin {
			font-size: 60upx;
			color: #75bf65;
			display: inline-block;
			margin: 30upx 0 20upx;
		}
	}
	.other-tit {
		&::after {
			content: ' ';
			display: inline-block;
			width: 200upx;
			height: 1upx;
			background-color: #ddd;
			margin-left: 30upx;
			transform: translateY(-6upx);
		}
		&::before {
			content: ' ';
			display: inline-block;
			width: 200upx;
			height: 1upx;
			background-color: #ddd;
			margin-right: 30upx;
			transform: translateY(-6upx);
		}
	}
	.wx-icon {
		width: 64upx;
		height: 64upx;
		margin-top: 50upx;
	}
}
</style>