web-test/src/views/hall/dock/dockDetail.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-carousel trigger="click" height="210px">
                        <template v-if="detailInfo.image && detailInfo.image.length > 0">
                          <el-carousel-item v-for="(item, index) in detailInfo.image" :key="index">
                            <el-image :src="item.url" style="width: 100%;height: 210px;"> </el-image>
                          </el-carousel-item>
                        </template>
                      </el-carousel>
                    </el-col>
                    <el-col :span="17" class="oneRight">
                      <p class="textOver">
                        {{ detailInfo.name }}
                      </p>
                      <p>
                        <span>产品类型:{{ detailInfo.product_type_name || '暂无' }}</span>
                        <span>收费标准:{{ detailInfo.price || '暂无' }}/{{ detailInfo.priceunit || '暂无' }}</span>
                      </p>
                      <p>
                        <span>
                          交易方式:{{
                            detailInfo.business === '0' ? '公用' : detailInfo.business === '1' ? '转让' : detailInfo.business === '2' ? '竞价' : '暂无'
                          }}
                        </span>
                        <span>研发阶段:{{ detailInfo.phase == 1 ? '阶段成果' : detailInfo.phase == 2 ? '最终成果' : '暂无' }}</span>
                      </p>
                      <p>
                        <span>联系人:{{ detailInfo.contact_user || '暂无' }}</span>
                        <span>联系电话:{{ detailInfo.contact_tel || '暂无' }}</span>
                      </p>
                    </el-col>
                    <el-col :span="24" class="oneDown">
                      <div>
                        <p>应用领域：</p>
                        <p>{{ detailInfo.field || '暂无' }}</p>
                      </div>
                      <div>
                        <p><span>产品参数:</span><span @click="argsBtn(detailInfo.product_args)">查看详情</span></p>
                      </div>
                      <div>
                        <p>服务范围:</p>
                        <p class="moreScope" v-if="scope != ''">{{ detailInfo.scope || '暂无' }}</p>
                        <p class="moreScope1" v-else>{{ detailInfo.scope || '暂无' }}</p>
                        <el-button size="mini" v-if="detailInfo.scope != null && detailInfo.scope.length > 300">
                          <span v-if="scope != ''" @click="scopeMore()">更多</span>
                          <span v-else @click="scopeMore1()">收起</span>
                        </el-button>
                      </div>
                      <div>
                        <p>产品简介:</p>
                        <p class="introduction" v-if="introduction != ''">{{ detailInfo.introduction || '暂无' }}</p>
                        <p class="introduction1" v-else>{{ detailInfo.introduction || '暂无' }}</p>
                        <el-button size="mini" v-if="detailInfo.introduction != null && detailInfo.introduction.length > 300">
                          <span v-if="introduction != ''" @click="introductionMore()">更多</span>
                          <span v-else @click="introductionMore1()">收起</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: mapProduct } = createNamespacedHelpers('marketproduct');
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',
    introduction: '123',
    dialogVisible: false,
    tableData: [],
    dialogTableVisible: false,
    room: {},
  }),
  created() {
    if (this.$route.query.id) {
      this.searchInfo();
    }
  },
  methods: {
    ...mapProduct(['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';
    },
    // 更多
    introductionMore() {
      this.introduction = '';
    },
    // 收起
    introductionMore1() {
      this.introduction = '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/newlogin" 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.contact_user;
        }

        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.userid;
      form.market_username = this.detailInfo.contact_user;
      form.dockid = this.$route.query.dockid;
      form.status = '0';
      if (!this.user.uid) {
        // this.$message.error('游客身份无法与卖家对话,请先注册');
        // 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/newlogin" style="color:red;">游客身份无法与卖家对话,请先注册</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: 0 0 20px 0;
          span {
            display: inline-block;
            width: 50%;
          }
        }
        p:first-child {
          font-size: 20px;
          font-weight: bold;
          padding: 20px 0;
        }
        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: 18px;
          }
          p:first-child {
            color: #333;
            font-weight: bold;
            padding: 0 0 10px 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 .introduction {
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 4;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
        div:last-child .introduction1 {
          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>