QianNiaoShop/pages/login/index.vue

<template>
	<view>
		<!-- 商户管理端登录 -->
		<view class="login_bg" v-if="login_type === 'system'">
			<image src="../../static/img/login-bg.jpg" mode="scaleToFill"></image>
			<view class="login-title">商户管理端</view>
			<view class="login_content">
				<view class="login_info">
					<text class="login_tip" v-if="!forgetPwd_istrue">登录</text>
					<text class="login_tip" v-else>忘记密码</text>
					<!-- <text class="login_line">|</text> -->
					<!-- <text @click="login_istrue = false" :class="login_istrue ? '' : 'login_tip'">注册</text> -->
				</view>
				<view class="login_input" v-if="!forgetPwd_istrue">
					<input v-model="mobile" type="number" placeholder="请输入手机号" placeholder-class="inpput-pl" class="input_mobile" />
					<input v-model="password" type="password" placeholder="输入登录密码" placeholder-class="inpput-pl" class="input_mobile" style="margin-top: 60rpx;" />
				</view>
				<view class="login_input" v-else>
					<input v-model="forget_pwd.mobile" type="number" placeholder="请输入手机号" placeholder-class="inpput-pl" class="input_mobile" />
					<view class="clearfix" style="margin-top: 60rpx;">
						<input
							v-model="forget_pwd.yzm"
							type="number"
							placeholder="输入验证码"
							placeholder-class="inpput-pl"
							class="input_mobile float_left"
							style="width: 200rpx;"
						/>
						<text class="yzm_btn  float_right">获取验证码</text>
					</view>
					<input v-model="forget_pwd.password" type="password" placeholder="输入登录密码" placeholder-class="inpput-pl" class="input_mobile" style="margin-top: 60rpx;" />
				</view>
				<view class="login_bottom clearfix" v-if="!forgetPwd_istrue">
					<!-- <text class="password float_left" @click="forgetPwd_istrue=true">忘记密码?</text> -->
					<text class="password float_left" @click="login('test')">体验一下</text>
					<view class="btn float_right" @click="login()">
						<u-loading :show="is_loading" color="#ffffff" mode="flower"></u-loading>
						<text>登录</text>
						<text class="custom-icon custom-icon-jianto1-copy"></text>
					</view>
				</view>
				<view v-else class="login_bottom clearfix">
					<text class="password float_left" @click="forgetPwd_istrue = false">马上登录</text>
					<view class="btn float_right" @click="forgetPwd_istrue = false">
						<text class="login_tit">确定</text>
						<text class="custom-icon custom-icon-jianto1-copy"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			login_type: 'system',
			login_istrue: true,
			is_loading: false,
			mobile: '',
			password: '',
			yzm: '',
			forgetPwd_istrue: false,
			forget_pwd: {
				mobile: '',
				password: '',
				yzm: ''
			}
		};
	},
	onShareAppMessage(res) {},
	methods: {
		changeLogin() {
			this.login_type = this.login_type === 'supplier' ? 'system' : 'supplier';
		},
		login(test) {
			// 体验一下
			console.log('登录')
			let mobile = '';
			let password = '';
			if (test) {
				mobile = '18888888888';
				password = '123456';
			} else {
				if (!this.mobile) {
					this.$u.toast('请输入登录账号');
					return;
				}
				if (!this.password) {
					this.$u.toast('请输入密码');
					return;
				}
				mobile = this.mobile;
				password = this.password;
			}

			this.is_loading = true;
			let params = {
				mobile: mobile,
				password: password
			};
			if (this.login_type === 'supplier') {
				params.source = '2'; //1企业员工, 商户登录 2:供应商登录
			}
			this.$u.api
				.login(params)
				.then(res => {
					this.is_loading = false;
					this.$store.commit('commit_token', res.data.token);
					this.$store.commit('commit_hasLogin', true);

					if (res.data.enterprise.length > 1) {
						this.goPage('/pages/enterprise/index');
					} else if (res.data.enterprise.length === 1) {
						this.goShop(res.data.enterprise[0]);
					} else {
						this.$u.toast('抱歉当前账号没有企业');
					}
				})
				.catch((err) => {
					this.is_loading = false;
					console.log(err)
					console.log('错误')
				});
		},
		forgetPwd() {
			this.forgetPwd_istrue = true;
		},
		// 进入企业
		async goShop(row) {
			this.$store.commit('commit_enToken', row.token);
			this.$store.commit('commit_enterprise', row);
			if (this.login_type === 'system') {
				await this.getAclList(row.roleType);
				await this.getStaffByToken(row.roleType);
				this.goPage('/pages/index/index', 'switchTab');
			} else {
				await this.getSupplierByUserCenterId();
			}
		},
		//获取供应商详情
		async getSupplierByUserCenterId() {
			await this.$u.api.getSupplierByUserCenterId().then(res => {
				this.$store.commit('commit_supplierToken', res.data.token || '');
				this.$store.commit('commit_userInfo', res.data);
				// this.goPage('/pages/order/index', 'switchTab');
			});
		},
		// 获取登录权限
		async getAclList(roleType) {
			await this.$u.api.getAclList(roleType).then(res => {
				this.$store.commit('commit_access', res.data);
			});
		},
		async getStaffByToken(roleType) {
			await this.$u.api.getStaffByToken(roleType).then(res => {
				this.$store.commit('commit_userInfo', {
					...res.data,
					name: res.data.name || this.mobile || '18888888888'
				});
			});
		}
	}
};
</script>
<style>
page {
	background-color: #fff;
}
</style>
<style scoped lang="scss">
.change-login {
	position: fixed;
	bottom: 0;
	height: 80rpx;
	width: 100%;
	left: 0;
	text-align: center;
	line-height: 80rpx;
}
.login_bg {
	position: relative;
	image {
		width: 100%;
		height: 458rpx;
	}

	.login-title {
		width: 100%;
		font-size: 48rpx;
		color: #fff;
		text-align: center;
		text-shadow: 0px 3rpx 24rpx rgba(10, 42, 177, 0.75);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
	}

	.login_icon {
		color: #fff;
		position: absolute;
		top: 24%;
		left: 4%;
	}

	.login_content {
		width: 100%;
		background-color: #fff;
		border-radius: 80rpx 80rpx 0px 0px;
		position: absolute;
		top: 83%;
		left: 0;

		.login_info {
			height: 280rpx;
			// padding-left: 100rpx;
			line-height: 280rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #333333;
			text-align: center;

			.login_line {
				margin: 0 40rpx 0 40rpx;
				width: 2rpx;
				height: 32rpx;
				color: #f1f1f1;
				display: inline-block;
			}

			.login_tip {
				font-size: 48rpx;
				font-weight: bold;
				color: #000000;
			}
		}

		.login_input {
			padding: 0 100rpx;

			.input_mobile {
				height: 100rpx;
				background-color: #f4f4fb;
				border-radius: 10rpx;
				padding: 0 50rpx;
			}

			.yzm_btn {
				width: 220rpx;
				height: 98rpx;
				border-radius: 12rpx;
				border: 1px solid #2979ff;
				color: #2979ff;
				font-size: 28rpx;
				text-align: center;
				font-weight: 500;
				line-height: 100rpx;
			}
		}

		.login_bottom {
			margin-top: 80rpx;
			padding: 0 100rpx 0 150rpx;

			.password {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 100rpx;
			}

			.btn {
				width: 283rpx;
				height: 100rpx;
				background: linear-gradient(90deg, #072afe 0%, #06a0fa 100%);
				border-radius: 20rpx;
				color: #fff;
				padding: 0 60rpx;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 100rpx;

				.custom-icon {
					margin-left: 46rpx;
					line-height: 100rpx;
					font-size: 36rpx;
				}
			}
		}
	}
}
</style>