登录流程接口对接

manifest.json

@@ -17,7 +17,9 @@
             "delay" : 0
         },
         /* 模块配置 */
-        "modules" : {},
+        "modules" : {
+            "OAuth" : {}
+        },
         /* 应用发布信息 */
         "distribute" : {
             /* android打包配置 */
@@ -43,7 +45,11 @@
             /* ios打包配置 */
             "ios" : {},
             /* SDK配置 */
-            "sdkConfigs" : {}
+            "sdkConfigs" : {
+                "oauth" : {
+                    "univerify" : {}
+                }
+            }
         }
     },
     /* 快应用特有相关 */

pages.json

@@ -51,7 +51,10 @@
 		"name": "Auth",
 		"style": {
 			"navigationBarTitleText": "登录",
-			"navigationStyle":"custom"
+			"navigationStyle":"custom",
+			"app-plus":{
+				"animationType":"slide-in-bottom"
+			}
 		}
 	}, {
 		"path": "pages/store/goods",

pages/auth/auth.vue

@@ -2,8 +2,10 @@
 	<view class="content">
 		<!-- tool -->
 		<view class="tool-flex">
-			<view class="tool-flex-item">关闭</view>
+			<view class="tool-flex-item" @click="$Router.back()">
-			<view class="tool-flex-item" @click="onKeyAuth()">一键登录</view>
+				<uni-icons type="closeempty" size="22" color="#666"></uni-icons>
+			</view>
+			<view class="tool-flex-item" @click="onKeyAuth()" v-if="$Route.query.keyPhone === '1'">一键登录</view>
 		</view>
 		<!-- 欢迎使用 -->
 		<view class="header">
@@ -32,7 +34,7 @@
 
 <script>
 	import { getSms, smsAuth } from '@/apis/interfaces/auth'
-	// import userAuth from '@/public/userAuth'
+	import userAuth from '@/public/userAuth'
 	export default {
 		data() {
 			return {
@@ -41,19 +43,13 @@
 				smsTime	: 60,
 				getSms	: false
 			}
-		},
-		onShow(){
-			this.parentId = getApp().globalData.parentId
-			
-			
 		},
 		methods: {
 			// 用户登录
 			login() {
 				smsAuth({
 					mobileNo	: this.phone,
-					code		: this.code,
+					code		: this.code
-					parent_id	: this.parentId
 				}).then(res => {
 					this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
 					if(this.$Route.toName){
@@ -96,36 +92,9 @@
 			},
 			// 一键登录
 			onKeyAuth(){
-				uni.showLoading({
+				const Auth = new userAuth()
-					title: "加载中..."
+				this.$Router.back()
-				})
+				Auth.Login()
-				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()
-					}
-				})
 			}
 		}
 	}

pages/index/index.vue

@@ -193,7 +193,8 @@ export default {
 			line-height: 44rpx;
 			width: 160rpx;
 			font-weight: bold;
-			font-size: $title-size-lg;
+			font-size: $title-size;
+			color: $text-color;
 			@extend .nowrap;
 		}
 		&-describe{
@@ -227,11 +228,12 @@ export default {
 			border-radius: $radius;
 		}
 		.new-title {
-			font-size: $title-size-lg;
+			font-size: $title-size;
 			line-height: 45rpx;
 			min-height: 100rpx;
 			margin-bottom: 10px;
 			font-weight: bold;
+			color: $text-color;
 		}
 		.new-tool {
 			color: $text-gray;

pages/user/index.vue

@@ -3,7 +3,6 @@
 		<!-- <view class="user-demo">
 			<view @click="$Router.push({name: 'Address'})">地址管理</view>
 			<view @click="$Router.push({name: 'Order'})">订单管理</view>
-			<view @click="$Router.push({name: 'Auth'})">登录</view>
 		</view> -->
 		<!-- 用户信息 -->
 		<view class="info-box">
@@ -11,10 +10,15 @@
 			<view class="user-flex">
 				<image class="cover" src="@/static/dev/cover.jpg" mode="aspectFill"></image>
 				<view class="user-content">
-					<view class="name">唐明明</view>
+					<block v-if="$store.state.token != ''">
-					<view class="tabs">
+						<view class="name">唐明明</view>
-						<view class="tabs-item"><image src="@/static/user/icon_07.png"></image>会员</view>
+						<view class="tabs">
-					</view>
+							<view class="tabs-item"><image src="@/static/user/icon_07.png"></image>会员</view>
+						</view>
+					</block>
+					<block v-else>
+						<view class="name" @click="Login">未登录</view>
+					</block>
 				</view>
 			</view>
 		</view>
@@ -101,11 +105,17 @@
 				设置
 				<uni-icons class="forward" type="forward" color="#999"></uni-icons>
 			</view>
+			<view class="btns-box-item" @click="logOut">
+				<image class="icon" src="@/static/user/icon_03.png" mode="widthFix"></image>
+				退出登录
+				<uni-icons class="forward" type="forward" color="#999"></uni-icons>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+	import userAuth from '@/public/userAuth'
 	export default {
 		data() {
 			return {
@@ -113,10 +123,20 @@
 			};
 		},
 		mounted() {
-			console.log(this.$store.state)
 			uni.setNavigationBarTitle({
 				title: "唐明明"
 			})
+		},
+		methods:{
+			// 登录
+			Login(){
+				const Auth = new userAuth()
+				Auth.Login()
+			},
+			// 退出登录
+			logOut(){
+				this.$store.commit('setToken', '')
+			}
 		}
 	}
 </script>
@@ -142,28 +162,28 @@
 		.user-flex{
 			position: relative;
 			padding: $padding*2 $padding ($padding*2 + 60);
-			height: 108rpx;
+			height: 128rpx;
 			.cover{
 				position: absolute;
-				width: 108rpx;
+				width: 128rpx;
-				height: 108rpx;
+				height: 128rpx;
 				border-radius: 50%;
 				border:solid 6rpx white;
 				box-sizing: border-box;
 			}
 			.user-content{
-				padding-left: 128rpx;
+				padding-left: 158rpx;
-				height: 108rpx;
+				height: 128rpx;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				.name{
 					line-height: 40rpx;
 					font-weight: bold;
-					font-size: $title-size + 4;
+					font-size: $title-size + 8;
 				}
 				.tabs{
-					padding-top: 5rpx;
+					padding-top: 10rpx;
 					&-item{
 						background: rgba($color: #000000, $alpha: .3);
 						font-size: $title-size-sm - 4;

public/date.js

@@ -0,0 +1,31 @@
+
+/**
+ * Web唐明明
+ * 匆匆数载恍如梦，岁月迢迢华发增。
+ * 碌碌无为枉半生，一朝惊醒万事空。
+ * moduleName: 日期
+ */
+
+export default getDate = (type) =>{
+	return new Promise((resolve, reject) => {
+		const date  = new Date()
+		const year  = date.getFullYear()
+		
+		const month = (date.getMonth() + 1) <= 9 ? '0' + (date.getMonth() + 1)  : (date.getMonth() + 1)
+		const day	= date.getDate()
+		
+		switch(type){
+			case 'day':
+				resolve(year + '-' + month + '-' + day)
+				break
+			case 'month':
+				resolve(year + '-' + month)
+				break
+			case 'year':
+				resolve(year)
+				break
+			default:
+				resolve(year + '-' + month + '-' + day)
+		}
+	})
+}

public/userAuth.js

@@ -0,0 +1,110 @@
+/**
+ * Web唐明明
+ * 匆匆数载恍如梦，岁月迢迢华发增。
+ * 碌碌无为枉半生，一朝惊醒万事空。
+ * moduleName: 登录
+ */
+
+import { router } from '../router'
+import { keyAuth } from '../apis/interfaces/auth'
+import store from '../store'
+
+class userAuth {
+	constructor() {
+		this.univerfyConfig = {
+			fullScreen: true,
+			authButton: {
+				'title': '一键登录',
+				'normalColor': '#34CE98',
+				'highlightColor': '#16b17a',
+				'disabledColor': '#aae4cc',
+			},
+			otherLoginButton: {
+				'title': '其他手机号码',
+				'borderColor': '#34CE98',
+				'textColor': '#34CE98'
+			},
+			privacyTerms: {
+				'checkedImage': '/static/icon/checked-icon.png',
+				'uncheckedImage': '/static/icon/unchecked-icon.png',
+				'textColor': '#999',
+				'termsColor': '#34CE98',
+				'suffix': '并使用本机号码登录/注册',
+				'privacyItems': [{
+					'url': 'https://www.baidu.com',
+					'title': '隐私协议'
+				}, {
+					'url': 'https://www.baidu.com',
+					'title': '服务协议'
+				}]
+			},
+			buttons: {
+				'iconWidth': '45px',
+				'list': [{
+					"provider": '微信登录',
+					"iconPath": '/static/icons/wechat.png',
+				}]
+			}
+		}
+	}
+	// 预登录
+	Login() {
+		return new Promise((resolve, reject) => {
+			uni.showLoading({
+				title: '加载中',
+				mask: true
+			})
+			uni.preLogin({
+				provider: 'univerify',
+				success: res => {
+					this.keyLogin().then(() => {
+						resolve({
+							auth: true
+						})
+					}).catch(errMsg => {
+						reject(errMsg)
+					})
+				},
+				fail: err => {
+					router.push({ name: 'Auth' })
+				},
+				complete() {
+					uni.hideLoading()
+				}
+			})
+		})
+	}
+	// 一键登录
+	keyLogin() {
+		return new Promise((resolve, reject) => {
+			uni.login({
+				provider: 'univerify',
+				univerifyStyle: {
+					...this.univerfyConfig
+				},
+				success: authResult => {
+					keyAuth({
+						access_token: authResult.authResult.access_token,
+						openid: authResult.authResult.openid
+					}).then(res => {
+						uni.closeAuthView()
+						store.commit('setToken', res.token_type + ' ' + res.access_token)
+						resolve()
+					}).catch(err => {
+						reject(err)
+					})
+				},
+				fail: err => {
+					uni.closeAuthView()
+					switch (err.code) {
+						case 30002:
+							router.push({ name: 'Auth', params: { keyPhone: 1 }})
+							break
+					}
+				}
+			})
+		})
+	}
+}
+
+export default userAuth

router/index.js

@@ -12,6 +12,7 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
 	next();
 });
+
 // 全局路由后置守卫
 router.afterEach((to, from) => {
 	console.log('跳转结束')