制作登录

2025-04-22 11:22:18 +08:00
parent 5d4a682c16
commit 16074dd05e
515 changed files with 28526 additions and 38120 deletions
--- a/pages/login/mobile.vue
+++ b/pages/login/mobile.vue
@ -0,0 +1,121 @@
+<template>
+	<view class="login">
+		<view class="title">手机号登录</view>
+		
+		<view>
+			<u-form :model="form" ref="form">
+				<u-form-item label="+86" class="mobile">
+					<u-input v-model="form.mobile" placeholder="请输入电话"/>
+				</u-form-item>
+				<u-form-item>
+					<u-input v-model="form.code" placeholder="请输入验证码"></u-input>
+					<view slot="right">
+						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
+						@change="codeChange"></u-verification-code>
+						<u-button size="mini" shape="circle" hover-class="none" @tap="getCode">{{tips}}</u-button>
+					</view>
+				</u-form-item>
+			</u-form>
+		</view>
+		
+		<view class="u-margin-top-32">
+			<u-button @click="handleLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">登录/注册</u-button>
+		</view>
+		
+		<view class="u-margin-top-32 u-flex u-row-center">
+			<u-checkbox v-model="form.checked" @change="allowProtocol" shape="circle" :active-color="themeColor">
+			    <view class="sm row-start">
+			        已阅读并同意
+			        <navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=0">
+			            《服务协议》
+			        </navigator>
+			        和
+			        <navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=1">
+			            《隐私政策》
+			        </navigator>
+			    </view>
+			</u-checkbox>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				form: {
+					mobile: '',
+					code: '',
+					checked: false
+				},
+				seconds: 60,
+				tips: ''
+			}
+		},
+		methods: {
+			// 更改验证码按钮提示语
+			codeChange(text) {
+				this.tips = text;
+			},
+			
+			// 获取验证码
+			getCode() {
+				if(this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						this.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					}, 2000);
+				} else {
+					this.$u.toast('倒计时结束后再发送');
+				}
+			},
+			
+			// 是否同意登录协议
+			allowProtocol() {
+				
+			},
+			
+			handleLogin() {
+				const {mobile, code, checked} = this.form
+				if (!this.$u.test.mobile(mobile)) {
+					return this.$u.toast('请检查手机号码格式！')
+				}
+				
+				if (!code) {
+					return this.$u.toast('请输入验证码！')
+				}
+				
+				if (!checked) {
+					return this.$u.toast('请输入验证码！')
+				}
+				console.log(123123)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #fff;
+	}
+	
+	.login {
+		margin: 0 64rpx;
+		
+		.title {
+			font-size: 56rpx;
+			margin-top: 190rpx;
+		}
+		
+		.mobile {
+			margin-top: 96rpx;
+		}
+	}
+</style>