xyy-m/src/components/CreateNote/PreviewModal.vue

<template>
  <div>
    <el-dialog
      v-model="visible"
      title="游记预览"
      width="1000"
      :z-index="9999"
      destroy-on-close
    >
      <div class="max-h-[600px] overflow-auto">
        <img
          v-if="data.travelNotesBanner"
          :src="data.travelNotesBanner"
          class="h-auto w-full"
        />
        <img
          v-else
          src="~/assets/img/note-create/note_create_banner_bg.png"
          class="h-auto w-full"
        />
        <div
          class="mx-auto flex flex-1 items-center px-30 py-15 shadow-[0_15px_30px_0px_rgba(102,102,102,0.2)]"
        >
          <img
            src="~/assets/img/travel_notes_detail/travel_note_icon.jpg"
            class="h-50 w-50 shrink-0 object-cover"
            alt=""
            srcset=""
          />
          <div class="ml-10 flex-1">
            <div class="text-3xl font-bold text-black-3">
              {{ data.title ?? '游记标题' }}
            </div>
          </div>
        </div>
        <!-- <div
          v-if="baseInfos.length"
          class="mt-20 grid grid-cols-4 gap-y-15 rounded-xl border border-dashed border-black-9 px-15 py-15"
        >
          <div
            v-for="item in baseInfos"
            class="flex items-center space-x-2 text-base"
          >
            <img :src="item.icon" class="h-44 w-44 shrink-0" alt="" />
            <span class="flex w-0 flex-1" :style="{ color: item.color }">
              <span class="shrink-0 font-semibold">{{ item.lable }}/</span>
              <span class="flex-1 truncate">{{ item.value }}</span>
            </span>
          </div>
        </div> -->
        <div class="mt-20">
          <template v-for="item in data.travelNotesContent">
            <div v-if="item.type === 'sectionTitle'">
              <div class="py-10 text-3xl text-black-3">
                {{ item.content }}
              </div>
            </div>
            <div v-if="item.type === 'sectionContent'">
              <div class="py-10 text-base leading-[28px] text-black-6">
                {{ item.content }}
              </div>
            </div>
            <div v-if="item.type === 'image'">
              <el-image class="h-auto w-full py-10" :src="item.content" />
            </div>
          </template>
        </div>
      </div>
      <template #footer>
        <div class="flex items-center justify-center">
          <el-button type="primary" @click="visible = false"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import travel_notes_detail_startdate from '~/assets/img/travel_notes_detail/travel_notes_detail_startdate.png'
import travel_notes_detail_days from '~/assets/img/travel_notes_detail/travel_notes_detail_days.png'
import travel_notes_detail_relation from '~/assets/img/travel_notes_detail/travel_notes_detail_relation.png'
import travel_notes_detail_fee from '~/assets/img/travel_notes_detail/travel_notes_detail_fee.png'
import travel_notes_detail_star from '~/assets/img/travel_notes_detail/travel_notes_detail_star.png'
import travel_notes_detail_traffic from '~/assets/img/travel_notes_detail/travel_notes_detail_traffic.png'
import travel_notes_detail_endplace from '~/assets/img/travel_notes_detail/travel_notes_detail_endplace.png'

const visible = defineModel('visible', false)

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  travelModeLabel: String,
  endPlace: String
})

const baseInfos = computed(() => {
  const tmpList = []
  if (props.data?.departureTime)
    tmpList.push({
      lable: '出发时间',
      value: props.data?.departureTime,
      color: '#4B99EA',
      icon: travel_notes_detail_startdate
    })
  if (props.data?.countTimes)
    tmpList.push({
      lable: '出发天数',
      value: props.data?.countTimes,
      color: '#4B99EA',
      icon: travel_notes_detail_days
    })
  if (props.data?.role)
    tmpList.push({
      lable: '人物关系',
      value: props.data?.role,
      color: '#4B99EA',
      icon: travel_notes_detail_relation
    })
  if (props.data?.averageCost)
    tmpList.push({
      lable: '人均费用',
      value: props.data?.averageCost,
      color: '#4B99EA',
      icon: travel_notes_detail_fee
    })
  if (props.travelModeLabel)
    tmpList.push({
      lable: '出行方式',
      value: props.travelModeLabel,
      color: '#4B99EA',
      icon: travel_notes_detail_traffic
    })
  if (props.endPlace)
    tmpList.push({
      lable: '目的地',
      value: props.data.endPlace,
      color: '#4B99EA',
      icon: travel_notes_detail_endplace
    })
  if (props.data?.recommendationRate)
    tmpList.push({
      lable: '推荐指数',
      value: props.data?.recommendationRate,
      color: '#facc58',
      icon: travel_notes_detail_star
    })
  return tmpList
})
</script>

<style lang="scss" scoped></style>