添加登录功能

src/pages/index.vue

@@ -1,85 +1,22 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { onMounted } from "vue";
 import AppFooter from "@/components/AppFooter.vue";
 import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import { getAppConfig } from "@/apis";
-
-// import useStore from "@/store";
+import useStore from "@/store";
 
 import { storeToRefs } from "pinia";
-// const store = useStore();
-// 使用actions方法
-// const { updateUsername } = store;
+const store = useStore();
 // 使用storeToRefs，用于UI里显示，保持响应性
-// const { user } = storeToRefs(store);
+const { user } = storeToRefs(store);
 
-// 添加登录状态和用户信息
-const isLogin = ref(true);
-const userInfo = ref({
-  name: "",
-  avatarUrl: "",
-  level: "L1",
-  rank: 0,
-  rankTotal: 0,
-});
-
-// 检查登录状态
-const checkLogin = () => {
-  const storedUserInfo = uni.getStorageSync("userInfo");
-  if (storedUserInfo) {
-    userInfo.value = JSON.parse(storedUserInfo);
-    isLogin.value = true;
-  }
-};
-
-// 处理微信登录
-const handleLogin = () => {
-  // console.log("getUsername", store.getUsername);
-  // updateUsername("we0f9we9f08");
-  uni.getUserProfile({
-    desc: "用于完善用户资料",
-    success: (res) => {
-      const { userInfo: wxUserInfo } = res;
-      console.log("wxUserInfo", wxUserInfo);
-      // 获取登录凭证
-      uni.login({
-        provider: "weixin",
-        success: async (loginRes) => {
-          const { code } = loginRes;
-          console.log("loginRes", loginRes);
-          // 这里可以把 code 和用户信息发送到后端
-          // const result = await loginAPI(code, wxUserInfo);
-          // 暂时直接使用微信返回的用户信息
-          userInfo.value = {
-            name: wxUserInfo.nickName,
-            avatarUrl: wxUserInfo.avatarUrl,
-            level: "L1",
-            rank: 0,
-            rankTotal: 0,
-          };
-          isLogin.value = true;
-
-          // 保存到本地存储
-          uni.setStorageSync("userInfo", JSON.stringify(userInfo.value));
-        },
-        fail: (err) => {
-          uni.showToast({
-            title: "登录失败",
-            icon: "none",
-          });
-          console.error("登录失败：", err);
-        },
-      });
-    },
-    fail: (err) => {
-      console.log("获取用户信息失败：", err);
-    },
+const toLoginPage = () => {
+  uni.navigateTo({
+    url: "/pages/login",
   });
 };
-
 const toFristTryPage = () => {
-  console.log("username", username);
   uni.navigateTo({
     url: "/pages/first-try",
   });
@@ -128,11 +65,11 @@ onMounted(() => {
   <view class="root-container">
     <AppBackground />
     <!-- 根据登录状态显示用户信息或登录按钮 -->
-    <block v-if="isLogin">
-      <UserHeader :userInfo="userInfo" showRank />
+    <block v-if="user.id">
+      <UserHeader :user="user" showRank />
     </block>
     <block v-else>
-      <view class="login-btn" @click="handleLogin">
+      <view @click="toLoginPage">
         <text>微信登录</text>
       </view>
     </block>
@@ -418,16 +355,4 @@ onMounted(() => {
   line-height: 20px;
   margin-bottom: 5px;
 }
-.login-btn {
-  margin: 20px;
-  padding: 10px 20px;
-  background-color: #07c160;
-  border-radius: 4px;
-  text-align: center;
-}
-
-.login-btn text {
-  color: #ffffff;
-  font-size: 16px;
-}
 </style>

src/pages/login.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { ref } from "vue";
+import Header from "@/components/Header.vue";
+import SButton from "@/components/SButton.vue";
+import useStore from "@/store";
+import { loginAPI } from "@/apis";
+const store = useStore();
+// 使用actions方法
+const { updateUser, updateToken } = store;
+const agree = ref(false);
+
+const handleAgree = () => {
+  agree.value = !agree.value;
+};
+const handleLogin = () => {
+  if (!agree.value) {
+    return uni.showToast({
+      title: "请先同意协议",
+      icon: "none",
+    });
+  }
+  // console.log("getUsername", store.getUsername);
+  uni.getUserProfile({
+    desc: "用于完善用户资料",
+    success: (res) => {
+      const { nickName, avatarUrl } = res.userInfo;
+      // 获取登录凭证
+      uni.login({
+        provider: "weixin",
+        success: async (loginRes) => {
+          const { code } = loginRes;
+          const result = await loginAPI(nickName, avatarUrl, code);
+          updateUser(result.user);
+          updateToken(result.token, result.expires);
+          uni.navigateBack();
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: "登录失败",
+            icon: "none",
+          });
+          console.error("登录失败：", err);
+        },
+      });
+    },
+    fail: (err) => {
+      console.log("获取用户信息失败：", err);
+    },
+  });
+};
+</script>
+
+<template>
+  <view class="container">
+    <image src="../static/login-bg.png" mode="widthFix" />
+    <Header />
+    <view>
+      <SButton :rounded="20" width="80vw" :onClick="handleLogin">
+        <image
+          src="../static/wechat-icon.png"
+          mode="widthFix"
+          class="wechat-icon"
+        />
+        <text>登录/注册</text>
+      </SButton>
+      <view class="protocol" @click="handleAgree">
+        <view v-if="!agree" />
+        <image v-if="agree" src="../static/checked.png" mode="widthFix" />
+        <text
+          >已同意并阅读<text :style="{ color: '#fff' }">《用户协议》</text
+          >及<text :style="{ color: '#fff' }">《隐私协议》</text>内容</text
+        >
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  position: relative;
+}
+.container > image:first-child {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: -1;
+}
+.container > view:last-child {
+  width: 100%;
+  height: calc(100vh - 96px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.protocol {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+  margin-top: 40px;
+  color: #8a8a8a;
+}
+.protocol > image {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+}
+.protocol > view:first-child {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin-right: 10px;
+  border: 1px solid #fff;
+}
+.wechat-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 20px;
+}
+</style>