caimei-authentic-manager/src/views/components/DeviceDetail/index.vue

<template>
  <div>
    <div class="row">
      <div class="col">设备名称：</div>
      <div class="col">{{ productInfo.productName }}</div>
    </div>
    <div class="row">
      <div class="col">设备SN码：</div>
      <div class="col">{{ productInfo.snCode }}</div>
    </div>
    <div class="row">
      <div class="col">设备图片：</div>
      <div class="col">
        <preview-image v-if="productInfo.productImage" class="preview-image" :src="productInfo.productImage" />
      </div>
    </div>
    <div class="row">
      <div class="col">授权牌：</div>
      <div class="col">
        <preview-image v-if="productInfo.certificateImage" class="preview-image" :src="productInfo.certificateImage" />
      </div>
    </div>
    <div class="row">
      <div class="col">购买渠道：</div>
      <div class="col">{{ productInfo.purchaseWay }}</div>
    </div>
    <div class="row">
      <div class="col">发票：</div>
      <div class="col">
        <preview-image v-if="productInfo.invoiceImage" class="preview-image" :src="productInfo.invoiceImage" />
      </div>
    </div>
  </div>
</template>

<script>
import { getProductById } from '@/api/product'
export default {
  name: 'DeviceDetail',
  props: {
    productId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      productInfo: {
        productId: '',
        productName: '',
        snCode: '',
        productImage: '',
        certificateImage: '',
        paramList: [],
        invoiceImage: '',
        brandName: '',
        purchaseWay: ''
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 获取商品详情
    getDetail() {
      this.isLoading = true
      getProductById({ productId: this.productId })
        .then((res) => {
          this.productInfo = { ...this.productInfo, ...res.data }
        })
        .finally(() => {
          this.isLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 25px;
  .col {
    font-size: 14px;
    color: #333;
    &:first-child {
      min-width: 100px;
      text-align: right;
      margin-right: 8px;
      font-weight: bold;
      color: #666;
    }

    .el-image {
      margin-left: 12px;
      &:first-child {
        margin-left: 0;
      }
    }
  }
}
.preview-image {
  display: inline-block;
}
</style>