green.v0.3/src/views/NewPlatform/Children/ShareChild/InsDet.vue

<template>
  <div>
    <div class="inner" style="margin-top: 40px">
      <bread-crumb :arr="arr" />
    </div>
    <div class="inner equ-box">
      <div class="equ-info d-flex">
        <img :src="obj.visitLocation" />
        <!-- <img :src="obj.visitLocation" alt v-if="listState === 3" /> -->
        <div class="equ-info-box">
          <p class="equ-name">{{ obj.name }}</p>
          <div class="d-flex flex-wrap" style="margin-top: 20px" v-if="listState === 1">
            <div class="equ-info-left" style="width: 100px">
              <!-- <p>仪器名字：</p> -->
              <p>制造商：</p>
              <p>型号：</p>
              <p>规格：</p>
              <p>性能指标：</p>
              <p>联系人：</p>
              <p>联系方式：</p>
            </div>
            <div>
              <!-- <p>{{ obj.name }}</p> -->
              <p>{{ obj.manufactor }}</p>
              <p>{{ obj.model }}</p>
              <p>{{ obj.specifications }}</p>
              <p>{{ obj.performance }}</p>
              <p>
                <span :key="index" v-for="(item, index) in obj.selPeoList">
                  {{ item.contactsName }}
                  <span v-if="index !== obj.selPeoList.length - 1">、</span>
                </span>
              </p>
              <p>
                <span :key="index" v-for="(item, index) in obj.selPeoList">
                  {{ item.contactsPhone }}
                  <span v-if="index !== obj.selPeoList.length - 1">、</span>
                </span>
              </p>
            </div>
          </div>
          <div class="d-flex flex-wrap" style="margin-top: 20px" v-if="listState === 3">
            <div class="equ-info-left" style="width: 100px">
              <p>公司名称：</p>
              <p>产品编号：</p>
              <p>联系人：</p>
            </div>
            <div style="width: 500px">
              <p>{{ obj.companyname }}</p>
              <p>{{ obj.identifier }}</p>
              <p>
                <span :key="index" v-for="(item, index) in obj.selPeoList">
                  {{ item.contactsName }}
                  <span v-if="index !== obj.selPeoList.length - 1">、</span>
                </span>
              </p>
            </div>
          </div>
          <p class="equ-btn">
            <intention-model
              :btn-name="btnName"
              :type-data="listState === 1 ? typeData : typeProductData"
              style="margin-right: 20px; float: left"
            />
            <!-- <a-button style="margin-right: 20px">转化意向</a-button> -->
            <!-- <a-button type="primary">加入购物车</a-button> -->
            <!-- <add-shopping :type-data="typeData" style="margin-right: 20px; float: right" /> -->
          </p>
        </div>
      </div>
      <div class="content-box">
        <div v-dompurify-html="obj.purpose" v-if="listState === 1"></div>
        <div v-dompurify-html="obj.details" v-if="listState === 3"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { selInstrumentMes, selProductMes } from 'config/api';
import IntentionModel from 'components/Introduce/IntentionModel.vue';
import AddShopping from 'components/Introduce/AddShopping.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';

export default {
  name: 'InsDet',
  components: { IntentionModel, AddShopping, BreadCrumb },
  data() {
    return {
      typeOfPlatform: '设备详情',
      arr: [
        // { name: '创新平台', url: '/NewPlatform/Index' },
        // { name: '创新资源平台', url: '/NewPlatform/News' },
        // { name: '科技资源开放共享服务平台', url: '/NewPlatform/Share' },
        { name: '设备详情', url: '' },
      ],
      obj: {},
      typeData: {
        type: 1,
        Id: '',
      },
      typeProductData: {
        type: 3,
        Id: '',
      },
      id: 0,
      btnName: '产品购买',
    };
  },
  computed: mapState('home', ['listState']),
  created() {
    this.id = this.$route.params.id;
    if (this.listState === 1) {
      this.typeData.Id = this.$route.params.id;
      this.getData();
    }
    if (this.listState === 3) {
      this.typeProductData.Id = this.$route.params.id;
      this.getProductData();
    }
  },
  methods: {
    async getData() {
      try {
        const params = { param: { id: this.id } };
        const res = await selInstrumentMes(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          this.obj = data;
        }
      } catch (error) {
        // console.log(error);
      }
    },

    // 查询 产品列表 详情
    async getProductData() {
      try {
        const params = { param: { id: this.id } };
        const res = await selProductMes(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          // console.log(data);
          this.obj = data;
        }
      } catch (error) {
        // console.log(error);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.equ-box {
  background: #fff;
  padding: 20px;
  margin: 30px auto;
}

.equ-info {
  border-bottom: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  position: relative;
  padding-bottom: 24px;

  img {
    width: 300px;
    height: 300px;
  }
}

.equ-name {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 31px;
  color: rgba(0, 0, 0, 0.85);
  opacity: 1;
}

.equ-info-box {
  position: relative;
  font-size: 16px;
  margin-left: 20px;
  height: 300px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  opacity: 1;

  p {
    height: 24px;
    margin-bottom: 6px;
  }
}

.equ-info-left {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  opacity: 1;

  p {
    height: 24px;
    margin-bottom: 6px;
  }
}

.equ-btn {
  position: absolute;
  bottom: 0;
}

.content-box {
  min-height: 400px;
  padding: 20px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
}
</style>