mobile_h5/shop/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>
			</view>
			<view class="bottomLogo"></view>
		</view>
		<text class="bottomText">&copy; 彩图奔跑  All Rights Reserved.</text>
	</view>
</template>

<script>
	import tools from '/common/tools';
	import { apiVerfSignIn } from '../../common/api.js';

	export default {
		data() {
			return {
				username: "",
				password: "",
			}
		},
		onLoad() {

		},
		methods: {
			// 商家系统登录
			login() {
				uni.request({
					url: apiVerfSignIn,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					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;
							const token = data.token;
							const shopinfo = {
								shopName: data.shopName
							}
							
							tools.setToken(token);
							tools.setShopInfo(shopinfo);
							
							uni.showToast({
								title: `登录成功`,
								icon: 'none',
								duration: 3000
							});
							
							uni.navigateTo({
								url: "/pages/index/index"
							});
						}
						else {
							uni.showToast({
								title: `登录失败，请重新登录`,
								icon: 'none',
								duration: 3000
							});
						}
					},
					fail: (err) => {
						console.log("login err", err)
					},
				});
			},
		}
	}
</script>

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

	.main {
		width: 90%;
		height: 570px;
		margin-top: 15%;
		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;
	}

	.bottomLogo {
		margin-top: 20px;
		width: 232px;
		height: 36px;
		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>