repairForMiniProgram/miniRepairPro/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>
	var self;
	export default {
		data() {
			return {
				phone:"",
				password:""
			};
		},
		methods: {
			bindLogin(){
				const data = {
					phone: this.phone,
					password: this.password
				};
				console.log(data);
				uni.request({
					url:'/api/login/loginWork',
					method:'POST',
					data:{
						phone: this.phone,
						password: this.password
					},
					success: (res) => {
						if(res.statusCode ==404){
							uni.showToast({
								title:'错'
							});
							return;
						}
						uni.showToast({
							title:'成'
						});
						uni.reLaunch({
							url:'../index/index',
						})
					},
					fail: () => {
						
					},
					complete: () => {
						
					}
				});
			}
	},
	}
</script>

<style>
    .head{
		position: relative;
		height: 149px;
		border-radius: 0px 0px 10px 10px;
		background-color: rgba(42, 130, 228, 1);
	}
    .content{
	    position: absolute;
	    top:59px;
	    left: 7px;
	    width:359px;
	    height: 284px;
	    background-color: white;
	    border: 1px solid rgba(128, 128, 128, 0.45);
    }
    .logo{
		font-size: 18px;
		font-weight: 700;
	    margin-top: 9px;
	    text-align: center;
    }
    .uni-list-cell-left-2{
	    float: left;
	    margin-top: 40px;
	    margin-left: 13px;
    }

    .uni-list-cell-db-2{
	    float: right;
	    margin-right: 17px;
	    margin-top: 35px;
	    width: 270px;
	    height: 35px;
	    border-radius: 14px;
	    background-color: rgba(166, 166, 166, 0.18);
    }
    .uni-input-2{
	    margin-left: 10px;
	    margin-top: 5px;
	    font-size: 12px;
	    cursor: not-allowed;
    }
	.uni-input-placeholder{
		margin-top: 6px;
		text-align: center;
	}
    button{
	    position: absolute;
	    bottom: 36px;
	    left: 69px;
	    line-height: 33px;
    }
</style>