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:"",
				homeUrl:"https://jtishfw.ncjti.edu.cn/baoxiu/repairApi"
			};
		},
		methods: {
			bindLogin(){
				uni.request({
					url:`${this.homeUrl}/login/loginWork?phone=${this.phone}&password=${this.password}`,
					method:'POST',
					success: (res) => {
						console.log('======res.data.status)=======')
						console.log(res.data.status)
						console.log('======res=======')
						console.log(res)
						if(res.data.status==200){
							uni.setStorageSync('token',res.data.data);
							uni.showToast({
							 	title:'登录成'
							 });
							uni.reLaunch({
							 	url:'../list-center/list-center'
							 })
						}else{
							uni.showToast({
								    icon:'none',
							 		title:'登录失败'
							 	});
							 	return;
						}

					},
					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>