From 55ff88a94a3e4c8e37abb5c56fed11d1efb3ec98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=8A=E9=87=8C?= <1227971437@qq.com>
Date: Wed, 7 Apr 2021 21:05:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../uni-login-page/common/loginPage.css       | 123 +++++++++++++++++
 .../components/login-ikonw/login-ikonw.vue    |   2 +-
 .../uni-login-page/pages/index/index.vue      | 116 +---------------
 .../uni-login-page/pages/index/pwd-login.vue  | 127 +-----------------
 .../pages/index/pwd-retrieve.nvue             | 110 ---------------
 .../pages/index/pwd-retrieve.vue              |  94 +++++++++++++
 6 files changed, 220 insertions(+), 352 deletions(-)
 create mode 100644 uni_modules/uni-login-page/common/loginPage.css
 delete mode 100644 uni_modules/uni-login-page/pages/index/pwd-retrieve.nvue
 create mode 100644 uni_modules/uni-login-page/pages/index/pwd-retrieve.vue

diff --git a/uni_modules/uni-login-page/common/loginPage.css b/uni_modules/uni-login-page/common/loginPage.css
new file mode 100644
index 00000000..a01b6b45
--- /dev/null
+++ b/uni_modules/uni-login-page/common/loginPage.css
@@ -0,0 +1,123 @@
+/* #ifndef APP-NVUE */
+page {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	height: 100%;
+}
+
+/* #endif */
+.wrap {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+	flex: 1;
+	width: 750rpx;
+	background-color: #fff;
+}
+
+.wrap-content {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex: 1;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.content {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	width: 630rpx;
+	flex-direction: column;
+}
+
+.content-top-title {
+	font-size: 32rpx;
+	font-weight: 600;
+	padding-top: 50rpx;
+}
+
+.hidden,
+page {
+	background-color: transparent;
+}
+
+.login-iknow {
+	padding-top: 24rpx;
+	padding-bottom: 48rpx;
+}
+
+.phone-input-box {
+	height: 85rpx;
+	background-color: #f9f9f9;
+	border-radius: 6rpx;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+	justify-content: center;
+}
+
+.phone-area {
+	padding: 0 20rpx;
+	font-size: 30rpx;
+}
+
+.phone-input {
+	flex: 1;
+	border-left-width: 1px;
+	border-left-color: #d7d9d8;
+	padding: 0 20rpx;
+	font-size: 30rpx;
+}
+
+.tip-text {
+	padding-top: 20rpx;
+	padding-bottom: 36rpx;
+	color: #8a8f8b;
+	font-size: 26rpx;
+}
+
+.send-btn-box {
+	height: 85rpx;
+	background-color: #d8d8da;
+	margin-bottom: 50rpx;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: column;
+	width: 630rpx;
+	justify-content: center;
+	align-items: center;
+	border-radius: 6rpx;
+}
+
+.send-btn-text {
+	color: #fff;
+}
+
+.send-btn-active {
+	background-color: #007aff;
+}
+
+.auth-box {
+	width: 630rpx;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.login-text {
+	color: #1c436e;
+	font-size: 26rpx;
+}
+
+.hover {
+	opacity: 0.8;
+}
diff --git a/uni_modules/uni-login-page/components/login-ikonw/login-ikonw.vue b/uni_modules/uni-login-page/components/login-ikonw/login-ikonw.vue
index f1ac3e0e..3b8ab116 100644
--- a/uni_modules/uni-login-page/components/login-ikonw/login-ikonw.vue
+++ b/uni_modules/uni-login-page/components/login-ikonw/login-ikonw.vue
@@ -19,7 +19,7 @@
 			},
 			link: {
 				type: Array,
-				default: []
+				default: ()=>[]
 			}
 		},
 		data() {
diff --git a/uni_modules/uni-login-page/pages/index/index.vue b/uni_modules/uni-login-page/pages/index/index.vue
index 5a28b043..69fc009b 100644
--- a/uni_modules/uni-login-page/pages/index/index.vue
+++ b/uni_modules/uni-login-page/pages/index/index.vue
@@ -87,121 +87,7 @@
 </script>
 
 <style>
-	/* #ifndef APP-NVUE */
-	page{
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		height: 100%;
-	}
-	/* #endif */
-	.wrap{
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		flex:1;
-		width: 750rpx;
-		background-color: #fff;
-	}
-	.wrap-content{
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: column;
-		justify-content: flex-start;
-		align-items: center;
-	}
-	.content{
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		width: 630rpx;
-		flex-direction: column;
-	}
-	.content-top-title{
-		font-size: 32rpx;
-		font-weight: 600;
-		padding-top: 50rpx;
-	}
-	.hidden,page{
-		background-color: transparent;
-	}
-
-	.login-iknow {
-		padding-top: 24rpx;
-		padding-bottom: 48rpx;
-	}
-
-	.phone-input-box {
-		height: 85rpx;
-		background-color: #f9f9f9;
-		border-radius: 6rpx;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		align-items: center;
-		justify-content: center;
-	}
-	.phone-area{
-		padding: 0 20rpx;
-		font-size: 30rpx;
-	}
-
-	.phone-input {
-		flex: 1;
-		border-left-width: 1px;
-		border-left-color: #d7d9d8;
-		padding: 0 20rpx;
-		font-size: 30rpx;
-	}
-
-	.tip-text {
-		padding-top: 20rpx;
-		padding-bottom: 36rpx;
-		color: #8a8f8b;
-		font-size: 26rpx;
-	}
-
-	.send-btn-box {
-		height: 85rpx;
-		background-color: #d8d8da;
-		margin-bottom: 50rpx;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		width: 630rpx;
-		justify-content: center;
-		align-items: center;
-		border-radius: 6rpx;
-	}
-	.send-btn-text{
-		color: #fff;
-	}
-
-	.send-btn-active {
-		background-color: #007aff;
-	}
-	
-	.auth-box{
-		width: 630rpx;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-	}
-	.login-text {
-		color: #1c436e;
-		font-size: 26rpx;
-	}
-	.hover{
-		opacity: 0.8;
-	}
-	
-	/* 首页独有 */
+	@import url("../../common/loginPage.css");
 	.content-top-title{
 		text-align: center;
 	}
diff --git a/uni_modules/uni-login-page/pages/index/pwd-login.vue b/uni_modules/uni-login-page/pages/index/pwd-login.vue
index 627e4b71..65957267 100644
--- a/uni_modules/uni-login-page/pages/index/pwd-login.vue
+++ b/uni_modules/uni-login-page/pages/index/pwd-login.vue
@@ -94,132 +94,7 @@
 </script>
 
 <style>
-	/* #ifndef APP-NVUE */
-	page {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		height: 100%;
-	}
-
-	/* #endif */
-	.wrap {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		flex: 1;
-		width: 750rpx;
-		background-color: #fff;
-	}
-
-	.wrap-content {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex: 1;
-		flex-direction: column;
-		justify-content: flex-start;
-		align-items: center;
-	}
-
-	.content {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		width: 630rpx;
-		flex-direction: column;
-	}
-
-	.content-top-title {
-		font-size: 32rpx;
-		font-weight: 600;
-		padding-top: 50rpx;
-	}
-
-	.login-iknow {
-		padding-top: 24rpx;
-		padding-bottom: 36rpx;
-	}
-
-	.phone-input-box {
-		height: 85rpx;
-		background-color: #f9f9f9;
-		border-radius: 6rpx;
-		flex-direction: row;
-		flex-wrap: nowrap;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.phone-area {
-		padding: 0 20rpx;
-		font-size: 30rpx;
-	}
-
-	.phone-input {
-		flex: 1;
-		border-left-width: 1px;
-		border-left-color: #d7d9d8;
-		padding: 0 20rpx;
-		font-size: 30rpx;
-	}
-
-	.pwd-input {
-		border-left-width: 0px;
-	}
-
-
-	.tip-text {
-		padding-top: 20rpx;
-		padding-bottom: 36rpx;
-		color: #8a8f8b;
-		font-size: 26rpx;
-	}
-
-	.send-btn-box {
-		height: 85rpx;
-		background-color: #d8d8da;
-		margin-bottom: 50rpx;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: column;
-		width: 630rpx;
-		justify-content: center;
-		align-items: center;
-		border-radius: 6rpx;
-	}
-
-	.send-btn-text {
-		color: #fff;
-	}
-
-	.send-btn-active {
-		background-color: #007aff;
-	}
-
-	.auth-box {
-		width: 630rpx;
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.login-text {
-		color: #1c436e;
-		font-size: 26rpx;
-	}
-
-	.hover {
-		opacity: 0.8;
-	}
-	
-	
-	/* 密码登录 */
+	@import url("../../common/loginPage.css");
 	.phone-input-box{
 		margin-top: 20rpx;
 	}
diff --git a/uni_modules/uni-login-page/pages/index/pwd-retrieve.nvue b/uni_modules/uni-login-page/pages/index/pwd-retrieve.nvue
deleted file mode 100644
index 0d6f7890..00000000
--- a/uni_modules/uni-login-page/pages/index/pwd-retrieve.nvue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-	<view class="flex flex-column flex-1 w-750 bg-white">
-		<view class="flex-1 flex flex-column justify-start align-center">
-			<view class="w-630 flex flex-column">
-				<!-- 顶部文字 -->
-				<text class="font-32 font-blod pt-5">手机号密码登录</text>
-				<login-ikonw class="lgnin-iknow" :text="tipText"></login-ikonw>
-				<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
-				<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center">
-					<input type="number" :maxlength="6" class="flex-1 phone-input px-2 font-30" placeholder="请输入验证码"
-						v-model="phoneCode" />
-					<login-short-code @getCode="getCode"></login-short-code>
-				</view>
-
-				<view class="phone-input-box round flex flex-row flex-nowrap align-center justify-center mt-2">
-					<input type="password" :password="true" class="flex-1 px-2 font-30" placeholder="请输入密码"
-						v-model="password" />
-				</view>
-
-				<!-- 发送按钮 -->
-				<view class="send-btn-box flex w-630 justify-center align-center round mt-5" hover-class="hover"
-					@click="pwdLogin" :class="canSubmit?'send-btn-active':''">
-					<text class="text-white">完成</text>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				phoneNumber: '',
-				phoneCode: '',
-				password: '',
-				currenPhoneArea: '',
-			}
-		},
-		computed: {
-			tipText() {
-				return `验证码已通过短信发送至${this.currenPhoneArea} ${this.phoneNumber}。密码为6 - 20位`
-			},
-			canSubmit() {
-				let reg_phone = /^1\d{10}$/;
-				let reg_pwd = /^.{6,20}$/;
-				let reg_code = /^\d{6}$/;
-				let isPhone = reg_phone.test(this.phoneNumber);
-				let isPwd = reg_pwd.test(this.password);
-				let isCode = reg_code.test(this.phoneCode);
-				return isPhone && isPwd && isCode;
-			}
-		},
-		onLoad(event) {
-			if (event) {
-				this.phoneNumber = event.phoneNumber;
-				this.currenPhoneArea = '+' + Number(event.phoneArea);
-			}
-		},
-		methods: {
-			/**
-			 * 获取验证码倒计时
-			 * 倒计时期间不会触发该方法
-			 */
-			getCode(done) {
-				if (this.phoneNumber == '') return uni.showToast({
-					title: '请填写手机号',
-					icon: 'none'
-				});
-				// 发送成功后开启倒计时
-				done();
-			}
-		}
-	}
-</script>
-
-<style>
-	@import url("../../common/myStyle.css");
-
-	.lgnin-iknow {
-		padding-top: 24rpx;
-		padding-bottom: 36rpx;
-	}
-
-	.phone-input-box {
-		height: 85rpx;
-		background-color: #f9f9f9;
-	}
-
-	.phone-input {}
-
-	.tip-text {
-		padding-top: 20rpx;
-		padding-bottom: 36rpx;
-	}
-
-	.send-btn-box {
-		height: 85rpx;
-		background-color: #d8d8da;
-		margin-bottom: 50rpx;
-	}
-
-	.send-btn-active {
-		background-color: #007aff;
-	}
-
-	.login-text {
-		color: #1c436e;
-	}
-</style>
diff --git a/uni_modules/uni-login-page/pages/index/pwd-retrieve.vue b/uni_modules/uni-login-page/pages/index/pwd-retrieve.vue
new file mode 100644
index 00000000..58170f39
--- /dev/null
+++ b/uni_modules/uni-login-page/pages/index/pwd-retrieve.vue
@@ -0,0 +1,94 @@
+<template>
+	<view class="wrap">
+		<view class="wrap-content">
+			<view class="content">
+				<!-- 顶部文字 -->
+				<text class="content-top-title">手机号密码登录</text>
+				<login-ikonw class="login-iknow" :text="tipText"></login-ikonw>
+				<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
+				<view class="phone-input-box">
+					<input type="number" :maxlength="6" class="phone-input" placeholder="请输入验证码"
+						v-model="phoneCode" />
+					<login-short-code @getCode="getCode"></login-short-code>
+				</view>
+
+				<view class="phone-input-box">
+					<input type="password" :password="true" class="phone-input" placeholder="请输入密码"
+						v-model="password" />
+				</view>
+
+				<!-- 发送按钮 -->
+				<view class="send-btn-box" hover-class="hover"
+					@click="submit" :class="canSubmit?'send-btn-active':''">
+					<text class="send-btn-text">完成</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				phoneNumber: '',
+				phoneCode: '',
+				password: '',
+				currenPhoneArea: '',
+			}
+		},
+		computed: {
+			tipText() {
+				return `验证码已通过短信发送至${this.currenPhoneArea} ${this.phoneNumber}。密码为6 - 20位`
+			},
+			canSubmit() {
+				let reg_phone = /^1\d{10}$/;
+				let reg_pwd = /^.{6,20}$/;
+				let reg_code = /^\d{6}$/;
+				let isPhone = reg_phone.test(this.phoneNumber);
+				let isPwd = reg_pwd.test(this.password);
+				let isCode = reg_code.test(this.phoneCode);
+				return isPhone && isPwd && isCode;
+			}
+		},
+		onLoad(event) {
+			if (event) {
+				this.phoneNumber = event.phoneNumber;
+				this.currenPhoneArea = '+' + Number(event.phoneArea);
+			}
+		},
+		methods: {
+			/**
+			 * 获取验证码倒计时
+			 * 倒计时期间不会触发该方法
+			 */
+			getCode(done) {
+				if (this.phoneNumber == '') return uni.showToast({
+					title: '请填写手机号',
+					icon: 'none'
+				});
+				// 发送成功后开启倒计时
+				done();
+			},
+			/**
+			 * 完成并提交
+			 */
+			submit(){
+				
+			}
+		}
+	}
+</script>
+
+<style>
+	@import url("../../common/loginPage.css");
+	.phone-input-box{
+		margin-top: 20rpx;
+	}
+	.phone-input{
+		border-left-width: 0;
+	}
+	.send-btn-box{
+		margin-top: 50rpx;
+	}
+</style>
-- 
GitLab