pwd-login.vue 3.5 KB
Newer Older
芊里 已提交
1
<template>
芊里 已提交
2 3 4
	<view class="wrap">
		<view class="wrap-content">
			<view class="content">
芊里 已提交
5
				<!-- 顶部文字 -->
芊里 已提交
6
				<text class="content-top-title">手机号密码登录</text>
芊里 已提交
7
				<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
芊里 已提交
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
				<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
				<uni-forms ref="form" :value="formData" :rules="rules">
					<uni-forms-item name="phone">
						<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
							v-model="formData.phone" maxlength="11" placeholder="请输入手机号">
							<template slot="left">
								<picker mode="selector" :range="phoneArea" @change="selectPhoneArea">
									<text class="phone-area">{{currenPhoneArea}}</text>
								</picker>
							</template>
						</uni-easyinput>
						<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
							v-model="formData.pwd" placeholder="请输入密码"></uni-easyinput>
					</uni-forms-item>
					<button class="send-btn-box" :disabled="!canLogin" :type="canLogin?'primary':'default'"
						@click="pwdLogin">登录</button>
				</uni-forms>
芊里 已提交
25 26

				<!-- 忘记密码 -->
芊里 已提交
27 28 29
				<view class="auth-box">
					<text class="login-text login-text-sub">忘记了?</text>
					<text class="login-text" @click="toRetrievePwd">找回密码</text>
芊里 已提交
30 31 32 33 34 35
				</view>
			</view>
		</view>
	</view>
</template>

芊里 已提交
36 37 38 39
<script>
	import mixin from '../../common/loginPage.mixin.js';
	export default {
		mixins:[mixin],
芊里 已提交
40 41 42 43
		data() {
			return {
				phoneNumber: '',
				password: '',
芊里 已提交
44 45 46 47 48 49
				link: [{
					text: '用户协议',
					to: '/pages/ucenter/agree-list/service/service'
				}, {
					text: '隐私政策',
					to: '/pages/ucenter/agree-list/privacy/privacy'
芊里 已提交
50 51
				}],
				phoneArea: ['+86', '+87'],
芊里 已提交
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
				currenPhoneArea: '+86',
				
				formData: {
					phone: '',
					pwd:''
				},
				rules: {
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern: /^1\d{10}$/,
								errorMessage: '手机号格式不正确',
							}
						]
					},
					pwd:{
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								pattern: /^.{6,20}$/,
								errorMessage: '密码应为6到20位',
							}
						]
					}
				}
芊里 已提交
82 83 84 85 86 87
			}
		},
		computed: {
			canLogin() {
				let reg_phone = /^1\d{10}$/;
				let reg_pwd = /^.{6,20}$/;
芊里 已提交
88
				let isPhone = reg_phone.test(this.formData.phone);
芊里 已提交
89

芊里 已提交
90
				let isPwd = reg_pwd.test(this.formData.pwd);
芊里 已提交
91 92 93 94 95 96 97 98 99
				return isPhone && isPwd;
			}
		},
		methods: {
			/**
			 * 页面跳转,找回密码
			 */
			toRetrievePwd() {
				let reg_phone = /^1\d{10}$/;
芊里 已提交
100
				let isPhone = reg_phone.test(this.formData.phone);
芊里 已提交
101 102 103 104 105 106
				if (!isPhone) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});

				uni.navigateTo({
芊里 已提交
107
					url: './pwd-retrieve?phoneNumber=' + this.formData.phone + '&phoneArea=' + this.currenPhoneArea
芊里 已提交
108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124
				})
			},
			/**
			 * 密码登录
			 */
			pwdLogin() {
				if (!this.canLogin) return;
				// 下边是可以登录
			},
			selectPhoneArea(event) {
				this.currenPhoneArea = this.phoneArea[event.detail.value];
			},
		}
	}
</script>

<style>
芊里 已提交
125 126 127 128 129 130 131
	@import url("../../common/loginPage.css");

	.phone-input-box {
		margin-top: 20rpx;
	}

	.auth-box {
芊里 已提交
132
		justify-content: flex-start;
芊里 已提交
133 134 135 136 137
		margin-top: 20rpx;
	}

	.login-text-sub {
		color: #8a8f8b;
芊里 已提交
138 139
	}
</style>