后台使用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>
				<!-- <button formType="reset">重置</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>

Logo

前往低代码交流专区

更多推荐