瀏覽代碼

扫码登录测试

Xiao_123 2 月之前
父節點
當前提交
3a06b87ece

+ 15 - 0
api/qrcodeLogin.js

@@ -0,0 +1,15 @@
+import request from "@/utils/request"
+
+// 小程序登陆码授权
+export const weixinLoginAuthorize = (data) => {
+	console.log(data)
+  return request({
+    url: '/app-api/menduner/system/auth/weixin/login/authorize',
+    method: 'POST',
+    data,
+    custom: {
+      showLoading: false,
+      auth: false
+    }
+  })
+}

+ 33 - 1
layout/components/authModal/necessaryInfo/index.vue

@@ -2,7 +2,8 @@
 <template>
   <scroll-view class="scrollBox" scroll-y="true">
     <view class="content">
-      <view class="text-center ss-m-b-50 font-size-20 color-primary MiSans-Medium">请完善您的基本信息</view>
+      <view class="text-center font-size-20 color-primary MiSans-Medium" :class="{'ss-m-b-50': !wxLoginCode}">请完善您的基本信息</view>
+      <view v-if="wxLoginCode" class="font-size-14 color-666 ss-m-b-50 ss-m-t-10 text-center">扫码登录网页时,需完善信息后方可授权成功!</view>
       <uni-forms
         ref="baseInfoRef"
         v-model="formData"
@@ -77,7 +78,9 @@ import { savePersonSimpleInfo } from '@/api/user'
 import { showAuthModal } from '@/hooks/useModal'
 import { userStore } from '@/store/user'; const useUserStore = userStore()
 import { uploadFile } from '@/api/file'
+import { weixinLoginAuthorize } from '@/api/qrcodeLogin.js'
 
+const wxLoginCode = uni.getStorageSync('wxLoginCode')
 const baseInfoRef = ref()
 const formData = ref({ // 必填项目
   name: null,
@@ -195,6 +198,31 @@ const dealQuery = () => {
   }]
   return { ...formData.value, interestedList, workExpList }
 }
+
+const handleRemove = () => {
+  uni.removeStorageSync('wxLoginCode')
+  setTimeout(() => {
+		uni.switchTab({
+			url: '/pages/index/my'
+		})
+	}, 2000)
+}
+
+// 微信扫码登录授权给pc
+const handleWeiXinQrCodeAuthorize = async () => {
+  if (!uni.getStorageSync('wxLoginCode')) {
+    return uni.showToast({ title: '请重新扫码进行授权', icon: 'none', duration: 2000 })
+  }
+	try {
+		await weixinLoginAuthorize({ uuid: uni.getStorageSync('wxLoginCode') })
+		uni.showToast({ title: '授权网页登录成功', duration: 2000, icon: 'none' })
+    handleRemove()
+	} catch (error) {
+    console.log(error, '授权接口error');
+    handleRemove()
+  }
+}
+
 const submit = async () => {
   const validate = await unref(baseInfoRef).validate()
   if (!validate) return uni.showToast({ title: '请将信息补充完整', icon: 'none' })
@@ -205,12 +233,16 @@ const submit = async () => {
     uni.showToast({ title: '保存成功', icon: 'none' })
     await useUserStore.getInfo()
     // await useUserStore.getUserInfo()
+	
+	// 若是扫码登录且账号未注册的,注册后需授权给pc登录
+	handleWeiXinQrCodeAuthorize()
   } catch (err) {
     uni.showToast({ title: err?.msg || '保存失败', icon: 'none' })
   }
 }
 
 </script>
