hjt_erdao_WeChatApplet/pages/login/index.vue

<template>
	<view class="login main-bg shadow">
		<view class="header header-long-bg">
			<view class="header-text font-forty font-color1">Hi</view>
			<view class="header-text font-forty font-color1">惠军通欢迎您</view>
			<image class="header-img" src="../../static/logo9.png"></image>
			<!-- <image class="header-title" src="../../static/logo5.png"></image> -->
			<view class="login-form">
				<view class="login-form-title font-forty font-color2">
					<!-- 登录 -->
					<u-tabs 
						:list="tabsList" 
						:is-scroll="false"
						:current="current"
						font-size="40"
						active-color="#2E4F1C"
						inactive-color="#2E4F1C"
						bar-width="50"
						bar-height="8"
						@change="change"></u-tabs>
				</view>
				<view class="login-form-view">
					<u-form :model="form" ref="uForm" :rules="rules">
						<u-form-item 
							:leftIconStyle="{color: '#2E4F1C', fontSize: '40rpx'}"
							left-icon="account-fill" 
							label-width="180" 
							:label-position="labelPosition" 
							prop="userName">
							<u-input 
								v-model="form.userName" 
								placeholder-style="color: #2E4F1C;"
								:placeholder="namePlaceholder" />
						</u-form-item>
						<u-form-item
							prop="userPWD"
							label-width="180" 
							:label-position="labelPosition">
							<view class="form-item">
								<image src="../../static/idcard.png" class="form-img"></image>
								<u-input 
									v-model="form.userPWD" 
									placeholder-style="color: #2E4F1C;"
									:type="type11"
									:placeholder="pwdPlaceholder" />
							</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" v-if="radioShow">
							<u-radio-group v-model="radio" @change="radioGroupChange" :wrap="radioCheckWrap" active-color="#2E4F1C">
								<u-radio shape="circle" v-for="(item, index) in radioList" key="index" :name="item.id">{{ item.name }}</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form>
					<view class="font-twenty-two font-color2" style="text-align: center;" @click="gotoDetails">请认真阅读平台服务协议《服务及隐私协议》使用平台</view>
					<view @click="submit" class="form-submit">立即登录</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>


<script>
import { mapState, mapMutations } from 'vuex';
import server from "@/api/index";
export default {
	components: {},
	data() {
		return {
			gotoAdd: null,
			person_id: null,
			type11: 'text',
			labelPosition: 'left',
			namePlaceholder: '',
			pwdPlaceholder: '',
			radioCheckWrap: false,
			tabsList:[],
			radioShow: false,
			radioList: [
				{
					name: '军人',
					id: '2',
					checked: true,
					disabled: false
				},
				{
					name: '优抚对象',
					id: '3',
					checked: false,
					disabled: false
				},
				// {
				// 	name: '商铺',
				// 	id: '1',
				// 	checked: false,
				// 	disabled: false
				// },
				// {
				// 	name: '管理员',
				// 	id: '4',
				// 	checked: false,
				// 	disabled: false
				// }
			],
			radio: '2',
			type: '2',
			current: 0,
			form: {
				userName: '',
				userPWD: '',
				type: ''
			},
			rules: {
				userName: [
					{ 
						required: true, 
						message: '请输入!', 
						trigger: ['change','blur'],
					}
				],
				userPWD: [
					{	
						required: true, 
						message: '请输入!', 
						trigger: ['change','blur']
					}
				]
			}
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(e) {
		this.person_id = e.id;
		console.log('e.type', e.type)
		if(e.type){
			this.gotoAdd = e.type
		}
		if(e.id === '2'){
			this.tabsList=[{name: '登录'}, {name: '注册'}];
			this.radioShow = true;
		}else{
			this.tabsList=[{name: '登录'}];
			this.radioShow = false;
		}
		this.radioGroupChange(e.id);
	},
	onShow() {
		this.current =  0;
		// this.radioGroupChange('军人')
	},
	methods:{
		...mapMutations(['setRole']),
		change(index) {
			console.log(index)
			this.current = index;
			if(index === 1){
				uni.navigateTo({
					url: '/pages/soldier/home/identity?id=' + '123'
				})
			}
		},
		gotoDetails(){
			uni.navigateTo({
				url: '/pages/soldier/home/yxDetails'
			})
		},
		// radio选择发生变化
		radioGroupChange(e) {
			this.type = e;
			// this.radio =e;
			if(e === '2' || e === '3'){
				this.namePlaceholder = '请输入姓名';
				this.pwdPlaceholder = '请输入身份证号后四位';
				this.type11 = 'text';
			}else if(e === '1' || e === '4'){
				this.namePlaceholder = '请输入账号';
				this.pwdPlaceholder = '请输入密码';
				this.type11 = 'password';
			}
		},
		submit() {
			let _this = this;
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if(_this.type === '2' || _this.type === '3'){
						console.log('this.form.userPWD', _this.form.userPWD.length)
						if(_this.form.userPWD.length === 4){
							uni.showLoading({
								title: '登录中...',
								mask: true
							});
							this.loginFn()
						}else{
							_this.$refs.uToast.show({
								title: '请输入身份证号后四位!',
								type: 'default',
							})
						}
					}else{
						uni.showLoading({
							title: '登录中...',
							mask: true
						});
						this.loginFn()
					}
				} else {
				}
			});
		},
		loginFn(){
			let _this = this
			this.form.type = this.type
			server.login(this.form).then(res => {
				if(res.code === 200){
					uni.hideLoading();
					let type = ''
					uni.setStorageSync('role', res.data.type);//存入权限
					_this.setRole(res.data.type);
					uni.setStorage({
						key: "userInfo",
						data: res.data,
						success: () => {
							if(this.gotoAdd === 'add'){
								uni.redirectTo({
									url: '/pages/soldier/user/add'
								});
							}else{
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}
					});
				}else if(res.code === 500){
					uni.hideLoading();
					if(res.data === "4"){
						// if(this.type === '军人'){
						// 	uni.navigateTo({
						// 		url: '/pages/soldier/home/identity?name=' + this.form.userName + '&pwd=' + this.form.userPWD
						// 	})
						// }else{
							_this.$refs.uToast.show({
								title: res.msg,
								type: 'default',
							})
						// }
						
					}else if(res.data === "1"){
						_this.$refs.uToast.show({
							title: res.msg,
							type: 'default',
						})
					}
				}else{
					_this.$refs.uToast.show({
						title: '登录失败，请重新输入！',
						type: 'default',
					})
				}
			}).catch(() => {})
		}
	}
}
</script>

