web-test/src/views/hall/dock/zhanjiaduijie.vue

<template>
  <div id="dockDetail">
    <el-row>
      <el-col :span="24" class="style">
        <el-image :src="beijingPic"></el-image>
        <el-col :span="24" class="info">
          <div class="w_1200">
            <el-col :span="24" class="top">
              <p>吉林省计算中心对接直播大厅</p>
              <p>主办方：吉林省计算中心</p>
            </el-col>
            <el-col :span="24" class="main">
              <el-col :span="24" class="mainTop">
                <span v-if="display === '1'">
                  <el-col :span="24" class="one">
                    <el-col :span="7" class="oneLeft">
                      <el-image :src="detailInfo.img_path" style="width: 100%;height: 210px;"> </el-image>
                    </el-col>
                    <el-col :span="17" class="oneRight">
                      <p class="textOver">
                        {{ detailInfo.name }}
                      </p>
                      <p>
                        <span>性别:{{ detailInfo.gender || '暂无' }}</span>
                        <span>出生年月:{{ detailInfo.birthday || '暂无' }}</span>
                      </p>
                      <p>
                        <span> 毕业院校:{{ detailInfo.school }} </span>
                        <span>专业:{{ detailInfo.major || '暂无' }}</span>
                      </p>
                      <p>
                        <span>学历:{{ detailInfo.xl || '暂无' }}</span>
                        <span>学位:{{ detailInfo.xw || '暂无' }}</span>
                      </p>
                      <p>
                        <span>电话号码：{{ detailInfo.phone || '暂无' }}</span>
                        <span>邮箱:{{ detailInfo.email || '暂无' }}</span>
                      </p>
                    </el-col>
                    <el-col :span="24" class="oneDown">
                      <div>
                        <p>身份证号:{{ detailInfo.cardnumber || '暂无' }}</p>
                        <p>地址:{{ detailInfo.addr || '暂无' }}</p>
                        <p>职称级别:{{ detailInfo.level || '暂无' }}</p>
                        <p>职称名称:{{ detailInfo.levelname || '暂无' }}</p>
                        <p>职务:{{ detailInfo.position || '暂无' }}</p>
                        <p>项目:{{ detailInfo.project || '暂无' }}</p>
                        <p>学术成就:{{ detailInfo.academic || '暂无' }}</p>
                        <p>论文:{{ detailInfo.paper || '暂无' }}</p>
                        <p>备注:{{ detailInfo.remark || '暂无' }}</p>
                        <p>从事专业:{{ detailInfo.professional || '暂无' }}</p>
                      </div>
                      <div>
                        <p>工作简介:</p>
                        <p class="resume" v-if="resume != ''">{{ detailInfo.resume || '暂无' }}</p>
                        <p class="resume1" v-else>{{ detailInfo.resume || '暂无' }}</p>
                        <el-button size="mini" v-if="detailInfo.resume != null && detailInfo.resume.length > 288">
                          <span v-if="resume != ''" @click="resumeMore()">更多</span>
                          <span v-else @click="resumeMore1()">收起</span>
                        </el-button>
                      </div>
                    </el-col>
                  </el-col>
                </span>
                <!-- <span v-if="display === '2'">
                  <el-col :span="24" class="two">
                    <chat :room="room"></chat>
                  </el-col>
                </span> -->
              </el-col>
              <el-col class="mainDown">
                <!-- <el-button @click="btnInfo()" type="info">项目详情</el-button> -->
                <!-- <el-button v-if="this.user.uid != detailInfo.userid" @click="btnPhone()" type="primary">对接聊天</el-button> -->
                <el-button type="warning" style="float:left;" @click.native="back()">返回</el-button>
                <el-button type="primary" @click="btnPhone()" v-if="this.user.uid != detailInfo.userid">对接聊天</el-button>
                <el-button v-if="this.user.uid != detailInfo.userid" @click="btnTrade()" type="success">洽谈交易</el-button>
                <el-dialog title="对接聊天" :visible.sync="dialogTableVisible">
                  <el-col :span="24" class="two">
                    <chat :room="room"></chat>
                  </el-col>
                </el-dialog>
              </el-col>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="产品参数" :visible.sync="dialogVisible" width="50%">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="arg_name" label="参数名称" align="center"> </el-table-column>
        <el-table-column prop="memo" label="参数内容" align="center"> </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
