BiKing/pages/login/index.vue

<template>
	<view>
		<!-- 头部 -->
		<headContent>
			<template #left>
				<view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
			</template>
		</headContent>

		<view class="page-content">
			<text class="login-title">登录</text>
			<text class="login-content">Hi, 欢迎来到币王</text>

			<tabList ref="tabListRef" :tabIndex.sync="tabIndexs" />
			<!-- <component :is="phoneLogin"/> -->

			<phoneLogin v-show="tabIndexs === 0" :formData="formData" :areaCode="areaCode" />

			<emailLogin v-show="tabIndexs === 1" :formData="formData" />

			<view class="form-btn" style="margin-top: 28rpx;" @click.stop="formSubmit">
				登录
			</view>
			<view class="form-hint">
				<text @click.stop="retrievePswd()">忘记密码?</text>
				<text class="form-hint-link"></text>
				<text @click.stop="register">立即注册</text>
			</view>
		</view>


		<load ref="loadRef" />
		<slider-verify ref="sliderVerifyRef" @slideImgSuccess="slideImgSuccess" />
	</view>
</template>

<script>
	import {
		reverseBack
	} from "@/utils/common.js"
	import {
		Api_userLogin
	} from "@/api/index.js"
	import phoneLogin from "./modules/phone.vue"
	import emailLogin from "./modules/email.vue"
	import mailboxLogin from "./modules/mailbox.vue"
	import tabList from "./modules/tab.vue"

	export default {
		name: 'login',
		components: {
			phoneLogin,
			emailLogin,
			mailboxLogin,
			tabList
		},
		data() {
			return {
				limina: false,
				tabIndexs: 0,
				areaCode: 86,
				formData: {
					user_string: '123456',
					password: 'Aa123456'
				}
			};
		},
		methods: {
			setAreaCode(e) {
				if (e) {
					this.areaCode = e.area_code;
				}
			},
			reversBackBtn() {
				reverseBack()
			},
			register() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			// 忘记密码
			retrievePswd() {
				uni.navigateTo({
					url: '/pages/login/retrieve-pswd'
				})
			},
			//  提交登录
			formSubmit() {
				this.$nextTick(() => {
					this.$refs.loadRef.open();
				})
				setTimeout(() => {
					this.$refs.loadRef.close();
					setTimeout(() => {
						this.$nextTick(() => {
							this.$refs.sliderVerifyRef.open()
						})
					}, 100)
				}, 1500)
			},
			slideImgSuccess() {
				if (this.limina) {
					return false
				};
				this.limina = true
				Api_userLogin(this.formData).then(res => {
					if (res) {
						this.$store.dispatch("app/setToken", res)
						reverseBack()
					}
				}).catch(err => {

				}).finally(() => {
					this.limina = false;
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	@import "~./common.scss"
</style>