h5-tiyu/pages/login/login.vue

<template>
	<view class="page">
		<view class="index-navbar">
			<view class="" style="position: relative;;">
				<view class="back"></view>
				<u-navbar title-width='300' title='' :is-back="false" :border-bottom="false"
					:background="{background:'rgba(0,0,0,0)'}" :isFixed="true"></u-navbar>
			</view>
		</view>
		<view class="login">
			<view class="tabs u-flex">
				<view @click="change(0)" :class="tabs==0?'chat1':'chat2'">验证码登录</view>
				<view class="line"></view>
				<view @click="change(1)" :class="tabs==1?'chat1':'chat2'">密码登录</view>
			</view>
			<view class="input" style="margin-top: 23px;">
				<u-input placeholder-style='font-size: 32rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #222222;opacity: 0.4;' placeholder='请输入手机号' v-model="phone" type="text" :border="false" :clearable='false' />
			</view>
			<view class="input u-flex" v-if="tabs==0">
				<u-input placeholder-style='font-size: 32rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #222222;opacity: 0.4;' placeholder='请输入验证码' v-model="code" type="text" :border="false" :clearable='false' />
				<!-- <view class="code">
					获取验证码
				</view> -->
				<text class="code" @click="getCode">{{tips}}</text>
			</view>
			<view class="input u-flex" v-if="tabs==1">
				<u-input placeholder-style='font-size: 32rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #222222;opacity: 0.4;' placeholder='请输入密码' v-model="password" type="text" :border="false" :clearable='false' />
			</view>
			<view class="button" @click="toindex">
				登录
			</view>
			<view class="zhu" v-if="tabs==0" @click='tozhuce'>
				<view class="">
					<text>没有账号，</text>
					<text style="color: #06A971;">立即注册</text>
				</view>
			</view>
			<view class="zhu u-row-between u-flex" v-if="tabs==1">
				<view class="" @click='tozhuce'>
					<text>没有账号，</text>
					<text style="color: #06A971;">立即注册</text>
				</view>
				<text @click="forget">忘记密码</text>
			</view>
			<view class="xie u-flex ">
				<u-checkbox shape="circle" v-model="checked"></u-checkbox>
				<view class="" style="margin-left: -12rpx;">
					<text>阅读并同意</text>
					<text style='color:#06A971;'>《隐私政策》</text>
					<text>和</text>
					<text style='color:#06A971;'>《服务协议》</text>
				</view>
			</view>
		</view>
		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: 0,
				phone: '',
				checked: false,
				code: '',
				password: '',
				tips: '',
			};
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			tozhuce() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			getCode() {
				if (!this.$u.test.mobile(this.phone)) {
					this.$u.toast("请输入正确的手机号")
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					this.$u.post('/api/sms/send', {
						mobile: this.tel,
						event: 'login'
					}).then(res => {
						if (res.code == 1) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.msg)
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			change(index) {
				this.tabs = index
			},
			forget() {
				uni.navigateTo({
					url: '/pages/login/forgetPassword'
				})
			},
			toindex() {
				if (!this.checked) {
					this.$u.toast('请先勾选协议')
					return
				}
				this.$u.post('api/user/login', {
					account: this.phone,
					password: this.password
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.userinfo.token)
						this.$u.toast(res.msg)
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 800)
					} else {
						this.$u.toast(res.msg)
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.xie {
		width: 96%;
		position: fixed;
		bottom: 86rpx;
		font-size: 22rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		align-items: center;
		justify-content: center;
	}

	.page {
		height: 100vh;
	}

	.zhu {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #444444;
		line-height: 34rpx;
		text-align: center;
		margin-top: 64rpx;
	}

	.button {
		// width: 656rpx;
		height: 92rpx;
		background: linear-gradient(316deg, #1EBE8C 0%, #06A971 100%);
		box-shadow: 0rpx 32rpx 48rpx -20rpx rgba(6, 169, 113, 0.5);
		border-radius: 12rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 92rpx;
		margin-top: 52rpx;
		text-align: center;
	}

	.code {
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #06A971;
		opacity: 1;
	}

	.input {
		height: 134rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.14);
	}

	.login {
		padding: 18rpx 25rpx 0 20rpx;

		.chat1 {
			font-size: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #222222;
			opacity: 0.999;
		}

		.line {
			width: 2rpx;
			height: 30rpx;
			opacity: 0.3;
			background: #979797;
			margin: 0 20px 0 20px;
		}

		.chat2 {
			font-size: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #222222;
			opacity: 0.5;
		}
	}


	.index-navbar {
		// position: sticky;
		// top: 0;
		// left: 0;
		// width: 100vw;
		// z-index: 100;

		// overflow: hidden;
		.back {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100vw;
			height: 494rpx;
			background: linear-gradient(180deg, #D7F5EB 0%, #FFFFFF 100%);
		}
	}
</style>