feat: 历史小鱼干卡片改版

xh-polaris · Dec 10, 2023 · eeeab9d · eeeab9d
1 parent 777785b
commit eeeab9d
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 11 deletions.
diff --git a/src/pages/plan/helped-plans/HelpedCard.vue b/src/pages/plan/helped-plans/HelpedCard.vue
@@ -7,36 +7,89 @@
         >{{ props.donation.plan?.cat?.name || "全体猫猫" }} </text
       >{{ props.donation.plan.name }}
     </text>
-    <view class="date">{{ displayTime(props.donation.donateTime) }}</view>
-
-    <view class="fish-count">
-      <img :src="Icons.LittleFish" class="image-fish" />
-      <text class="count">×{{ props.donation.donateNum }}</text>
+    <view class="school">
+      <view class="school-name">{{ currentSchool }}</view>
+    </view>
+    <view class="bottom">
+      <view class="fish-count">
+        <img :src="Icons.LittleFish" class="image-fish" />
+        <text class="count">×{{ props.donation.donateNum }}</text>
+        <view class="date">{{
+          displayTimeTotal(props.donation.donateTime)
+        }}</view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import { Icons, Pages } from "@/utils/url";
-import { Donation } from "@/apis/schemas";
-import { displayTime } from "@/utils/time";
+import { Donation, Community } from "@/apis/schemas";
+import { displayTimeTotal } from "@/utils/time";
+import { listCommunity } from "@/apis/community/community";
+import { reactive, ref } from "vue";
+import { StorageKeys } from "@/utils/const";
+let communityId = ref("");
+let parentId = ref("");
+const currentSchool = ref("");
+const currentCampus = ref("");
+function init() {
+  communityId.value = uni.getStorageSync(StorageKeys.CommunityId);
+}
+
+init();
+
+const lists = reactive<{ data: Community[] }>({ data: [] });
+
+const campuses = reactive<{ data: Community[] }>({ data: [] });
 
 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() {
+  schoolList().then(async () => {
+    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;
+      }
+    }
+    campuses.data = (
+      await listCommunity({
+        parentId: parentId.value
+      })
+    ).communities;
+  });
+}
+
+getCampus();
 </script>
 
 <style scoped lang="scss">
 .card {
+  //display: flex;
+  //flex-direction: column;
   background-color: white;
   border-radius: 3vw;
   width: 44vw;
-  height: 52vw;
+  height: 63vw;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding: 2vw;
   box-sizing: border-box;
@@ -53,26 +106,51 @@ const onClick = () => {
     font-size: 3.5vw;
     color: black;
     font-weight: bold;
-    letter-spacing: 0.3vw;
+    letter-spacing: 0.2vw;
+  }
+  .school {
+    display: grid;
+    place-items: center; /* 在容器中居中对齐 */
+    width: 20vw;
+    height: 4.6vw;
+    border-radius: 1vw;
+    margin-top: 1vw;
+    background: #1f6bff36;
+    .school-name {
+      color: #1f6bff;
+      font-size: 2.8vw;
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-top: 4vw;
   }
 
   .date {
     font-size: 3vw;
     color: grey;
     letter-spacing: 0.3vw;
-    margin-bottom: 1vw;
+    margin-left: 4vw;
+    //margin-bottom: 1vw;
   }
 
   .fish-count {
     display: flex;
+    align-items: center;
+    margin-bottom: 1vw;
     .image-fish {
       width: 7vw;
       height: 7vw;
     }
+
     .count {
       width: fit-content;
       font-size: 4.5vw;
-      color: brown;
+      font-style: italic;
+      font-weight: bold;
+      color: #48282d;
     }
   }
 }

diff --git a/src/utils/time.ts b/src/utils/time.ts
@@ -21,6 +21,15 @@ export function displayTime(timestamp: number) {
     return time.format("MM-DD");
   }
 }
+export function displayTimeTotal(timestamp: number) {
+  timestamp = adaptTime(timestamp);
+  const now = new Date().getTime();
+  if (now < timestamp) {
+    timestamp = now;
+  }
+  const time = moment(timestamp);
+  return time.format("YYYY-MM-DD");
+}
 
 export function displayDate(timestamp: number, format = "YYYY-MM-DD") {
   timestamp = adaptTime(timestamp);