psychological-competence/src/components/mainTableItem/index.vue

<template>
  <div class="card">
    <div class="inner flex-row">
      <el-image
        class="left-img"
        :src="images[index % 8]"
        fit="cover"
      />
      <div class="detail">
        <div class="line-1 flex-row">
          <div class="line-name">
            {{ item.name }}
          </div>
          <el-image
            v-if="item.reportVersion === 2"
            :src="require('@/assets/images/icon-tag-report.png')"
            fit="fill"
          />
        </div>
        <div class="content" v-html="item.description"></div>
        <div class="bottom-footer flex-row">
          <div class="text-info flex-row">
            <div v-if="systemVersion !== 'lan'" class="money">免费</div>
            <el-image v-show="item.isComplete && item.isComplete === '9'" class="icon-complete" :src="iconCompleteUrl" fit="fill" />
            <div v-if="item.testNum" class="info">{{ item.testNum }}人测试过</div>
          </div>
          <template v-if="item.isComplete && item.isComplete === '9'" />
          <el-button v-else type="success" round @click="geDetailPre(item, index)">去测一测</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainTableItem",
  props: {
    index: {
      type: [String, Number],
      default: 0
    },
    item: {
      type: Object,
      default: () => {}
    },
    goDetailFn: {
      type: Function,
      default: null
    }
  },
  data() {
    const systemVersion = process.env.VUE_APP_VERSION
    return {
      systemVersion: systemVersion,
      images: (function () {
        // 导入图片模块
        let fileArr = [];
        for (let i = 0; i < 9; i++) {
          fileArr[i] = require("@/assets/images/icon-item-" + (i % 8) + ".png");
        }
        return fileArr;
      })(),
      iconCompleteUrl: require('@/assets/images/icon-complete.png')
    }
  },
  methods: {
    geDetailPre(item, index) {
      if (this.goDetailFn) {
        this.goDetailFn(item.flag, item.name, item.testNum, item.description, item.scaleLimit, item.isComplete, item.type, item.status, index)
      } else {
        this.goDetail(item, index)
      }
    },

    // 查看详情
    goDetail({ flag, status, scaleLimit }, index) {
      if (status !== 0 && status !== 2 && status !== 3) {
        this.$alert("该量表不可用，请联系管理员", "提示", {
          confirmButtonText: "确定",
          callback: () => {},
        });
        return;
      }

      if (scaleLimit !== "public") {
        this.$alert("暂无权限查看该量表", "提示", {
          confirmButtonText: "确定",
          callback: () => {},
        });
        return;
      }
      this.$emit('storeInfo')
      this.$router.push(`/welcome/ScaleDetail?id=${flag}&index=${index}`);
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  width: calc(50% - 40px);
  height: calc(25% - 14px);
  margin: 0 16px 18px;

  .inner {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: white;
    justify-content: space-between;

    .left-img {
      width: 208px;
      height: calc(100% - 20px);
      margin-left: 12px;
      border-radius: 20px;
    }

    .detail {
      flex: 1;
      margin: 8px 28px;
      height: calc(100% - 16px);
      position: relative;

      .line-1 {
        height: 24px;
        justify-content: space-between;

        .line-name {
          line-height: 30px;
          font-size: 20px;
          color: #333333;
          font-style: italic;
        }

        .el-image {
          width: 84px;
          height: 20px;
        }
      }

      .content {
        width: 100%;
        height: 52px;
        line-height: 18px;
        font-size: 16px;
        color: #999999;
        margin-top: 6px;
        display: -webkit-box;;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .bottom-footer {
        width: 100%;
        height: 40px;
        position: absolute;
        bottom: 0;
        left: 0;
        justify-content: space-between;

        .money {
          color: #FF6600;
          font-size: 22px;
          line-height: 36px;
          font-style: italic;
          margin-right: 30px;
        }

        .icon-complete {
          width: 100px;
          height: 36px;
          margin-right: 30px;
        }

        .info {
          color: #26B600;
          // #26B600
          font-size: 18px;
        }

        .el-button {
          width: 116px;
          height: 32px;
          line-height: 20px;
          font-size: 0.084rem;
          padding: 4px 6px;
        }
      }
    }
  }
}
</style>