uni-app(登录页面)

快来打我* 2022-12-08 05:35 325阅读 0赞

后台使用api，前台获取登录。  
login.vue

<template>
    	<view style="border-top: 1px solid #EEEEEE;">
    		<form @submit="formSubmit" @reset="formReset">
    			<view class="personcss">
    				<image src="../../static/logo.png" style="width: 260rpx;height: 260rpx;"></image>
    			</view>
    			<view class="uni-form-item uni-column">
    				<input class="uni-input" name="input" v-model="loginname" placeholder="请输入用户名" />
    			</view>
    			<view class="uni-form-item uni-column">
    				<input class="uni-input" name="inputPwd" v-model="password" placeholder="请输入密码" />
    			</view>
    			<view class="uni-btn-v">
    				<button type="default" formType="submit">点击，浏览详情</button>
    				
    			</view>
    		</form>
    	</view>
    </template>
    
    <script>
    	import common from '../../common/commons.js';
    	export default {
    		onLoad: function(option) {
    			uni.setNavigationBarColor({    //设置导航栏
    				frontColor: "#000000",
    				backgroundColor: this.hasSetBg ? "#F8F8F8" : "#007AFF"
    			})
    		},
    		data() {
    			return {
    				title: '用户登录',
    				pickerHidden: true,
    				chosen: '',
    				hasSetBg: true,
    				loginname:'',
    				password:''
    			}
    		},
    		methods: {
    			formSubmit: function(e) {
    				var userdata = {
    					Mark: 'UserBll.Login',
    					Content: {
    						name: this.loginname,
    						password: this.password
    					}
    				};
    				uni.request({
    					header: {
    						"Content-Type": "application/json;charset=utf-8"  //api的header格式；
    					},
    					url: common.webServiceUrl, //地址放在公用js里
    					method: 'POST',
    					data: JSON.stringify(userdata),
    					success: (res) => {
    						if (res.data.result == "0") {
    							var data = res.data;
    							var setUserInfo = {
    								userID: data.Id,
    								fullName: data.FullName,
    								loginName: data.LoginName,
    								unitId: data.UnitId == null ? 0 : data.UnitId,
    								unitName: data.UnitName
    							};
    
    							uni.setStorage({    //异步保存用户信息 （setStorageSync 为同步信息）
    								key: 'userinfo',
    								data: setUserInfo
    							});
    							 uni.reLaunch({
    							 	url: '../Vehicle/Index',   //跳转
    							 }); 
    						} else {
    							uni.showToast({
    								icon: 'none',
    								title: '失败啦!!!'
    							});
    						}
    	},
    					fail: () => {
    						uni.showToast({
    							icon: 'none',
    							title: '网络异常,请稍后重试'
    						});
    					}
    				})
    			},
    			formReset: function(e) {
    				console.log('清空数据')
    				this.chosen = ''
    			}
    		}
    	}
    </script>
    
    <style>
    	.uni-form-item .title {
    		padding: 20upx 0;
    	}
    
    	.personcss {
    		height: 260rpx;
    		width: 260rpx;
    		border: 1px solid #C0C0C0;
    		border-radius: 130rpx;
    		overflow: hidden;
    		margin: auto;
    		margin-top: 100px;
    	}
    
    	.uni-btn-v {
    		margin-top: 150px;
    	}
    </style>