exam_student/pages/login/Login.vue

<template>
	<view class="container">
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
	<view
		style="background-image:url(../../static/bg1.svg) ;height: 100vh;background-size: cover;background-color: #beb685;">
		<view class="flex-item flex-item-V uni-bg-red">
			<view style="height: 50px;padding: 30px;">
				<view class="title">艺术监测考试</view>
			</view>
		</view>
		<view class="flex-item flex-item-V uni-bg-green">
			<view class="uni-flex uni-row">
				<view class="flex-item uni-bg-green">
					<view class="grid-content bg-purple-light" style="margin: auto">
						<form>
							<input class="uni-input" v-model="form.name" type="text" placeholder="  账号" />
							<br />
							<br />
							<button type="primary" @click="submitUser"
								style="width: 400px;font-size: 20px;box-shadow: 2px 2px 5px #aaaaaa;">登 录
							</button>
						</form>
					</view>
				</view>
				<view class="flex-item uni-bg-blue">
				</view>
			</view>
			<view style="position: fixed;right: 10px;bottom: 10px;background-color: #c1c1c1;width: 300px;height: 200px;">
				<a href="https://down.360safe.com/se/qd/360se_setup__sembg100031.exe">360浏览器</a>
				<br/>
				<a href="https://c2rsetup.officeapps.live.com/c2r/downloadEdge.aspx?platform=Default&source=EdgeStablePage&Channel=Stable&language=zh-cn&brand=M100">edge浏览器</a>
			</view>
		</view>
	</view>

</template>
<script>
	import {
		getSysLogin,
		request,
	} from '../../examJs/examRequest';
	import {
		redirectTo
	} from '../../examJs/examRoute';

	export default {
		data() {
			return {
				form: {
					name: '',
				},
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',

			}
		},
		methods: {
			messageToggle(type, message) {
				this.msgType = type
				this.messageText = message
				this.$refs.message.open()
			},
			submitUser() {
				if (this.form.name.toString().trim().length === 0) {
					this.messageToggle('error', "账号不能为空")
					return
				}
				getSysLogin({
						captcha: "",
						loginType: 2,
						password: "123456",
						username: this.form.name,
						t: Date.now()
					}).then(data => {

						if (data.data.code === 200) {
							this.messageToggle('success', data.data.message)
							sessionStorage.setItem("token", data.data.result.token)
							let user = JSON.stringify(data.data.result.userInfo)
							sessionStorage.removeItem("user")
							sessionStorage.setItem("user", user)
							redirectTo('/pages/examPage/examInfo');
						} else {
							this.messageToggle('error', data.data.message)
						}

					})
					.catch(err => {
						this.messageToggle('error', "网络质量不佳，请重试")
					})
			}
		},
		mounted() {

			if (sessionStorage.getItem("token") !== undefined && sessionStorage.getItem("token") !== null && sessionStorage
				.getItem("token") !== "") {
				redirectTo('/pages/examPage/examInfo');
			}
		},
		created() {

		}
	}
</script>
<style>
	.uni-input {
		padding-left: 20px;
		border: 1rpx solid #EEEEEE;
		height: 96rpx;
		box-shadow: 2px 2px 5px #aaaaaa;
		margin: auto;
		margin-top: 300px;
		line-height: 96rpx;
		color: #000000;
		width: 380px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-family: '微软雅黑', serif;
		font-size: 40px;
		color: #000000;
		width: 600px;
		text-align: center;
		margin: auto;
	}
</style>