mudi-app/pages/index/login.vue

<template>
	<view class="login">
		<view class="logo">
			<image src="../../static/logo.png" mode="scaleToFill"></image>
			<view class="title">
				大德通
			</view>
		</view>
		<u-form :model="form" ref="uForm" label-width="160" class="form">
			<u-form-item prop="mobile" :class="{focusCode: iscFocusMobile, error: isMobileError}">
				<u-input @blur="inputBlur('mobile')" @focus="inputFocus('mobile')" v-model="form.mobile"
					placeholder="请输入手机号" />
			</u-form-item>

			<u-form-item :leftIconStyle="leftIconStyle" :class="{focusCode: iscFocusPsw, error: isPswError}" class="psw"
				:label-position="labelPosition" label-width="150">
				<u-input :border="false" v-if="showPsw" @blur="inputBlur('psw')" @focus="inputFocus('psw')"
					:password-icon="false" :clearable="false" v-model="form.password" placeholder="请输入密码"></u-input>
				<u-input :border="false" type="password" @blur="inputBlur('psw')" @focus="inputFocus('psw')" v-else
					:password-icon="false" :clearable="false" v-model="form.password" placeholder="请输入密码"></u-input>
				<u-icon name="eye-off" size="36" color="#dedede" v-if="!showPsw" @click="showPsw = true"></u-icon>
				<u-icon name="eye" size="36" v-else @click="showPsw = false"></u-icon>
			</u-form-item>
		</u-form>
		<view class="forgot">
			<text @click="toForgot">忘记密码</text>
		</view>
		<view class="submit" @click="submit" :class="{active: isActive}">
			登录
		</view>
		<view class="creation">
			没有账号?<text @click="toCreation" class="link">去创建</text>
		</view>
		<!-- <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code> -->
	</view>
</template>

<script>
	import rulesMixin from '../../config/rulesMixin.js'

	export default {
		mixins: [rulesMixin],
		data() {
			return {
				form: {
					mobile: '13026820913',
					password: 'qq1234'
				},
				show: false,
				phoneHome: '86',
				leftIconStyle: {
					color: '#888',
					fontSize: '36rpx'
				},
				labelPosition: 'left',
				showPsw: false,
				codeTips: '',
			}
		},
		onLoad() {
			console.log(this.user)
			if (this.user.ticket) {
				uni.switchTab({
					url: '../mian/mian'
				})
			}
		},
		methods: {
			setTabBar(e) {
				this.$u.vuex('vuex_tabBar[1].count', 99)
				console.log(this.$store.state)
			},
			confirm(item) {
				this.phoneHome = item[0].value
				console.log(item)
			},
			toForgot() {
				console.log('---')
				uni.navigateTo({
					url: './forgot'
				})
			},
			toCreation() {
				uni.navigateTo({
					url: './reg'
				})
			},
			async submit() {
				let mobile = this.form.mobile;
				if (!this.$u.test.mobile(mobile)) {
					this.$u.toast('手机号有误');
					return;
				}
				let res = await this.$u.api.user.login(this.form)
				console.log(res, 99999)
				this.$u.vuex('user.ticket', res.data.ticket)
				this.$u.toast('登录成功');
				uni.switchTab({
					url: '/pages/mian/mian'
				})
			}
		},
		computed: {
			isActive() {
				return this.form.phone !== '' && this.form.password !== ''
			}
		},
		onReady() {
			// this.$refs.uForm.setRules(this.rulus);
		},
	}
</script>

<style lang="scss">
	.login {
		padding: 0 40rpx;

		.logo {
			display: flex;
			align-items: center;
			padding-top: 80rpx;

			uni-image {
				width: 96rpx;
				height: 96rpx;
				margin-right: 24rpx;
			}

			.title {
				font-size: 48rpx;
			}
		}

		.form {
			margin: 0 auto;
			margin-top: 82rpx;
			width: 654rpx;

			.text {
				padding-left: 24rpx;
				font-size: 28rpx;
				color: #000000;
				border-left: 1px solid #EDEFF2;
			}

			.item {
				text-align: center;

			}

			/deep/ .u-form-item__message {
				padding-left: 0 !important;
			}

		}

		.forgot {
			text-align: right;
			font-size: 28rpx;
			margin-top: 24rpx;
			color: #9d9d9d;
			margin-bottom: 116rpx;
		}

		.submit {
			font-size: 32rpx;
			color: #FFFFFF;
			background-color: #dfe0e5;
			width: 654rpx;
			height: 100rpx;
			background: #DFE0E5;
			border-radius: 16rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.active {
			background-color: #e67d29;
		}

		.creation {
			margin-top: 48rpx;
			color: #d3d3d3;
			font-size: 28rpx;
			text-align: center;

			.link {
				color: #708bc5;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>