mobile_h5/actMgt/pages/login/login - 副本.vue

<template>
	<view class="body body-bg">
		<view class="main uni-column">
			<view class="topLogo"></view>
			<text class="title">主理人登录</text>
			<view class="box uni-column">
				<input class="input" placeholder-class="input-placeholder" type="text" maxlength="20"
					placeholder="请输入用户名" v-model="username" />
				<input class="input" placeholder-class="input-placeholder" password type="text" maxlength="20"
					placeholder="请输入密码" v-model="password" />
				<button class="button" @click="login">登 录</button>
				<text class="hint">没有账号？点击 <text style="color: #FF8D1A;" @click="registerClick">注册</text></text>
			</view>
			<view class="bottomLogo"></view>
		</view>
		<text class="bottomText">&copy; 彩图奔跑 All Rights Reserved.</text>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import tools from '/utils/tools';
	import {
		apiSignIn
	} from '/utils/api.js';

	export default {
		data() {
			return {
				username: "",
				password: "",
			}
		},
		computed: {
			/* ...mapState([
				'username', // 映射 this.username 为 store.state.username
				'token'
			]), */
			...mapGetters([
				'metadata'
			]),
		},
		onLoad() {

		},
		methods: {
			login() {
				uni.request({
					url: apiSignIn,
					header: this.metadata,
					method: "POST",
					data: {
						username: this.username,
						password: this.password
					},
					success: (res) => {
						console.log("login", res);
						if (res.data.code == 0) {
							const data = res.data.data;
							this.$store.commit("setUsername", data.userName);
							this.$store.commit("setUserlevel", data.level);
							this.$store.commit("setToken", data.token);

							uni.showToast({
								title: `登录成功`,
								icon: 'none',
								duration: 3000
							});
							
							setTimeout(() => {
								const url = '/pages/actManage/index';
								tools.appAction(url, "uni.switchTab");
							}, 100);
						} else {
							uni.showToast({
								title: `登录失败: ${res.data.message}`,
								icon: 'none',
								duration: 5000
							});
						}
					},
					fail: (err) => {
						console.log("login err", err);
					},
				});
			},
			registerClick() {
				const url = "/pages/login/register";
				tools.appAction(url, "uni.navigateTo");
			}
		}
	}
</script>

<style scoped>
	.body-bg {
		width: 100vw;
		height: 100vh;
		background: url("/static/bg_login.png") no-repeat;
		background-size: 100% 100%;
		/* background-size: 100% auto; */
		justify-content: space-between;
	}

	.main {
		width: 90%;
		/* height: 590px; */
		margin-top: 10%;
		justify-content: space-evenly;
	}

	.topLogo {
		width: 90px;
		height: 110px;
		background: url("/static/run.png") no-repeat;
		background-size: contain;
	}

	.title {
		margin: 10px 0px;
		font-weight: 500;
		color: #ffffff;
		font-size: 30px;
		text-align: center;
	}

	.box {
		/* width: 317px; */
		width: 92%;
		height: 237px;
		padding-top: 10px;
		padding-bottom: 10px;
		justify-content: space-evenly;
		background-color: white;
		border-radius: 13px;
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
	}

	.input {
		width: 72%;
		height: 46px;
		padding: 0 5%;
		border: 1px solid;
		border-color: #c6c6c6;
		border-radius: 3px;
	}

	.input-placeholder {
		font-weight: 300;
		color: #bfbfbf;
		font-size: 16px;
	}

	.button {
		width: 82%;
		background: #ffb40b;
		border-radius: 6px;
		font-weight: 500;
		color: #333333;
		word-spacing: 15px;
	}

	.hint {
		font-size: 16px;
		font-weight: 500;
		color: #383838;
	}

	.bottomLogo {
		width: 232px;
		height: 36px;
		margin-top: 20px;
		background: url("/static/ctbp.png") no-repeat;
		background-size: contain;
	}

	.bottomText {
		margin-bottom: 30px;
		font-weight: 500;
		color: #000000;
		font-size: 12px;
		text-align: center;
	}
</style>