crowd-test-service-frontend/src/pages/Square/SquareCard.vue

<template>
  <el-card class="square-card">
    <div class="card-title">
      {{card.name ? card.name :card.title}}
    </div>
    <div class="card-content">
      {{card.description}}
    </div>
    <div class="card-detail">
      <el-row>
        <el-col :lg="6" :md="24">
          <span class="card-detail-money" v-if="card.quotedPrice||card.quotedPrice === 0">￥{{card.quotedPrice > 10000 ? Math.floor(card.quotedPrice/10000) + 'w+' : card.quotedPrice}}</span>
          <span class="card-detail-money" v-else>￥{{card.quotePrice > 10000 ? Math.floor(card.quotePrice/10000)+'w+' : card.quotePrice}}</span>
          <!--          <span class="card-detail-money">￥{{(card.quotedPrice||card.quotedPrice === 0) ? card.quotedPrice : card.quotePrice}}</span>-->
        </el-col>
        <el-col :lg="18" :md="24">
          <span class="card-detail-info pull-right">{{card.time_interval}}/{{card.joinCount > 10000 ? Math.floor(card.joinCount/10000)+'w+': card.joinCount}}人参与</span>
        </el-col>
      </el-row>
    </div>
    <div class="card-footer">
      <el-row class="card-footer-row" v-if="!card.serviceType">
        <el-col :span="12" class="pull-left">
          {{card.applicationType}}
        </el-col>
        <el-col :span="12" class=" test-btn">
          <el-button type="primary" round size="mini" class="pull-right"
                     @click="goToProjectDetail(card.code)">查看详情
          </el-button>
        </el-col>
      </el-row>
      <el-row class="card-footer-row" v-else>
        <el-col :span="12" class="pull-left">
          {{card.serviceType}}
        </el-col>
        <el-col :span="12" class=" test-btn">
          <el-button type="primary" round size="mini" class="pull-right"
                     @click="goToTaskDetail(card.projectId, card.code)">我要众测
          </el-button>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
  import {notify} from "../../constants";
  import Http from '@/js/http.js';
  import {storageGet} from '@/js/index.js'
  import Apis from '@/js/api'

  export default {
    name: 'SquareCard',
    props: ['card'],
    data() {
      return {
        isLogin: false,
        user:{}
      }
    },
    methods: {
      onload() {
        if (storageGet('user') != null) {
          this.isLogin = true;
        }
      },
      checkCreateProjectAuth() {
        if (!this.isLogin) {
          console.log("请登录后访问");
          notify('warning', '请登录后访问');
        } else if (this.isLogin) {
          Http.get(Apis.USER.IS_PART.replace('{userId}', this.user.id)).then((res) => {
            this.$router.push('/project/create');
          }).catch((error) => {
            notify('error', error.data)
          })
        }
      },
      goToProjectDetail(id) {
        if (!this.isLogin) {
          notify('warning', '请登录后访问');
        }
        // else if (this.isLogin) {
        //   Http.get(Apis.USER.IS_PART.replace('{userId}', this.user.id)).then((res) => {
        //     this.$router.push({name: 'Project', params: {projectId: id}})
        //   }).catch((error) => {
        //     notify('error', error.data)
        //   })
        // }
        this.$router.push({name: 'Project', params: {projectId: id}})
      },
      goToTaskDetail(projectId, taskId) {
        if (!this.isLogin) {
          console.log("请登录后访问");
          notify('warning', '请登录后访问');
        } else if (this.isLogin) {
          Http.get(Apis.USER.IS_AGENCY.replace('{userId}', this.user.id)).then((res) => {
            this.$router.push({
              name: 'Task',
              params: {projectId: projectId, taskId: taskId}
            })
          }).catch((error) => {
            notify('error', error.data)
          })
        }
      },
      setUserInfo() {
        this.user = storageGet('user')&&storageGet('user').userVO;
      }
    },
    mounted() {
      this.onload();
      this.setUserInfo();
    }
  }
</script>

<style lang="scss">
  @import "../../style/main";

  .square-card .el-card__body {
    padding: 0 !important;
  }

  .square-card {
    .card-title {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      line-height: 30px;
      margin: 10px 0;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }

    .card-content {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      height: 70px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp: 3; //显示的行
    }

    .card-detail {
      margin: 10px 0;

      .card-detail-money {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: $--color-primary;
      }

      .card-detail-info {
        font-size: 14px;
        font-family: Roboto;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
  }

  .card-title, .card-content, .card-detail {
    padding: 0 10px !important;
  }

  .card-footer {
    /*<!--background-color: $&#45;&#45;color-primary-background;-->*/

    .card-footer-row {
      padding: 15px 10px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
    }
  }

</style>