骨架格局完成

pages/group/index.vue

@@ -1,16 +1,92 @@
 // 列表页
 <template>
-  <proginn-page>
-    <section class="pay">列表页</section>
-  </proginn-page>
+  <ws-page :menuIndex="1">
+    <section class="group-list">
+      <section class="top">
+        <section class="info">
+          <h3>协作群组</h3>
+          <p>适用于云端工作团队共享、管理日报和工时统计等</p>
+        </section>
+        <el-button type="primary">创建</el-button>
+      </section>
+      <section v-if="list" class="list">
+        <section class="group-item" v-for="(item, index) of list" :key="index"></section>
+      </section>
+    </section>
+  </ws-page>
 </template>
 
 <script>
-export default {
+import mixinGroup from '@/mixins/group'
 
+export default {
+  head() {
+    return {
+      title: `云端协作群组-程序员客栈`
+    }
+  },
+  mixins: [mixinGroup],
+  data() {
+    return {
+      list: null,
+    }
+  },
+  mounted() {
+    if(this.hasLogined) {
+      this.getList()
+    } else {
+      // 前往登录页
+      this.goLogin()
+    }
+  },
+  methods: {
+    async getList() {
+      let res = await this.$post(`/api/group/list`)
+      if(res) {
+        console.log(res)
+        this.list = res.data.list
+      }
+    }
+  }
 }
 </script>
 
-<style>
-
+<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: #0093fd;
+}
+.list {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.group-item {
+  width: 250px;
+  height: 220px;
+  border-radius:4px;
+  border: 1px solid rgba(220, 223, 230, 1);
+  margin-top: 20px;
+}
 </style>