spring-festival-greetings/components/LoginPopup/LoginPopup.vue

<template>
  <view>
    <uni-popup ref="popupRef" type="bottom" :safe-area="false">
      <view class="popup-container">
        <view class="popup-header">
          <text class="popup-title">登录授权</text>
        </view>

        <view class="avatar-nickname">
          <button
            open-type="chooseAvatar"
            @chooseavatar="onChooseAvatar"
            class="avatar-selector custom-button"
          >
            <image v-if="avatarUrl" :src="avatarUrl" class="avatar-preview" />
            <text v-else>点击获取头像</text>
          </button>
          <input
            class="nickname-input"
            type="nickname"
            v-model="nickname"
            placeholder="请输入昵称"
          />
        </view>

        <button class="confirm-btn custom-button" @tap="confirmLogin">
          确认登录
        </button>
      </view>
    </uni-popup>

    <!-- 隐私协议弹窗 -->
    <PrivacyPopup ref="privacyRef" @agree="onPrivacyAgree" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useUserStore } from "@/stores/user";
import { getPlatformProvider } from "@/utils/system";
import { uploadImage } from "@/utils/common";
import { apiLogin } from "@/api/auth.js";
import { wxLogin } from "@/utils/login.js";
import PrivacyPopup from "@/components/PrivacyPopup/PrivacyPopup.vue";

const popupRef = ref(null);
const privacyRef = ref(null);
const avatarUrl = ref("");
const nickname = ref("");

const userStore = useUserStore();

const emit = defineEmits(["logind"]);

const festivalNames = [
  "春意",
  "福星",
  "小福",
  "新禧",
  "瑞雪",
  "花灯",
  "喜乐",
  "元宝",
  "春芽",
  "年年",
  "花灯",
  "月圆",
  "灯影",
  "小灯",
  "星灯",
  "彩灯",
  "清风",
  "微风",
  "小晴",
  "碧波",
  "流泉",
  "月光",
  "玉轮",
  "桂香",
  "秋叶",
  "星河",
  "小月",
  "露华",
  "秋水",
  "雪落",
  "冰晶",
  "暖阳",
  "小雪",
  "冬影",
  "雪花",
  "松影",
];

const getFestivalName = () => {
  const idx = Math.floor(Math.random() * festivalNames.length);
  return festivalNames[idx];
};

const open = async () => {
  console.log(22223333);
  // #ifdef MP-WEIXIN
  const isAgreed = await privacyRef.value.check();
  console.log(1111, isAgreed);
  if (isAgreed) {
    popupRef.value.open();
  }
  // #endif

  // #ifndef MP-WEIXIN
  popupRef.value.open();
  // #endif
};

const onPrivacyAgree = () => {
  popupRef.value.open();
};

const close = () => {
  popupRef.value.close();
};

const onChooseAvatar = (e) => {
  avatarUrl.value = e.detail.avatarUrl;
};

const confirmLogin = async () => {
  try {
    const platform = getPlatformProvider();
    if (platform === "mp-weixin") {
      const code = await wxLogin();
      const imageUrl = avatarUrl.value
        ? await uploadImage(avatarUrl.value)
        : "";

      const loginRes = await apiLogin({
        code,
        nickname: nickname.value || getFestivalName(),
        avatarUrl: imageUrl,
        platform: "wx",
      });
      // 保存用户信息到store
      userStore.setUserInfo({
        nickName: loginRes?.user?.nickname || nickname.value,
        avatarUrl: loginRes?.user?.avatar || imageUrl,
        id: loginRes?.user?.id,
        isVip: loginRes?.isVip || false,
        vipExpireAt: loginRes?.vipExpireAt || null,
      });

      userStore.setToken(loginRes.token);

      uni.showToast({ title: "登录成功", icon: "success" });
      emit("logind");
      popupRef.value.close();

      // 重置临时变量
      avatarUrl.value = "";
      nickname.value = "";
    }
  } catch (err) {
    uni.showToast({ title: "登录失败", icon: "none" });
    console.error(err);
  }
};
defineExpose({ open, close });
</script>

<style lang="scss">
.custom-button {
  border: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  line-height: normal;
  font-family: inherit;
}

.custom-button::after {
  border: none;
}
.popup-container {
  background-color: #fff;
  padding: 40rpx 30rpx 60rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;

  .popup-header {
    text-align: center;
    margin-bottom: 30rpx;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .avatar-nickname {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30rpx;

    .avatar-selector {
      width: 145rpx;
      height: 145rpx;
      border-radius: 50%;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20rpx;
      background-color: #eee;
    }

    .avatar-preview {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .nickname-input {
      width: 80%;
      border: 1rpx solid #ccc;
      border-radius: 20rpx;
      padding: 20rpx;
      font-size: 26rpx;
      text-align: center;
    }
  }

  .confirm-btn {
    background-color: #07c160;
    color: white;
    font-size: 30rpx;
    border-radius: 50rpx;
    padding: 20rpx 0;
    width: 100%;
  }
}
</style>