From 4709ff0c4aadc5328d0df69b0b287a144526f190 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E6=98=8E=E6=98=8E?= <970899069@qq.com>
Date: Wed, 5 Jan 2022 17:21:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=99=BB=E5=BD=95=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/interfaces/auth.js |   2 -
 pages.json              |   3 +-
 pages/auth/auth.vue     | 253 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 250 insertions(+), 8 deletions(-)

diff --git a/apis/interfaces/auth.js b/apis/interfaces/auth.js
index 602a490..39ab591 100644
--- a/apis/interfaces/auth.js
+++ b/apis/interfaces/auth.js
@@ -27,7 +27,6 @@ const getSms = (data) =>{
 }
 
 // 用户隐私，用户服务协议
-
 const secretService = (name) =>{
 	return request({
 		url: "articles/agreement/"+name
@@ -43,7 +42,6 @@ const keyAuth = (data) => {
 	}, true)
 }
 
-
 export {
 	smsAuth,
 	getSms,
diff --git a/pages.json b/pages.json
index 4672086..55b8a11 100644
--- a/pages.json
+++ b/pages.json
@@ -50,7 +50,8 @@
 		"path": "pages/auth/auth",
 		"name": "Auth",
 		"style": {
-			"navigationBarTitleText": "登录"
+			"navigationBarTitleText": "登录",
+			"navigationStyle":"custom"
 		}
 	}, {
 		"path": "pages/store/goods",
diff --git a/pages/auth/auth.vue b/pages/auth/auth.vue
index 8c3b35f..5b7f192 100644
--- a/pages/auth/auth.vue
+++ b/pages/auth/auth.vue
@@ -1,19 +1,262 @@
 <template>
-	<view>
-		
+	<view class="content">
+		<!-- tool -->
+		<view class="tool-flex">
+			<view class="tool-flex-item">关闭</view>
+			<view class="tool-flex-item" @click="onKeyAuth()">一键登录</view>
+		</view>
+		<!-- 欢迎使用 -->
+		<view class="header">
+			<view class="title">欢迎使用</view>
+			<view class="sumbit">ZH健康，身边的营养专家</view>
+		</view>
+		<!-- 输入手机号相关 -->
+		<view class="inputs phone">
+			<label class="label">+86</label>
+			<input type="number" placeholder="输入您的手机号码" maxlength="11" v-model="phone" />
+		</view>
+		<view class="inputs sms">
+			<input type="number" placeholder="输入短信验证码" maxlength="4" v-model="code" />
+			<button class="sms-btn" type="default" size="mini" :disabled="phone == '' || getSms" @click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
+		</view>
+		<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
+		<!-- 用户登录注册协议 -->
+		<view class="agreement">
+			未注册的手机号码验证后自动创建账号，登录即表示同意接受平台
+			<view @click="$Router.push({name: 'agreement', params: {name : 'secret'}})">《隐私协议》</view>
+			和
+			<view @click="$Router.push({name: 'agreement', params: {name : 'service'}})">《服务协议》</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import { getSms, smsAuth } from '@/apis/interfaces/auth'
+	// import userAuth from '@/public/userAuth'
 	export default {
 		data() {
 			return {
-				
-			};
+				phone	: "18245180131",
+				code	: "",
+				smsTime	: 60,
+				getSms	: false
+			}
+		},
+		onShow(){
+			this.parentId = getApp().globalData.parentId
+			
+			
+		},
+		methods: {
+			// 用户登录
+			login() {
+				smsAuth({
+					mobileNo	: this.phone,
+					code		: this.code,
+					parent_id	: this.parentId
+				}).then(res => {
+					this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
+					if(this.$Route.toName){
+						this.$Router.back()
+					}else{
+						this.$Router.replaceAll({name: 'Index'})
+					}
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon: "none"
+					})
+				})
+			},
+			// 获取验证码
+			getPhoneCode() {
+				let outTime
+				getSms({
+					mobileNo: this.phone
+				}).then(res => {
+					uni.showToast({
+						title: res,
+						icon: "none"
+					})
+					this.getSms = true
+					outTime = setInterval(() => {
+						if (this.smsTime <= 1) {
+							this.getSms = false
+							this.smsTime = 60
+							clearInterval('outTime')
+						}
+						this.smsTime -= 1
+					}, 1000)
+				}).catch(err => {
+					uni.showToast({
+						title: err.message,
+						icon: "none"
+					})
+				})
+			},
+			// 一键登录
+			onKeyAuth(){
+				uni.showLoading({
+					title: "加载中..."
+				})
+				uni.preLogin({
+					provider: 'univerify',
+					success	: res=> {
+						let userLogin = new userAuth()
+						userLogin.keyLogin().then(res => {
+							if(this.$Route.toName){
+								this.$Router.back()
+							}else{
+								this.$Router.replaceAll({name: 'Index'})
+							}
+						}).catch(err => {
+							uni.showToast({
+								title: err.message,
+								icon : 'none'
+							})
+						})
+					},
+					fail   	: err=> {
+						uni.showToast({
+							title: '当前设备环境暂不支持一键登录',
+							icon : 'none'
+						})
+					},
+					complete() {
+						uni.hideLoading()
+					}
+				})
+			}
 		}
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+	.content {
+		height: 100vh;
+		width: 100vw;
+		padding: $padding * 3;
+		box-sizing: border-box;
+		background: white;
+		@extend .vertical;
+		// 操作栏
+		.tool-flex{
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			display: flex;
+			justify-content: space-between;
+			padding-left: $padding*2;
+			padding-right: $padding*2;
+			background: white;
+			@extend .ios-top;
+			&-item{
+				line-height: 90rpx;
+				color: $text-gray;
+				font-size: $title-size-lg;
+			}
+		}
+		// 表单
+		.inputs {
+			background:$window-color;
+			position: relative;
+			margin-top: $margin;
+			height: 90rpx;
+			line-height: 90rpx;
+			border-radius: 45rpx;
+			input {
+				width: 100%;
+				height: 90rpx;
+				line-height: 90rpx;
+				padding: 0 $padding;
+				border: none;
+				box-sizing: border-box;
+				font-size: $title-size-lg;
+			}
 
+			&.phone {
+				padding-left: 120rpx;
+				.label {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 120rpx;
+					text-align: center;
+					border-right: solid 1rpx $border-color;
+					font-size: $title-size-lg;
+				}
+			}
+
+			&.sms {
+				padding-right: 200rpx;
+				.sms-btn[size='mini'] {
+					width: 200rpx;
+					height: 90rpx;
+					line-height: 90rpx;
+					position: absolute;
+					top: 0;
+					right: 0;
+					padding: 0;
+					margin: 0;
+					border-radius: 0 45rpx 45rpx 0;
+					color: $main-color;
+					font-size: $title-size-lg;
+					background: $window-color;
+					&::after {
+						border: none;
+					}
+					&[disabled] {
+						color: rgba($color: $main-color, $alpha: .6);
+						background: rgba($color: $window-color, $alpha: 0);
+					}
+				}
+			}
+		}
+		// 头部
+		.header{
+			text-align: center;
+			margin-bottom: 5vh;
+			.title {
+				font-size: $title-size + 10;
+				font-weight: bold;
+				color: $text-color;
+				line-height: 70rpx;
+			}
+			.sumbit{
+				line-height: 50rpx;
+				font-size: $title-size-m;
+				color: $text-gray-m;
+			}
+		}
+		// 登录按钮
+		.btn {
+			margin-top: $margin*2;
+			height: 90rpx;
+			line-height: 90rpx;
+			padding: 0;
+			font-size: $title-size;
+			border-radius: 45rpx;
+			background: $main-color;
+			color: white;
+			font-weight: bold;
+			&::after{
+				display: none;
+			}
+			&[disabled]{
+				background: rgba($color: $main-color, $alpha: .5);
+			}
+		}
+		// 协议
+		.agreement {
+			padding-top: 5vh;
+			font-size: $title-size-sm;
+			color: $text-gray-m;
+			view {
+				color: $main-color;
+				display: inline-block;
+				padding: 0 10rpx;
+			}
+		}
+	}
 </style>