saas_entrepot_admin/src/components/Study/StudentInfo.vue

<template>
  <div class="studyInfo">
    <header>
      <div class="left"><i></i><span>学员信息</span></div>
      <div class="goods_info">
        <span v-for="(item, i) in headList" :key="i">
          <strong style="color: red">「{{ i + 1 }}」</strong>
          {{ item.lebel }}
          <span v-if="item.key != 'num' && item.key != 'time'">{{
            userData[item.key]
          }}</span>
          <span v-else-if="item.key == 'num'"
            >完成{{ userData.stuAllNum + userData.recordNum }}节的内容学习</span
          >
          <span v-else-if="item.key == 'time'"
            >{{ $methodsTools.onlyForma(userData.studyStartTime, false) }} -
            {{ $methodsTools.onlyForma(userData.studyEndTime, false) }}</span
          >
        </span>
      </div>

      <el-button class="btn" type="primary" size="mini" @click="packUp">{{
        showBox ? "收起" : "展开"
      }}</el-button>
    </header>

    <div class="info_img" v-show="showBox">
      <ul>
        <li>学员编码：{{ userData.studentCode }}</li>
        <li>学员姓名：{{ userData.realName }}</li>
        <li>学员身份证号码：{{ userData.idCard }}</li>
        <li>绑定手机号码：{{ userData.telPhone }}</li>
      </ul>
      <div class="img_by">
        <div class="photoSty1">
          <img
            v-if="!userData.oneInchPhotos"
            src="@/assets/images/peopleImg.png"
            alt=""
          />
          <el-image
            v-else
            style="width: 100%; height: 100%"
            :src="$methodsTools.splitImgHost(userData.oneInchPhotos)"
            :preview-src-list="[
              $methodsTools.splitImgHost(userData.oneInchPhotos),
            ]"
          >
          </el-image>
          <div class="pos_bottom">一寸头像图</div>
        </div>
        <div class="photoSty2">
          <img
            v-if="!userData.idCardImg1"
            src="@/assets/images/idcardF.png"
            alt=""
          />
          <el-image
            v-else
            style="width: 100%; height: 100%"
            :src="$methodsTools.splitImgHost(userData.idCardImg1)"
            :preview-src-list="[
              $methodsTools.splitImgHost(userData.idCardImg1),
            ]"
          >
          </el-image>
          <div class="pos_bottom">身份证头像照</div>
        </div>
        <div class="photoSty2" style="margin-right: 0px">
          <img
            v-if="!userData.idCardImg2"
            src="@/assets/images/idcardZ.png"
            alt=""
          />
          <el-image
            v-else
            style="width: 100%; height: 100%"
            :src="$methodsTools.splitImgHost(userData.idCardImg2)"
            :preview-src-list="[
              $methodsTools.splitImgHost(userData.idCardImg2),
            ]"
          >
          </el-image>
          <div class="pos_bottom">身份证国徽照</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    userData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    all: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showBox: true,
    };
  },
  methods: {
    packUp() {
      this.showBox = !this.showBox;
      this.$emit("change");
    },
  },
  computed: {
    headList() {
      const list = [
        { lebel: "所在班级：", key: "className" },
        { lebel: "学时：", key: "classHours" },
        { lebel: "", key: "num" },
        { lebel: "学习时间：", key: "time" },
      ];
      if (this.all) {
        list.unshift({ lebel: "所购商品：", key: "goodsName" });
      }
      return list;
    },
  },
};
</script>

<style lang="scss" scoped>
.studyInfo {
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
  border-radius: 8px;
  padding: 8px 16px;
  overflow: hidden;
  & > header {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    // height: 48px;
    line-height: 48px;
    & > .left {
      display: flex;
      align-items: center;
      white-space: nowrap;
      margin-right: 40px;
      i {
        display: inline-block;
        width: 2px;
        height: 18px;
        background: #0c5dfb;
        margin-right: 8px;
      }
      span {
        color: #666;
        font-weight: bold;
      }
    }
    & > .goods_info {
      display: flex;
      flex-wrap: wrap;
      span {
        font-size: 14px;
        padding-left: 20px;
        white-space: nowrap;
      }
    }
    .btn {
      position: absolute;
      right: 0;
      top: 10px;
    }
  }
  & > .info_img {
    display: flex;
    height: 210px;
    ul {
      width: 320px;
      li {
        margin-bottom: 12px;
        font-size: 14px;
      }
    }
    .img_by {
      flex: 1;
      display: flex;
      align-items: center;
      .pos_bottom {
        position: absolute;
        z-index: 1;
        bottom: 0px;
        width: 100%;
        height: 32px;
        background-color: rgba(53, 53, 53, 0.6);
        text-align: center;
        color: #fff;
        font-size: 16px;
        line-height: 32px;
      }
      & > .photoSty1 {
        width: 152px;
        height: 208px;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background-color: #f5f5f5;
        margin-right: 75px;
        & > img {
          width: 106px;
          height: 150px;
          margin: 29px auto 0px;
          display: block;
        }
      }
      & > .photoSty2 {
        width: 328px;
        height: 208px;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background-color: #f5f5f5;
        margin-right: 75px;
        & > img {
          width: 243px;
          height: 154px;
          margin: 27px auto 0px;
          display: block;
        }
        &:last-of-type {
          margin-right: 0px;
        }
      }
    }
  }
}
</style>>