|
@@ -10,133 +10,140 @@ import { getTagType } from '/@/utils/useTagColor';
|
|
|
import PermissionButton from '/@/components/PermissionButton/index.vue';
|
|
|
import { useTivEnum } from '/@/views/product-manage/comment-detail/enum';
|
|
|
|
|
|
-
|
|
|
const props = defineProps<{
|
|
|
- row: any,
|
|
|
- field: any
|
|
|
+ row: any;
|
|
|
+ field: any;
|
|
|
}>();
|
|
|
const { row, field } = props;
|
|
|
|
|
|
-const emit: any = defineEmits([ 'open-negativeLabel' ]);
|
|
|
+const emit: any = defineEmits(['open-negativeLabel']);
|
|
|
|
|
|
const countryInfoStore = useCountryInfoStore();
|
|
|
-const country = countryInfoStore.Countries.find(c => c.code == row.country_code);
|
|
|
+const country = countryInfoStore.Countries.find((c) => c.code == row.country_code);
|
|
|
const color = country ? country.color : '#3875F6';
|
|
|
|
|
|
+const endpoint = ref('www.amazon.com');
|
|
|
+
|
|
|
function getCommentType(value: any): string {
|
|
|
- const type = useTivEnum.find(item => item.value === value);
|
|
|
- return type ? type.label : '未知';
|
|
|
+ const type = useTivEnum.find((item) => item.value === value);
|
|
|
+ return type ? type.label : '未知';
|
|
|
}
|
|
|
|
|
|
function getTagType(type: number): string {
|
|
|
- switch (type) {
|
|
|
- case 0:
|
|
|
- return 'success';
|
|
|
- case 1:
|
|
|
- return 'primary';
|
|
|
- case 2:
|
|
|
- return 'warning';
|
|
|
- case 3:
|
|
|
- return 'danger';
|
|
|
- default:
|
|
|
- return 'info';
|
|
|
- }
|
|
|
+ switch (type) {
|
|
|
+ case 0:
|
|
|
+ return 'success';
|
|
|
+ case 1:
|
|
|
+ return 'primary';
|
|
|
+ case 2:
|
|
|
+ return 'warning';
|
|
|
+ case 3:
|
|
|
+ return 'danger';
|
|
|
+ default:
|
|
|
+ return 'info';
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
function handleNegativeLabel() {
|
|
|
- emit('open-negativeLabel', row);
|
|
|
+ emit('open-negativeLabel', row);
|
|
|
}
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="font-medium">
|
|
|
- <div v-if="field === 'country_code'">
|
|
|
- <el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
|
|
|
- {{ country ? country.name : '-' }}
|
|
|
- </el-tag>
|
|
|
- </div>
|
|
|
- <div v-else-if="field === 'title'">
|
|
|
- <span style="font-weight: bold;">{{ row.title }}</span>
|
|
|
- </div>
|
|
|
- <div v-else-if="field === 'reviewer_name'">
|
|
|
- <span style="font-weight: bold;">{{ row.reviewer_name }}</span>
|
|
|
- </div>
|
|
|
- <div v-else-if="field === 'content'">
|
|
|
- <el-tooltip :content="row.content" :disabled="row.content.length <= 50" :show-after="350" effect="dark" placement="top"
|
|
|
- popper-class="custom-tooltip">
|
|
|
- <span class="content-ellipsis">{{ row.content }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div v-else-if="field === 'score'">
|
|
|
- <template v-if="row.score !== null && row.score !== undefined && row.score !== ''">
|
|
|
- <el-rate
|
|
|
- v-if="row.score > 0"
|
|
|
- v-model="row.score"
|
|
|
- :colors="['#FF0000', '#FF9900', '#67C23A']"
|
|
|
- disabled
|
|
|
- text-color="#1e293b"
|
|
|
- />
|
|
|
- <span v-else>{{ row.score }}</span>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <span>-</span>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div v-else-if="field === 'tiv'">
|
|
|
- <el-tag :type="getTagType(row.tiv)">
|
|
|
- {{ getCommentType(row.tiv) }}
|
|
|
- </el-tag>
|
|
|
- </div>
|
|
|
- <div v-else-if="field === 'helpful'">
|
|
|
- <span>{{ row.helpful }}</span>
|
|
|
- </div>
|
|
|
- <div v-else-if="field === 'verified'">
|
|
|
- <el-switch v-model="row.verified" disabled></el-switch>
|
|
|
- </div>
|
|
|
- <div v-else-if="field === 'create_datetime'">
|
|
|
- <span>{{ row.create_datetime }}</span>
|
|
|
- </div>
|
|
|
- <div v-else-if="field === 'operate'">
|
|
|
- <div class="flex justify-center">
|
|
|
- <PermissionButton size="small" type="danger" @click="handleNegativeLabel">
|
|
|
- 负面标签
|
|
|
- </PermissionButton>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else>
|
|
|
- {{ row[field] || '-' }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="font-medium">
|
|
|
+ <div v-if="field === 'country_code'">
|
|
|
+ <el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>
|
|
|
+ {{ country ? country.name : '-' }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="field === 'title'">
|
|
|
+ <el-link :disabled="!row.title" :href="row.url" :underline="false" target="_blank">
|
|
|
+ <span style="font-weight: 600; font-size: 13px">{{ row.title || '-' }}</span>
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="field === 'reviewer_name'">
|
|
|
+ <el-link
|
|
|
+ :disabled="!row.reviewer_name"
|
|
|
+ :href="`https://${endpoint}/gp/profile/amzn1.account.${row.reviewer_id}/ref=cm_cr_srp_d_gw_btm?ie=UTF8`"
|
|
|
+ :underline="false"
|
|
|
+ target="_blank"
|
|
|
+ >
|
|
|
+ <span style="font-weight: 600; font-size: 13px">{{ row.reviewer_name || '-' }}</span>
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="field === 'content'">
|
|
|
+ <el-tooltip
|
|
|
+ :content="row.content"
|
|
|
+ :disabled="row.content.length <= 80"
|
|
|
+ :show-after="350"
|
|
|
+ effect="dark"
|
|
|
+ placement="top"
|
|
|
+ popper-class="custom-tooltip"
|
|
|
+ >
|
|
|
+ <span class="content-ellipsis">{{ row.content }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="field === 'score'">
|
|
|
+ <template v-if="row.score !== null && row.score !== undefined && row.score !== ''">
|
|
|
+ <el-rate v-if="row.score > 0" v-model="row.score" :colors="['#FF0000', '#FF9900', '#67C23A']" disabled text-color="#1e293b" />
|
|
|
+ <span v-else>{{ row.score }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span>-</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="field === 'tiv'">
|
|
|
+ <el-tag :type="getTagType(row.tiv)">
|
|
|
+ {{ getCommentType(row.tiv) }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="field === 'helpful'">
|
|
|
+ <span>{{ row.helpful }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="field === 'verified'">
|
|
|
+ <el-switch v-model="row.verified" disabled size="small"></el-switch>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="field === 'create_datetime'">
|
|
|
+ <span>{{ row.create_datetime }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="field === 'operate'">
|
|
|
+ <div class="flex justify-center">
|
|
|
+ <PermissionButton size="small" type="danger" @click="handleNegativeLabel"> 负面标签 </PermissionButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ row[field] || '-' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
:deep(.flex-1 .el-progress__text) {
|
|
|
- font-size: 14px !important;
|
|
|
+ font-size: 14px !important;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.custom-btn-tooltip {
|
|
|
- background-color: #EFF9EB !important;
|
|
|
- color: #606266 !important;
|
|
|
- border: 1px solid #67C23A !important;
|
|
|
- font-size: 14px;
|
|
|
+ background-color: #eff9eb !important;
|
|
|
+ color: #606266 !important;
|
|
|
+ border: 1px solid #67c23a !important;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.content-ellipsis {
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 3; /* 显示的行数 */
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- max-height: 4.5em; /* 根据字号和行高设置最大高度 */
|
|
|
- line-height: 1.5em; /* 控制行高,与你的内容相匹配 */
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 3; /* 显示的行数 */
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ max-height: 4.5em; /* 根据字号和行高设置最大高度 */
|
|
|
+ line-height: 1.5em; /* 控制行高,与你的内容相匹配 */
|
|
|
}
|
|
|
|
|
|
.custom-tooltip {
|
|
|
- max-width: 350px; /* 设置最大宽度 */
|
|
|
- white-space: pre-wrap; /* 允许文本换行 */
|
|
|
- word-wrap: break-word; /* 处理长单词换行 */
|
|
|
+ max-width: 350px; /* 设置最大宽度 */
|
|
|
+ white-space: pre-wrap; /* 允许文本换行 */
|
|
|
+ word-wrap: break-word; /* 处理长单词换行 */
|
|
|
}
|
|
|
</style>
|