ceres-pc-v2.0/src/views/interactionDiagram/interactionDiagramDetail.vue

<template>
  <div class="interactionDiagramPage">
    <div class="left">
      <!-- 互动图 -->
      <InteractionDiagramImage ref="interactionDiagramImage" @clickProductDetail="clickProductDetail"
        v-loading="pageloading">

      </InteractionDiagramImage>
    </div>
    <div class="right">
      <!-- 商品信息列表 -->
      <div class="productList">
        <div class="product-detail" @click="clickProductDetail(point)" v-for="(point, index) in showPointList"
          :key="index">
          <div class="image-container">
            <img class="product-image" v-if="point.product.image" :src="point.product.image" />
          </div>
          <div class="product-info">
            <div class="product-name">{{ (point.product && point.product.productName) ? point.product.productName : '' }}
            </div>
            <div class="product-price">￥{{ (point.product && point.product.price) ? point.product.price : '' }}</div>
          </div>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
import { getInteractionDiagramDetail, getProducts } from '@/api/interactionDiagram.js'

import InteractionDiagramImage from '@/views/interactionDiagram/components/interactionDiagramImage.vue'

export default {
  name: 'interactionDiagramDetail',
  components: {
    InteractionDiagramImage
  },
  data() {
    return {
      pageloading: false,
      interactionDiagramDetailData: {},
      pointList: [],
      showPointList: []
    }
  },
  created() {
    this.interactionDiagramId = JSON.parse(this.$route.query.interactionDiagramId)
    this.getInteractionDiagramDetail()
  },
  methods: {
    // 获取互动图详情
    async getInteractionDiagramDetail() {
      this.pageloading = true
      const response = await getInteractionDiagramDetail({
        interactionDiagramId: this.interactionDiagramId
      })
      const res = response.data
      if (res.code === '200') {
        this.interactionDiagramDetailData = res.data
        if (this.interactionDiagramDetailData.pointData) {
          this.pointList = JSON.parse(this.interactionDiagramDetailData.pointData);
        }
        this.showPointList = this.pointList.filter(item => item.product)
        let productIdList = this.showPointList.map(item => item.product.productId)
        const getProductsResponse = await getProducts({
          ids: productIdList,
          page: 1,
          pageSize: productIdList.length
        })
        if (getProductsResponse.data.code === '200') {
          let productList = getProductsResponse.data.data.list
          if (productList) {
            this.pointList.forEach(item => {
              if (item.product) {
                let newProduct = productList.find(newItem => newItem.productId == item.product.productId)
                if (newProduct) {
                  item.product = newProduct
                }
              }
            })
          }
        }
        this.$refs.interactionDiagramImage.setParams(this.interactionDiagramDetailData, this.pointList)
        this.pageloading = false
      } else {
        this.$message.error(res.message || '请求失败！')
      }
    },
    clickProductDetail(product) {
      let data = {
        productId: product.productId,
        skuId: product.skuId,
        shopId: product.shopId
      }
      this.$router.push({
        path: "/productDetail",
        query: {
          proData: JSON.stringify(data)
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.interactionDiagramPage {
  background-color: #F5F5F5;
  padding: 50px 0 50px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: center;
  align-items: flex-start;

  .left {
    flex: 1;
    margin-right: 5px;
  }

  .right {
    flex: 1;
    margin-left: 5px;

    .productList {
      .product-detail {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 15px;

        .image-container {
          width: 80px;
          height: 80px;

          .product-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .product-info {
          margin-left: 8px;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          align-content: flex-start;
          justify-content: flex-start;
          align-items: flex-start;
        }

        .product-name {
          width: 100%;
          height: auto;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #252744;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 20px;
          text-align: left;
        }

        .product-price {
          width: auto;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #252744;
          margin-top: 6px;
        }
      }

    }
  }
}
</style>