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

<template>
  <div id="expertInfo">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="24" class="top">
            <el-col :span="6" class="left">
              <el-image v-if="form.img_path != null || undefined" :src="form.img_path" style="width:100%;height:220px;"></el-image>
              <el-image v-else :src="img_url" style="width:100%;height:220px;"></el-image>
            </el-col>
            <el-col :span="18" 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-col>
              </el-col>
              <el-col :span="12">
                <el-col :span="8" class="otherInfo textOver">
                  毕业院校
                </el-col>
                <el-col :span="16" class="otherInfo textOver">
                  {{ form.school || '暂无' }}
                </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.education || '暂无' }}
                </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.birthDate || '暂无' }}
                </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.zwzc || '暂无' }}
                </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.email || '暂无' }}
                </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.expertise || '暂无' }}
                </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.workexperience || '暂无' }}
              </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.scientific || '暂无' }}
              </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.undertakingproject || '暂无' }}
              </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.scienceaward || '暂无' }}
              </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.social || '暂无' }}
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="btn" 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="dialogTableVisible" destroy-on-close>
      <chat :room="room"></chat>
    </el-dialog>
  </div>
</template>

<script>
import chat from '@c/chat.vue';
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: personRoom } = createNamespacedHelpers('personRoom');
const { mapActions: transaction } = createNamespacedHelpers('transaction');
export default {
  name: 'expertInfo',
  props: {
    form: { type: Object },
    showBtn: { type: Boolean, default: () => true },
  },
  components: { chat },
  data: function() {
    return {
      img_url: require('@common/src/assets/live/d10_fbb1.png'),
      dialogTableVisible: false,
      room: {},
    };
  },
  created() {},
  methods: {
    ...personRoom(['create']),
    ...transaction({ getTran: 'query', createTran: '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.id) {
          this.$message.error('缺少专家信息,请联系管理员');
          return;
        } else {
          obj.p2_id = this.form.id;
          obj.p2 = this.form.name;
        }
        let res = await this.create(obj);
        if (this.$checkRes(res)) {
          this.$set(this, `room`, res.data);
        }
      }
      this.dialogTableVisible = true;
    },
    //供求对接
    async onSubmit(data) {
      const obj = {
        supplier: _.get(data, 'id'),
        s_name: _.get(data, 'name'),
        s_phone: _.get(data, 'phone'),
        product_id: _.get(data, 'id'),
        product: _.get(data, 'name'),
        demander: _.get(this.user, 'id'),
        d_name: _.get(this.user, 'name'),
        d_phone: _.get(this.user, 'phone'),
      };
      if (obj.demander === obj.supplier) {
        this.$message.error('您不能对自己进行对接!');
        return;
      }
      const list = await this.getTran({ product_id: obj.product_id, demander: obj.demander });
      if (list.total > 0) {
        this.$message.warning('您已申请供求对接,无需再次申请!');
        return;
      }
      const res = await this.createTran(obj);
      this.$checkRes(res, '对接成功', res.errmsg || '对接失败');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .top {
      height: 230px;
      overflow: hidden;
      .right {
        padding: 0 0 0 10px;
        .name {
          font-size: 18px;
          font-weight: bold;
          padding: 10px;
          text-align: center;
          border: 1px solid #ccc;
        }
        .otherInfo {
          font-size: 16px;
          padding: 10px;
          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;
        }
      }
    }
  }
  .btn {
    text-align: center;
  }
}
</style>