ZhiHuiJiaoWu_UniApp/pages/student/login/login.vue

<template>
	<view>
		<view style="height: 500rpx;background-color:#fff;">
			<view style="height: 150rpx;"></view>
			<view class="image-container;">
				<image src="@/static/images/login/login1.png" class="base-image"></image>
				<image src="@/static/images/login/login2.png" class="overlay-image"></image>
			</view>
			<view style="width: 100%;font-size: 60rpx;color: #ccc;text-align: center;margin-top: 60rpx;">
				运动课堂
			</view>
		</view>
		<view :style="{'background-color':'#fff','width':'100%','height':'100vh' }">
			<view style="width: 95%;height: 30rpx;"></view>
			<view style="width: 95%;margin:30rpx auto;">
				<fui-input borderTop placeholder="登录账号" v-model="user" @input="input"
					backgroundColor="#f2f2f2"></fui-input>
			</view>
			<view style="width: 95%;margin: auto;">
				<fui-input borderTop :padding="['20rpx','32rpx']" v-model="password1" placeholder="登录密码"
					:password="password" @input="input" backgroundColor="#f2f2f2">
					<fui-icon :name="password?'invisible':'visible'" color="#B2B2B2" :size="50"
						@click="change"></fui-icon>
				</fui-input>
			</view>
			<view style="width: 95%;margin:60rpx auto;">
				<fui-button background="#00be8c" radius="5rpx" @click="login">登录</fui-button>
			</view>

			<view style="width: 95%;margin:60rpx auto;">
				<fui-button background="#fff" radius="5rpx" @click="forgot" color="#00be8c">忘记登录密码</fui-button>
			</view>

		</view>
	</view>
</template>

<script>
	import memberApi from '@/api/member.js';

	export default {
		data() {
			return {
				password: true,
				user: '18888888888', //账户
				password1: '123456' //密码
			}
		},
		onLoad() {
			// uni.hideHomeButton()
			// console.log(uni.getStorageSync('um_id'))
		},
		methods: {
			input(e) {
				console.log(e)
			},
			change() {
				this.password = !this.password
			},
			forgot() {
				uni.navigateTo({
					url: '/pages/student/login/forgot'
				})
			},
			//登陆
			login() {
				let item = {};
				item['username'] = this.user
				item['password'] = this.password1
				//登陆
				memberApi.login(item).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('userType', res.data.userType);
						let url_path = ''
						switch (String(res.data.userType)) {
							case '1': //教练
								url_path = '/pages/coach/home/index'
								break;
							case '2': //销售
								url_path = '/pages/market/index/index'
								break;
							case '3': //学员
								url_path = '/pages/student/index/index'
								break;
							default:
								uni.showToast({
									title: '用户类型错误',
									icon: 'none'
								})
								return;
						}

						uni.navigateTo({
							url: url_path
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			loginWx() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res)
						medication.wechatminilogin({
							code: res.code
						}).then(res1 => {
							if (res1.status == 200) {
								uni.setStorageSync('um_id', res1.data.um_id);
								uni.setStorageSync('user', res1.data);
								uni.switchTab({
									url: '/pages/my/my'
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
					}
				});
			},
		}
	}
</script>

<style>
	page {
		font-weight: normal;
	}

	.fui-section__title {
		margin-left: 32rpx;
	}

	.fui-left__icon {
		padding-right: 24rpx;
	}

	.image-container {
		margin: auto;
		position: relative;
		width: 150rpx;
		/* 设置与第一张图片相同的宽度 */
		height: 150rpx;
		/* 设置与第一张图片相同的高度 */
	}

	.base-image {
		width: 100%;
		height: 100%;
	}

	.overlay-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100rpx;
		height: 100rpx;
	}
</style>