index.vue 4.1 KB
Newer Older
芊里 已提交
1
<template>
芊里 已提交
2
	<view class="wrap" v-show="isShow">
L
213  
linju 已提交
3
		<view class="wrap-content">
芊里 已提交
4
			<view class="content">
L
linju 已提交
5
				<!-- 顶部文字 -->
芊里 已提交
6
				<text class="content-top-title">登陆后即可展示自己</text>
芊里 已提交
7
				<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
L
linju 已提交
8
				<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
芊里 已提交
9 10 11 12 13 14 15 16 17 18 19 20 21
				<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-forms-item>
					<button class="send-btn-box" :disabled="!canGetShortMsg" :type="canGetShortMsg?'primary':'default'"
						@click="sendShortMsg">获取短信验证码</button>
L
123  
linju 已提交
22 23 24
				</uni-forms>

				<!-- tip -->
芊里 已提交
25
				<text class="tip-text">未注册的手机号验证通过后将自动注册</text>
L
linju 已提交
26 27

				<!-- 其他登录方式 -->
芊里 已提交
28 29 30
				<view class="auth-box">
					<text class="login-text" hover-class="hover" @click="toPwdLogin">密码登录</text>
					<text class="login-text" hover-class="hover" @click="openLoginList">其他登录方式</text>
L
linju 已提交
31 32
				</view>
			</view>
芊里 已提交
33
		</view>
L
linju 已提交
34
		<!-- 登录按钮弹窗 -->
芊里 已提交
35
		<login-action-sheet ref="loginActionSheet"></login-action-sheet>
L
213  
linju 已提交
36
		<uni-quick-login></uni-quick-login>
芊里 已提交
37 38 39 40 41 42
	</view>
</template>

<script>
	export default {
		data() {
芊里 已提交
43 44
			return {
				isShow: false,
L
linju 已提交
45 46 47 48 49 50 51 52 53
				link: [{
					text: '用户协议',
					to: '/baidu.com'
				}, {
					text: '隐私政策',
					to: 'baidu'
				}],
				phoneArea: ['+86', '+87'],
				currenPhoneArea: '+86',
芊里 已提交
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
				phoneNumber: '',

				formData: {
					phone: ''
				},
				rules: {
					// 对phone字段进行必填验证
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern: /^1\d{10}$/,
								errorMessage: '手机号格式不正确',
							}
						]
					}
				}
L
linju 已提交
73
			}
芊里 已提交
74 75 76 77 78
		},
		onReady() {
			setTimeout(() => {
				this.isShow = true
			}, 1500);
L
linju 已提交
79 80 81 82
		},
		computed: {
			canGetShortMsg() {
				let reg = /^1\d{10}$/;
芊里 已提交
83
				return reg.test(this.formData.phone);
芊里 已提交
84 85
			}
		},
L
linju 已提交
86
		methods: {
芊里 已提交
87 88 89 90 91 92 93 94
			// 触发提交表单
			submit() {
				this.$refs.form.submit().then(res => {
					console.log('表单数据信息:', res);
				}).catch(err => {
					console.log('表单错误信息:', err);
				})
			},
L
linju 已提交
95 96 97 98 99 100 101
			selectPhoneArea(event) {
				this.currenPhoneArea = this.phoneArea[event.detail.value];
			},
			sendShortMsg() {
				if (!this.canGetShortMsg) return;
				/**
				 * 发送验证吗
102
				 */
L
123  
linju 已提交
103 104 105 106 107 108 109 110 111
				uni.showLoading();
				uniCloud.callFunction({
					"name": "user",
					"data": {
						"action": "sendSmsCode",
						"params": {
							"mobile": this.formData.phone,
							"type": "login"
						}
112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
					},
					success: (e) => {
						console.log(e);
						uni.showToast({
							title: JSON.stringify(e.result),
							icon: 'none'
						});
						uni.navigateTo({
							url:'./phone-code?phoneNumber='+this.formData.phone+'&phoneArea='+this.currenPhoneArea
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					},
					fail: (err) => {
						console.log(err);
					},
					complete: () => {
						uni.hideLoading()
L
123  
linju 已提交
131
					}
芊里 已提交
132
				})
L
linju 已提交
133 134 135
			},
			/**
			 * 去密码登录页
芊里 已提交
136
			 */
L
linju 已提交
137 138 139 140 141 142 143
			toPwdLogin() {
				uni.navigateTo({
					url: './pwd-login'
				})
			},
			openLoginList() {
				this.$refs.loginActionSheet.open();
芊里 已提交
144 145 146 147 148
			}
		}
	}
</script>

芊里 已提交
149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
<style>
	@import url("../../common/loginPage.css");

	.content-top-title {
		text-align: center;
	}

	.login-iknow {
		justify-content: center;
	}

	.phone-area {
		/* #ifdef APP-NVUE */
		border-right-width: 1rpx;
		border-right-color: #d7d9d8;
		/* #endif */
		/* #ifndef APP-NVUE */
		border-right: 1rpx solid #d7d9d8;
		/* #endif */
芊里 已提交
168
	}
169
</style>