+
 <style lang="scss" scoped>
 .scrollBox {
   width: 100vw;

+ 1 - 1
layout/components/authModal/selectUserType/index.vue

@@ -2,7 +2,7 @@
 <template>
   <scroll-view class="scrollBox" scroll-y="true">
     <template v-if="showSelect">
-      <view class="text-center ss-m-t-50 MiSans-Medium" style="color: #666; font-weight: 400; font-size: 18px">请选择当前角色</view>
+      <view class="text-center ss-m-t-50 MiSans-Medium" style="color: #666; font-weight: 400; font-size: 18px; margin-top: 100px;">请选择当前角色</view>
       <view class="ss-p-50">
         <uni-card class="ss-m-t-30" @tap="handleClickRole(0)">
           <view class="d-flex flex-column align-center ss-p-y-50">

+ 34 - 1
layout/components/authModal/selectUserType/studentInfoForm.vue

@@ -2,7 +2,8 @@
 <template>
   <scroll-view class="scrollBox" scroll-y="true">
     <view class="content">
-      <view class="text-center ss-m-b-50 font-size-20 color-primary MiSans-Medium">请完善学生信息</view>
+      <view class="text-center font-size-20 color-primary MiSans-Medium" :class="{'ss-m-b-50': !wxLoginCode}">请完善学生信息</view>
+      <view v-if="wxLoginCode" class="font-size-14 color-666 ss-m-b-50 ss-m-t-10 text-center">扫码登录网页时,需完善信息后方可授权成功!</view>
       <uni-forms
         ref="baseInfoRef"
         v-model="formData"
@@ -69,6 +70,7 @@
     </uni-popup>
   </scroll-view>
 </template>
+
 <script setup>
 import { ref, unref, onMounted, nextTick } from 'vue'
 import { mobile } from '@/utils/validate'
@@ -79,6 +81,9 @@ import { userStore } from '@/store/user'; const useUserStore = userStore()
 import { uploadFile } from '@/api/file'
 import { getSchoolList, getDepartmentListBySchoolId, getMajorList } from '@/api/student'
 import searchComBox from '@/components/searchCombox'
+import { weixinLoginAuthorize } from '@/api/qrcodeLogin.js'
+
+const wxLoginCode = uni.getStorageSync('wxLoginCode')
 
 const baseInfoRef = ref()
 const formData = ref({ // 必填项目
@@ -233,6 +238,30 @@ const uploadPhotos = () => {
   })
 }
 
+const handleRemove = () => {
+  uni.removeStorageSync('wxLoginCode')
+  setTimeout(() => {
+		uni.switchTab({
+			url: '/pages/index/my'
+		})
+	}, 2000)
+}
+
+// 微信扫码登录授权给pc
+const handleWeiXinQrCodeAuthorize = async () => {
+  if (!uni.getStorageSync('wxLoginCode')) {
+    return uni.showToast({ title: '请重新扫码进行授权', icon: 'none', duration: 2000 })
+  }
+	try {
+		await weixinLoginAuthorize({ uuid: uni.getStorageSync('wxLoginCode') })
+    uni.showToast({ title: '授权网页登录成功', duration: 2000, icon: 'none' })
+    handleRemove()
+	} catch (error) {
+    console.log(error, '授权接口error');
+    handleRemove()
+  }
+}
+
 const schoolClassIdRef = ref()
 const submit = async () => {
   const validate = await unref(baseInfoRef).validate()
@@ -247,12 +276,16 @@ const submit = async () => {
     await saveStudentSimpleInfo(params)
     uni.showToast({ title: '保存成功', icon: 'none' })
     await useUserStore.getInfo()
+	
+	// 若是扫码登录且账号未注册的,注册后需授权给pc登录
+	handleWeiXinQrCodeAuthorize()
   } catch (err) {
     uni.showToast({ title: err?.msg || '保存失败', icon: 'none' })
   }
 }
 
 </script>
+
 <style lang="scss" scoped>
 .scrollBox {
   width: 100vw;

+ 6 - 0
pages.json

@@ -385,6 +385,12 @@
 					"style": {
 						"navigationBarTitleText": "招聘会"
 					}
+				},
+				{
+					"path": "websiteLoginVerification/index",
+					"style": {
+						"navigationBarTitleText": "门墩儿"
+					}
 				}
 			]
 		}

+ 134 - 0
pagesB/websiteLoginVerification/index.vue

