更新登录UI

src/components/SModal.vue

@@ -56,6 +56,7 @@ const closeModal = () => {
   align-items: center;
   opacity: 0;
   transition: all 0.3s ease;
+  z-index: 99;
 }
 .modal-content {
   width: 100%;

src/pages/index.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import AppFooter from "@/components/AppFooter.vue";
 import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
-import { getAppConfig, getHomeData, getMyDevicesAPI } from "@/apis";
+import SModal from "@/components/SModal.vue";
+import SButton from "@/components/SButton.vue";
+import { getAppConfig, getHomeData, getMyDevicesAPI, loginAPI } from "@/apis";
 import useStore from "@/store";
 
 import { storeToRefs } from "pinia";
@@ -11,53 +13,69 @@ const store = useStore();
 const { updateConfig, updateUser, updateDevice } = store;
 // 使用storeToRefs，用于UI里显示，保持响应性
 const { user } = storeToRefs(store);
+const showModal = ref(false);
+const agree = ref(false);
 
-const isLogin = () => {
-  if (!user.value.id) {
-    uni.showToast({
-      title: "还未登录",
+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",
     });
   }
+  // 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, nickName, avatarUrl });
+          await getDevice();
+          showModal.value = false;
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: "登录失败",
+            icon: "none",
+          });
+          console.error("登录失败：", err);
+        },
+      });
+    },
+    fail: (err) => {
+      console.log("获取用户信息失败：", err);
+    },
+  });
+};
+
+const isLogin = () => {
+  if (!user.value.id) {
+    showModal.value = true;
+  }
   return !!user.value.id;
 };
-const toLoginPage = () => {
-  uni.navigateTo({
-    url: "/pages/login",
-  });
-};
-const toFristTryPage = () => {
-  if (isLogin()) {
-    uni.navigateTo({
-      url: "/pages/first-try",
-    });
-  }
-};
-const toRankingPage = () => {
-  uni.navigateTo({
-    url: "/pages/ranking",
-  });
-};
-const toFriendBattlePage = () => {
-  if (isLogin()) {
-    uni.navigateTo({
-      url: "/pages/friend-battle",
-    });
-  }
-};
 
-const toPractisePage = () => {
-  if (isLogin()) {
+const toPage = (path) => {
+  if (!user.value.id) {
+    showModal.value = true;
+  } else {
     uni.navigateTo({
-      url: "/pages/practise",
-    });
-  }
-};
-
-const toMyDevicePage = () => {
-  if (isLogin()) {
-    uni.navigateTo({
-      url: "/pages/my-device",
+      url: path,
     });
   }
 };
@@ -70,13 +88,7 @@ onMounted(async () => {
     const result = await getHomeData();
     if (result.user) {
       updateUser(result.user);
-      const devices = await getMyDevicesAPI();
-      if (devices.bindings.length) {
-        updateDevice(
-          devices.bindings[0].deviceId,
-          devices.bindings[0].deviceName
-        );
-      }
+      await getDevice();
     }
     console.log("首页数据：", result);
   } catch (error) {
@@ -107,26 +119,26 @@ onMounted(async () => {
           <image
             src="../static/bow-bg.png"
             mode="widthFix"
-            @click="toMyDevicePage"
+            @click="() => toPage('/pages/my-device')"
           />
           <text>我的弓箭</text>
           <image
             src="../static/a2@2x.png"
             mode="widthFix"
-            @click="toFristTryPage"
+            @click="() => toPage('/pages/first-try')"
           />
         </view>
 
-        <view class="practice-card" @click="toPractisePage">
+        <view class="practice-card" @click="() => toPage('/pages/practise')">
           <image src="../static/a2@2x(1).png" mode="widthFix" />
         </view>
 
-        <view class="friend-card" @click="toFriendBattlePage">
+        <view class="friend-card" @click="() => toPage('/pages/friend-battle')">
           <image src="../static/a3@2x.png" mode="widthFix" />
         </view>
       </view>
 
-      <view class="ranking-section" @click="toRankingPage">
+      <view class="ranking-section" @click="() => toPage('/pages/ranking')">
         <image src="../static/a4@2x.png" mode="widthFix" />
         <view class="ranking-players">
           <img src="../static/juezhanbang.png" mode="widthFix" />
@@ -193,6 +205,26 @@ onMounted(async () => {
       </view>
     </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>
+    </SModal>
   </view>
 </template>
 
@@ -381,4 +413,37 @@ onMounted(async () => {
   line-height: 20px;
   margin-bottom: 5px;
 }
+.signin {
+  width: 100%;
+  height: 100%;
+  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>

src/pages/my-growth.vue

@@ -14,17 +14,17 @@ const battlePage = ref(1);
 const battleList = ref([]);
 
 const handleSelect = async (index) => {
-  if (index === 0) {
+  if (index === 0 && matchList.value.length === 0) {
     const result = await getBattleListAPI(matchPage.value, 2);
     matchList.value = result.list;
     matchPage.value += 1;
   }
-  if (index === 1) {
+  if (index === 1 && battleList.value.length === 0) {
     // const result = await getBattleListAPI(battlePage.value, 1);
     // battleList.value = result.list;
     // battlePage.value += 1;
   }
-  if (index === 2) {
+  if (index === 2 && practiseList.value.length === 0) {
     const result = await getPractiseResultListAPI();
     practiseList.value = result.list;
   }