web-live/src/views/admin/live/achieve/apply/techol.vue

<template>
  <div id="techol">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <el-col :span="7" class="left" v-if="form.image != ''">
            <el-carousel trigger="click" height="305px" :autoplay="false">
              <el-carousel-item v-for="(item, index) in form.image" :key="index">
                <el-image :src="item.url" style="width:99%;height:345px;border: 1px solid #ccc;"></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="7" v-else class="achieveImage">
            <p>紧急程度</p>
            <p><el-rate v-model="value" disabled :max="max" :texts="texts" :colors="colors"> </el-rate></p>
          </el-col>
          <el-col :span="17" class="right">
            <el-col :span="24" class="name textOver">
              {{ form.name || '暂无' }}
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                需求方
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                {{ form.company }}
                <el-link v-if="form.companyweb != null || ''" :href="form.companyweb" :underline="false" target="_blank">({{ form.companyweb }})</el-link>
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                所属领域
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ form.field || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                合作方式
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ form.cooperation ? form.cooperation : '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                紧急程度
              </el-col>
              <el-col :span="16" class="otherInfo textOver"> {{ form.demand || '暂无' }} </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                投资预算
              </el-col>
              <el-col :span="16" class="otherInfo textOver"> {{ form.budget || '暂无' }} </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                联系人
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ form.contacts || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                QQ/微信
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ form.qqwx || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                联系电话
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                {{ getphone(form.phone) || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                电子邮箱
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                {{ form.email || '暂无' }}
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="down">
          <el-col :span="24" class="downInfo">
            <el-col :span="4" class="tit">
              <h2>需求说明</h2>
            </el-col>
            <el-col :span="20" class="info">
              {{ form.requirementdesc || '暂无' }}
            </el-col>
          </el-col>
          <el-col :span="24" class="downInfo">
            <el-col :span="4" class="tit">
              <h2>预期目标</h2>
            </el-col>
            <el-col :span="20" class="info">
              {{ form.expect || '暂无' }}
            </el-col>
          </el-col>
          <el-col :span="24" class="downInfo">
            <el-col :span="4" class="tit">
              <h2>需求现状</h2>
            </el-col>
            <el-col :span="20" class="info">
              {{ form.present || '暂无' }}
            </el-col>
          </el-col>
          <el-col :span="24" class="downInfo">
            <el-col :span="4" class="tit">
              <h2>合作要求</h2>
            </el-col>
            <el-col :span="20" class="info">
              {{ form.condition || '暂无' }}
            </el-col>
          </el-col>
          <el-col :span="24" style="text-align:center;padding-top:20px">
            <el-button @click="toStatus('1')" type="primary">通过</el-button>
            <el-button @click="toStatus('-1')" type="danger">拒绝</el-button>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'techol',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function() {
    return {
      value: 2,
      max: 3,
      colors: ['#ff0000', '#ff0000', '#ff0000'],
      texts: ['一般', '紧急', '长期'],
    };
  },
  created() {},
  methods: {
    // 隐藏手机号
    getphone(value) {
      if (value == undefined) {
        return '暂无';
      } else {
        if (value.length === 11) {
          let start = value.slice(0, 4);
          let end = value.slice(-3);
          return `${start}****${end}`;
        } else {
          return value;
        }
      }
    },
    toStatus(status) {
      this.$emit('submit', _.cloneDeep(this.form), status);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .top {
    height: 315px;
    overflow: hidden;
    .right {
      padding: 0 0 0 10px;
      .name {
        font-size: 18px;
        font-weight: bold;
        padding: 10px;
        border: 1px solid #ccc;
        text-align: center;
      }
      .otherInfo {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
      }
    }
  }
  .down {
    margin: 0 0 15px 0;
    .downInfo {
      border: 1px solid #ccc;
      .tit {
        height: 150px;
        line-height: 150px;
        text-align: center;
        border-right: 1px solid #ccc;
      }
      .info {
        font-size: 16px;
        padding: 10px;
        min-height: 150px;
      }
    }
  }
  .achieveImage {
    height: 305px;
    overflow: hidden;
    p:nth-child(1) {
      font-size: 25px;
      text-align: left;
      padding: 10px 0;
    }
    p:nth-child(2) {
      margin: 60px 0 0 0;
      text-align: center;
      .el-rate__icon {
        font-size: 60px;
      }
    }
  }
}
/deep/.el-rate__icon {
  font-size: 60px;
}
</style>