caimei-distribution-www/src/views/goods-information/detail.vue

<template>
  <div>
    <nav-bar title="商品资料" @click-left="$router.back()"/>
    <div class="title">
      <van-image :src="productInfo.imageList[0].image"></van-image>
      <div class="store-title">
        {{productName}}
      </div>
    </div>
    <div class="store-info">
      相关资料
    </div>
    <info-cell :info-type="1" :info-list="imageArchiveList"></info-cell>
    <info-cell :info-type="2" :info-list="videoArchiveList"></info-cell>
    <info-cell :info-type="3" :info-list="fileArchiveList"></info-cell>
  </div>
</template>

<script>
import { archiveDetail } from '@/api/userApi/goods-information'
import { productDetail } from '@/api/institutionApi/product'
import infoCell from './components/infoCell.vue'
export default {
  components: {
    infoCell
  },
  data () {
    return {
      fileArchiveList: [],
      imageArchiveList: [],
      videoArchiveList: [],
      productImage: '',
      productName: '',
      productInfo: {}
    }
  },
  computed: {
    queryId () {
      return this.$route.query.archiveId
    },
    productId () {
      return this.$route.query.productId
    },
    formData () {
      return {
        productId: this.productId,
        typeId: 0,
        userId: this.$store.getters.userId
      }
    }
  },
  mounted () {
    this.archiveDetail()
  },
  methods: {
    async archiveDetail () {
      const data = await archiveDetail({ userId: this.$store.getters.userId, archiveId: this.queryId })
      this.productDetail()
      this.fileArchiveList = data.fileArchiveList
      this.imageArchiveList = data.imageArchiveList
      this.videoArchiveList = data.videoArchiveList
    },
    async productDetail () {
      const data = await productDetail(this.formData)
      this.productInfo = data
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-image {
  width: 100vw;
  height: 100vw;
}
.store-title {
  font-size: 3.4vw;
  color: #333;
  line-height: 4.8vw;
  padding: 3.2vw 4.5vw 8vw 2.4vw;
  background: #fff;
  margin-bottom: 2.4vw;
}
.store-info {
  padding: 4vw 0;
  text-align: center;
  font-size: 4vw;
  color: #333;
  background: #fff;
  font-weight: 600;
}
</style>