cleanMachineUniApp/pages/Login/loginWeixin.vue

<template>
	<view class="content">
		<image class="logo" :src="avatarUrl"></image>
		<view class="title">
			{{nickName}}
		</view>
		<form @submit="loginwxSubmit">
			<view class="">
				<view class="title">角色选择</view>
				<radio-group class="level" name="level" @change="radioChange">
					<label class="radio">
						<radio class="radio" value="1" :checked="1==level" /><text>管理员</text>
					</label>
					</br>
					<label class="radio">
						<radio class="radio" value="2" :checked="2==level" /><text>员工</text>
					</label>
					</br>
					<label class="radio">
						<radio class="radio" value="3" :checked="3==level" /><text>游客</text>
					</label>
				</radio-group>
			</view>
			<view class="section" v-show="level==1">
				<input class="input-account" name="code" placeholder="管理员验证码" />
			</view>
			<view class="section" >
				<input class="input-account" name="workname" placeholder="员工名称" />
			</view>
			<view class="section">
				<input class="input-account" name="username" placeholder="请输入用户名" />
			</view>
			<view class="section" v-show="level<=2">
				<input class="input-pwd" password name="password" placeholder="请输入密码" />
			</view>
			<view class="btn-area">
				<button type="primary" formType="submit" :loading="isLoading">绑定微信</button>
			</view>
		</form>
	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import MD5 from '@/assets/scripts/md5';
	export default {
		data() {
			return {
				nickName: '',
				openId: '',
				avatarUrl: '',
				pname: '',
				password: '',
				level: 2,
				parm: {
					username: "",
					password: "",
					avatarUrl: "",
					nickName: "",
					openId: ""
				},
				keyEventBind: {
					backbutton: false, //Boolean(默认truee)关闭back按键监听  
					menubutton: false //Boolean(默认true)关闭menu按键监听  
				}
			};
		},
		onShow() {

			var weixinInfo = uni.getStorageSync("weixinInfo");
			this.nickName = weixinInfo.nickName;
			this.openId = weixinInfo.openId;
			this.avatarUrl = weixinInfo.avatarUrl;
		},
		computed: {
			...mapState(['isLoading']),
		},
		methods: {
			loginwxSubmit(event) {
				uni.hideKeyboard();
				// const { value: loginForm } = event.detail;
				var username = event.detail.value.username;
				var pass = event.detail.value.password;
				var level = event.detail.value.level;
				var workname = event.detail.value.workname;
				if(level==2&&workname==""){
					uni.showModal({
						title: "提示",
						content: "员工名不能为空",
						success: function(res) {
								return;
						}
					})
					return;
				}
				var code = event.detail.value.code;
				if(level==1){
					if(code == "" || code==null){
						uni.showModal({
							title: "提示",
							content: "管理员需要输入验证码",
							success: function(res) {
									return;
							}
						})
						return;
					}
					if(code!="007"){
						uni.showModal({
							title: "提示",
							content: "验证码错误",
							success: function(res) {
									return;
							}
						})
						return;
					}
				}
				var password = MD5(pass);
				var serverUrl = this.serverurl;
				this.parm['username'] = username;
				this.parm['password'] = password;
				this.parm['level'] = level;
				this.parm['workName'] = workname;
				this.parm['avatarUrl'] = this.avatarUrl;
				this.parm['nickName'] = this.nickName;
				this.parm['openId'] = this.openId;
				// debugger;
				this.$store.dispatch('loginWXCZ', this.parm)
					.then(data => {
						var result = data.message;
						var weixinInfo = data.data;
						var code = data.code;
						uni.setStorageSync("token", data.token);
						uni.setStorageSync("globalUser", weixinInfo);
						uni.setStorageSync("level", this.level);
						if (code == true) {
							uni.reLaunch({
								url: '/pages/Charts/mainStatistics',
							});
						}
					}, _ => void uni.stopPullDownRefresh());
			},
			radioChange: function(evt) {
				
						this.level = evt.target.value;
			        }
		},
	}
</script>

<style lang="scss">
	page {
		padding: 200upx 0 0 0;
		background-image: url('~@/static/backgrounds/login_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.content {
			padding: 0 20upx;
			display: flex;
			flex-flow: column nowrap;
			align-items: center;

			.logo {
				width: 150upx;
				height: 150upx;
				text-align: center;
				margin: 50upx;
			}

			form {
				width: calc(100% - 100upx);
				padding: 50upx;

				.level {
					display: flex;
					flex-direction: row;
				}

				.radio {
					padding-top: 10upx;
					padding-left: 10upx;
				}

				.section {
					margin: 50upx 0;
				}

				.btn-area {
					margin-top: 100upx;

					button {
						background-color: $uni-color-primary;
					}
				}
			}
		}
	}
</style>