jobslink-user-clent/pages/login/login.vue

<template>
	<login-template title="账号登录">
		<!--  #ifdef  H5 -->
		<!-- <view class="login-go-home" @click="goHome">
			<image class="login-go-home-image" src="@/static/img/home.svg"></image>
		</view> -->
		<!--  #endif -->
		<jl-input type="number" v-model="phone" placeholder="请输入手机号" @confirm="login"></jl-input>
		<jl-input type="text" v-model="password" placeholder="请输入登录密码" @confirm="login" showPassword clearable></jl-input>
		<!-- <code-input ref="code" v-model="code" :getCode="getCaptcha" @key-change="keyChange" @confirm="login"></code-input> -->
		<view v-if="loading" class="btn nocheck" loading="true">登录中</view>
		<view v-else-if="validate" class="btn" @click="login">立即登录</view>
		<view v-else class="btn nocheck">立即登录</view>
		<view class="changeLogintype">
			<view class="" @click="goReg">手机注册</view>
			<view class="" @click="goForget">忘记密码</view>
		</view>
	</login-template>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getCaptcha
	} from '@/api/user.js'
	import {
		isMobile
	} from '@/untils/validate.js'
	import website from '@/config/website.js'
	import codeInput from './codeInput.vue'
	import jlInput from '@/components/jl-input/main.vue'
	import loginTemplate from './template.vue'

	export default {
		components: {
			jlInput,
			codeInput,
			loginTemplate
		},
		data() {
			return {
				phone: '',
				password: '',
				code: '1111',
				key: '',
				loading: false
			}
		},
		created() {
			if (this.userInfo.token) {
				uni.navigateBack()
			}
		},
		onShow() {
			// #ifdef  MP-WEIXIN
			wx.hideHomeButton();
			//#endif
			this.password = ''
			if (this.$store.state.user.token) {
				this.$store.dispatch('LogOut').then(() => {
					this.$store.dispatch('clearAuthState')
					this.$store.dispatch('endRefreshNewsTimer')
				})
			}
		},
		methods: {
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			login(e) {
				if (this.validate) {
					if (!this.userChecked) {
						uni.showToast({
							title:'请先阅读并同意《服务及隐私协议》',
							icon:'none',
						})
					} else {
						var that = this
						this.loading = true
						this.$store.dispatch("LoginByUsername", {
							username: this.phone,
							password: this.password,
							key: this.key,
							code: this.code,
							type: "account",
							tenantId: website.tenantId
						}).then((resp) => {
							this.$store.dispatch('refreshAuthState').then(() => {
								that.loading = false
								var auth = this.auth
								if (!auth.bankCardState) {
									that.goSign(0)
								} else {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							})
						}).catch((err) => {
							this.loading = false
							// this.$refs.code.refushCode()
						});
					}
				}
			},
			// 步骤
			goSign(active) {
				uni.navigateTo({
					url: `/pages/projectInfo/signContract?active=${active}`
				})
			},
			keyChange(val) {
				this.key = val
			},
			goReg() {
				uni.navigateTo({
					url: './reg'
				})
			},
			goForget() {
				uni.navigateTo({
					url: './forgetPwd'
				})
			},
			getCaptcha
		},
		computed: {
			...mapGetters(['userInfo', 'auth', 'autograph', 'userChecked']),
			validate() {
				return isMobile(this.phone) && this.password && this.code
			}
		}
	}
</script>

<style>
	@import "./css.css";

	/*  #ifdef  H5 */
	.login-go-home {
		position: absolute;
		top: 10rpx;
		left: 0;
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		background: rgb(217, 217, 217);
		border: 1px solid rgb(198, 198, 198);
	}

	.login-go-home-image {
		width: 40rpx;
		height: 40rpx;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/* #endif */
</style>