canvasScreen/pages/login/login.vue

<template>
	<view class="main_container">
		<Header></Header>
		<view class="login-bind">
			<view class="login">
				<image class="logo" src="/static/logo.png"></image>
				<form @submit="loginSubmit">
					<view class="uni-form-item uni-column">
						<input class="uni-input" v-model="phone" name="phone" type="number" placeholder="登录账号" />
					</view>
					<view class="uni-form-item uni-column">
						<input class="uni-input" v-model="password" name="password" placeholder="密码" password="true" />
					</view>
					<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">登 录</button></view>
				</form>
			</view>
		</view>
		<view class="login_bg"></view>
	</view>
</template>

<script>
import Header from '@/pages/header.vue';
import {isvalidPhone} from '@/utils/validate.js';
import {login} from '@/network/login.js';
export default {
	name:'Login',
	components: {
		Header
	},
	data() {
		return {
			phone:'',
			password:''
		};
	},
	methods: {
		// 登录接口
		// login(config){
		// 	login(config).then(res=>{
		// 		const code = res.data.code;
		// 		if (code === 100) {
		// 			uni.showToast({
		// 				title: '登录成功'
		// 			})
		// 			window.localStorage.setItem("token", res.data.data.token);
		// 			uni.switchTab({
		// 				url: '../bind/bind'
		// 			})
		// 		} else {
		// 			uni.showToast({
		// 				title: res.data.msg
		// 			})
		// 		}
		// 	}).catch(err=>{
		// 		console.log(err)
		// 	})
		// },
		// 提交表单
		// goPath(validateForm) {
		// 	this.$refs[validateForm].validate(valid => {
		// 		if (!valid) {
		// 			this.login(this.loginForm);
		// 		}
		// 	})
		// },
		// 提交表单
		loginSubmit: function(e) {
			// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
			if (!this.phone) {
				uni.showToast({
					title: '请输入登录账号',
					icon: 'none'
				})
				return;
			} else if (!isvalidPhone(this.phone)) {
				uni.showToast({
					title: '请输入正确的11位登录账号',
					icon: 'none'
				})
				return;
			}
			if (!this.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return;
			}
			var formdata = e.detail.value;
			// this.login(formdata);
			uni.navigateTo({
				url: '../bind/bind'
			});
		}
	}
};
</script>

<style scoped>
.login{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.logo {
	width: 278rpx;
	height: 52rpx;
	margin-bottom: 69.44rpx;
}
.login .uni-input {
	width: 520rpx;
	height: 86rpx;
	margin-bottom: 41.66rpx;
	font-size: 30.55rpx;
	text-align: center;
	border: 1px solid #cbcbcb;
	border-radius: 86rpx;
	background-color: #f6f6f6;
}
.fouce_txt{
	border-color: #363538;
}
</style>