nianxx-h5/src/pages/home/components/PoiCompareCard/index.vue

<template>
  <div class="poi-compare-card w-full">
    <div v-if="!isDetail" class="poi-compare-card__overdiv bg-white rounded-24 overflow-hidden">
      <div class="poi-compare-card__head flex flex-items-center">
        <div class="poi-compare-card__mark flex flex-items-center flex-justify-center rounded-full flex-shrink-0">
          {{ data.icon }}
        </div>
        <div class="poi-compare-card__title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
          {{ data.title }}
        </div>
      </div>

      <div class="poi-compare-card__columns grid grid-cols-2 gap-16">
        <div v-for="item in items" :key="item.id || item.name" class="poi-compare-card__place"
          :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
          <img class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
          <div v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
            <div class="poi-compare-card__field-label color-94A3B8 text-[12px] font-800">
              {{ field.label }}
            </div>
            <div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-900"
              :class="getToneClass(field.tone)">
              {{ field.value }}
            </div>
            <div v-else class="poi-compare-card__field-value color-1E293B text-[14px] font-900">
              {{ field.value }}
            </div>
          </div>
        </div>
      </div>

      <div
        class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A text-white font-size-15 font-900"
        :class="{ 'is-disabled': disabled }" @click="openDetail">
        {{ data.detailButtonText }}
      </div>
    </div>

    <div v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
      <div class="poi-compare-card__detail-head flex flex-items-center">
        <div class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
          @click="closeDetail">
          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
        </div>
        <div class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
          {{ detail.title }}
        </div>
        <div class="poi-compare-card__compare-label color-94A3B8 text-[12px] font-900">
          {{ detail.compareLabel }}
        </div>
      </div>

      <div class="poi-compare-card__table">
        <div class="poi-compare-card__table-head poi-compare-card__table-row">
          <div></div>
          <div v-for="item in items" :key="item.id || item.name"
            class="poi-compare-card__table-title color-1E293B text-[14px] font-900">
            {{ item.name }}
          </div>
        </div>
        <div v-for="row in detail.rows" :key="row.label" class="poi-compare-card__table-row poi-compare-card__data-row">
          <div class="poi-compare-card__row-label color-94A3B8 text-[12px] font-900">
            {{ row.label }}
          </div>
          <div v-for="cell in row.values" :key="row.label + '-' + cell.text"
            class="poi-compare-card__cell color-1E293B text-[14px] font-900" :class="getCellClass(cell.tone)">
            {{ cell.text }}
          </div>
        </div>
      </div>

      <div class="poi-compare-card__recommend">
        <div class="poi-compare-card__recommend-title color-94A3B8 text-[12px] font-900">
          {{ detail.recommendTitle }}
        </div>
        <div class="poi-compare-card__tips">
          <div v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
            <div class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
            <div class="poi-compare-card__tip-text color-334155 text-[14px] font-900">
              {{ tip.text }}
            </div>
          </div>
        </div>
      </div>

      <div class="poi-compare-card__actions grid grid-cols-2 gap-14">
        <div v-for="action in detail.actions" :key="action.id || action.text"
          class="poi-compare-card__action flex flex-items-center flex-justify-center font-size-15 font-900"
          :class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A text-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
          @click="handleAction(action)">
          <span class="poi-compare-card__action-icon">{{ action.icon }}</span>
          <span>{{ action.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["select", "back", "action"]);

const isDetail = ref(false);
const items = computed(() => props.data.items || []);
const detail = computed(() => props.data.detail || {});

const getToneClass = (tone) => {
  const toneMap = {
    green: "poi-compare-card__chip--green color-047857 bg-ECFDF5",
    amber: "poi-compare-card__chip--amber color-D97706 bg-FFFBEB",
  };
  return toneMap[tone] || "";
};

const getCellClass = (tone) => {
  if (tone === "green") return "poi-compare-card__cell--green";
  return "";
};

const getDotClass = (tone) => {
  if (tone === "blue") return "poi-compare-card__dot--blue";
  return "poi-compare-card__dot--green";
};

const handleSelect = (item) => {
  if (props.disabled) return;
  emit("select", item);
};

const openDetail = () => {
  if (props.disabled) return;
  isDetail.value = true;
  emit("select", { type: "detail", items: items.value });
};

const closeDetail = () => {
  isDetail.value = false;
  emit("back");
};

const handleAction = (action) => {
  if (props.disabled) return;
  emit("action", action);
};
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>