Merge branch 'xinyan' into dev

src/views/product-manage/comment-detail/component/DataTableSlot.vue

@@ -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>