feat: 登录弹窗

zjk

2026-04-08 a8a70dc28441b656eb4550434b955860d2115d71

feat: 登录弹窗

 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>