xiongmao/pages/login/login.vue

<!-- 密码登录 -->
<template>
	<view class="wrap">
		<view class="title-row">
			<view>登录携手熊猫</view>
			<view>登录以使用更多服务</view>
		</view>
		<view class="form-box">
			<view class="form-row">
				<view class="num-row">
					+86 <image src="../../static/sanjiao.png" class="sanjiao" mode="widthFix"></image>
				</view>
				<input type="text" value="" class="input" placeholder="请输入手机号" placeholder-class="placeholder" />
			</view>
			<view class="form-row">
				<input class="input" :password="!flag" value="" placeholder="请输入密码" placeholder-class="placeholder" />
				<image @click="flag=!flag" :src="flag ? '../../static/eye.png' : '../../static/eye-close.png'"
					class="eye-icon" mode="heightFix" />
			</view>
			<view class="msg">
				<text @tap="register">立即注册</text>
				<text @tap="forgotPassword">忘记密码?</text>
			</view>
			<view class="btn-box">
				<button type="default" class="active" @tap="go">登录</button>
			</view>
			<view class="login-box">
				<view @tap="messageLogin">验证码登录</view>
				<view @tap="mobileNumberLogin">一键登录</view>
			</view>
			<view class="type-box">
				<button type="default">
					<image src="../../static/type-2.png" mode=""></image>
				</button>
				<button type="default">
					<image src="../../static/type-1.png" mode=""></image>
				</button>
			</view>
			<view class="login-bottom-row">
				<view class="select-btn" @tap="selected">
					<image :src="select ? '../../static/circle-active.png' : '../../static/circle.png'" />
				</view>
				登录即同意《中国移动认证服务条款》和《携手熊猫用户协议》
			</view>
		</view>
	</view>
</template>

<script>
	import { loginPasswordLogin } from '../../common/service.js';
	import { validatorFun } from '../../common/utils/util';
	export default {
		data() {
			return {
				//隐藏显示密码
				flag: false,
				
				select:true,
				params: {
					phone: '',  // 手机号
					password: '',  // 密码
				},
			}
		},
		methods: {
			login() {
				if (!this.select) {
					return uni.showToast({
						icon: 'none',
						title: '请阅读并同意《中国移动认证服务条款》和《携手熊猫用户协议》'
					});
				}
				const params = this.params;
				const errList = validatorFun(params, [
					['phone', ['notNull', '请输入手机号'], ['isMobile', '请输入正确手机号']],
					['password', ['notNull', '请输入密码']],
				]);
				if (errList.length > 0) {
					return uni.showToast({
						icon: 'none',
						title: errList[0].errMsg,
					});
				}
				loginPasswordLogin({
					data: params,
					success: ({code, msg, data}) => {
						if (code == 1) {
							uni.setStorageSync('session_key', data.token);
							uni.reLaunch({
								url: '/pages/index/index',
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: msg,
							});
						}
					}
				});
			},
			selected: function() {
				this.select = !this.select;
			},
			// 跳转注册
			register(){
				uni.navigateTo({
					url:'register/register'
				})
			},
			// 跳转验证码登录
			messageLogin(){
				uni.navigateTo({
					url:'message-login/message-login'
				})
			},
			// 跳转一键登录
			mobileNumberLogin(){
				uni.navigateTo({
					url:'mobile-number-login/mobile-number-login'
				})
			},
			// 跳转忘记密码
			forgotPassword(){
				uni.navigateTo({
					url:'forgot-password/forgot-password'
				})
			},
			// 跳转首页
			go() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./login.css";
</style>