YGChatCS/src/pages/ChatModule/PoiCompareCard/index.vue

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

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

      <view
        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 }}
      </view>
    </view>

    <view v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
      <view class="poi-compare-card__detail-head flex flex-items-center">
        <view 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>
        </view>
        <view class="poi-compare-card__detail-title text-[#1e293b] font-size-20 font-900 flex-full">
          {{ detail.title }}
        </view>
        <view class="poi-compare-card__compare-label text-[#94a3b8] font-size-12 font-900">
          {{ detail.compareLabel }}
        </view>
      </view>

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

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

      <view class="poi-compare-card__actions grid grid-cols-2 gap-14">
        <view 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 text-[#334155]', { 'is-disabled': disabled }]"
          @click="handleAction(action)">
          <text class="poi-compare-card__action-icon">{{ action.icon }}</text>
          <text>{{ action.text }}</text>
        </view>
      </view>
    </view>
  </view>
</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 text-[#047857] bg-[#ecfdf5]",
    amber: "poi-compare-card__chip--amber text-[#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>