Initial commit

pages/contact/applicationListDetails/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <view class="application_list_container">
+    <custom-nav-bar :title="getTitle" />
+
+    <u-list class="application_list">
+      <u-list-item
+        v-for="application in getRenderData"
+        :key="getKey(application)"
+      >
+        <application-item :isRecv="isRecv" :application="application" />
+      </u-list-item>
+    </u-list>
+  </view>
+</template>
+
+<script>
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import ApplicationItem from "../applicationList/ApplicationItem.vue";
+export default {
+  components: {
+    CustomNavBar,
+    ApplicationItem,
+  },
+  data() {
+    return {
+      isGroupApplication: false,
+      isRecv: false,
+    };
+  },
+  computed: {
+    getRenderData() {
+      let getterKey = this.isRecv
+        ? "storeRecvFriendApplications"
+        : "storeSentFriendApplications";
+      if (this.isGroupApplication) {
+        getterKey = this.isRecv
+          ? "storeRecvGroupApplications"
+          : "storeSentGroupApplications";
+      }
+      return [...this.$store.getters[getterKey]].sort((a, b) =>
+        a.handleResult === 0 ? -1 : 1,
+      );
+    },
+    getKey() {
+      return (application) => {
+        if (this.isGroupApplication) {
+          return this.isRecv
+            ? application.userID + application.groupID
+            : application.groupID;
+        }
+        return application[this.isRecv ? "fromUserID" : "toUserID"];
+      };
+    },
+    getTitle() {
+      if (!this.isRecv) {
+        return "我的申请";
+      }
+      return this.isGroupApplication ? "群通知" : "好友请求";
+    },
+  },
+  onLoad(options) {
+    const { isGroupApplication, isRecv } = options;
+    this.isGroupApplication = JSON.parse(isGroupApplication);
+    this.isRecv = JSON.parse(isRecv);
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.application_list_container {
+  @include colBox(false);
+  height: 100vh;
+  background-color: #f8f8f8;
+
+  .application_list {
+    margin-top: 24rpx;
+    flex: 1;
+  }
+}
+</style>