ceres-uniapp-v2.0/pages_category_page1/goodsModule/interactionDiagramDetail.vue

<template>
	<view>
		 <global-loading/>
	
  <div class="interactionDiagramPage">
	  
    <div class="top">
      <!-- 互动图 -->
      <InteractionDiagramImage 
	  ref="interactionDiagramImage"
	   @clickProductDetail="clickProductDetail"
       >

      </InteractionDiagramImage>
    </div>
    <div class="bottom">
      <!-- 商品信息列表 -->
      <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>
  </view>
</template>

<script>
const NET = require('../../utils/request')
const API = require('../../config/api')

import InteractionDiagramImage from './components/InteractionDiagramImage.vue'

export default {
  name: 'interactionDiagramDetail',
  components: {
    InteractionDiagramImage
  },
  data() {
    return {
      interactionDiagramDetailData: {},
      pointList: [],
      showPointList: []
    }
  },
  created() {
    this.interactionDiagramId = JSON.parse(this.$route.query.interactionDiagramId)
    this.getInteractionDiagramDetail()
  },
  methods: {
    // 获取互动图详情
    async getInteractionDiagramDetail() {
      const response = await NET.request(API.getInteractionDiagramDetail, {
        interactionDiagramId: this.interactionDiagramId
      }, 'GET')
      const res = response
	  
      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 NET.request(API.getProducts, {
        ids: productIdList,
        page: 1,
        pageSize: productIdList.length
      }, 'GET')
      let productList = getProductsResponse.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)
    },
    clickProductDetail(prointData) {
      if (prointData.product) {
		uni.navigateTo({
		  url: '/pages_category_page1/goodsModule/goodsDetails?shopId=' + prointData.product.shopId
		   + '&productId=' + prointData.product.productId
		   + '&skuId=' + prointData.product.skuId
		})
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.interactionDiagramPage {
	background-color: #F5F5F5;
    padding: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
	height: 100%;

  .top {
    margin-bottom: 5px;
  }

  .bottom {
    margin-top: 5px;
	flex: 1;
	overflow-y: auto;

    .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>