material_applet/pages/login/index.vue

<template>
	<view class="content">
		<view class="one">
			<text class="text">欢迎登录耗材小程序</text>
			<view class="one_1">
				<uni-forms ref="valiForm" :rules="rules" :modelValue="form">
					<uni-forms-item label="电话号" required name="tel">
						<uni-easyinput v-model="form.tel" placeholder="请输入电话号" />
					</uni-forms-item>
					<uni-forms-item label="密码" required name="password">
						<uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
				<button class="button" type="primary" @click="submit('valiForm')">登录</button>
				<view class="other">
					<view class="other_1" @tap="toLogin">
						<text class="iconfont icon-weixin"></text>
						<text>直接使用微信登录</text>
					</view>
					<view @tap="toRegister">注册</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				// 校验规则
				rules: {
					tel: {
						rules: [{
							required: true,
							errorMessage: '电话号不能为空'
						}, {
							format: 'number',
							errorMessage: '电话号只能输入数字'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					}
				},
			}
		},
		onLoad() {

		},
		methods: {
			// 登录
			submit(ref) {
				const that = this;
				that.$refs[ref].validate().then(async form => {
					form.tel = form.tel.toString()
					const res = await that.$api(`/User/login`, 'POST', form);
					if (res.errcode == '0') {
						const token = await that.$token(`/tool/token`, 'GET', {
							token: res.data
						});
						if (token.errcode == '0') {
							uni.setStorage({
								key: 'token',
								data: token.data,
								success: function(res) {
									let url = `/pages/home/index`;
									uni.reLaunch({
										url
									})
								},
								fail: function(err) {
									console.log(err);
								}
							})
						}
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				})
			},
			// 微信登录
			toLogin() {
				const that = this;
				uni.getStorage({
					key: 'openid',
					success: async function(res) {
						const aee = await that.$api(`/User/openid`, 'GET', {
							openid: res.data
						});
						if (aee.errcode == '0') {
							const token = await that.$token(`/tool/token`, 'GET', {
								token: aee.data
							});
							if (token.errcode == '0') {
								uni.setStorage({
									key: 'token',
									data: token.data,
									success: function(res) {
										let url = `/pages/home/index`;
										uni.reLaunch({
											url
										})
									},
									fail: function(err) {
										console.log(err);
									}
								})
							}
						} else {
							uni.showToast({
								title: aee.errmsg + ` 请注册账号！`,
								icon: 'none'
							})
						}
					},
					fail: async function(err) {
						uni.showToast({
							title: err,
							icon: 'none'
						})
					}
				})
			},
			// 注册
			toRegister() {
				let url = `/pages/register/index`;
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: url('../../static/login.jpeg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;

		.one {
			text-align: center;
			background-color: var(--mainColor);
			padding: 5vw 12vw;

			.text {
				padding: 5px;
				font-family: "宋体";
				font-size: var(--font16Size);
				font-weight: bold;
				border-bottom: 1px solid var(--f3CColor);
			}

			.one_1 {
				margin: 5vw 0 0 0;

				.button {
					background-color: var(--f3CColor);
					color: var(--mainColor);
					font-size: var(--font14Size);
				}

				.other {
					display: flex;
					justify-content: space-around;
					padding: 2vw 0 0 0;
					font-size: var(--font13Size);
					color: var(--fFB1Color);

					.other_1 {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>