xunjian_app/pages/login/login/index.vue

<template>
	<view class=" login-confg u-flex f-d-c ">
		<view class="logo-back u-flex u-row-center u-col-bottom">
			<view class="logo"><u-image width="102" height="102" :src="icon.homelogo"></u-image></view>
		</view>
		<view style="margin-top: 208rpx;" class="u-flex u-d-c">
			<view class="loin-from u-p-l-26 u-p-r-26 ">
				<u-form :error-type="['toast']" :model="form" ref="uForm">
					<u-form-item :left-icon="icon.phone" prop="telephone" :left-icon-style="{ width: '33rpx', height: '33rpx', position: 'relative', top: '8rpx', marginRight: '66rpx' }"><u-input placeholder="请输入账号" v-model="form.telephone" /></u-form-item>
					<u-form-item :left-icon="icon.pwd" prop="name" :left-icon-style="{ width: '33rpx', height: '33rpx', position: 'relative', top: '8rpx', marginRight: '66rpx' }"><u-input placeholder="请输入密码" type="password" v-model="form.password" /></u-form-item>
					<u-form-item prop="identify">
						<view style="display: flex; align-items: center; justify-content: space-between;">
							<u-input style="flex1" placeholder="请输入验证码" v-model="form.identify" />
							<image :src="codeSrc" style="width: 200rpx; height:60rpx;" @click="getCode()"></image>
						</view>
					</u-form-item>
				</u-form>

				<!-- <navigator hover-class="none"  url="../forgetpwd/index" class="no-pwd u-m-t-14 u-p-b-40 no-pwd">忘记密码?</navigator> -->
				<button class="login_btn u-m-t-40 u-" @click="submit">登录</button>
			</view>
			<!-- 	<view class="u-m-40 u-p-t-40"  >
				<u-divider bg-color="rgba(0,0,0,0)" fontSize="28rpx">微信登录</u-divider>
			</view> -->

			<!-- 	<view class="u-flex wxlogoin" @click="wechatlogin">
				<view class="logoicon"><u-icon  name="weixin-fill" color="#ffffff" size="60"></u-icon></view>
				
			</view> -->
		</view>
		<u-toast ref="lToast"></u-toast>
	</view>
</template>

<script>
import md5 from 'js-md5';
import phone from '@/static/img/phone.png';
import password from '@/static/img/password.png';
import homelogo from '@/static/img/homelogo.png';
import { login, code } from '@/api/index.js';
export default {
	data() {
		return {
			codeSrc: '',
			code: '', // 正确的验证码
			form: {
				telephone: undefined,
				password: undefined,
				identify: undefined
			},
			rules: {
				telephone: [
					{
						required: true,
						message: '请输入账号',
						trigger: ['change',  'blur']
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur']
					}
				],
				identify: [
					{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur']
					}
				]
			},
			icon: {
				phone: phone,
				pwd: password,
				homelogo: homelogo
			}
		};
	},
	mounted() {
		this.getCode();
	},
	methods: {
		getCode() {
			code().then(reponse => {
				console.log(reponse);
				const { code, message, data } = reponse;
				if (code == 200) {
					this.codeSrc = data.image;
					this.code = data.code;
				} else {
					this.$u.toast(message);
				}
			});
		},
		wechatlogin() {
			uni.navigateTo({
				url: '../../writeoff/register/register'
			});
		},
		async submit() {
			let { telephone, password } = this.form;
			let username = String(telephone);
			password = md5(`${password}`);
			password = String(password);
			this.$refs.uForm.validate((valid, e) => {
				if (valid) {
					if (this.form.identify == this.code) {
						login({
							username,
							password,
							code: this.form.identify
						}).then(reponse => {
							const { code, message, data } = reponse;
							if (code == 200) {
								uni.setStorageSync('token', data.token);
								uni.setStorageSync('user', data);
								uni.switchTab({
									url: '../../../pages/onsitpection/home/index'
								});
							} else {
								this.$u.toast(message);
							}
						});
					} else {
						this.$u.toast('验证码错误');
					}
				} else {
					console.log('验证失败', valid, e);
				}
			});
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
}

.login-confg {
	width: 100%;
	height: 100%;

	.logo-back {
		width: 100%;
		height: 444rpx;
		position: relative;
		z-index: -1;

		&::after {
			content: '';
			width: 140%;
			height: 444rpx;
			position: absolute;
			left: -20%;
			top: 0;
			z-index: -1;
			border-radius: 0 0 45% 45%;
			background: #1496f1;
		}

		.logo {
			width: 168rpx;
			height: 168rpx;
			background: #ffffff;
			box-shadow: 0px 13rpx 46rpx 0rpx rgba(120, 103, 255, 0.16);
			border-radius: 32rpx;
			position: relative;
			top: 94rpx;
			padding: 34rpx;
		}
	}
}

.loin-from {
	width: 610rpx;
	color: rgba(80, 80, 80, 1);
	background-color: rgba(255, 255, 255, 1);
	font-size: 14px;
	text-align: center;

	.u-form-item {
		padding: 10rpx !important;
	}

	.no-pwd {
		font-size: 28rpx;
		font-weight: 400;
		color: #4a8bff;
	}
}

.u-d-c {
	flex-direction: column;
}

.login_btn {
	width: 100%;
	height: 79rpx;
	background: #4a8bff;
	box-shadow: 0px 17rpx 40rpx 0px rgba(123, 102, 255, 0.22);
	border-radius: 40rpx;
	font-size: 30rpx;
	font-family: inpinheiti;
	font-weight: 400;
	color: #ffffff;
	line-height: 79rpx;
}

.no-pwd {
	color: rgba(166, 166, 166, 1);
	font-size: 28rpx;
	text-align: left;
}

.wxlogoin {
	.logoicon {
		width: 83rpx;
		height: 83rpx;
		background: #04be02;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>