web-live/src/components/detail-model/achieveInfo.vue

<template>
  <div id="achieveInfo">
    <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="345px" :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 class="name textOver">{{ form.name }}</p>
            <p class="brief">{{ form.achievebrief }}</p>
            <p class="other">
              <span class="textOver">领域：{{ form.field }}</span>
              <span class="textOver">联系人：{{ form.contacts }}</span>
            </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 || '暂无' }}
              </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.achievestatus || '暂无' }}
              </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.achievesource || '暂无' }}
              </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.achieveown || '暂无' }}
              </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.intentionprice || '暂无' }}
              </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">
                联系方式
              </el-col>
              <el-col :span="16" class="otherInfo textOver">
                <el-tooltip class="item" effect="dark" placement="top">
                  <div slot="content">{{ form.email }}/{{ form.qqwx || '暂无' }}</div>
                  <p class="textOver">{{ form.email }}/{{ form.qqwx || '暂无' }}</p>
                </el-tooltip>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="4" class="otherInfo textOver">
                项目路演
              </el-col>
              <el-col :span="20" class="otherInfo textOver">
                <el-link :href="form.roadshow" :underline="false">{{ form.roadshow ? '观看演示文件' : '暂无' }}</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" style="padding: 6px">
                <el-button type="primary" size="mini" @click="dialogTableVisible1 = true">专利信息</el-button>
              </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.achievebrief || '暂无' }}
            </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.features || '暂无' }}
            </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.team || '暂无' }}
            </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.expectations || '暂无' }}
            </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>
        <el-col :span="24" class="anniu" v-if="showBtn">
          <el-button type="primary" size="mini" @click="btnPhone()">交流洽谈</el-button>
          <el-button type="success" size="mini" @click="onSubmit()">供求对接</el-button>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="专利信息" :visible.sync="dialogTableVisible1">
      <el-table :data="form.patent" style="width: 100%" border>
        <el-table-column prop="patentinfo" label="专利信息" align="center"> </el-table-column>
        <el-table-column prop="patentstatus" label="专利状态" align="center"> </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="对接" :visible.sync="dialogTableVisible" destroy-on-close>
      <chat :room="room"></chat>
    </el-dialog>
  </div>
</template>

<script>
import chat from '@c/chat.vue';
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: personRoom } = createNamespacedHelpers('personRoom');
const { mapActions: dockTranscation } = createNamespacedHelpers('dockTranscation');
export default {
  name: 'achieveInfo',
  props: {
    form: { type: Object },
    showBtn: { type: Boolean, default: () => true },
  },
  components: { chat },
  data: function() {
    return {
      dialogTableVisible1: false,
      dialogTableVisible: false,
      room: {},
    };
  },
  created() {},
  methods: {
    ...personRoom(['create']),
    ...dockTranscation({ tranCreate: 'create' }),
    async btnPhone() {
      if (!this.room.id) {
        //TODO 请求房间号
        let obj = {};
        if (!_.get(this.user, 'id')) {
          // this.$message.error('游客身份无法与卖家对话,请先注册');
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<strong><a href="http://broadcast.waityou24.cn/live/login" style="color:red;">游客身份无法与卖家对话,请先注册</a></strong>',
            type: 'error',
          });
          return;
        } else {
          obj.p1_id = this.user.id;
          obj.p1 = this.user.name;
        }
        if (!this.form.user_id) {
          this.$message.error('缺少卖家信息,请联系卖家或管理员');
          return;
        } else {
          obj.p2_id = this.form.user_id;
          obj.p2 = this.form.contacts;
        }
        let res = await this.create(obj);
        if (this.$checkRes(res)) {
          this.$set(this, `room`, res.data);
        }
      }
      this.dialogTableVisible = true;
    },
    //供求对接
    async onSubmit() {
      let data = { product_id: this.form.id, s_id: this.form.user_id, s_name: this.form.company, s_phone: this.form.phone };
      if (this.dock_id) data.dock_id = this.dock_id;
      if (!_.get(this.user, 'id')) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: '<strong><a href="http://broadcast.waityou24.cn/live/login" style="color:red;">游客身份无法与专家进行对接,请先注册</a></strong>',
          type: 'error',
        });
        return;
      } else {
        // 需求者信息
        data.d_id = this.user.id;
        data.d_name = this.user.name;
        data.d_phone = this.user.phone;
      }
      if (data.d_id === data.s_id) {
        this.$message.error('您不能对自己进行对接!');
        return;
      }
      const res = await this.tranCreate(data);
      this.$checkRes(res, '对接成功', res.errmsg || '对接失败');
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    dock_id() {
      return this.$route.query.dock_id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  margin: 10px 0 0 0;
  .top {
    height: 360px;
    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;
      }
    }
    .achieveImage {
      position: relative;
      height: 348px;
      background: url('~@common/src/assets/achieve.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 28px 25px;
      .name {
        font-size: 16px;
        font-weight: bold;
        margin: 10px 0;
      }
      .brief {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 11;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .other {
        position: absolute;
        bottom: 10px;
        width: 82%;
        font-size: 14px;
        span {
          display: inline-block;
          width: 100%;
        }
      }
    }
  }
  .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;
    }
  }
}
</style>