import chat from './parts/chat.vue';
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
const { mapActions: personalRoom } = createNamespacedHelpers('personalroom');
const { mapActions: transaction } = createNamespacedHelpers('transaction');
export default {
  name: 'dockDetail',
  props: {},
  components: {
    chat,
  },
  data: () => ({
    beijingPic: require('@a/live/top_3.png'),
    display: '1',
    detailInfo: {},
    scope: '123',
    resume: '123',
    dialogVisible: false,
    tableData: [],
    dialogTableVisible: false,
    room: {},
  }),
  created() {
    if (this.$route.query.id) {
      this.searchInfo();
    }
  },
  methods: {
    ...expertsuser(['fetch']),
    ...personalRoom(['create', 'countDelete']),
    ...transaction({ buyProduct: 'create' }),
    async searchInfo() {
      let res = await this.fetch(this.$route.query.id);
      if (res.errcode === 0) {
        this.$set(this, `detailInfo`, res.data);
      }
    },
    argsBtn(data) {
      this.dialogVisible = true;
      this.$set(this, `tableData`, data);
    },
    // handleClose(done) {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
    //       done();
    //     })
    //     .catch(_ => {});
    // },
    // 更多
    scopeMore() {
      this.scope = '';
    },
    // 收起
    scopeMore1() {
      this.scope = '123';
    },
    // 更多
    resumeMore() {
      this.resume = '';
    },
    // 收起
    resumeMore1() {
      this.resume = '123';
    },
    btnInfo() {
      this.display = '1';
    },
    // 线下对接
    async btnPhone() {
      if (!this.room.id) {
        //TODO 请求房间号
        let obj = {};
        if (!this.user.uid) {
          // this.$message.error({
          //   dangerouslyUseHTMLString: true,
          //   message: '<strong>游客身份无法与卖家对话,请先注册<a  href="/login" >注册<a> </strong>',
          // });
          this.$message({
            dangerouslyUseHTMLString: true,
            message:
              '<strong><a href="http://free.liaoningdoupo.com/platlive/webLogin" style="color:red;text-decoration:none;">游客身份无法与卖家对话,请先注册</a></strong>',
            type: 'error',
          });
          return;
        } else {
          obj.buyer_id = this.user.uid;
          obj.buyer_name = this.user.name;
        }
        if (!this.detailInfo.id) {
          this.$message.error('缺少卖家信息,请联系卖家或管理员');
          return;
        } else {
          obj.seller_id = this.detailInfo.userid;
          obj.seller_name = this.detailInfo.name;
        }

        let res = await this.create(obj);
        if (this.$checkRes(res)) {
          this.$set(this, `room`, res.data);
        }
      }
      this.dialogTableVisible = true;
    },
    async btnTrade() {
      let form = {};
      form.userid = this.user.uid;
      form.username = this.user.name;
      form.product_id = this.detailInfo.id;
      form.product_name = this.detailInfo.name;
      form.market_userid = this.detailInfo.id;
      form.market_username = this.detailInfo.name;
      form.status = '0';
      form.type = '1';
      if (!this.user.uid) {
        // this.$message.error({
        //   dangerouslyUseHTMLString: true,
        //   message: '<strong>游客身份无法与卖家对话,请先注册<a  href="/login" >注册<a> </strong>',
        // });
        this.$message({
          dangerouslyUseHTMLString: true,
          message:
            '<strong><a href="http://free.liaoningdoupo.com/platlive/webLogin" style="color:red;text-decoration:none;">游客身份无法与卖家对话,请先注册</a></strong>',
          type: 'error',
        });
        return;
      } else {
        let res = await this.buyProduct(form);
        this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
      }
    },
    // killTalk() {
    //   this.$alert('您确认对话已经可以结束了吗?');
    //   let room_id = _.get(this.room, 'id');
    //   if (room_id) {
    //     this.countDelete(room_id);
    //   }
    // },
    back() {
      history.back();
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  // beforeDestroy() {
  //   this.killTalk();
  // },
  beforeRouteLeave(to, from, next) {
    // this.killTalk();
    next();
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// .textOver{}
// 	overflow: hidden;
// 	text-overflow: ellipsis;
// 	-webkit-line-clamp: 3;
// 	word-break: break-all;
// 	display: -webkit-box;
//   -webkit-box-orient: vertical;
//   }
.style {
  height: 100vh;
}
.style .info {
  position: relative;
  top: -450px;
}
.style .top {
  position: relative;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 999;
  height: 172px;
  margin: 0 0 20px 0;
}
.style .top p:first-child {
  font-size: 50px;
  color: #fff;
}
.style .top p:last-child {
  font-size: 30px;
  color: #fff;
  position: absolute;
  width: 100%;
  top: 135px;
}
.style .main {
  min-height: 600px;
  border: 1px solid red;
  background: #fff;
  padding: 30px 20px;
  .mainTop {
    min-height: 550px;
    .one {
      min-height: 550px;
      .oneLeft {
        height: 210px;
        overflow: hidden;
      }
      .oneRight {
        padding: 0 15px;
        p {
          font-size: 16px;
          padding: 0px 0 11px 0;
          span {
            display: inline-block;
            width: 50%;
          }
        }
        p:first-child {
          font-size: 20px;
          font-weight: bold;
          padding: 20px 0;
          color: red;
        }
        // p:nth-child(2) span:last-child {
        //   color: red;
        //   font-weight: bold;
        // }
      }
      .oneDown {
        border-top: 1px dashed #ccc;
        margin: 30px 0 0 0;
        padding: 30px 0 0 0;
        div {
          padding: 0 0 15px 0;
          p {
            font-size: 16px;
            padding: 0 0 8px 0;
          }
        }
        div:nth-child(2) p span:last-child {
          color: #409eff;
          padding: 0 10px;
        }
        div:nth-child(2) p span:last-child:hover {
          cursor: pointer;
        }
        div:nth-child(3) .moreScope {
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 6;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
        div:nth-child(3) .moreScope1 {
          overflow: none;
        }
        div:nth-child(3) .el-button {
          float: right;
        }
        div:last-child .resume {
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 4;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          padding: 0;
        }
        div:last-child .resume1 {
          overflow: none;
        }
        div:last-child .el-button {
          float: right;
        }
      }
    }
  }
  .mainDown {
    height: 50px;
    text-align: center;
    /deep/.el-dialog__body {
      padding: 15px 20px;
      color: #606266;
      font-size: 14px;
      height: 660px;
      word-break: break-all;
    }
  }
}

.marketPublish {
  position: fixed;
  background: #0279d5;
  width: 100px;
  height: 100px;
  z-index: 999;
  left: 13%;
  top: 49%;
  border-radius: 20px;
  box-shadow: 2px 2px 2px #055c9f;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
}
.marketPublish:hover {
  background: #f60;
  cursor: pointer;
}
</style>