opt_web/src/views/product-manage/historical-detail/component/ChangeValue.vue

<script lang="ts" setup>
import { defineProps, ref, computed } from 'vue';
import XEUtils from 'xe-utils';

const props = defineProps<{
  field: string;
  value: string;
}>();

const badgeMap = {
  0: '',
  1: 'LD',
  2: '7DD',
  3: 'DOTD/TD'
};

const loadJsonString = (val: string) => XEUtils.toStringJSON(val);

const isArray = computed(() => XEUtils.includes(['bullet_point', 'variants'], props.field));

const formatedVal = computed(() => {
  if (props.field === 'discount') {
    return `${props.value}%`;
  } else if (props.field === 'coupon' || props.field === 'price') {
    return `$${props.value}`;
  } else if (props.field === 'badge') {
    return badgeMap[props.value];
  }
  return props.value;
});
</script>

<template>
  <div>
    <template v-if="props.field==='imgs'">
      <span v-for="(img, index) in loadJsonString(props.value)" :key="index">
        <el-tooltip placement="bottom-start" effect="light">
          <el-image
              style="width: 40px; margin-right: 5px;"
              fit="fill"
              :src="`https://m.media-amazon.com/images/I/${img}.jpg`"
          />
          <template #content>
            <el-image
                style="width: 250px"
                :src="`https://m.media-amazon.com/images/I/${img}.jpg`"
            />
          </template>
        </el-tooltip>
      </span>
    </template>
    <template v-else-if="isArray">
      <ul class="in-table-ul">
        <li v-for="(val, index) in loadJsonString(props.value)" :key="index">
          <span>{{ val }}</span>
        </li>
      </ul>
    </template>
    <span v-else>{{ formatedVal }}</span>
  </div>
</template>

<style scoped>
.in-table-ul {
  padding-left: 20px;
}
</style>