|
@@ -1,22 +1,19 @@
|
|
-<script setup lang="ts">/**
|
|
|
|
|
|
+<script lang="ts" setup>
|
|
|
|
+/**
|
|
* @Name: TitleCard.vue
|
|
* @Name: TitleCard.vue
|
|
* @Description: 买家之声详情-标题卡片
|
|
* @Description: 买家之声详情-标题卡片
|
|
* @Author: xinyan
|
|
* @Author: xinyan
|
|
*/
|
|
*/
|
|
-import { CopyDocument } from '@element-plus/icons-vue';
|
|
|
|
-import { handleCopy } from '/@/utils/useCopyText';
|
|
|
|
-import VerticalDivider from '/@/components/VerticalDivider/index.vue';
|
|
|
|
import { useCountryInfoStore } from '/@/stores/countryInfo';
|
|
import { useCountryInfoStore } from '/@/stores/countryInfo';
|
|
|
|
|
|
-
|
|
|
|
const props: any = defineProps({
|
|
const props: any = defineProps({
|
|
- rowData: Object
|
|
|
|
|
|
+ rowData: Object,
|
|
});
|
|
});
|
|
const { rowData } = props;
|
|
const { rowData } = props;
|
|
|
|
|
|
const countryInfoStore = useCountryInfoStore();
|
|
const countryInfoStore = useCountryInfoStore();
|
|
const endpoints = countryInfoStore.endpoints.find((c) => c.code == rowData.country_code);
|
|
const endpoints = countryInfoStore.endpoints.find((c) => c.code == rowData.country_code);
|
|
-const endpoint = endpoints?endpoints.endpoint:null;
|
|
|
|
|
|
+const endpoint = endpoints ? endpoints.endpoint : null;
|
|
const url = computed(() => {
|
|
const url = computed(() => {
|
|
return `https://${endpoint}/dp/${rowData.asin}`;
|
|
return `https://${endpoint}/dp/${rowData.asin}`;
|
|
});
|
|
});
|
|
@@ -24,87 +21,95 @@ const url = computed(() => {
|
|
const ncx_rate = computed(() => {
|
|
const ncx_rate = computed(() => {
|
|
return rowData.ncx_count / rowData.total_count;
|
|
return rowData.ncx_count / rowData.total_count;
|
|
});
|
|
});
|
|
-
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
<el-card body-class="flex justify-between items-center gap-5" class="border-none top-5 z-10 mt-5">
|
|
<el-card body-class="flex justify-between items-center gap-5" class="border-none top-5 z-10 mt-5">
|
|
- <div class="flex">
|
|
|
|
- <el-image :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${rowData.img}.jpg`" class="mr-5"
|
|
|
|
- fit="fill"
|
|
|
|
- lazy style="min-width: 135px; height: 135px;">
|
|
|
|
- <template #error>
|
|
|
|
- <div class="flex justify-center items-center h-full w-full text-2xl"
|
|
|
|
- style="background:var(--el-fill-color-light)">
|
|
|
|
- <el-icon>
|
|
|
|
- <icon-picture />
|
|
|
|
- </el-icon>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- </el-image>
|
|
|
|
- <div class="flex flex-col justify-between">
|
|
|
|
- <el-row>
|
|
|
|
- <el-col :span="24">
|
|
|
|
- <el-link :href="url"
|
|
|
|
- :underline="false"
|
|
|
|
- target="_blank"
|
|
|
|
- style="font-size: 18px;justify-content: left !important;"
|
|
|
|
- :disabled="!rowData.product_name"
|
|
|
|
- type="primary">
|
|
|
|
- <span class="line-clamp-2 text-ellipsis whitespace-normal" >{{ rowData.product_name || '--' }}</span>
|
|
|
|
- </el-link>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- <div class="mt-2">
|
|
|
|
- <el-row>
|
|
|
|
- <el-col :span="6">
|
|
|
|
- <div class="font-semibold italic">ASIN : {{ rowData.asin || '-'}}</div>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="6">
|
|
|
|
- <div class="font-semibold italic">SKU : {{ rowData.sku || '-'}}</div>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- <el-divider style="margin-top: 10px;margin-bottom: 10px;"/>
|
|
|
|
- <el-row>
|
|
|
|
- <el-col :span="3">
|
|
|
|
- <div class="font-semibold italic">总订单数 : {{ rowData.order_count || '-'}}</div>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="3">
|
|
|
|
- <div class="font-semibold italic">NCX订单 : {{ rowData.ncx_count || '-'}}</div>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="3">
|
|
|
|
- <div class="font-semibold italic">NCX率 : {{ ncx_rate || '-'}}</div>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="3">
|
|
|
|
- <div class="font-semibold italic">退货率 : {{ rowData.return_record_rate || '-'}}</div>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="6">
|
|
|
|
- <div class="font-semibold italic">最近更新 : {{ rowData.last_updated_date || '-'}}</div>
|
|
|
|
- </el-col>
|
|
|
|
- <el-col :span="6">
|
|
|
|
- <div>
|
|
|
|
- <template v-if="rowData.all_score !== null && rowData.all_score !== undefined && rowData.all_score !== ''">
|
|
|
|
- <el-tooltip v-if="rowData.all_score > 0" :content="rowData.all_score" effect="dark" placement="top" show-after="350">
|
|
|
|
- <div class="flex items-center">
|
|
|
|
- <div class="font-semibold italic">星级 :</div>
|
|
|
|
- <el-rate v-if="rowData.all_score > 0" v-model="rowData.all_score" :colors="['#FF0000', '#FF9900', '#67C23A']" disabled text-color="#1e293b" />
|
|
|
|
- </div>
|
|
|
|
- </el-tooltip>
|
|
|
|
- <span v-else>{{ rowData.all_score }}</span>
|
|
|
|
- </template>
|
|
|
|
- <template v-else>
|
|
|
|
- <span>-</span>
|
|
|
|
- </template>
|
|
|
|
- </div>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="flex">
|
|
|
|
+ <el-image
|
|
|
|
+ :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${rowData.img}.jpg`"
|
|
|
|
+ class="mr-5"
|
|
|
|
+ fit="fill"
|
|
|
|
+ lazy
|
|
|
|
+ style="min-width: 135px; height: 135px"
|
|
|
|
+ >
|
|
|
|
+ <template #error>
|
|
|
|
+ <div class="flex justify-center items-center h-full w-full text-2xl" style="background: var(--el-fill-color-light)">
|
|
|
|
+ <el-icon>
|
|
|
|
+ <icon-picture />
|
|
|
|
+ </el-icon>
|
|
</div>
|
|
</div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-image>
|
|
|
|
+ <div class="flex flex-col justify-between">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="24">
|
|
|
|
+ <el-link
|
|
|
|
+ :disabled="!rowData.product_name"
|
|
|
|
+ :href="url"
|
|
|
|
+ :underline="false"
|
|
|
|
+ style="font-size: 18px; justify-content: left !important"
|
|
|
|
+ target="_blank"
|
|
|
|
+ type="primary"
|
|
|
|
+ >
|
|
|
|
+ <span class="line-clamp-2 text-ellipsis whitespace-normal">{{ rowData.product_name || '--' }}</span>
|
|
|
|
+ </el-link>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <div class="mt-2">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <div class="font-semibold italic">ASIN : {{ rowData.asin || '-' }}</div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <div class="font-semibold italic">SKU : {{ rowData.sku || '-' }}</div>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-divider style="margin-top: 10px; margin-bottom: 10px" />
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="3">
|
|
|
|
+ <div class="font-semibold italic">总订单数 : {{ rowData.order_count || '-' }}</div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="3">
|
|
|
|
+ <div class="font-semibold italic">NCX订单 : {{ rowData.ncx_count || '-' }}</div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="3">
|
|
|
|
+ <div class="font-semibold italic">NCX率 : {{ ncx_rate || '-' }}</div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="3">
|
|
|
|
+ <div class="font-semibold italic">退货率 : {{ rowData.return_record_rate || '-' }}</div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <div class="font-semibold italic">最近更新 : {{ rowData.last_updated_date || '-' }}</div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <div>
|
|
|
|
+ <template v-if="rowData.all_score !== null && rowData.all_score !== undefined && rowData.all_score !== ''">
|
|
|
|
+ <el-tooltip v-if="rowData.all_score > 0" :content="rowData.all_score" effect="dark" placement="top" show-after="350">
|
|
|
|
+ <div class="flex items-center">
|
|
|
|
+ <div class="font-semibold italic">星级 :</div>
|
|
|
|
+ <el-rate
|
|
|
|
+ v-if="rowData.all_score > 0"
|
|
|
|
+ v-model="rowData.all_score"
|
|
|
|
+ :colors="['#FF0000', '#FF9900', '#67C23A']"
|
|
|
|
+ disabled
|
|
|
|
+ text-color="#1e293b"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </el-tooltip>
|
|
|
|
+ <span v-else>{{ rowData.all_score }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-else>
|
|
|
|
+ <span>-</span>
|
|
|
|
+ </template>
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
</div>
|
|
</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<!--<el-button :icon="Back" plain round type="info" @click="handleBack">返 回</el-button>-->
|
|
<!--<el-button :icon="Back" plain round type="info" @click="handleBack">返 回</el-button>-->
|
|
</el-card>
|
|
</el-card>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
-<style scoped>
|
|
|
|
-
|
|
|
|
-</style>
|
|
|
|
|
|
+<style scoped></style>
|