update

src/views/class/index.vue

@@ -12,7 +12,7 @@
                 <el-button type="primary" size="mini">查看平时成绩</el-button>
               </el-col>
               <el-col :span="24">
-                班级名单
+                <name-list :data="studentList"></name-list>
               </el-col>
             </el-tab-pane>
             <el-tab-pane label="班级分组" name="second">
@@ -33,8 +33,10 @@ import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
 // 班级分组
 import classGroup from './newClass/classGroup.vue';
+import nameList from './newClass/nameList.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: group } = createNamespacedHelpers('group');
+const { mapActions: student } = createNamespacedHelpers('student');
 export default {
   metaInfo: { title: '班级名单' },
   name: 'index',
@@ -44,6 +46,8 @@ export default {
     footInfo, //底部导航
     // 班级分组
     classGroup,
+    //班级名单
+    nameList,
   },
   data: function() {
     return {
@@ -52,17 +56,26 @@ export default {
       navShow: true,
       // 班级信息
       // 头部标签
-      activeName: 'second',
+      activeName: 'first',
       // 小组列表
       groupList: [],
+      //学生列表
+      studentList: [],
     };
   },
   async created() {
+    await this.toGetStudentList();
     // 查看班级小组
     await this.findGroup();
   },
   methods: {
+    ...student({ getStudentList: 'query' }),
     ...group({ groupQuery: 'query' }),
+    // 查学生
+    async toGetStudentList() {
+      const res = await this.getStudentList({ classid: this.user.classid });
+      if (res) this.$set(this, `studentList`, res.data);
+    },
     // 查询小组
     async findGroup() {
       let classid = this.user.classid;

src/views/class/newClass/nameList.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="nameList">
+    <el-row>
+      <el-col :span="12" v-for="(stu, index) in data" :key="index" class="list">
+        <p class="name">{{ stu.name }}</p>
+        <p class="job">{{ stu.job }}</p>
+        <p class="job">性别:{{ stu.gender }}</p>
+        <p class="job">寝室号:{{ stu.bedroom }}</p>
+        <p>
+          <i class="el-icon-phone"></i><el-link href="tel:01234567890" :underline="false">:{{ stu.phone }}</el-link>
+        </p>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'nameList',
+  props: {
+    data: { type: Array, default: () => [] },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.list {
+  padding: 10px 0;
+  border-bottom: 1px dashed #ccc;
+  margin: 0 10px;
+  width: 44%;
+  text-align: center;
+  .name {
+    font-size: 14px;
+  }
+  .job {
+    font-size: 12px;
+    color: #405ffe;
+    padding: 5px 0 0 0;
+  }
+}
+</style>