repairForMiniProgram/pages/login/login.vue

<template>
	<view>
		<view class="head">
		</view>
		<view class="content">
			<view class="logo">
				账号登录
			</view>
			<view class="headline-2">
				<text class="uni-list-cell-left-2">账号：</text>
				<view class="uni-list-cell-db-2">
					<input class="uni-input-2" placeholder="请输入手机号" v-model="phone" required />
				</view>
			</view>

			<view class="headline-2">
				<text class="uni-list-cell-left-2">密码：</text>
				<view class="uni-list-cell-db-2">
					<input class="uni-input-2" placeholder="请输入密码" v-model="password" required />
				</view>
			</view>

			<button type="default" @click="bindLogin"
				style="width: 273px; height: 33px; background-color:rgba(42, 130, 228, 1); color: white;font-size: 15px; border-radius: 14px;">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",
				password: "",
			};
		},
		methods: {
			async bindLogin() {
				if (this.phone && this.password) {
					uni.showLoading({
						title: "登录中"
					})
					let res = await this.$myRequest({
						method: "post",
						url: `/login/loginWork?phone=${this.phone}&password=${this.password}`,
					})
					// console.log(res)
					if (res.status == 200) {
						uni.setStorageSync('token', res.data);
						uni.setStorageSync('identity', JSON.stringify(1)); //身份标识
						uni.reLaunch({
							url: '../list-center/list-center'
						})
					} else {
						uni.showToast({
							icon: 'error',
							title: '登录失败'
						});
					}
				} else {
					uni.showToast({
						title: "请输入账号密码",
						icon: "none"
					})
				}
			}
		},
	}
</script>

<style>
	.head {
		position: relative;
		height: 300rpx;
		border-radius: 0px 0px 10px 10px;
		background-color: rgba(42, 130, 228, 1);
	}

	.content {
		position: absolute;
		top: 120rpx;
		left: 14rpx;
		width: 720rpx;
		height: 568rpx;
		background-color: white;
		border: 1px solid rgba(128, 128, 128, 0.45);
	}

	.logo {
		font-size: 36rpx;
		font-weight: 700;
		margin-top: 18rpx;
		text-align: center;
	}

	.uni-list-cell-left-2 {
		float: left;
		margin-top: 80rpx;
		margin-left: 26rpx;
	}

	.uni-list-cell-db-2 {
		float: right;
		margin-right: 34rpx;
		margin-top: 70rpx;
		width: 540rpx;
		height: 70rpx;
		border-radius: 28rpx;
		background-color: rgba(166, 166, 166, 0.18);
	}

	.uni-input-2 {
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
		cursor: not-allowed;
	}

	.uni-input-placeholder {
		text-align: center;
	}

	button {
		position: absolute;
		bottom: 72rpx;
		left: 140rpx;
		line-height: 66rpx;
	}
</style>