更新

src/views/hall/dock/dockDetail copy.vue

@@ -0,0 +1,276 @@
+<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="6" class="btn">
+                <el-col :span="24">
+                  <el-button type="primary" icon="el-icon-tickets" @click="btnInfo">项目信息</el-button>
+                </el-col>
+                <el-col :span="24" v-if="this.user.uid != productInfo.userid">
+                  <el-button type="danger" icon="el-icon-phone-outline" @click="btnPhone">对接</el-button>
+                </el-col>
+                <el-col :span="24" v-if="this.user.uid != productInfo.userid">
+                  <el-button type="success" icon="el-icon-check" @click="btnTrade">申请交易</el-button>
+                </el-col>
+              </el-col>
+              <el-col :span="18" class="mainInfo">
+                <el-col :span="24" v-if="display === '1'">
+                  <p class="name textOver">{{ productInfo.name }}</p>
+                  <div class="brief">
+                    <p>
+                      <span>应用领域：{{ productInfo.field || '暂无' }}</span>
+                      <span>服务范围：{{ productInfo.scope || '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>产品类型：{{ productInfo.product_type_name || '暂无' }}</span>
+                      <span>研发阶段：{{ productInfo.phase == 1 ? '阶段成果' : productInfo.phase == 2 ? '最终成果' : '暂无' }}</span>
+                    </p>
+                    <p>
+                      <span>{{
+                        productInfo.business == '0' ? '公用' : productInfo.business == '1' ? '转让' : productInfo.business == '2' ? '竞价' : '暂无'
+                      }}</span>
+                      <span>交易价格：{{ productInfo.price || '暂无' }}/{{ productInfo.priceunit || '暂无' }}</span>
+                    </p>
+                  </div>
+                  <p class="intro">
+                    <span><i class="el-icon-date"></i>项目简介</span>
+                    <span>{{ productInfo.introduction || '暂无' }}</span>
+                  </p>
+                </el-col>
+                <el-col :span="24" v-if="display === '2'" class="contact">
+                  <!-- <p>
+                    联系人姓名：<span style="color:red;">{{ productInfo.contact_user }}</span>
+                  </p>
+                  <p>
+                    联系人电话：<span style="color:red;">{{ productInfo.contact_tel }}</span>
+                  </p> -->
+                  <chat :room="room"></chat>
+                </el-col>
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </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',
+    productInfo: {},
+    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, `productInfo`, res.data);
+      }
+    },
+    // 项目信息
+    btnInfo() {
+      this.display = '1';
+    },
+    // 线下对接
+    async btnPhone() {
+      if (!this.room.id) {
+        //TODO 请求房间号
+        let obj = {};
+        if (!this.user.uid) {
+          this.$message.error('游客身份无法与卖家对话,请先注册');
+          return;
+        } else {
+          obj.buyer_id = this.user.uid;
+          obj.buyer_name = this.user.name;
+        }
+        if (!this.productInfo.userid) {
+          this.$message.error('缺少卖家信息,请联系卖家或管理员');
+          return;
+        } else {
+          obj.seller_id = this.productInfo.userid;
+          obj.seller_name = this.productInfo.contact_user;
+        }
+
+        let res = await this.create(obj);
+        if (this.$checkRes(res)) {
+          this.$set(this, `room`, res.data);
+        }
+      }
+      this.display = '2';
+    },
+    async btnTrade() {
+      let form = {};
+      form.userid = this.user.uid;
+      form.username = this.user.name;
+      form.product_id = this.productInfo.id;
+      form.product_name = this.productInfo.name;
+      form.market_userid = this.productInfo.userid;
+      form.market_username = this.productInfo.contact_user;
+      form.status = '0';
+      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);
+      }
+    },
+  },
+  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;
+}
+.style {
+  height: 100vh;
+}
+.style .info {
+  position: relative;
+  top: -450px;
+}
+.style .top {
+  position: relative;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 999;
+  height: 230px;
+  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: 170px;
+}
+.style .main {
+  height: 740px;
+  border: 1px solid red;
+  background: #fff;
+  overflow: hidden;
+  padding: 30px 20px;
+  margin-bottom: 10px;
+}
+.main .btn div {
+  padding: 30px 0 0px 0;
+}
+/deep/.main .btn .el-button {
+  float: left;
+  margin: 0 40px;
+  width: 70%;
+}
+.main .mainInfo {
+  border: 1px solid red;
+  height: 680px;
+}
+.mainInfo .name {
+  font-size: 25px;
+  text-align: center;
+  height: 90px;
+  line-height: 90px;
+  border-bottom: 2px solid red;
+  margin: 0 60px;
+}
+.mainInfo .brief {
+  float: left;
+  padding: 0 88px 15px 88px;
+  color: red;
+  margin: 15px 20px 0 19px;
+  width: 75%;
+  border-bottom: 1px dashed red;
+}
+.mainInfo .brief p {
+  float: left;
+  width: 100%;
+  padding: 0 0 15px 0;
+}
+.mainInfo .brief p span:first-child {
+  float: left;
+  width: 50%;
+}
+.mainInfo .intro {
+  float: left;
+  padding: 20px;
+  width: 95%;
+}
+.mainInfo .intro span:first-child {
+  display: inline-block;
+  width: 100%;
+  font-size: 20px;
+  color: red;
+}
+.mainInfo .intro span:last-child {
+  display: inline-block;
+  line-height: 25px;
+  color: #666;
+  text-indent: 2rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 13;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.mainInfo .contact {
+  padding: 20px;
+  font-size: 18px;
+}
+</style>

src/views/hall/dock/dockDetail.vue

@@ -10,56 +10,90 @@
               <p>主办方：吉林省计算中心</p>
             </el-col>
             <el-col :span="24" class="main">
-              <el-col :span="6" class="btn">
-                <el-col :span="24">
-                  <el-button type="primary" icon="el-icon-tickets" @click="btnInfo">项目信息</el-button>
-                </el-col>
-                <el-col :span="24" v-if="this.user.uid != productInfo.userid">
-                  <el-button type="danger" icon="el-icon-phone-outline" @click="btnPhone">对接</el-button>
-                </el-col>
-                <el-col :span="24" v-if="this.user.uid != productInfo.userid">
-                  <el-button type="success" icon="el-icon-check" @click="btnTrade">申请交易</el-button>
-                </el-col>
+              <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"> </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">
+                          <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">
+                          <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 :span="18" class="mainInfo">
-                <el-col :span="24" v-if="display === '1'">
-                  <p class="name textOver">{{ productInfo.name }}</p>
-                  <div class="brief">
-                    <p>
-                      <span>应用领域：{{ productInfo.field || '暂无' }}</span>
-                      <span>服务范围：{{ productInfo.scope || '暂无' }}</span>
-                    </p>
-                    <p>
-                      <span>产品类型：{{ productInfo.product_type_name || '暂无' }}</span>
-                      <span>研发阶段：{{ productInfo.phase == 1 ? '阶段成果' : productInfo.phase == 2 ? '最终成果' : '暂无' }}</span>
-                    </p>
-                    <p>
-                      <span>{{
-                        productInfo.business == '0' ? '公用' : productInfo.business == '1' ? '转让' : productInfo.business == '2' ? '竞价' : '暂无'
-                      }}</span>
-                      <span>交易价格：{{ productInfo.price || '暂无' }}/{{ productInfo.priceunit || '暂无' }}</span>
-                    </p>
-                  </div>
-                  <p class="intro">
-                    <span><i class="el-icon-date"></i>项目简介</span>
-                    <span>{{ productInfo.introduction || '暂无' }}</span>
-                  </p>
-                </el-col>
-                <el-col :span="24" v-if="display === '2'" class="contact">
-                  <!-- <p>
-                    联系人姓名：<span style="color:red;">{{ productInfo.contact_user }}</span>
-                  </p>
-                  <p>
-                    联系人电话：<span style="color:red;">{{ productInfo.contact_tel }}</span>
-                  </p> -->
-                  <chat :room="room"></chat>
-                </el-col>
+              <el-col class="mainDown">
+                <el-button @click="btnInfo()" type="info">项目详情</el-button>
+                <span v-if="this.user.uid != detailInfo.userid"> <el-button @click="btnPhone()" type="primary">对接聊天</el-button></span>
+                <span v-if="this.user.uid != detailInfo.userid"><el-button @click="btnTrade()" type="success">洽谈交易</el-button></span>
               </el-col>
             </el-col>
           </div>
         </el-col>
       </el-col>
     </el-row>
+    <el-dialog title="产品参数" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
+      <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>
 
@@ -73,11 +107,17 @@ const { mapActions: transaction } = createNamespacedHelpers('transaction');
 export default {
   name: 'dockDetail',
   props: {},
-  components: { chat }, //
+  components: {
+    chat,
+  },
   data: () => ({
     beijingPic: require('@a/live/top_3.png'),
     display: '1',
-    productInfo: {},
+    detailInfo: {},
+    scope: '123',
+    introduction: '123',
+    dialogVisible: false,
+    tableData: [],
     room: {},
   }),
   created() {
@@ -92,10 +132,36 @@ export default {
     async searchInfo() {
       let res = await this.fetch(this.$route.query.id);
       if (res.errcode === 0) {
-        this.$set(this, `productInfo`, res.data);
+        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';
     },
@@ -111,12 +177,12 @@ export default {
           obj.buyer_id = this.user.uid;
           obj.buyer_name = this.user.name;
         }
-        if (!this.productInfo.userid) {
+        if (!this.detailInfo.userid) {
           this.$message.error('缺少卖家信息,请联系卖家或管理员');
           return;
         } else {
-          obj.seller_id = this.productInfo.userid;
-          obj.seller_name = this.productInfo.contact_user;
+          obj.seller_id = this.detailInfo.userid;
+          obj.seller_name = this.detailInfo.contact_user;
         }
 
         let res = await this.create(obj);
@@ -130,10 +196,10 @@ export default {
       let form = {};
       form.userid = this.user.uid;
       form.username = this.user.name;
-      form.product_id = this.productInfo.id;
-      form.product_name = this.productInfo.name;
-      form.market_userid = this.productInfo.userid;
-      form.market_username = this.productInfo.contact_user;
+      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.status = '0';
       let res = await this.buyProduct(form);
       this.$checkRes(res, '购买申请成功', res.errmsg || '购买申请失败');
@@ -174,6 +240,19 @@ 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;
 }
@@ -202,75 +281,95 @@ p {
   top: 170px;
 }
 .style .main {
-  height: 740px;
+  min-height: 600px;
   border: 1px solid red;
   background: #fff;
-  overflow: hidden;
   padding: 30px 20px;
-  margin-bottom: 10px;
-}
-.main .btn div {
-  padding: 30px 0 0px 0;
-}
-/deep/.main .btn .el-button {
-  float: left;
-  margin: 0 40px;
-  width: 70%;
-}
-.main .mainInfo {
-  border: 1px solid red;
-  height: 680px;
-}
-.mainInfo .name {
-  font-size: 25px;
-  text-align: center;
-  height: 90px;
-  line-height: 90px;
-  border-bottom: 2px solid red;
-  margin: 0 60px;
-}
-.mainInfo .brief {
-  float: left;
-  padding: 0 88px 15px 88px;
-  color: red;
-  margin: 15px 20px 0 19px;
-  width: 75%;
-  border-bottom: 1px dashed red;
-}
-.mainInfo .brief p {
-  float: left;
-  width: 100%;
-  padding: 0 0 15px 0;
-}
-.mainInfo .brief p span:first-child {
-  float: left;
-  width: 50%;
-}
-.mainInfo .intro {
-  float: left;
-  padding: 20px;
-  width: 95%;
-}
-.mainInfo .intro span:first-child {
-  display: inline-block;
-  width: 100%;
-  font-size: 20px;
-  color: red;
-}
-.mainInfo .intro span:last-child {
-  display: inline-block;
-  line-height: 25px;
-  color: #666;
-  text-indent: 2rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 13;
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-.mainInfo .contact {
-  padding: 20px;
-  font-size: 18px;
+  .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: 6;
+          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;
+    line-height: 50px;
+    text-align: center;
+  }
 }
 </style>