Jinan_app/pages/login/login.vue

<template>
	<view class="page">
		<view class="top">
			<img src="@/static/login/banner.jpg" alt="">
			<view class="tops">

			</view>
		</view>

		<view class="items">
			<view class="title">
				<img mode="widthFix" src="@/static/login/title.png" alt="">
				<view class="text">
					欢迎登录防消一体化综合治理平台
				</view>
			</view>
			<view class="item">
				<view class="label">
					账号/手机号
				</view>
				<view class="input">
					<input v-model="form.name" type="text" placeholder="请输入账号/手机号">
				</view>
			</view>
			<view class="item">
				<view class="label">
					密码
				</view>
				<view class="input">
					<input v-model="form.password" type="password" placeholder="请输入密码">
				</view>
			</view>
			<view class="item">
				<label>
					<checkbox :value="form.auto" /><text>自动登录</text>
				</label>
			</view>
			<view class="button">
				<button @tap="getUserInfo()">登录</button>
				<!-- <button @tap="getToken()">登录</button> -->
			</view>
		</view>

	</view>
</template>

<script>
	import store from '@/store.js'
	export default {
		data() {
			return {
				title: 'Hello',

				form: {
					name: "xiaofangzhan",
					password: "Anxin119!@",
					auto: false,
				}
			}
		},
		onLoad() {
			if (store.state.token) {
				console.log(store.state.token);
				uni.reLaunch({
					url: "/pages/index/index",
					success: res => {},
					fail: () => {},
					complete: () => {},
				})
			}
		},
		methods: {
			getUserInfo() {
				let body = {}
				if (!this.form.name) {
					return this.$alert.showError("请输入用户账号")
				}
				if (!this.form.password) {
					return this.$alert.showError("请输入密码")
				}
				uni.showLoading({
					title: '登录中',
				});
				const that = this
				this.$request.post("/api/Accounts/SignIn", {
					username: this.form.name,
					password: this.form.password
				}, (data, res) => {
					uni.hideLoading();
					if (res.status == "401") {
						return this.$alert.showError("用户名或密码错误")
					}
					uni.setStorageSync("token", res)
					this.$store.commit('saveToken', res)
					console.log(store.state.token);
					that.$request.get("/api/Accounts/profile", {}, (data, res) => {
						console.log(res);
						uni.setStorageSync("user", res)
					})
					uni.reLaunch({
						url: "/pages/index/index",
						success: res => {
							console.log(res);
						},
						fail: () => {
							console.log(res);
						},
						complete: () => {},
					})
					// return

				})
			},
			getToken() {
				let user = store.state.token
				this.$request.post("/api/Accounts/RefreshToken",{token:user.token,refreshToken:user.refreshToken},(data,res)=>{
					console.log(res);
				})
			}

		}

	}
</script>

<style lang="scss">
	.page {
		background-color: #FAFBFF;
		color: #808080;

	}

	.top {
		width: 100%;
		height: 200rpx;
		position: absolute;

		img {
			width: 100%;
			height: 200rpx;
		}
	}

	.tops {
		height: 40rpx;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
		z-index: 10;
		background-color: #FAFBFF;
		bottom: 30rpx;
		left: 0;
	}

	.items {
		// width: 100%;
		margin: 0 60rpx;

		.title {
			/* width: 748rpx; */
			// height: 68rpx;
			// line-height: 68rpx;
			// font-size: 50rpx;
			// font-weight: 500;
			// color: #317AFF;
			margin: 240rpx 0 60rpx 0;

			.text {
				margin-top: 20rpx;
				font-size: 30rpx;
				text-align: center;
				color: #939393;
			}
		}

		button {
			width: 100%;
			// height: 140rpx;
			// background: linear-gradient(180deg, #317AFF 0%, #0052E6 100%);
			color: #fff;
			border-radius: 120rpx;
			background: #4963F4;
			box-shadow: 2px 6px 8px 1px rgba(73, 99, 244, 0.8);
		}

		.item {
			margin: 60rpx 0;

			.label {
				font-size: 32rpx;
				// color: rgba(16, 15, 25, 0.48);
				margin-bottom: 30rpx;
			}

			label {
				color: #4963F4;

				checkbox {
					border: #4963F4;
				}
			}

			.input {
				// border-bottom: 2rpx solid rgba(16, 15, 25, 0.16);
				height: 80rpx;
				background: #ECF2FF;

				input {
					height: 100%;
				}
			}



		}
	}
</style>