sfgdj-web/src/views/DetailView.vue

<template>
  <div class="AboutView">
    <div class="w-full h-[180px] relative flex items-center md:h-[380px]">
      <div
        class="w-full h-full bg-[url('/src/assets/images/detail_top_bg.png')] bg-no-repeat bg-center bg-cover absolute left-0 top-0 z-0"
      ></div>
      <div class="relative z-1 p-4 w-full md:w-[780px] m-auto">
        <div
          class="font-['PingFang-Heavy'] px-3 font-semibold text-xl md:text-[32px] md:leading-tight"
        >
          工具数字化展示
        </div>
        <div class="flex mt-6">
          <div
            class="ml-3"
            v-for="typeItem in typeOptions1Ref"
            :key="typeItem.id"
            @click="handleReturn(typeItem)"
          >
            {{ typeItem.toolName }}
          </div>
        </div>
      </div>
    </div>
    <section
      class="w-full bg-[url('/src/assets/images/detail_bg.png')] bg-no-repeat bg-center bg-cover left-0 top-0 z-0 flex justify-center"
    >
      <div
        class="w-[1440px] max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-7xl"
      >
        <div class="md:flex">
          <div class="w-full md:w-[450px] md:shrink-0 p-3">
            <div class="w-full h-[450px] tool-img border-2 flex items-center justify-center">
              <van-image class="max-w-[450px] max-h-[450px] tool-img" :src="devPath + sytPath" />
            </div>
            <van-grid
              square
              :column-num="4"
              class="h-full w-full object-cover md:h-[105px] mt-4"
              :gutter="10"
            >
              <van-grid-item
                v-for="syt in sytList"
                :key="syt.id"
                @click="changeImg(syt)"
                :class="[syt.id === detailImg ? 'active' : '']"
              >
                <van-image class="max-w-[105px] max-h-[105px]" :src="devPath + syt.filePath" />
              </van-grid-item>
            </van-grid>
          </div>
          <div class="p-8 w-full">
            <div
              class="font-['PingFang-Heavy'] font-semibold text-xl md:text-[20px] md:leading-tight"
            >
              {{ queryToolName }}
            </div>
            <div
              class="bg-[#E6F7FF] border border-[#004EA2] rounded px-3 text-[#004EA2] text-center mt-9 font-normal text-xs w-[200px] h-[22px] leading-[22px] truncate"
            >
              {{ breadTitle }}
            </div>
            <div class="font-['PingFang-SC'] text-sm font-normal mt-10 flex">
              <div>物料名称：</div>
              <div class="font-['PingFang-SC'] text-sm font-normal">{{ selectMaterialName }}</div>
            </div>
            <div class="font-['PingFang-SC'] text-sm font-normal mt-10 flex">
              <div class="min-w-20">物料规格：</div>
              <div>
                <van-tag
                  v-for="i in wlList"
                  :key="i.id"
                  :color="i.id === wlSelectId ? '#004EA2' : '#F0F0F0'"
                  :text-color="i.id === wlSelectId ? '#FFFFFF' : '#000000'"
                  class="m-1 h-[35px] leading-[35px]"
                  @click="changeWlCode(i)"
                  >{{ i.specifications }}</van-tag
                >
              </div>
            </div>
            <div class="font-['PingFang-SC'] text-sm font-normal mt-10 flex items-center">
              <div>物料编码：</div>
              <div>{{ selectWlCode }}</div>
              <van-icon
                v-show="selectWlCode"
                name="description-o"
                class="text-[#004EA2] description-o ml-1 cursor-pointer"
                @click="codeCopy"
              />
            </div>
            <div class="font-['PingFang-SC'] text-sm font-normal mt-10">
              <div>附件：</div>
              <van-cell-group>
                <van-cell v-for="file in fileList" :key="file.id">
                  <template #title>
                    <span class="cursor-pointer" @click="fileDownload(file)">{{
                      file.fileName
                    }}</span>
                  </template>
                  <template #right-icon>
                    <img
                      class="w-[18px] h-[18px] cursor-pointer"
                      src="../assets/images/download.png"
                      alt=""
                      @click="fileDownload(file)"
                    />
                  </template>
                </van-cell>
              </van-cell-group>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- <h1 class="text-3xl font-bold underline" @click="goBack">详情页</h1> -->
  </div>
</template>

<script setup name="AboutView">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { detailList } from '@/api/index.js'
import Clipboard from 'clipboard'
import { listTools } from '@/api/index.js'

const router = useRouter()
const route = useRoute()
const queryId = ref(route.query.id)
const queryToolName = ref(route.query.toolName)
console.log('route.query.id', queryId.value)

const wlList = ref([])
const wlSelectId = ref(0)
const selectWlCode = ref('')
const selectMaterialName = ref('')
const sytList = ref([])
const fileList = ref([])
const detailImg = ref(0)
const sytPath = ref('')
const devPath = import.meta.env.VITE_APP_BASE_API
const breadTitle = ref('')
const typeOptions1Ref = ref([])
const init = () => {
  detailList({ id: queryId.value }).then((res) => {
    const toolDetails = res.data.toolDetails
    wlList.value = toolDetails.filter((item) => item.informationType === 'wl')
    console.log(wlList.value)
    if (wlList.value.length > 0) {
      selectWlCode.value = wlList.value[0].materialNo
      selectMaterialName.value = wlList.value[0].materialName
      wlSelectId.value = wlList.value[0].id
    }
    sytList.value = toolDetails.filter((item) => item.informationType === 'syt')
    if (sytList.value.length > 0) {
      detailImg.value = sytList.value[0].id
      sytPath.value = sytList.value[0].filePath
    }
    fileList.value = toolDetails.filter(
      (item) => item.informationType !== 'syt' && item.informationType !== 'wl'
    )

    const ttoolBasis = res.data.ttoolBasis
    breadTitle.value = ttoolBasis.map((item) => item.toolName).join(' > ')
  })

  listTools({
    level: '1',
    pageSize: 999
  }).then((res) => {
    typeOptions1Ref.value = res.rows
  })
}
init()
const changeImg = ({ id, filePath }) => {
  detailImg.value = id
  sytPath.value = filePath
}

const codeCopy = async () => {
  const clipboard = new Clipboard('.description-o', {
    text: () => selectWlCode.value
  })
  // 添加成功事件处理函数
  clipboard.on('success', (e) => {
    e.clearSelection()
  })
  // 添加失败事件处理函数
  clipboard.on('error', () => {
    console.warn('无法复制到剪贴板！')
  })
}

const changeWlCode = ({ id, materialNo, materialName }) => {
  wlSelectId.value = id
  selectWlCode.value = materialNo
  selectMaterialName.value = materialName
}
//  informationType 物料  wl  点击切换 物料编码 materialNo
//  informationType 示意图 syt 左侧图
const fileDownload = ({ fileName, filePath }) => {
  console.log('filePath', filePath)
  const el = document.createElement('a')
  el.style.display = 'none'
  el.setAttribute('target', '_blank')

  fileName && el.setAttribute('download', fileName)
  el.href = devPath + filePath
  document.body.appendChild(el)
  el.click()
  document.body.removeChild(el)
}

const handleReturn = (typeItem) => {
  router.push({ path: '/', query: { id: typeItem.id } })
}
</script>

<style lang="scss" scoped>
:deep(.van-grid-item__content--surround:after) {
  border: 4px solid #e5e7eb;
}
.active {
  :deep(.van-grid-item__content--surround:after) {
    border: 4px solid #004ea2;
  }
}
</style>