zcb_APP/pages/login/index.vue

<template>
	<view class="content">
		<view class="top_bg">
			<image class="top_close" @click="$navTo('/pages/my/index','tabbar')" src="/static/image/login/close_icon.png" mode="scaleToFill" />
			<view class="top_text">
				<view>欢迎来到众酬帮</view>
				<image
					class="top_icon"
					src="/static//image/login/dot_icon.png"
					mode="scaleToFill"
				/>
			</view>
		</view>

		<view class="w pdx-40 main">
			<u--input class="h-112" v-model="loginParam.phone" placeholder="请输入手机号码" border="bottom"
				clearable></u--input>
			<u--input v-if="loginParam.loginWay === 'password'" class="h-112 mgt-16" v-model="loginParam.password"
				:password="!isViewPassword" placeholder="请输入密码" border="bottom" clearable>
				<template slot="suffix">
					<u-icon @click="isViewPassword = !isViewPassword" :name="isViewPassword ? 'eye-fill' : 'eye-off'"
						color="#303030" size="24"></u-icon>
				</template>
			</u--input>
			<u--input v-else class="h-112 mgt-16" v-model="loginParam.code" placeholder="请输入验证码" border="bottom"
				clearable>
				<template slot="suffix">
					<u-code :seconds="seconds" @end="end" @start="start" change-text="xs" ref="uCode"
						:keep-running="true" @change="codeChange"></u-code>
					<u-button :disabled="!isShowCode" @tap="sliderVerify" class="code_btn">{{ tips }}</u-button>
				</template>
			</u--input>
			<view class="flex jc_between mgt-32">
				<view v-if="loginParam.loginWay === 'password'" @click="loginParam.loginWay = 'code'"
					class="text-24 text-500 text-303030">验证码登录</view>
				<view v-else @click="loginParam.loginWay = 'password'" class="text-24 text-500 text-303030">密码登录</view>
				<view class="text-24 text-500 text-303030" @click="$navTo('/pages/login/register')">注册</view>
			</view>

			<button class="login" @tap="submit">登录</button>
			<view class="mgt-32 text-24 text-500 text-303030 text-center" @click="$navTo('/pages/login/forget')">忘记密码</view>
			<view class="mgt-130">
				<u-divider text="快捷登录"></u-divider>
			</view>
			<view class="w flex jc_center mgt-30">
				<image class="w-80 h-80 " src="/static/image/login/weinxin_icon.png" mode="scaleToFill" />
			</view>

			<view class="mgt-72 text-24 text-7E7E7E text-500">
				登录即代表同意
				<text class="text-303030">《用户协议》</text>和
				<text class="text-303030">《隐私政策》</text>
			</view>
		</view>
		<zmm-slider-verify ref="sliderVerify" @success="successHandle" @error="errorHandle"
			@close="closeHandle"></zmm-slider-verify>
	</view>
</template>

<script>
import { isValidPhone, isValidPassword } from '@/utils/index'
export default {
	data() {
		return {
			isViewPassword: false,
			isCode: false,//验证码按钮状态
			tips: '',// 验证码提示文字
			seconds: 60,//验证码秒数
			loginParam: {
				phone: undefined,
				password: undefined,
				code: undefined,
				loginWay: 'password'
			},
		}
	},
	computed: {
		isShowCode() {
			return this.loginParam.phone && !this.isCode
		}

	},
	watch: {

	},
	onLoad() {

	},
	methods: {
		//显示验证组件
		sliderVerify() {
			if(isValidPhone(this.loginParam.phone)) {
				this.$refs['sliderVerify'].show()
			} else {
				uni.$u.toast('请输入正确手机号');
			}
		},
		//验证通过回调
		successHandle(e) {
			console.log(e)
			this.getCode()
		},
		//验证失败回调
		errorHandle(e) {
			console.log(e)
		},
		//组件关闭回调
		closeHandle(e) {
			console.log(e)
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			// uni.$u.toast('倒计时结束');
			this.isCode = false
		},
		start() {
			// uni.$u.toast('倒计时开始');
			this.isCode = true
		},
		submit() {
			console.log('提交参数 :===>>', this.loginParam);
			//todo 请求后端接口 
			// 通过后跳转到个人中心
			this.$navTo('/pages/my/index','redirect')
		}
	}
}
</script>

<style scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.top_bg {
	position: relative;
	width: 100vw;
	height: 568rpx;
	flex-shrink: 0;
	background: linear-gradient(to bottom, #ffd8bf, #ffffff);

	.top_close {
		position: absolute;
		top: 128rpx;
		left: 40rpx;
		width: 48rpx;
		height: 48rpx;
	}

	.top_text {
		position: absolute;
		top: 224rpx;
		left: 64rpx;
		display: flex;
		color: #070602;
		font-family: "MiSans VF";
		font-size: 52rpx;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		letter-spacing: 0.66rpx;
		text-transform: uppercase;
	}

	.top_icon {
		margin-top: -10rpx;
		margin-left: 8rpx;
		width: 24rpx;
		height: 24rpx;
	}
}

.main {
	margin-top: -72rpx;

	.login {
		margin-top: 136rpx;
		height: 96rpx;
		width: 100%;
		flex-shrink: 0;
		border-radius: 64rpx;
		background: #FE6505;
		color: #ffffff;
		text-align: center;
		font-family: "MiSans VF";
		font-size: 36rpx;
		font-style: normal;
		font-weight: 500;
	}

	.code_btn {
		padding: 0rpx 24rpx;
		height: 60rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
		color: #fff;
		font-weight: 400;
		background: linear-gradient(0deg, #FE6505 0%, #FE6505 100%), #141111;
	}

	.code_btn_off {
		background: #fe65054d;
	}
}
</style>