From a8a70dc28441b656eb4550434b955860d2115d71 Mon Sep 17 00:00:00 2001
From: zjk <852185829@qq.com>
Date: 星期三, 08 四月 2026 16:51:17 +0800
Subject: [PATCH] feat: 登录弹窗
---
src/pages/index/index.vue | 85 +++++++++++++++++++++++++++++++++++++++++-
1 files changed, 83 insertions(+), 2 deletions(-)
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index e7915cf..3b797ee 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,5 +1,41 @@
<script setup lang="ts">
+import { ref } from 'vue'
+
const { safeAreaInsets } = uni.getSystemInfoSync()
+
+// 弹窗显示状态
+const showLoginPopup = ref(false)
+
+// 触发弹窗显示
+function handleShowLoginPopup() {
+ showLoginPopup.value = true
+}
+
+// 取消弹窗
+function handleCancelLogin() {
+ showLoginPopup.value = false
+}
+
+// 确认登录（获取手机号回调）
+function handleConfirmLogin(e: any) {
+ showLoginPopup.value = false
+ if (e.detail.errMsg === 'getPhoneNumber:ok') {
+ // 用户同意授权，这里可以拿到 e.detail.code，发送给后端换取手机号
+ console.log('获取手机号成功:', e.detail)
+ uni.showToast({
+ title: '登录成功',
+ icon: 'success',
+ })
+ }
+ else {
+ // 用户拒绝授权
+ console.log('用户拒绝授权手机号:', e.detail.errMsg)
+ uni.showToast({
+ title: '已取消登录',
+ icon: 'none',
+ })
+ }
+}
definePage({
name: 'home',
@@ -25,7 +61,7 @@
</view>
<!-- 欢迎使用区 -->
- <view class="mb-[36rpx] flex items-center pl-[26rpx] pr-[22rpx]">
+ <view class="mb-[36rpx] flex items-center pl-[26rpx] pr-[22rpx]" @click="handleShowLoginPopup">
<image src="/static/home/hi.png" class="mr-[24rpx] h-[96rpx] w-[212rpx]" mode="aspectFit" />
<view class="welcome-title flex items-center text-[56rpx] text-white font-[600]">
<text>欢迎使用，</text>
@@ -115,7 +151,46 @@
</view>
<!-- 悬浮流程图标 -->
- <image src="/static/home/process.png" class="fixed bottom-[482rpx] right-[-42rpx] z-50 h-[128rpx] w-[128rpx]" />
+ <image src="/static/home/process.png" class="fixed bottom-[482rpx] right-[-42rpx] z-5 h-[128rpx] w-[128rpx]" />
+
+ <!-- 未登录提示弹窗 -->
+ <wd-popup v-model="showLoginPopup" custom-class="login-popup" position="center">
+ <view
+ class="box-border w-[590rpx] flex flex-col items-center px-[40rpx] pb-[32rpx] pt-[32rpx]"
+ style="background: linear-gradient(180deg, #D1E6FE 0%, #FFFFFF 34%, #FFFFFF 100%);"
+ >
+ <!-- 标题 -->
+ <text class="text-[36rpx] text-[#000000] font-bold leading-[50rpx]">
+ 提示
+ </text>
+
+ <!-- 图标 -->
+ <image src="/static/home/tips.png" class="mt-[56rpx] h-[202rpx] w-[202rpx]" mode="aspectFit" />
+
+ <!-- 提示文案 -->
+ <text class="mt-[14rpx] text-[32rpx] text-[#000000] leading-[44rpx]">
+ 您还未登录，请先登录
+ </text>
+
+ <!-- 操作按钮 -->
+ <view class="mt-[32rpx] w-full flex justify-between gap-[24rpx]">
+ <view class="h-[80rpx] flex flex-1 items-center justify-center rounded-[40rpx] bg-[#F5F5F5]" @click="handleCancelLogin">
+ <text class="text-[32rpx] text-[#989898] font-medium">
+ 再想想
+ </text>
+ </view>
+ <button
+ class="m-0 h-[80rpx] flex flex-1 items-center justify-center rounded-[40rpx] border-none bg-[#0C6FFF] p-0 after:border-none"
+ open-type="getPhoneNumber"
+ @getphonenumber="handleConfirmLogin"
+ >
+ <text class="text-[32rpx] text-[#FFFFFF] font-medium">
+ 去登录
+ </text>
+ </button>
+ </view>
+ </view>
+ </wd-popup>
</view>
</template>
@@ -131,5 +206,11 @@
.login-text {
display: inline-block;
position: relative;
+ border-bottom: 4rpx solid #fff;
+ padding-bottom: 2rpx;
+}
+
+:deep(.login-popup) {
+ border-radius: 32rpx;
}
</style>
--
Gitblit v1.7.1