Browse Source

一键登录

lifanagju_citu 6 tháng trước cách đây
mục cha
commit
763af45503
3 tập tin đã thay đổi với 52 bổ sung4 xóa
  1. 1 3
      layout/components/authModal/login/index.vue
  2. 9 1
      pages/index/my.vue
  3. 42 0
      pages/login/index.vue

+ 1 - 3
layout/components/authModal/login/index.vue

@@ -59,11 +59,10 @@
           </uni-forms-item>
         </uni-forms>
         <view class="quickLogon">
-          <view v-if="showWxLogon">
+          <view>
             <button v-if="!protocol" class="wxLogon" type="text" :plain="true" @click="showProtocolToast">微信一键登录</button>
             <button v-else class="wxLogon" type="text" :plain="true" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信一键登录</button>
           </view>
-          <view v-else></view>
           <view class="register" @tap="handleChangeRegister">还没有登录账户?去注册</view>
         </view>
         <button class="send-button" @tap="handleLogin"> 登 录  </button>
@@ -239,7 +238,6 @@ const showProtocolToast = () => {
   uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
 }
 
-const showWxLogon = true
 // 微信登录
 const getPhoneNumber = async (e) => {
   if (e?.detail?.errMsg !== 'getPhoneNumber:ok') {

+ 9 - 1
pages/index/my.vue

@@ -7,6 +7,9 @@
 				<view v-if="!useUserStore.isLogin" class="font-weight-bold font-size-20">点击登录</view>
 				<view v-else class="font-weight-bold font-size-20">{{ baseInfo?.name || userInfo?.phone }}</view>
 			</view>
+
+			<!-- <view style="text-align: center;" @tab="toLogin">一键登录测试</view> -->
+
 			<view style="padding: 40rpx 0 0 0;">
 				<resume-status></resume-status>
 			</view>
@@ -80,6 +83,12 @@ onShow(() => {
     currentTabBar?.setData({ selected: 4 });
 })
 
+const toLogin = () => {
+	uni.navigateTo({
+		url: '/pages/login/index'
+	})
+}
+
 const useUserStore = userStore()
 const baseInfo = computed(() => useUserStore?.baseInfo)
 const userInfo = computed(() => useUserStore?.userInfo)
@@ -140,7 +149,6 @@ const shareUrl = ref()
 // 生成分享二维码
 const handleShareCode = async () => {
 	const userId = useUserStore?.accountInfo?.userId || ''
-	console.log(1, 'userId', userId)
 	if (!userId) {
 		uni.showToast({
 			title: '请先登录',

+ 42 - 0
pages/login/index.vue

@@ -27,6 +27,11 @@
           <uni-easyinput placeholder="请输入验证码" v-model="state.sms.code" :inputBorder="false" type="number" maxlength="6"></uni-easyinput>
         </uni-forms-item>
       </uni-forms>
+      <view>
+        <button v-if="!protocol" class="wxLogon" type="text" :plain="true" @click="showProtocolToast">微信一键登录</button>
+        <button v-else class="wxLogon" type="text" :plain="true" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信一键登录</button>
+      </view>
+
       <button class="send-button" @tap="handleLogin"> 登录/注册 </button>
       <view class="agreement-box ss-flex ss-row-center">
         <uni-icons size="20" :type="protocol ? 'checkbox-filled' : 'circle'" :color="protocol ? '#00897B' : '#ccc'" @tap="protocol = !protocol"></uni-icons>
@@ -129,6 +134,32 @@ const handleLogin = async () => {
   }
   await useUserStore.handleShareUserRegister(state.value.sms)
 }
+
+
+const showProtocolToast = () => {
+  uni.showToast({ title: '请先阅读并同意用户协议和隐私政策', icon: 'none' })
+}
+
+// 微信登录
+const getPhoneNumber = async (e) => {
+  if (e?.detail?.errMsg !== 'getPhoneNumber:ok') {
+    uni.showToast({ title: '微信登录失败', icon: 'none' })
+    return
+  }
+  changeType.value = 'login'
+  wx.login({
+    success: async (result) => {
+      const wxLoginCode = result?.code || ''
+      const query = {
+        loginCode: wxLoginCode,
+        phoneCode: e.detail.code,
+        state: e.detail.encryptedData,
+      }
+      await useUserStore.handleSmsLogin(query, 2)
+    },
+    fail:(res)=> { console.log("获取登录凭证code失败!", res) }
+  })
+}
 </script>
 
 <style scoped lang="scss">
@@ -148,4 +179,15 @@ const handleLogin = async () => {
   text-align: center;
   color: #00897B;
 }
+.wxLogon {
+  text-align: center;
+  font-size: .85em;
+  color: #00897B;
+  border: none;
+  margin: 0;
+  padding: 0;
+  // margin: 40rpx;
+  margin-top: -20px;
+  margin-bottom: -15px;
+}
 </style>