proginn-frontend/pages/group/index.vue

// 列表页
<template>
  <ws-page :menuIndex="1">
    <section class="group-list">
      <section class="top">
        <section class="info">
          <h3>协作群组</h3>
          <p>适用于云端工作团队共享、管理日报和工时统计等</p>
        </section>
        <nuxt-link to="/group/create">
          <el-button type="primary">创建</el-button>
        </nuxt-link>
      </section>
      <section v-if="list" class="list">
        <nuxt-link
          class="group-item"
          :to="`/group/${item.id}`"
          v-for="(item, index) of list"
          :key="index"
        >
          <section class="imgs" v-if="item.developers.length === 1">
            <template v-for="(developer, idx) of item.developers">
              <img class="img" :src="developer && developer.icon_url" alt="icon_url" :key="idx" />
            </template>
          </section>
          <section class="imgs" v-else-if="item.developers.length === 2">
            <template v-for="(developer, idx) of item.developers">
              <img class="img two" :src="developer && developer.icon_url" alt="icon_url" :key="idx" />
            </template>
          </section>
          <section class="imgs" v-else>
            <template v-for="(developer, idx) of item.developers">
              <img
                v-if="idx < 3"
                class="img three"
                :src="developer && developer.icon_url"
                alt="icon_url"
                :key="idx"
              />
            </template>
          </section>
          <p class="name">{{item.name}}</p>
          <p class="count">{{item.member_num}}人</p>
        </nuxt-link>
      </section>
      <el-pagination
        v-if="pageTotal / pageSize > 1"
        background
        layout="prev, pager, next"
        :total="pageTotal"
        :page-size="pageSize"
        @current-change="changePage"
      ></el-pagination>
    </section>
  </ws-page>
</template>

<script>
import mixinGroup from "@/mixins/group";

export default {
  head() {
    return {
      title: `云端协作群组-程序员客栈`
    };
  },
  mixins: [mixinGroup],
  data() {
    return {
      list: null,
      pageSize: 15,
      pageTotal: 0,
      currentPage: 1
    };
  },
  mounted() {
    if (this.hasLogined) {
      this.getList();
    } else {
      // 前往登录页
      this.goLogin();
    }
    this.getUserStatus();
  },
  methods: {
    async getList() {
      let res = await this.$axios.$post(`/api/group/list`, {
        page: this.currentPage,
        page_size: this.pageSize
      });
      if (res) {
        this.list = res.data.list;
        this.pageTotal = res.data.total;
      }
    },
    changePage(page) {
      this.currentPage = page;
      this.getList();
    },
    /**
     * 获取用户状态判断前往那个版本
     */
    async getUserStatus() {
      let res = await this.$axios.$post(`/api/user/update_info`);
    }
  }
};
</script>

<style scoped>
.group-list {
  display: flex;
  flex-direction: column;
  width: 816px;
  padding: 20px;
  background: white;
}
.top {
  display: flex;
  justify-content: space-between;
  height: 40px;
}
.info {
  display: flex;
  align-items: center;
}
.info p {
  margin-left: 12px;
  color: #999;
  font-size: 14px;
}
.el-button {
  width: 100px;
  background: var(--mainColor);
}
.list {
  display: flex;
  flex-wrap: wrap;
}
.group-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 220px;
  border-radius: 4px;
  border: 1px solid rgba(220, 223, 230, 1);
  margin-top: 20px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  margin: 20px 4px 0;
}
.group-item:nth-child(n + 2) {
  /* margin-right: 0; */
}
.group-item:hover {
  border: 1px solid var(--mainColor);
}
.imgs {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 78px;
}
.img {
  width: 48px;
  height: 48px;
  border: 2px solid white;
  border-radius: 50%;
}
.two {
  position: absolute;
}
.two:nth-child(1) {
  top: 0;
  left: 0;
}
.two:nth-child(2) {
  top: 30px;
  left: 0;
}
.three {
  position: absolute;
}
.three:nth-child(1) {
  top: 0;
  left: 0;
}
.three:nth-child(2) {
  top: 30px;
  left: -20px;
}
.three:nth-child(3) {
  top: 30px;
  left: 20px;
}
.name {
  margin: 14px 0 10px;
}
.count {
  color: #999;
}
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>