web-test/src/views/market/detail/techDetail.vue

<template>
  <div id="techDetail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <el-col :span="7" class="left" v-if="detailInfo.image != ''">
            <el-carousel trigger="click" height="305px" :autoplay="false">
              <el-carousel-item v-for="(item, index) in detailInfo.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">
            <!-- <el-image :src="achievezb" style="height:305px;"></el-image>
            <el-col :span="24" class="company textOver">
              {{ detailInfo.company }}
            </el-col>
            <el-col :span="24" class="aName">
              {{ detailInfo.name }}
            </el-col>
            <el-col :span="24" class="a-brief">{{ detailInfo.requirementdesc }}</el-col>
            <el-col :span="24" class="cont">
              <el-col :span="24" class="a-field">领域：{{ detailInfo.field }}</el-col>
              <el-col :span="24" class="a-contacts">联系人：{{ detailInfo.contacts }}</el-col>
            </el-col> -->
            {{ detailInfo.degreeurgency || '暂无' }}
          </el-col>
          <el-col :span="17" class="right">
            <el-col :span="24" class="name textOver">
              {{ detailInfo.name || '暂无' }}
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                需求方
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                {{ detailInfo.company }}
                <el-link v-if="detailInfo.companyweb != null || ''" :href="detailInfo.companyweb" :underline="false" target="_blank"
                  >({{ detailInfo.companyweb }})</el-link
                >
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                所属领域
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                {{ detailInfo.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"> {{ detailInfo.companytype || '暂无' }} </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                注册时间
              </el-col>
              <el-col :span="16" class="otherInfo textOver"> {{ detailInfo.companydate || '暂无' }} </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                注册资金
              </el-col>
              <el-col :span="16" class="otherInfo textOver"> {{ detailInfo.companycapital || '暂无' }}</el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                投资预算
              </el-col>
              <el-col :span="16" class="otherInfo textOver"> {{ detailInfo.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"> {{ detailInfo.degreeurgency || '暂无' }} </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                合作方式
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ detailInfo.cooperation ? detailInfo.cooperation : '暂无' }}
              </el-col>
            </el-col>
            <!-- <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                机构代码
              </el-col>
              <el-col :span="20" class="otherInfo textOver"> {{ policyInfo.contact_tel ? policyInfo.contact_tel : '暂无' }} </el-col>
            </el-col> -->
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                联系人
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ detailInfo.contacts || '暂无' }}
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col :span="8" class="otherInfo textOver">
                电子邮箱
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                {{ detailInfo.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">
              {{ detailInfo.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">
              {{ detailInfo.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">
              {{ detailInfo.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">
              {{ detailInfo.condition || '暂无' }}
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="anniu" v-if="displayBtn">
          <el-button type="primary" size="mini" v-if="this.user.uid != detailInfo.userid" @click="btnPhone()">交流洽谈</el-button>
          <el-button type="success" size="mini" v-if="this.user.uid != detailInfo.userid" @click="onSubmit()">供求对接</el-button>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="对接" :visible.sync="dialogTableVisible">
      <chat :room="room"></chat>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
import chat from '@/layout/market/parts/chat.vue';
const { mapActions: personalRoom } = createNamespacedHelpers('personalroom');
const { mapActions: transaction } = createNamespacedHelpers('transaction');
export default {
  name: 'techDetail',
  props: {
    detailInfo: { type: Object },
    displayBtn: { type: Boolean },
  },
  components: {
    chat,
  },
  data: function() {
    return {
      dialogTableVisible: false,
      room: {},
      achievezb: require('@/assets/3.png'),
    };
  },
  created() {},
  methods: {
    ...personalRoom(['create', 'countDelete']),
    ...transaction({ buyProduct: 'create' }),
    // 对接
    async btnPhone() {
      if (!this.room.id) {
        //TODO 请求房间号
        let obj = {};
        if (!this.user.uid) {
          // this.$message.error('游客身份无法与卖家对话,请先注册');
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong><a href="http://free.liaoningdoupo.com/platlive/webLogin" style="color:red;">游客身份无法与卖家对话,请先注册</a></strong>',
            type: 'error',
          });
          return;
        } else {
          obj.buyer_id = this.user.uid;
          obj.buyer_name = this.user.name;
        }
        if (!this.detailInfo.userid) {
          this.$message.error('缺少卖家信息,请联系卖家或管理员');
          return;
        } else {
          obj.seller_id = this.detailInfo.userid;
          obj.seller_name = this.detailInfo.contacts;
        }
        console.log(obj);
        let res = await this.create(obj);
        if (this.$checkRes(res)) {
          this.$set(this, `room`, res.data);
        }
      }
      this.dialogTableVisible = true;
    },
    // 洽谈
    onSubmit() {
      this.$emit('onSubmit', { data: this.detailInfo });
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  margin: 10px 0 0 0;
  .top {
    height: 315px;
    overflow: hidden;
    .right {
      padding: 0 0 0 10px;
      .name {
        font-size: 18px;
        font-weight: bold;
        padding: 10px;
        border: 1px solid #ccc;
      }
      .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;
      }
    }
  }
  .anniu {
    text-align: center;
    /deep/.el-button {
      margin: 0 10px;
    }
  }
  .achieveImage {
    height: 305px;
    line-height: 305px;
    text-align: center;
    font-size: 90px;
    // position: relative;
    // .el-image {
    //   width: 100%;
    //   height: 345px;
    //   overflow: hidden;
    //   position: relative;
    // }
    // .aName {
    //   position: absolute;
    //   top: 40px;
    //   left: 0px;
    //   text-align: center;
    //   transform: scale(0.8);
    //   font-weight: bolder;
    //   // color: transparent;
    //   // 文字边框宽度和颜色
    //   -webkit-text-stroke: 1px #f18d2c;
    //   font-style: oblique;
    //   // 文字填充色
    //   -webkit-text-fill-color: transparent;
    //   letter-spacing: 3px;
    // }
    // .a-brief {
    //   margin: 10px 0px;
    //   position: absolute;
    //   top: 55px;
    //   left: 0px;
    //   overflow: hidden;
    //   line-height: 20px;
    //   letter-spacing: 2px;
    //   text-overflow: ellipsis;
    //   -webkit-line-clamp: 12;
    //   word-break: break-all;
    //   display: -webkit-box;
    //   -webkit-box-orient: vertical;
    //   transform: scale(0.8);
    // }
    // .cont {
    //   position: absolute;
    //   left: 0px;
    //   bottom: 20px;
    //   transform: scale(0.8);
    //   .a-field {
    //     overflow: hidden;
    //     text-overflow: ellipsis;
    //     white-space: nowrap;
    //   }
    // }
    // .company {
    //   position: absolute;
    //   top: 12px;
    //   left: 30px;
    //   width: 86%;
    //   color: #ec6c2d;
    //   -webkit-text-stroke: 1px #f18d2c;
    //   font-style: oblique;
    //   -webkit-text-fill-color: #ec6c2d;
    //   letter-spacing: 3px;
    // }
  }
}
</style>