@@ -0,0 +1,134 @@
+<template>
+	<layout-page>
+		<view class="defaultBgc" style="height: 100vh;">
+			<view class="logo">
+				<image src="https://minio.menduner.com/dev/19cce88e87fb8e895fbbe4418a937d610b2c20b8f87c6705569a096aca0a91b0.png"></image>
+			</view>
+
+			<button v-if="useUserStore.isLogin" class="recomm-button MiSans-Medium" @click="handleTokenLogin">一键登录(有token)</button>
+			<button v-else class="recomm-button MiSans-Medium" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录(无token)</button>
+			
+			<view class="agreement-box ss-flex ss-row-center">
+				<uni-icons size="20" :type="protocol ? 'checkbox-filled' : 'circle'" :color="protocol ? '#00B760' : '#ccc'" @tap="protocol = !protocol"></uni-icons>
+				<view class="color-999 ss-flex ss-col-center ss-m-l-8 font-size-13">
+					<span class="MiSans-Normal">我已阅读并遵守</span>
+					<view class="color-primary MiSans-Medium" @tap.stop="handleToDetail('user')">
+						《用户协议》
+					</view>
+					<view class="agreement-text MiSans-Normal">和</view>
+					<view class="color-primary MiSans-Medium" @tap.stop="handleToDetail('privacy')">
+						《隐私协议》
+					</view>
+				</view>
+			</view>
+		</view>
+	</layout-page>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import layoutPage from '@/layout'
+import { userStore } from '@/store/user'
+import { onLoad } from '@dcloudio/uni-app'
+import { weixinLoginAuthorize } from '@/api/qrcodeLogin.js'
+import { checkPersonBaseInfo } from '@/utils/check'
+import { showAuthModal, closeAuthModal } from '@/hooks/useModal'
+
+const useUserStore = userStore()
+const protocol = ref(true)
+
+onLoad((options) => {
+	if (!useUserStore.isLogin) {
+		console.log('没登录时不需要弹窗');
+		closeAuthModal()
+	}
+	console.log(options?.scene, '===========options')
+	if (options?.scene) {
+		uni.setStorageSync('wxLoginCode', options.scene)
+	}
+})
+
+// 查看协议详情
+const handleToDetail = (type) => {
+  const url = type === 'user' ? '/pagesB/agreement/user' : '/pagesB/agreement/privacy'
+  uni.navigateTo({
+    url
+  })
+}
+
+const handleRemove = () => {
+  uni.removeStorageSync('wxLoginCode')
+  setTimeout(() => {
+		uni.switchTab({
+			url: '/pages/index/my'
+		})
+	}, 2000)
+}
+
+// 已登录的授权给网页
+const handleTokenLogin = async () => {
+	if (!protocol.value) return uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none', duration: 2000 })
+	const data = useUserStore.baseInfo
+	if (!data || !Object.keys(data).length || data.type === undefined || data.type === null) {
+		console.log('需要完善基本信息')
+    showAuthModal('selectUserType')
+    return
+  }
+  const necessaryInfoReady = checkPersonBaseInfo(data)
+	console.log(necessaryInfoReady, '基本信息是否填写完善', data)
+  if (necessaryInfoReady) {
+	  console.log('信息填写完善-授权网页登录')
+		closeAuthModal()
+
+		if (!uni.getStorageSync('wxLoginCode')) {
+			return uni.showToast({ title: '请重新扫码进行授权', icon: 'none', duration: 2000 })
+		}
+		try {
+			await weixinLoginAuthorize({ uuid: uni.getStorageSync('wxLoginCode') })
+			uni.showToast({ title: '授权网页登录成功', duration: 2000, icon: 'none' })
+			handleRemove()
+		} catch (error) {
+			console.log(error, '授权接口error')
+			handleRemove()
+		}
+	}
+  else showAuthModal('necessaryInfo')
+  uni.setStorageSync('necessaryInfoReady', necessaryInfoReady ? 'ready' : 'fddeaddc47868b')
+}
+
+// 微信登录
+const getPhoneNumber = async (e) => {
+	if (!protocol.value) return uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none', duration: 2000 })
+  if (e?.detail?.errMsg !== 'getPhoneNumber:ok') {
+    uni.showToast({ title: '微信登录失败', icon: 'none' })
+    return
+  }
+  wx.login({
+    success: async (result) => {
+      const query = {
+        loginCode: result?.code || '',
+        phoneCode: e.detail.code,
+        state: e.detail.encryptedData,
+				autoRegister: true
+      }
+      await useUserStore.handleSmsLogin(query, 0)
+
+			handleTokenLogin()
+    },
+    fail:(res)=> { console.log("获取登录凭证code失败!", res) }
+  })
+}
+</script>
+
+<style scoped lang="scss">
+	.logo {
+		display: flex;
+		align-items: center;
+		image {
+			width: 85px;
+			height: 85px;
+			border-radius: 6px;
+			margin: 20vh auto 8vh auto;
+		}
+	}
+</style>