feat: 实现首页SchoolSelect分离

src/components/SchoolSelect.vue

@@ -0,0 +1,97 @@
+<template>
+  <view class="school-box">
+    <view class="school-select-box">
+      <image class="arrow" :src="Icons.Location" @click="onClickSwitch" />
+      <view class="names" @click="onClickSwitch">
+        <view class="school-name">
+          {{ currentSchool }}
+        </view>
+        <view v-if="currentSchool !== currentCampus" class="campus-name">
+          ({{ currentCampus }})</view
+        >
+        <view v-else class="campus-name"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { Icons } from "@/utils/url";
+import { onClickSwitch } from "@/pages/community/utils";
+import { listCommunity } from "@/apis/community/community";
+import { StorageKeys } from "@/utils/const";
+import { Community } from "@/apis/schemas";
+const currentSchool = ref("");
+const currentCampus = ref("");
+const communityId = ref("");
+const parentId = ref("");
+function init() {
+  communityId.value = uni.getStorageSync(StorageKeys.CommunityId);
+}
+const lists = reactive<{
+  data: Community[];
+}>({
+  data: []
+});
+async function schoolList() {
+  lists.data = (await listCommunity({})).communities;
+}
+async function getCampus() {
+  await schoolList();
+  init();
+  for (let i = 0; i < lists.data.length; i++) {
+    if (lists.data[i].id === communityId.value) {
+      currentCampus.value = lists.data[i].name;
+      parentId.value = <string>lists.data[i].parentId;
+    }
+  }
+  for (let j = 0; j < lists.data.length; j++) {
+    if (lists.data[j].id === parentId.value) {
+      currentSchool.value = lists.data[j].name;
+    }
+  }
+}
+getCampus();
+</script>
+
+<style scoped lang="scss">
+.school-box {
+  background-color: #fafcff;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  .school-select-box {
+    height: fit-content;
+    display: flex;
+    align-items: center;
+  }
+}
+.arrow {
+  width: 32rpx;
+  height: 40rpx;
+  margin-left: 20rpx;
+}
+.names {
+  display: flex;
+  align-items: baseline;
+
+  .school-name {
+    font-weight: bold;
+    border-bottom: 2px solid #1fa1ff;
+    line-height: calc(18 / 390 * 100vw);
+    margin-left: calc(8 / 390 * 100vw);
+    padding-bottom: calc(4 / 390 * 100vw);
+    font-size: calc(18 / 390 * 100vw);
+  }
+
+  .campus-name {
+    color: #939393;
+    font-weight: bold;
+    letter-spacing: calc(0.5 / 390 * 100vw);
+    font-size: calc(16 / 390 * 100vw);
+    margin-left: calc(8 / 390 * 100vw);
+  }
+}
+</style>

src/pages/community/community.vue

@@ -1,19 +1,6 @@
 <template>
   <TopBar bg-color="#fafcff">
-    <view class="school-box">
-      <view class="school-select-box">
-        <image class="arrow" :src="Icons.Location" @click="onClickSwitch" />
-        <view class="names" @click="onClickSwitch">
-          <view class="school-name">
-            {{ currentSchool }}
-          </view>
-          <view v-if="currentSchool !== currentCampus" class="campus-name">
-            ({{ currentCampus }})</view
-          >
-          <view v-else class="campus-name"></view>
-        </view>
-      </view>
-    </view>
+    <SchoolSelect />
   </TopBar>
 
   <view class="background">
@@ -41,12 +28,11 @@
 <script lang="ts" setup>
 import { reactive, ref } from "vue";
 import TopBar from "@/components/TopBar.vue";
-import { Icons } from "@/utils/url";
+import SchoolSelect from "@/components/SchoolSelect.vue";
 import MasonryFrame from "@/pages/community/masonry-frame.vue";
 import Cards from "@/pages/community/cards/cards.vue";
 import CarouselFrame from "@/pages/community/carousel-frame.vue";
 import { onLoad, onPullDownRefresh, onReady, onShow } from "@dcloudio/uni-app";
-import { onClickSwitch } from "@/pages/community/utils";
 import TabBar from "@/components/tab-bar/tab-bar.vue";
 import { listCommunity } from "@/apis/community/community";
 import { Community } from "@/apis/schemas";
@@ -62,12 +48,6 @@ const communityId = ref("");
 const parentId = ref("");
 const cardList = reactive(["", "", "", "", "", ""]);
 
-const topBarHeight = uni.getSystemInfoSync().statusBarHeight as number;
-const capsuleData = uni.getMenuButtonBoundingClientRect();
-const capsuleBarHeight =
-  capsuleData.height + (capsuleData.top - topBarHeight) * 2;
-const navBarHeight = topBarHeight + capsuleBarHeight;
-
 function init() {
   communityId.value = uni.getStorageSync(StorageKeys.CommunityId);
 }
@@ -141,60 +121,4 @@ onShow(() => {
   height: 100vh;
   background-color: #fafcff;
 }
-
-.arrow {
-  width: 32rpx;
-  height: 40rpx;
-  margin-left: 20rpx;
-}
-
-.navbtn {
-  color: #939393;
-  font-size: calc(10 / 390 * 100vw);
-  margin: 0 calc(10 / 390 * 100vw);
-
-  &.current {
-    color: #ffffff;
-    background-color: #1fa1ff;
-    padding: 10rpx 15rpx 10rpx 15rpx;
-    border-radius: 15rpx;
-    font-size: calc(15 / 390 * 100vw);
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
-  }
-}
-
-.school-box {
-  background-color: #fafcff;
-  height: fit-content;
-  display: flex;
-  flex-direction: column;
-  font-family: sans-serif;
-  .school-select-box {
-    height: fit-content;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.names {
-  display: flex;
-  align-items: baseline;
-
-  .school-name {
-    font-weight: bold;
-    border-bottom: 2px solid #1fa1ff;
-    line-height: calc(18 / 390 * 100vw);
-    margin-left: calc(8 / 390 * 100vw);
-    padding-bottom: calc(4 / 390 * 100vw);
-    font-size: calc(18 / 390 * 100vw);
-  }
-
-  .campus-name {
-    color: #939393;
-    font-weight: bold;
-    letter-spacing: calc(0.5 / 390 * 100vw);
-    font-size: calc(16 / 390 * 100vw);
-    margin-left: calc(8 / 390 * 100vw);
-  }
-}
 </style>