renli-wx/pages/login/login.vue

<template>
	<view class="content">
		<view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="../../static/image/mySet1.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="switch_login">
			<text v-if="!memberShow" @click="memberShow=true,form.mobilePhone=18300700324">会员登录</text>
			<text v-else @click="memberShow=false,form.memberNum='00100012',form.mobilePhone=18300700324">员工登录</text>
			<!-- <text >员工登录</text> -->
		</view>
		<view class="form">
			<view class="inputWrapper" v-if="!memberShow">
				<input class="input" v-model="form.memberNum" type="text" value="" placeholder="请输入会员编码" />
			</view>
			<view class="inputWrapper">
				<input maxlength="11" class="input" v-model="form.mobilePhone" type="text" value="" placeholder="请输入手机号" />
			</view>
			<view class="inputWrapper">
				<input class="input" v-model="form.password" type="password" value="" placeholder="请输入密码" />
			</view>

			<button size="default" @click="logIn" class=" loginBtn cu-btn bg-red margin-tb-sm lg">登录</button>
			<view class="forgotBtn">
				<view class="forgotBtn_hr"></view>
				<text>德财美业</text>
				<view class="forgotBtn_hr"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import host from '../../utils/host.js'
	export default {
		data() {
			return {
				memberShow: false,
				memberShow: true,
				form: {
					memberNum: '',
					mobilePhone: '18300700324',
					password: '123456',
				}
			}
		},
		onLoad() {},
		methods: {
			logIn() {
				if (!this.memberShow) {
					console.log('会员登录');
					this.$api.login(this.form).then(res => {
						if (res.code == '000000') {
							let user = 0//表示会员
							res.data.mobilePhone = this.form.mobilePhone
							 res.data.user = user
							uni.setStorageSync('userInfo', res.data)
							setTimeout(function() {
								console.log(res)
								uni.switchTab({
									url: '../tabBar/mySet/mySet',
									fail: function(error) {
										console.log(error);
									}
								})
							}, 500)
						}else{
							uni.showToast({
								title: res.message,
								icon: "none",
								duration: 1000
							})
						}
					})
				} else {
					delete this.form.memberNum
					console.log(this.form);
					console.log('员工登录');
					this.$api.staffLogin(this.form).then(res => {
						console.log(res)
						if (res.code == '000000') {
							let user = 1//表示员工
							res.data.mobilePhone = this.form.mobilePhone
							 res.data.user = user
							uni.setStorageSync('userInfo', res.data)
							setTimeout(function() {
								uni.switchTab({
									url: '../tabBar/mySet/mySet',
									fail: function(error) {
										console.log(error);
									}
								})
							}, 500)
						}else{
							uni.showToast({
								title: res.message,
								icon: "none",
								duration: 1000
							})
						}
					})
				}

			}
		},
		onShow: function() {}
	}
</script>
<style>
	.content {
		background: #dadada;
		width: 100vw;
		height: 100vh;
	}

	.switch_login {
		text-align: center;
	}

	.switch_login text {
		display: inline-block;
		cursor: pointer;
		padding: 20upx 0;
		font-size: 32upx;
		font-weight: 700;
	}

	.avatorWrapper {
		height: 20vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.avator {
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}

	.avator .img {
		width: 100%;
	}

	.form {
		padding: 0 100upx;
	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		/* text-align: center; */
		font-size: 15px;
	}

	.loginBtn {
		width: 100%;
		height: 80upx;
		background: #77B307;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.forgotBtn {
		text-align: center;
		display: flex;
		justify-content: space-between;
		color: #383838;
		font-size: 20upx;
		margin-top: 20px;
	}

	.forgotBtn_hr {
		margin-top: 20upx;
		height: 1upx;
		width: 30%;
		border-top: #000000 1upx solid;
		/* background-color: #000000; */
	}
</style>