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

<template>
  <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>
</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";

const popupRef = 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 = () => {
  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>