功能完善

src/pages/index.vue

@@ -4,69 +4,15 @@ import AppFooter from "@/components/AppFooter.vue";
 import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import SModal from "@/components/SModal.vue";
-import SButton from "@/components/SButton.vue";
-import { getAppConfig, getHomeData, getMyDevicesAPI, loginAPI } from "@/apis";
+import Signin from "@/components/Signin.vue";
+import { getAppConfig, getHomeData, getMyDevicesAPI } from "@/apis";
 import useStore from "@/store";
-
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { updateConfig, updateUser, updateDevice } = store;
 // 使用storeToRefs，用于UI里显示，保持响应性
 const { user } = storeToRefs(store);
 const showModal = ref(false);
-const agree = ref(false);
-
-const getDevice = async () => {
-  const devices = await getMyDevicesAPI();
-  if (devices.bindings.length) {
-    updateDevice(devices.bindings[0].deviceId, devices.bindings[0].deviceName);
-  }
-};
-
-const handleAgree = () => {
-  agree.value = !agree.value;
-};
-const handleLogin = () => {
-  if (!agree.value) {
-    return uni.showToast({
-      title: "请先同意协议",
-      icon: "none",
-    });
-  }
-
-  // 先调用wx.getUserProfile获取用户信息
-  wx.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, nickName, avatarUrl });
-          await getDevice();
-          showModal.value = false;
-        },
-        fail: (err) => {
-          uni.showToast({
-            title: "登录失败",
-            icon: "none",
-          });
-          console.error("登录失败：", err);
-        },
-      });
-    },
-    fail: (err) => {
-      console.log("获取用户信息失败：", err);
-      uni.showToast({
-        title: "获取用户信息失败",
-        icon: "none",
-      });
-    },
-  });
-};
 
 const toPage = (path) => {
   if (!user.value.id) {
@@ -86,7 +32,13 @@ onMounted(async () => {
     const result = await getHomeData();
     if (result.user) {
       updateUser(result.user);
-      await getDevice();
+      const devices = await getMyDevicesAPI();
+      if (devices.bindings.length) {
+        updateDevice(
+          devices.bindings[0].deviceId,
+          devices.bindings[0].deviceName
+        );
+      }
     }
     console.log("首页数据：", result);
   } catch (error) {
@@ -103,14 +55,11 @@ onMounted(async () => {
       <UserHeader :user="user" showRank />
     </block>
     <block v-else>
-      <view
-        @click="() => (showModal = true)"
-        :style="{ marginTop: '20px', paddingLeft: '10px' }"
-      >
-        <text>微信登录</text>
+      <view class="signin-btn" @click="() => (showModal = true)">
+        <text>新来的弓箭手你好呀~</text>
+        <text>微信登录 &gt;</text>
       </view>
     </block>
-
     <view class="container">
       <view class="feature-grid">
         <view class="bow-card">
@@ -204,38 +153,21 @@ onMounted(async () => {
     </view>
     <AppFooter />
     <SModal :show="showModal" :onClose="() => (showModal = false)">
-      <view class="signin">
-        <SButton :rounded="20" width="80vw" :onClick="handleLogin">
-          <image
-            src="../static/wechat-icon.png"
-            mode="widthFix"
-            class="wechat-icon"
-          />
-          <text :style="{ color: '#000' }">登录/注册</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>
+      <Signin :onClose="() => (showModal = false)" />
     </SModal>
   </view>
 </template>
 
 <style scoped>
 .root-container {
-  height: calc(100vh - 45px);
+  height: calc(100vh - 40px);
   color: white;
   position: relative;
-  padding-top: 45px;
+  padding-top: 40px;
 }
 
 .container {
-  height: calc(100vh - 220px);
+  height: calc(100vh - 210px);
   padding: 15px 10px;
 }
 
@@ -411,37 +343,16 @@ onMounted(async () => {
   line-height: 20px;
   margin-bottom: 5px;
 }
-.signin {
-  width: 100%;
-  height: 100%;
+.signin-btn {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
+  margin-left: 10px;
+  font-size: 14px;
 }
-.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;
+.signin-btn > text:last-child {
+  color: #39a8ff;
+  margin-top: 2px;
 }
 </style>