feat: 动态增加学校标签 (#395)

* fix: 修改历史小鱼干卡片

* feat: 动态增加校区图标

* perf: 增加getSchoolName函数

src/pages/community/Masonry.vue

@@ -10,6 +10,13 @@
         :key="moment.id"
       >
         <view class="tile" @click="onClickMoment(moment.id)">
+          <view class="school-box">
+            <view class="school">
+              <view class="school-name">{{
+                getSchoolName(moment.communityId)
+              }}</view>
+            </view>
+          </view>
           <view class="img-frame">
             <image
               v-if="i === 1"
@@ -28,7 +35,6 @@
               @load.once="onLoadRight"
             />
           </view>
-
           <view class="tile-info">
             <view class="title">{{ moment.title }}</view>
             <view class="other-info">
@@ -72,12 +78,14 @@
 
 <script lang="ts" setup>
 import { getCurrentInstance, onBeforeMount, reactive, ref } from "vue";
-import { Moment } from "@/apis/schemas";
+import { Community, Moment } from "@/apis/schemas";
 import { onClickMoment } from "@/pages/community/event";
 import { onReachBottom } from "@dcloudio/uni-app";
 import { displayTime } from "@/utils/time";
 import { Pictures } from "@/utils/url";
 import { getThumbnail } from "@/utils/utils";
+import { getSchoolName } from "@/utils/school";
+import { listCommunity } from "@/apis/community/community";
 
 interface Props {
   loader?: () => Promise<Moment[]>;
@@ -287,6 +295,7 @@ $avatarWidth: calc(21 / 390 * 100vw);
   box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.25);
   border-radius: $radius;
   font-family: sans-serif;
+  position: relative;
 
   .img-frame {
     max-height: calc((50vw - $sideMargin - $horizontalGap / 2) * 1.8);
@@ -299,6 +308,24 @@ $avatarWidth: calc(21 / 390 * 100vw);
       height: 300rpx;
     }
   }
+  .school {
+    position: absolute;
+    z-index: 99;
+    display: inline-block;
+    place-items: center;
+    border-radius: 2.82vw;
+    top: 1.5vw;
+    left: 1.5vw;
+    background: #b0b0b0ba;
+    padding: 1vw;
+
+    .school-name {
+      font-weight: bold;
+      letter-spacing: 0.1vw;
+      color: #ffffff;
+      font-size: 2.7vw;
+    }
+  }
 
   .tile-info {
     transform: translateY(-2px);

src/pages/plan/CommentTask.vue

@@ -144,7 +144,7 @@ const commentTimes = Array.from({ length: 3 }, (_, index) => index + 1);
     align-items: center;
     justify-content: center;
     margin-top: 5.5vw;
-    margin-left: 2vw;
+    margin-left: 2.5vw;
     width: 16.15vw;
     height: 6.67vw;
     background-color: #1f6bff;

src/pages/plan/LikeTask.vue

@@ -136,7 +136,7 @@ const likeTimes = Array.from({ length: 5 }, (_, index) => index + 1);
     align-items: center;
     justify-content: center;
     margin-top: 5.5vw;
-    margin-left: 2vw;
+    margin-left: 2.5vw;
     width: 16.15vw;
     height: 6.67vw;
     background-color: #1f6bff;

src/pages/plan/MomentTask.vue

@@ -85,7 +85,7 @@ getUserMission().then((res) => {
     }
   }
   .get-fish-number {
-    margin-left: 11vw;
+    margin-left: 12vw;
     margin-top: 6.5vw;
     display: flex;
     flex-direction: row;

src/pages/plan/helped-plans/HelpedCard.vue

@@ -10,16 +10,13 @@
         >{{ props.donation.plan?.cat?.name || "全体猫猫" }} </text
       >{{ props.donation.plan.name }}
     </text>
-    <view class="school-box"
-      ><view v-if="currentSchool !== currentCampus" class="school">
-        <view class="school-name">
-          {{ currentSchool }}-{{ currentCampus }}
-        </view>
+    <view class="school-box">
+      <view class="school">
+        <view class="school-name">{{
+          getSchoolName(props.donation.plan.communityId)
+        }}</view>
       </view>
-      <view v-else class="school">
-        <view class="school-name">{{ currentSchool }}</view>
-      </view></view
-    >
+    </view>
     <view class="bottom">
       <view class="fish-count">
         <img :src="Icons.LittleFish" class="image-fish" />
@@ -34,44 +31,18 @@
 
 <script setup lang="ts">
 import { Icons, Pages } from "@/utils/url";
-import { Donation, Community } from "@/apis/schemas";
+import { Donation } from "@/apis/schemas";
 import { displayTimeTotal } from "@/utils/time";
-import { listCommunity } from "@/apis/community/community";
-import { reactive, ref } from "vue";
-let parentId = ref("");
-const currentSchool = ref("");
-const currentCampus = ref("");
-
-const lists = reactive<{ data: Community[] }>({ data: [] });
+import { getSchoolName } from "@/utils/school";
 
 const props = defineProps<{
   donation: Donation;
-  community: Community;
 }>();
 const onClick = () => {
   uni.navigateTo({
     url: `${Pages.PlanDetails}?id=${props.donation.plan.id}`
   });
 };
-async function schoolList() {
-  lists.data = (await listCommunity({})).communities;
-}
-async function getCampus() {
-  await schoolList();
-  for (const data of lists.data) {
-    if (data.id === props.donation.plan.communityId) {
-      currentCampus.value = data.name;
-      parentId.value = data.parentId || "";
-    }
-  }
-  for (const data of lists.data) {
-    if (data.id === parentId.value) {
-      currentSchool.value = data.name;
-    }
-  }
-}
-
-getCampus();
 </script>
 
 <style scoped lang="scss">

src/utils/school.ts

@@ -0,0 +1,29 @@
+import { Community } from "@/apis/schemas";
+import { reactive, ref } from "vue";
+import { listCommunity } from "@/apis/community/community";
+
+const parentId = ref("");
+const currentSchool = ref("");
+const currentCampus = ref("");
+
+const lists = reactive<{ data: Community[] }>({ data: [] });
+async function schoolList() {
+  lists.data = (await listCommunity({})).communities;
+}
+export const getSchoolName = (communityId: string) => {
+  schoolList();
+  for (const data of lists.data) {
+    if (data.id === communityId) {
+      currentCampus.value = data.name;
+      parentId.value = data.parentId || "";
+    }
+  }
+  for (const data of lists.data) {
+    if (data.id === parentId.value) {
+      currentSchool.value = data.name;
+    }
+  }
+  return currentCampus.value != currentSchool.value
+    ? `${currentSchool.value}-${currentCampus.value}`
+    : currentSchool.value;
+};