NanjingMuseumWuJinZang-PC/src/views/PaintingDetail.vue

<script setup>
import { onMounted, inject, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PaintingDetailBox from '@/components/PaintingDetailBox.vue'
import paintingInfoBox from '@/components/PaintingInfoBox.vue'

const route = useRoute()
const router = useRouter()

// 可当普通组件传入或者当作路由界面使用
const usageState = computed(() =>{
  if (route.query.idx) {
    return 'newPage'
  }
  return 'component'
})

// 当组件使用时需要传入的参数
const props = defineProps({
  // 画作id(和路由参数一样)
  idx: {
    type: String,
    default: '0',
  },
  // 状态
  state: {
    type: String,
    default: '1',
  },
})

// 返回按钮触发的行为
const emit = defineEmits(['close'])

const $env = inject("$env")


const getPaintingSize = (raw) => {
  const temp = raw.split('\n')
  let height = temp[0]
  let width = temp[1]
  height = Number(height.substring(1, height.length - 2))
  width = Number(width.substring(1, width.length - 2))
  return {
    width,
    height,
  }
}

const realState = computed(() => {
  if (props.state === '2' || route.query.state === '2') {
    return 2
  }
  return 1
})

//  idx 传入下标index
const paintingInfo = route.query.idx == 'home' || props.idx == 'home' ? configExcel['首页画作'][0] : configExcel['画作'][usageState.value == 'newPage' ? route.query.idx : props.idx]
// const paintingInfo = route.query.idx == 'home' ? configExcel['首页画作'][0] : configExcel['画作'][route.query.idx]
onMounted(() => {
  // if (usageState.value == 'newPage') {
  //   paintingInfo = route.query.idx == 'home' ? configExcel['首页画作'][0] : configExcel['画作'][route.query.idx]
  // } else if (usageState.value == 'component') {
  //   paintingInfo = props.idx == 'home' ? configExcel['首页画作'][0] : configExcel['画作'][props.idx]
  // }
  console.log('看看检索', props.state == '2', realState.value, paintingInfo['作者简介'])
})
</script>

<template>
  <div class="home">
    <img
      class="img-bg"
      src="@/assets/images/painting-detail-bg.jpg"
      alt=""
    >
    <!-- 左侧图片交互区 -->
    <PaintingDetailBox
      :idx="route.query.idx ? route.query.idx : props.idx"
      :direction="paintingInfo['方向'] ? '横':'竖'"
      :big-url="`${$env.BASE_URL}configMultiMedia/paintings/${paintingInfo['标题']=='修篁树石图' ? 'home-painting2':paintingInfo['标题']}.jpg`"
      :url="`${$env.BASE_URL}configMultiMedia/paintings/${paintingInfo['标题']}.jpg`"
    />
    <!-- 右侧信息展示区 -->
    <paintingInfoBox
      :title="paintingInfo['标题（展示）']"
      :author="paintingInfo['注音']?paintingInfo['注音']:paintingInfo['作者']"
      :age="paintingInfo['朝代']"
      :subtitle="paintingInfo['装裱\/材质\/笔类型']"
      :location="paintingInfo['馆藏']"
      :painting-desc="paintingInfo['简介']"
      :author-info="paintingInfo['作者信息']"
      :author-desc="paintingInfo['作者简介']"
      :size="paintingInfo['尺寸'] ? getPaintingSize(paintingInfo['尺寸']) : ''"
      :state="realState"
    />
    <BtnBack @click="() => usageState ==='component' ? emit('close'):router.back()" />
  </div>
</template>

<style lang='less' scoped>
.home{
  width: 100%;
  height: 100%;
  // background: linear-gradient( 180deg, #AFCEA5 0%, #34492E 100%);
  // background: url(@/assets/images/painting-detail-bg.jpg);
  // background-size: 100% 100%;
  display:flex;
  .img-bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0
  }
}
</style>