liveh5-nuxt/app/pages/artDetail/index.vue

<script setup>
import itemDetail from '@/components/itemDetail/index.vue'
import {userArtwork} from "~/api/goods/index.js";
import {useRouter} from "#vue-router";
import {authStore} from "~/stores/auth/index.js";
definePageMeta({
  i18n: 'detail.text8'
})
const { userInfo, payment } = authStore()
const route = useRoute()
const detail = ref({})
const uuid = route.query.uuid

const initData = async () => {
  const res = await userArtwork({uuid})
  if (res.status === 0) {
    detail.value = res.data
    }
}
const router = useRouter();
const position = ref({x: window?.innerWidth - 120 || 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
}
const goPay=()=>{
  payment.value.leftPrice=detail.value.leftPrice
  payment.value.leftCurrency=detail.value.leftCurrency
  payment.value.buyUid=detail.value.uuid
  payment.value.auctionArtworkUuid=detail.value?.auctionArtworkUuid
  if (detail.value.status===1){
    router.push('/signature/protocol')
  }else if (detail.value.status===4){
    router.push('/payment')
  }
  //router.push('/payment')
}
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)
})
function formatThousands(num) {

  return Number(num).toLocaleString();
}
initData()
</script>

<template>
  <div class="relative h-screen-nav flex flex-col">
    <itemDetail class="grow-1" :detail-info="detail.auctionArtworkInfo"/>
    <div v-if="[1,3,4].includes(detail.status)" class="h-81px bg-#fff flex justify-center pt-7px shrink-0">
      <van-button class="w-213px !h-38px" type="primary" @click="goPay">
        <span class="text-#fff text-14px">{{ $t('art_detail_page.button') }} {{detail.leftCurrency}}{{formatThousands(detail.leftPrice)}}</span>
      </van-button>
    </div>
    <div
        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>
.cursor-move {
  touch-action: none;
  user-select: none;
}
</style>