web-test/src/views/dynamic/dealDetail.vue

<template>
  <div id="dealDetail">
    <el-row>
      <div class="w_1200">
        <el-col :span="24" class="main">
          <el-col :span="24" class="one">
            <el-image :src="topUrl"></el-image>
          </el-col>
          <el-col :span="24" class="two">
            <el-col :span="24" class="top">
              <span></span>
            </el-col>
            <el-col :span="24" class="info">
              <el-col :span="1" class="infoTop">
                <p>项目详情</p>
                <p><span></span></p>
              </el-col>
              <el-col :span="22" class="infoMess">
                <el-col :span="6" class="infoMessStep">
                  <el-steps direction="vertical" :active="dealDetails.status">
                    <el-step title="正在洽谈"></el-step>
                    <el-step title="达成意向"></el-step>
                    <el-step title="交易成功"></el-step>
                  </el-steps>
                </el-col>
                <el-col :span="18" class="infoMessInfo">
                  <!-- <el-image :src="infoUrl"></el-image> -->
                  <el-col :span="24" class="message">
                    <el-col :span="12" class="content">
                      <p>项目名称</p>
                      <p>服务名称：{{ dealDetails.product_name }}</p>
                      <p>发布时间：{{ dealDetails.meta | getDate }}</p>
                      <p>服务说明：{{ dealDetails.description }}</p>
                    </el-col>
                    <el-col :span="12" class="image">
                      <el-col :span="24" class="user"> 购买人:{{ dealDetails.username }} </el-col>
                      <el-col :span="24" class="images" v-if="dealDetails.pic">
                        <el-image style="width:100%;height:380px;" :src="dealDetails.pic"></el-image>
                      </el-col>
                    </el-col>
                    <el-col :span="24" class="btn">
                      <el-button @click.native="onclick()">我要对接</el-button>
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="1" class="infoDown">
                <p><span></span></p>
                <p>项目详情</p>
              </el-col>
            </el-col>
            <el-col :span="24" class="top down">
              <span></span>
            </el-col>
          </el-col>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: transaction } = createNamespacedHelpers('transaction');
const { mapActions: product } = createNamespacedHelpers('enterpriseproject');
export default {
  name: 'dealDetail',
  props: {},
  components: {},
  data: () => ({
    topUrl: require('@/assets/dynamic6.png'),
    infoUrl: require('@/assets/dynamic7.png'),
    dealDetails: {},
  }),
  created() {
    this.search();
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  methods: {
    ...transaction(['fetch']),
    ...product({ list: 'newquery', newfetch: 'newfetch' }),
    async search() {
      let res = await this.fetch(this.id);
      res.data.status = parseInt(res.data.status);
      res.data.status = res.data.status + 1;
      this.$set(this, `dealDetails`, res.data);
    },
    async onclick() {
      let product_id = this.dealDetails.product_id;
      const res = await this.newfetch(product_id);
      console.log(res.errcode);
      // if (res.data.totaltype == '0') {
      //   this.$router.push({ path: '/market/marketlists', query: { totaltype: 0, id: this.dealDetails.product_id, column_name: '技术供求', display: 2 } });
      // } else if (res.data.totaltype == '1') {
      //   this.$router.push({ path: '/market/marketlists', query: { totaltype: 1, id: this.dealDetails.product_id, column_name: '科技产品', display: 2 } });
      // } else if (res.data.totaltype == '2') {
      //   this.$router.push({ path: '/market/marketlists', query: { totaltype: 2, id: this.dealDetails.product_id, display: 2, column_name: '科技产品' } });
      // }
    },
  },
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 80%;
  margin: 0 auto;
}
.main {
  float: left;
  width: 100%;
  min-height: 600px;
  margin: 30px 0;
}
.main .one {
  height: 160px;
  overflow: hidden;
}
// 头部横
.main .two .top {
  float: left;
  width: 100%;
  height: 1px;
}
.main .two .top span {
  float: right;
  width: 30%;
  height: 1px;
  background: #9cb9cb;
}
// 底部横
.main .two .down span {
  float: left;
}
.main .two .info {
  height: 700px;
  overflow: hidden;
}
// 内容左侧
.main .two .info .infoTop {
  text-align: center;
  height: 700px;
  overflow: hidden;
}
.main .two .info .infoTop p:first-child {
  font-size: 20px;
  height: 120px;
  text-align: center;
  padding: 0 12px;
  color: #003e70;
  font-weight: bold;
}
.main .two .info .infoTop p:last-child {
  text-align: center;
}
.main .two .info .infoTop p:last-child span {
  display: inline-block;
  background: #003e70;
  width: 1px;
  height: 580px;
}
// 内容右侧
.main .two .info .infoDown {
  text-align: center;
  height: 700px;
  overflow: hidden;
}
.main .two .info .infoDown p:first-child {
  text-align: center;
}
.main .two .info .infoDown p:first-child span {
  display: inline-block;
  background: #003e70;
  width: 1px;
  height: 580px;
}
.main .two .info .infoDown p:last-child {
  font-size: 20px;
  height: 120px;
  text-align: center;
  padding: 0 12px;
  color: #003e70;
  font-weight: bold;
}
// 中间内容
.main .two .info .infoMess {
  min-height: 700px;
  overflow: hidden;
}
.main .two .info .infoMess .infoMessStep {
  padding: 130px 39px;
  min-height: 700px;
}
.main .two .info .infoMess .infoMessInfo {
  min-height: 700px;
  padding: 35px 0;
  position: relative;
  background-image: url(../../assets/dynamic7.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.main .two .info .infoMess .infoMessInfo .el-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.main .two .info .infoMess .infoMessInfo .message {
  position: absolute;
  top: 13%;
  left: 13%;
  height: 515px;
  overflow: hidden;
  width: 73%;
}
.main .two .info .infoMess .infoMessInfo .message .content {
  min-height: 430px;
  overflow: hidden;
  p:first-child {
    float: left;
    width: 100%;
    font-size: 20px;
    text-align: center;
    padding: 20px 0;
  }
  p:nth-child(2) {
    float: left;
    width: 100%;
    font-size: 20px;
    text-align: left;
    padding: 0 0 15px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  p:nth-child(3) {
    float: left;
    width: 100%;
    font-size: 20px;
    text-align: left;
    padding: 0 0 15px 0;
  }
  p:nth-child(4) {
    float: left;
    width: 100%;
    font-size: 20px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 11;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 27px;
  }
}
.main .two .info .infoMess .infoMessInfo .message .image {
  min-height: 430px;
  overflow: hidden;
  .user {
    font-size: 20px;
    text-align: center;
    padding: 20px 0;
  }
}
.main .two .info .infoMess .infoMessInfo .message .btn {
  text-align: center;
  /deep/.el-button {
    border-radius: 25px;
    color: #fff;
    background: #0f75c2;
  }
}
/deep/.el-step__title {
  font-size: 30px;
}
/deep/.el-step__title.is-process {
  color: #c3c3c3;
}
/deep/.el-step__title.is-finish {
  color: #1c81bf;
}
/deep/.el-steps--vertical {
  height: 420px;
}
</style>