From 491264f8787c8c4891e7e47c70278df25bfcb7a7 Mon Sep 17 00:00:00 2001
From: huangq <nonamehq@sina.com>
Date: Tue, 23 Feb 2021 14:52:51 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=83=A8=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/config.js                              |   1 +
 pages.json                                    |  18 ++
 pages/login/components/login-footer.vue       |  27 +++
 pages/login/login-main/login-main.vue         | 170 ++++++++++++++++++
 pages/login/login.vue                         |  77 +++++++-
 pages/login/reset-password/reset-password.vue | 142 +++++++++++++++
 6 files changed, 426 insertions(+), 9 deletions(-)
 create mode 100644 common/config.js
 create mode 100644 pages/login/components/login-footer.vue
 create mode 100644 pages/login/login-main/login-main.vue
 create mode 100644 pages/login/reset-password/reset-password.vue

diff --git a/common/config.js b/common/config.js
new file mode 100644
index 0000000..1dbc0d3
--- /dev/null
+++ b/common/config.js
@@ -0,0 +1 @@
+export const identifyingCodeTime = 60
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 698fd4f..0a02e06 100644
--- a/pages.json
+++ b/pages.json
@@ -30,6 +30,24 @@
             }
             
         }
+        ,{
+            "path" : "pages/login/login-main/login-main",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "登录",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/login/reset-password/reset-password",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "重置密码",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/login/components/login-footer.vue b/pages/login/components/login-footer.vue
new file mode 100644
index 0000000..276f323
--- /dev/null
+++ b/pages/login/components/login-footer.vue
@@ -0,0 +1,27 @@
+<template>
+	<view class="login_footer">
+		登录即表示您同意
+		<text>《用户协议》</text>
+		及
+		<text>《隐私政策》</text>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	.login_footer{
+		position: fixed;
+		left: 0;
+		right: 0;
+		text-align: center;
+		bottom: 80rpx;
+		font-size: 22rpx;
+		font-weight: 400;
+		color: #FFFFFF;
+		text{
+			color: #FE192F;
+		}
+	}
+</style>
diff --git a/pages/login/login-main/login-main.vue b/pages/login/login-main/login-main.vue
new file mode 100644
index 0000000..4a542b5
--- /dev/null
+++ b/pages/login/login-main/login-main.vue
@@ -0,0 +1,170 @@
+<template>
+	<view class="login_form">
+		<!-- 登录方式切换 -->
+		<view class="login_type">
+			<text :class="{active: login_type === 'phone'}" @click="handleChangeType('phone')">验证码登录</text>
+			<text :class="{active: login_type === 'pwd'}" @click="handleChangeType('pwd')">密码登录</text>
+		</view>
+		<!-- 输入框 -->
+		<view>
+			<view class="login-input_box">
+				<u-input v-model="loginFrom.telPhone" class="login_input" :clearable="false" placeholder="请输入手机号" />
+				<text class="input-btn"></text>
+			</view>
+			<view class="login-input_box" v-show="login_type === 'pwd'">
+				<u-input v-model="loginFrom.password" class="login_input" :clearable="false" placeholder="请输入密码" />
+				<text class="input-btn" @click="handleResetPassword">忘记密码？</text>
+			</view>
+
+			<view class="login-input_box" v-show="login_type === 'phone'">
+				<u-input v-model="loginFrom.password" class="login_input" :clearable="false" placeholder="请输入验证码" />
+				<text class="input-btn" @click="handleGetCode">{{codeText}}</text>
+			</view>
+		</view>
+
+		<!-- 登录按钮 -->
+		<u-button class="login_btn" @click="handleLogin()">登录</u-button>
+		<login-footer></login-footer>
+	</view>
+</template>
+
+<script>
+	let timer = null
+	import loginFooter from '../components/login-footer.vue'
+	import{ identifyingCodeTime } from '../../../common/config.js'
+	export default {
+		components: {
+			loginFooter
+		},
+		data() {
+			return {
+				login_type: 1,
+				loginFrom: {
+					telPhone: '',
+					password: ''
+				},
+				reaminSec: 0
+			}
+		},
+		onLoad(option) {
+			// 登录方式切换
+			this.login_type = option.type
+		},
+		computed: {
+			codeText() {
+				return this.reaminSec === 0 ? '获取验证码' : `${this.reaminSec}秒`
+			}
+		},
+		methods: {
+			handleChangeType(type) {
+				this.login_type = type
+			},
+			handleGetCode() {
+				if (this.reaminSec !== 0) {
+					return
+				}
+				this.setCodeText()
+			},
+			handleLogin() {
+				console.log('登录')
+			},
+			setCodeText() {
+				this.reaminSec = identifyingCodeTime
+				timer = setInterval(() => {
+					this.reaminSec--
+					if (this.reaminSec === 0) {
+						clearInterval(timer)
+						timer = null
+					}
+				}, 1000)
+			},
+			handleResetPassword() {
+				uni.navigateTo({
+					url: '../reset-password/reset-password'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.login_form {}
+
+	.login_type {
+		width: 440rpx;
+		margin: 140rpx auto 0;
+		height: 76rpx;
+		border-radius: 48rpx;
+		border: 2rpx solid #FE192F;
+		display: flex;
+		background-color: transparent;
+		align-items: center;
+		color: #FFFFFF;
+		overflow: hidden;
+		box-sizing: border-box;
+
+		text {
+			flex: 1;
+			height: 76rpx;
+			line-height: 76rpx;
+			text-align: center;
+			color: #FE192F;
+
+			&:first-child.active {
+				background: linear-gradient(90deg, #FC2234 100%, #ED7A66 0%);
+				color: #FFFFFF;
+			}
+
+			&:last-child.active {
+				background: linear-gradient(90deg, #ED7A66 0%, #FC2234 100%);
+				color: #FFFFFF;
+			}
+		}
+	}
+
+	.login-input_box {
+		margin: 0 auto;
+		width: 630rpx;
+		height: 96rpx;
+		background: #2B3062;
+		border-radius: 48rpx;
+		margin-top: 40rpx;
+		display: flex;
+		box-sizing: border-box;
+		align-items: center;
+		padding: 0 50rpx;
+
+		&:first-child {
+			margin-top: 100rpx;
+		}
+
+		.input-btn {
+			width: 180rpx;
+			text-align: center;
+			color: #FE192F;
+			font-size: 24rpx;
+		}
+	}
+
+	/deep/ .login_input {
+		width: 350rpx;
+
+		input {
+			color: #FFFFFF;
+		}
+
+	}
+
+	.login_btn {
+		margin: 100rpx auto 0;
+		color: #FFFFFF;
+		font-size: 32rpx;
+		width: 630rpx;
+		height: 96rpx;
+		background: linear-gradient(90deg, #ED7A66 0%, #FC2234 100%);
+		border-radius: 48rpx;
+		&::after{
+			border: none;
+		}
+	}
+</style>
diff --git a/pages/login/login.vue b/pages/login/login.vue
index eceb1f2..0d48cec 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -1,39 +1,98 @@
+<!-- 登录主页面 -->
 <template>
 	<view>
-		<view>欢迎来到在线下单</view>
-		<view>
+		<view class="title one">欢迎来到在线下单</view>
+		<view class="title_one title">
 			<span>又</span>
 			酷
 			<span>又</span>
 			靠谱的
 		</view>
-		<view>赚钱神器</view>
-		<u-button type="primary" class="login-btn">
+		<view class="title_two title">赚钱神器</view>
+		<u-button type="primary" class="wechat login_btn">
 			<image src="../../static/img/login_slices/dl_icon_wx@2x.png" style="width: 52rpx; height: 42rpx;"></image>
 			<text>微信快捷登录</text>
 		</u-button>
-		<u-button class="login-btn">密码登录</u-button>
-		<u-button class="login-btn">手机号码登录</u-button>
+		<u-button class="passseord login_btn" @click="handleLogin('pwd')">密码登录</u-button>
+		<u-button class="telphone login_btn" @click="handleLogin('phone')">手机号码登录</u-button>
+		<login-footer></login-footer>
 	</view>
 </template>
-
 <script>
+	import loginFooter from './components/login-footer.vue'
 	export default {
+		components:{
+			loginFooter
+		},
 		data() {
 			return {
 				
 			}
 		},
 		methods: {
-			
+			handleLogin(type){
+				uni.navigateTo({
+					url:`login-main/login-main?type=${type}`
+				})
+			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-.login-btn{
+.login_btn{
 	width: 630rpx;
 	height: 96rpx;
 	border-radius: 48rpx;
+	font-size: 32rpx;
+	font-weight: 400;
+	&::after{
+		border: none;
+	}
+}
+.one{
+	margin-top: 150rpx;
+}
+.title{
+	color: #FFFFFF;
+	font-size: 52rpx;
+	font-weight: 400;
+	line-height: 1;
+	text-align: center;
+}
+.title_one{
+	font-size: 38rpx;
+	font-weight: 400;
+	margin-top: 30rpx;
+	span{
+		color: #FC2436;
+	}
+}
+.title_two{
+	margin-top: 10rpx;
+	color: #FC2436;
+	font-size: 52rpx;
+}
+
+.wechat{
+	margin-top: 90rpx;
+	background-color: #FFFFFF;
+	color: #FC2436;
+	font-size: 32rpx;
+	text{
+		margin-left: 20rpx;
+	}
+}
+.passseord{
+	margin-top: 60rpx;
+	color: #FFFFFF;
+	background: linear-gradient(90deg, #ED7A66 0%, #FC2234 100%);
+	border-radius: 48rpx;
+}
+.telphone{
+	margin-top: 60rpx;
+	background-color: transparent;
+	color: #FB2938;
+	border: 2rpx solid #FE192F;
 }
 </style>
diff --git a/pages/login/reset-password/reset-password.vue b/pages/login/reset-password/reset-password.vue
new file mode 100644
index 0000000..f3f91e6
--- /dev/null
+++ b/pages/login/reset-password/reset-password.vue
@@ -0,0 +1,142 @@
+<template>
+	<view>
+		<!-- 输入框内容 -->
+		<view class="menu_title">
+			<text>修改/重置密码</text>
+		</view>
+		<view>
+			<view class="login-input_box">
+				<u-input v-model="loginFrom.telPhone" class="login_input" :clearable="false" placeholder="请输入手机号" />
+				<text class="input-btn"></text>
+			</view>
+
+			<view class="login-input_box">
+				<u-input v-model="loginFrom.code" class="login_input" :clearable="false" placeholder="请输入验证码" />
+				<text class="input-btn" @click="handleGetCode">{{codeText}}</text>
+			</view>
+			<view class="login-input_box">
+				<u-input v-model="loginFrom.password" class="login_input" :clearable="false" placeholder="请输入密码" />
+				<text class="input-btn"></text>
+			</view>
+			<view class="login-input_box">
+				<u-input v-model="loginFrom.repassword" class="login_input" :clearable="false" placeholder="请再次输入密码" />
+				<text class="input-btn"></text>
+			</view>
+		</view>
+
+		<u-button class="login_btn" @click="handleLogin()">立即修改</u-button>
+	</view>
+</template>
+
+<script>
+	import{ identifyingCodeTime } from '../../../common/config.js'
+	let timer = null
+	export default {
+		data() {
+			return {
+				loginFrom: {},
+				reaminSec: 0
+			}
+		},
+		computed: {
+			codeText() {
+				return this.reaminSec === 0 ? '获取验证码' : `${this.reaminSec}秒`
+			}
+		},
+		methods: {
+			handleResetPassword() {
+
+			},
+			handleGetCode() {
+				if (this.reaminSec !== 0) {
+					return
+				}
+				this.setCodeText()
+			},
+			setCodeText() {
+				this.reaminSec = identifyingCodeTime
+				timer = setInterval(() => {
+					this.reaminSec--
+					if (this.reaminSec === 0) {
+						clearInterval(timer)
+						timer = null
+					}
+				}, 1000)
+			},
+			handleLogin() {
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.menu_title {
+		overflow: hidden;
+		font-size: 44rpx;
+		padding-top: 100rpx;
+		padding-left: 60rpx;
+		color: #FFFFFF;
+		text{
+			display: block;
+			position: relative;
+			width: 350rpx;
+			&::after{
+				content: '';
+				position: absolute;
+				left: 0;
+				width: 100%;
+				height: 8rpx;
+				bottom: 0;
+				background-color: #FE192F;
+			}
+		}
+	}
+
+	.login-input_box {
+		margin: 0 auto;
+		width: 630rpx;
+		height: 96rpx;
+		background: #2B3062;
+		border-radius: 48rpx;
+		margin-top: 40rpx;
+		display: flex;
+		box-sizing: border-box;
+		align-items: center;
+		padding: 0 50rpx;
+
+		&:first-child {
+			margin-top: 100rpx;
+		}
+
+		.input-btn {
+			width: 180rpx;
+			text-align: center;
+			color: #FE192F;
+			font-size: 24rpx;
+		}
+	}
+
+	/deep/ .login_input {
+		width: 350rpx;
+
+		input {
+			color: #FFFFFF;
+		}
+
+	}
+
+	.login_btn {
+		margin: 100rpx auto 0;
+		color: #FFFFFF;
+		font-size: 32rpx;
+		width: 630rpx;
+		height: 96rpx;
+		background: linear-gradient(90deg, #ED7A66 0%, #FC2234 100%);
+		border-radius: 48rpx;
+
+		&::after {
+			border: none;
+		}
+	}
+</style>