opt_web/src/views/product-manage/component/ProductInfo.vue

<script lang="ts" setup>/**
 * @Name: ProductInfo.vue
 * @Description: 商品列表-商品信息插槽
 * @Author: Cheney
 */
import { DocumentCopy } from '@element-plus/icons-vue';
import { handleCopy } from '/@/utils/useCopyText';


const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  imgWidth: {
    type: Number,
    default: 30
  },
  showTitleTooltip: {
    type: Boolean,
    default: false
  },
  displaySKU: {
    type: Boolean,
    default: false
  },
  displayCompetitor: {
    type: Boolean,
    default: false
  }
});
</script>

<template>
  <div class="flex justify-start items-center font-medium">
    <div v-if="item.img" :style="`width: ${imgWidth}px; height: ${imgWidth}px; margin-right: 5px;`">
      <el-tooltip effect="light" placement="right-start">
        <el-image
            :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${item.img}.jpg`"
            :style="`width: ${imgWidth}px; height: ${imgWidth}px; margin-right: 5px;`"
            fit="scale-down"
            lazy
        />
        <template #content>
          <el-image
              :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${item.img}.jpg`"
              style="width: 250px"
          />
        </template>
      </el-tooltip>
    </div>
    <el-image v-else :style="`width: ${imgWidth}px; margin-right: 5px;`" lazy>
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <div class="text-left">
      <el-tooltip :content="item.title" :disabled="showTitleTooltip || !item.title" effect="dark" placement="top-start"
                  show-after="350">
        <el-link :disabled="!item.title" :href="item.url" :underline="false" target="_blank" type="primary">
          <span :class="item.is_competitors && displayCompetitor ? 'line-clamp-1' : 'line-clamp-2' + 
          ' text-ellipsis whitespace-normal'">
            {{ item.title || '--' }}
          </span>
        </el-link>
      </el-tooltip>
      <div>
        <div class="flex">
          ASIN:
          <span class="font-semibold italic ml-1" style="color: #1d2129;">
            {{ item.asin || '--' }}
          </span>
          <el-button :disabled="!item.asin" :icon="DocumentCopy" class="ml-1 cursor-pointer" link
                     @click="handleCopy(item.asin || '')">
          </el-button>
        </div>
        <!--<el-tooltip :content="item.sku" :disabled="!item.sku" effect="light" show-after="300">-->
        <div v-if="item.is_competitors && displayCompetitor">
          <p class="m-0 p-0 line-clamp-1 text-ellipsis">
            <!--竞品:-->
            <span :style="item.is_competitors ? 'color: #F77D7C;' : ''">
              <el-tag effect="plain" size="small" type="danger">
              {{ item.is_competitors ? '竞品' : '否' }}
              </el-tag>
            </span>
          </p>
        </div>

        <!--</el-tooltip>-->
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>