gas-cylinder-h5/pages/register.vue

<template>
	<view>
		<u-navbar title="" autoBack placeholder></u-navbar>
		<view class="card_login">
			<view class="card_head_logo">
				<image class="mine_image" src="../static/logo.png" mode=""></image>
				<view class="welcome_title">欢迎注册宝智达气瓶</view>
			</view>
			<view class="login_input_box">
				<u--input v-model="formList.account" fontSize="18px" placeholder="请输入账号" border="bottom"
					clearable></u--input>
			</view>
			<view class="login_input_box">
				<u--input v-model="formList.password" fontSize="18px" placeholder="请输入密码" password border="bottom"
					clearable></u--input>
			</view>
			<view class="title_register" @click="goLogin">去登录</view>
			<view class="card_btn">
				<u-button type="primary" :disabled="disabled" text="登录" @click="getRegister"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formList: {
					account: '',
					password: '',
				},
			}
		},
		computed: {
			disabled() {
				if (this.formList.account == '' || this.formList.password == '') {
					return true;
				} else {
					return false;
				}
			}
		},
		methods: {
			// 注册
			getRegister() {
				uni.showLoading();
				this.$api.post('/api/login', {
					type: 1,
					mobile: true,
					username: this.formList.account,
					password: this.formList.password
				}).then((res) => {
					if (res.code == 200) {
						console.log(res, 132)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
					uni.hideLoading();
				})
			},
			// 登录
			goLogin() {
				// uni.redirectTo({
				// 	url: '/pages/login'
				// })
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.welcome_title {
		font-size: 46rpx;
		font-weight: 600;
		margin-bottom: 60rpx;
		margin-top: 10rpx;
	}

	.card_head_logo {
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.card_login {
		padding: 20rpx 40rpx;
	}

	.mine_image {
		width: 100rpx;
		height: 100rpx;
	}

	.login_input_box {
		margin-bottom: 30rpx;
	}

	.title_register {
		display: flex;
		justify-content: flex-end;
		font-size: 30rpx;
		color: #494949;
	}

	.card_hint {
		margin-top: 60rpx;
		display: flex;
		align-items: flex-start;
	}

	.agreement_title {
		font-size: 30rpx;
		color: #333;
	}

	.protocol_title {
		color: #1177ff;
	}

	.card_btn {
		margin-top: 50rpx;
	}

	.card_checkbox {
		margin-top: 5rpx;
		position: relative;
		cursor: pointer;
	}

	.message {
		display: none;
		position: absolute;
		padding: 5px 8px;
		border: 1px solid #494949;
		border-radius: 9px;
		top: -36px;
		font-size: 12px;
		width: 110px;
		background: #494949;
		color: #fff;
		left: -6px;
	}

	.message::after {
		content: '';
		position: absolute;
		left: 8px;
		top: 100%;
		border: 8px solid transparent;
		border-top: 6px solid #494949;
		margin-left: -2px;
	}
</style>