train-dirtea/src/layout/class/classInfo.vue

<template>
  <div id="classInfo">
    <el-col :span="24" class="messageInfo">
      <el-col :span="24" class="mess">
        <el-col :span="22" class="info">
          <p class="title">班级名称</p>
          <p class="name">{{ classinfo.name }}</p>
        </el-col>
        <el-col :span="2" class="icon">
          <van-icon name="arrow" />
        </el-col>
      </el-col>
      <el-col :span="24" class="mess">
        <el-col :span="22" class="info">
          <p class="title">班级人数</p>
          <p class="name">{{ classinfo.number }}</p>
        </el-col>
        <el-col :span="2" class="icon">
          <van-icon name="arrow" />
        </el-col>
      </el-col>
      <el-col :span="24" class="mess">
        <el-col :span="22" class="info">
          <p class="title">批次</p>
          <p class="name">{{ classinfo.batch }}</p>
        </el-col>
        <el-col :span="2" class="icon">
          <van-icon name="arrow" />
        </el-col>
      </el-col>

      <el-col :span="24" class="mess">
        <el-col :span="22" class="info">
          <p class="title">期</p>
          <p class="name">{{ classinfo.term }}</p>
        </el-col>
        <el-col :span="2" class="icon">
          <van-icon name="arrow" />
        </el-col>
      </el-col>
      <el-col :span="24" class="mess">
        <el-col :span="22" class="info">
          <p class="title">礼仪课老师</p>
          <p class="name">{{ classinfo.lyteacher }}</p>
        </el-col>
        <el-col :span="2" class="icon">
          <van-icon name="arrow" />
        </el-col>
      </el-col>
      <el-col :span="24" class="mess">
        <el-col :span="22" class="info">
          <p class="title">用餐地点</p>
          <p class="name">{{ classinfo.yclocation }}</p>
        </el-col>
        <el-col :span="2" class="icon">
          <van-icon name="arrow" />
        </el-col>
      </el-col>
      <el-col :span="24" class="mess">
        <el-col :span="22" class="info">
          <p class="title">拓展计划地点</p>
          <p class="name">{{ classinfo.kzjhlocation }}</p>
        </el-col>
        <el-col :span="2" class="icon">
          <van-icon name="arrow" />
        </el-col>
      </el-col>
      <el-col :span="24" class="mess">
        <el-col :span="22" class="info">
          <p class="title">开班仪式地点</p>
          <p class="name">{{ classinfo.kbyslocation }}</p>
        </el-col>
        <el-col :span="2" class="icon">
          <van-icon name="arrow" />
        </el-col>
      </el-col>
      <el-col :span="24" class="mess">
        <el-col :span="22" class="info">
          <p class="title">教室位置</p>
          <p class="name">{{ classinfo.jslocation }}</p>
        </el-col>
        <el-col :span="2" class="icon">
          <van-icon name="arrow" />
        </el-col>
      </el-col>
      <el-col :span="24" class="mess">
        <el-col :span="22" class="info">
          <p class="title">班级类型</p>
          <p class="name">{{ classinfo.type }}</p>
        </el-col>
        <el-col :span="2" class="icon">
          <van-icon name="arrow" />
        </el-col>
      </el-col>
    </el-col>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
const { mapActions: classes } = createNamespacedHelpers('classes');
export default {
  name: 'classInfo',
  props: {},
  components: {},
  data: () => ({
    classinfo: {},
  }),
  created() {
    this.search();
  },
  computed: {
    ...mapState(['user', 'classid']),
  },
  methods: {
    ...classes(['fetch']),
    async search() {
      const classinfo = await this.fetch(this.classid);
      console.log(classinfo);
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.messageInfo {
  margin: 0 0 10px 0;
}
.mess {
  min-height: 50px;
  border-bottom: 1px solid #efeff4;
}
.info {
  padding: 0 15px;
}
.info .title {
  font-size: 14px;
  color: #92a1b1;
  padding: 4px 0;
}
.info .name {
  font-size: 16px;
  color: #000;
}
.icon {
  padding: 11px 0;
  font-size: 20px;
  color: #ccc;
}
</style>