Initial commit

pages/contact/groupList/GroupItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <view @click="toGroupCard" class="group_item">
+    <my-avatar :src="groupInfo.faceURL" :isGroup="true" size="42" />
+    <view class="group_info">
+      <text class="group_name">{{ groupInfo.groupName }}</text>
+      <view class="group_details">
+        <text>{{ `${groupInfo.memberCount}人` }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import MyAvatar from "@/components/MyAvatar/index.vue";
+export default {
+  name: "",
+  components: {
+    MyAvatar,
+  },
+  props: {
+    groupInfo: Object,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    toGroupCard() {
+      uni.navigateTo({
+        url: `/pages/common/groupCard/index?sourceID=${this.groupInfo.groupID}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.group_item {
+  @include vCenterBox();
+  padding: 24rpx 44rpx;
+
+  .group_info {
+    margin-left: 24rpx;
+
+    .group_name {
+      @include nomalEllipsis() max-width: 400rpx;
+    }
+
+    .group_details {
+      font-size: 28rpx;
+      color: #999;
+      margin-top: 8rpx;
+    }
+  }
+}
+</style>

pages/contact/groupList/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <view class="group_list_container">
+    <custom-nav-bar title="我的群组">
+
+    </custom-nav-bar>
+    <view class="search_bar_wrap">
+      <u-search
+        class="search_bar"
+        shape="square"
+        placeholder="搜索"
+        disabled
+        :showAction="false"
+      />
+    </view>
+
+    <u-tabs :scrollable="false" :list="tabList" @click="clickTab"></u-tabs>
+
+    <view
+      class="pane_row"
+      :style="{ transform: `translateX(${isMyCreate ? '0' : '-100%'})` }"
+    >
+      <view class="pane_content">
+        <u-list
+          v-if="getMyCreateGroupList.length > 0"
+          class="group_list"
+          :height="`${getListHeight}px`"
+        >
+          <u-list-item
+            v-for="group in getMyCreateGroupList"
+            :key="group.groupID"
+          >
+            <group-item :groupInfo="group" />
+          </u-list-item>
+        </u-list>
+        <u-empty v-else mode="list" />
+      </view>
+
+      <view class="pane_content">
+        <u-list
+          v-if="getMyJoinedGroupList.length > 0"
+          class="group_list"
+          :height="`${getListHeight}px`"
+        >
+          <u-list-item
+            v-for="group in getMyJoinedGroupList"
+            :key="group.groupID"
+          >
+            <group-item :groupInfo="group" />
+          </u-list-item>
+        </u-list>
+        <u-empty v-else mode="list" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import CustomNavBar from "@/components/CustomNavBar/index.vue";
+import GroupItem from "./GroupItem.vue";
+export default {
+  components: {
+    CustomNavBar,
+    GroupItem,
+  },
+  data() {
+    return {
+      keyword: "",
+      tabList: [
+        {
+          name: "我创建的",
+        },
+        {
+          name: "我加入的",
+        },
+      ],
+      isMyCreate: true,
+    };
+  },
+  computed: {
+    ...mapGetters(["storeGroupList", "storeCurrentUserID"]),
+    getMyCreateGroupList() {
+      return this.storeGroupList.filter(
+        (group) => group.ownerUserID === this.storeCurrentUserID,
+      );
+    },
+    getListHeight() {
+      const statusBar = uni.getWindowInfo().statusBarHeight;
+      const searchBar = 58;
+      const tabAndNavBar = 44 * 2;
+      const titleBar = 32;
+      return (
+        uni.getWindowInfo().safeArea.height -
+        statusBar -
+        searchBar -
+        tabAndNavBar -
+        titleBar
+      );
+    },
+    getMyJoinedGroupList() {
+      // console.log(this.storeGroupList.filter(group => group.ownerUserID !== this.storeCurrentUserID));
+      return this.storeGroupList.filter(
+        (group) => group.ownerUserID !== this.storeCurrentUserID,
+      );
+    },
+  },
+  mounted() {},
+  methods: {
+    clickTab({ index }) {
+      this.isMyCreate = index === 0;
+    },
+    toCreateGroup() {
+      uni.navigateTo({
+        url: `/pages/common/createGroup/index`,
+      });
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.group_list_container {
+  @include colBox(false);
+  height: 100vh;
+  overflow: hidden;
+
+  .nav_right_action {
+    padding-right: 44rpx;
+  }
+
+  .search_bar_wrap {
+    height: 34px;
+    padding: 12px 22px;
+  }
+
+  .pane_row {
+    display: flex;
+    flex: 1;
+    transition: all 0.3s ease 0s !important;
+    border-top: 2rpx solid #e8eaef;
+    // overflow-x: hidden;
+
+    .pane_content {
+      @include colBox(false);
+      height: 100%;
+      flex: 0 0 100%;
+
+      .pane_title {
+        font-size: 14px;
+        color: #999;
+        padding: 6px 22px;
+        background-color: #f8f8f8;
+      }
+    }
+  }
+}
+</style>