liveh5-nuxt/app/components/itemDetail/index.vue

<script setup>
import { showImagePreview } from 'vant';
import {authStore} from "@/stores/auth/index.js";
const {userInfo}= authStore()
import xImage from '@/components/x-image/index.vue'
const props = defineProps({
  detailInfo: {
    type: Object,
    default: null
  }
})
const filteredPriceRules = computed(() => {
  if (!props.detailInfo?.priceRules) return []

  // 找到第一个price为空的索引
  const emptyIndex = props.detailInfo.priceRules.findIndex(item => !item.price)

  if (emptyIndex === -1) {
    // 如果没有空价格，返回全部
    return props.detailInfo.priceRules
  } else {
    // 如果有空价格，只返回到空价格之前的数据
    return props.detailInfo.priceRules.slice(0, emptyIndex)
  }
})
const position = ref({x: window?.innerWidth - 200 || 0, y: 240})
const startPosition = ref({x: 0, y: 0})
const isDragging = ref(false)

const startDrag = (e) => {
  isDragging.value = true
  const clientX = e.touches ? e.touches[0].clientX : e.clientX
  const clientY = e.touches ? e.touches[0].clientY : e.clientY
  startPosition.value = {
    x: clientX - position.value.x,
    y: clientY - position.value.y
  }
}

const onDrag = (e) => {
  if (isDragging.value) {
    const clientX = e.touches ? e.touches[0].clientX : e.clientX
    const clientY = e.touches ? e.touches[0].clientY : e.clientY

    const maxX = window.innerWidth - 108
    const maxY = window.innerHeight - 137

    const x = Math.min(Math.max(0, clientX - startPosition.value.x), maxX)
    const y = Math.min(Math.max(0, clientY - startPosition.value.y), maxY)
    position.value = {x, y}
  }
}
const stopDrag = () => {
  isDragging.value = false
}
onMounted(() => {
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
  document.addEventListener('touchmove', onDrag)
  document.addEventListener('touchend', stopDrag)
})
onUnmounted(() => {
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
  document.removeEventListener('touchmove', onDrag)
  document.removeEventListener('touchend', stopDrag)
})
</script>

<template>
<div class="relative">
  <div class="flex justify-center">
    <xImage class="h-188px" :src="detailInfo?.artwork?.hdPic"></xImage>
  </div>
  <div class="px-[16px] bg-[#fff] pt-[11px] mb-6px">
    <div class="text-[#000] text-[16px] mb-[12px]">{{detailInfo?.artworkTitle}}</div>
    <div class="text-#575757 text-[14px] pb-8px">
      <div class="flex mb-[4px]">
        <div class="w-[70px]">{{$t('detail.text1')}}：</div>
        <div>{{detailInfo?.artwork?.artistName??'-'}}</div>
      </div>
      <div class="flex mb-[4px]">
        <div class="w-[70px] flex-shrink-0">{{$t('detail.text2')}}：</div>
        <div>{{detailInfo?.artwork?.ruler??'-'}}</div>
      </div>
      <div class="flex mb-[4px]">
        <div class="w-[70px] flex-shrink-0">{{$t('detail.text3')}}*{{$t('detail.text4')}}：</div>
        <div>{{detailInfo?.artwork?.length}}*{{detailInfo?.artwork?.width}}cm</div>
      </div>
      <div class="flex mb-[4px]">
        <div class="w-[70px] flex-shrink-0">{{$t('detail.text5')}}：</div>
        <div>{{detailInfo?.artwork?.abstract??'-'}}</div>
      </div>
    </div>
  </div>
  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px">
    <div class="text-[#575757] text-[14px]">{{$t('detail.text6')}}：</div>
    <div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
  </div>
  <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px" v-if="detailInfo?.soldPrice">
    <div class="text-[#B58047] text-[14px]">{{$t('home.close_price')}}：</div>
    <div class="text-#B58047 text-14px font-bold">{{detailInfo?.soldPriceCurrency}} {{detailInfo?.soldPrice}}</div>
  </div>
  <div class="px-[16px] bg-#fff pt-12px pb-18px">
    <div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}：</div>
    <div v-if="detailInfo?.priceRuleType!=='diy'">
      <xImage :src="detailInfo?.priceRuleImage+'?x-oss-process=image/resize,w_580,h_580/format,webp/quality,q_80'" alt=""/>
    </div>
    <div v-else class="mt-20px">
      <div class="flex text-#575757 text-12px">
        <div class="grow-1 text-center">{{ $t('detail.text11') }}</div>
        <div class="grow-1 text-center">{{ $t('detail.text10') }}</div>
      </div>
      <div v-for="(item,index) of filteredPriceRules" :key="item.index" class="flex text-#575757 text-12px mt-10px">
        <div class="grow-1 text-center">{{item.index}}</div>
        <div class="grow-1 text-center">{{item.price}}</div>
      </div>
    </div>

  </div>
  <div class="flex text-[#575757] text-[14px] justify-center">
    <div>{{$t('detail.text9')}}:</div>
    <div>{{ detailInfo?.priceRuleAdd }}</div>
  </div>
  <div
  v-if="userInfo.ID==detailInfo?.userId"
        class="w-108px h-137px absolute cursor-move"
        :style="{
        left: position.x + 'px',
        top: position.y + 'px'
      }"
        @mousedown="startDrag"
        @touchstart.prevent="startDrag"
    >
      <img src="@/static/images/zd5530@2x.png" class="w-full h-full" alt="">
      <div
          class="flex flex-col items-center absolute bottom-25px text-14px text-#B58047 left-1/2 transform translate-x--1/2 whitespace-nowrap shrink-0">
        <div>{{ $t('art_detail_page.prompt_title')}}</div>
        <div>{{ $t('art_detail_page.prompt_desc')}}</div>
      </div>
    </div>
</div>
</template>

<style scoped>

</style>