邓洁 : 登录功能及拦截

2023-11-15 12:51:37 +08:00
parent b93daa7c35
commit dd05376541
7 changed files with 393 additions and 100 deletions
--- a/pages/my/login/login.vue
+++ b/pages/my/login/login.vue
@@ -0,0 +1,136 @@
+<template>
+	<view class="login-content">
+		<view style="text-align: center;margin-bottom:30rpx;">
+			<text>{{loginText}}</text>
+		</view>
+		<view style="padding-left: 30rpx;padding-right: 30rpx;display: flex;">
+			<u-button type="info" :plain="true" size="nomal" @click="$emit('fail')">取消</u-button>
+			<u-button open-type="getPhoneNumber" size="nomal" color='#12CA64' @getphonenumber="getphonenumber">登录
+			</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		apiService,
+		loginSys
+	} from '@/service/request.js'
+	export default {
+		data() {
+			return {
+				loginText: '请登录后查看'
+			}
+		},
+		props: {
+			timoutText: {
+				type: String,
+				default: ''
+			}
+		},
+		created() {
+			if (this.timoutText == 1) {
+				this.loginText = "登录超时，请重新登录"
+			}
+		},
+		methods: {
+			login() {
+				var that = this
+
+			},
+			getphonenumber(e) {
+				var that = this
+				// console.log('getphonenumber', e)
+				if (e.detail.errMsg === 'getPhoneNumber:ok') {
+					//调用接口利用 e.detail.encryptedData, e.detail.iv 信息来解密手机号
+					uni.login({
+						"provider": "weixin",
+						"onlyAuthorize": true, // 微信登录仅请求授权认证
+						success: function(event) {
+							const {
+								code
+							} = event
+							// console.log('code', code);
+							that.$api.login({
+								code: code
+							}).then(res => {
+								var data = res.data.data
+								console.log('res.da',res);
+								// console.log('登录code换取的信息', data);
+								uni.setStorageSync('loginToken', data.token);
+								uni.setStorageSync('avatar', data.avatar);
+								uni.setStorageSync('nickname', data.nickname);
+								uni.setStorageSync('account', data.sn);
+								uni.setStorageSync('mobile', data.mobile);
+								that.$toast.success('登录成功')
+								that.$emit('success')
+								//登录完成后使用手机code换取手机号,调用/user/getMobileByMnp接口
+								const codeData = {
+									code: e.detail.code
+								}
+								that.$api.getMobile(codeData).then(res => {
+									console.log('code换手机号', res)
+								})
+							})
+						},
+						fail: function(err) {
+							// 登录授权失败
+							// err.code是错误码
+							that.$emit('fail')
+						}
+					})
+				} else {
+					// 拒绝授权
+					that.$emit('fail')
+				}
+			}
+			// getphonenumber(e) {
+			// 	const {
+			// 		phoneCode
+			// 	} = e.detail;
+			// 	console.log("手机code : ", phoneCode);
+			// 	uni.login({
+			// 		"provider": "weixin",
+			// 		"onlyAuthorize": true, // 微信登录仅请求授权认证
+			// 		success: function(event) {
+			// 			const {
+			// 				code
+			// 			} = event
+
+			// 			console.log("登录code", code);
+			// 			//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
+
+
+			// 			// 调用登录接口 拿到token 传手机code,更新手机号码
+			// 			loginSys(code).then(res => {
+			// 				console.log(res);
+
+			// 				//登录完成后使用手机code换取手机号,调用/user/getMobileByMnp接口
+			// 				//接口详细链接    https://docs.apipost.cn/preview/468be606f65cae75/3f2f988ddf82dd8e
+			// 			})
+			// 		},
+			// 		fail: function(err) {
+			// 			// 登录授权失败  
+			// 			// err.code是错误码
+			// 		}
+			// 	})
+			// },
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	/deep/.u-button {
+		width: 40% !important;
+	}
+
+	.login-content {
+		width: 100%;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		padding: 50rpx 30rpx;
+		background-color: #fff;
+		transform: translate(-50%, -50%);
+	}
+</style>