<style lang="scss" scoped>
	/deep/ .u-form-item__message{
		padding-left: 50rpx!important;
	}
	/deep/ .u-input__input{
		color: #2E4F1C!important;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
	/deep/ .u-border, .u-border-bottom, .u-border-left, .u-border-right, .u-border-top, .u-border-top-bottom{
		
	}
	/deep/ .u-form-item{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		box-sizing: border-box;
		line-height: 96rpx;
		-webkit-flex-direction: column;
		flex-direction: column;
		background: rgba(46, 79, 28, 0.05);
		border-radius: 48rpx;
		height: 96rpx;
		margin-bottom: 60rpx;
		padding-left: 30rpx!important;
	}
	.login{
		width: 100%;
		height: 100vh;
		position: relative;
		.header{
			width: 100%;
			height: 400rpx;
			padding-top: 64rpx;
			padding-left: 30rpx;
			position: relative;
			.header-text{
				height: 96rpx;
				line-height: 96rpx;
			}
			.header-img{
				width:166.4rpx;
				height:190.4rpx;
				// height: 200rpx;
				// border-radius: 64rpx;
				// background-color: #FFFFFF;
				position: absolute;
				bottom: 90rpx;
				right: 60rpx;
				// box-shadow:4rpx 4rpx 300rpx #E6A23C;
			}
			.header-title{
				width: 100rpx;
				height: 30rpx;
				position: absolute;
				bottom: 70rpx;
				right: 75rpx;
			}
			.login-form{
				position: absolute;
				top: 350rpx;
				left: 30rpx;
				width: calc(100% - 60rpx);
				height: 975rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				.login-form-title{
					width: 100%;
					height: 227rpx;
					text-align: center;
					padding-top: 55rpx;
					letter-spacing: 2rpx;
					font-weight: 600;
				}
				.login-form-view{
					padding-left: 60rpx;
					width: calc(100% - 60rpx);
					height: 252rpx;
					.form-item{
						display: flex;
						.form-img{
							width: 40rpx;
							height: 40rpx;
							padding-top: 15rpx;
							padding-right: 18rpx;
						}
					}
					.form-submit{
						margin-top: 60rpx;
						width: 570rpx;
						height: 96rpx;
						background: linear-gradient(117deg, #5B873C 0%, #2E4F1C 100%);
						border-radius: 49rpx;
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #fff;
						text-align: center;
						line-height: 96rpx;
					}
				}
			}
		}
	}
</style>