116 lines
3.6 KiB
Vue
116 lines
3.6 KiB
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
|
|
console.log('detail',detail.value)
|
|
}
|
|
}
|
|
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')
|
|
}
|
|
console.log('detail',detail.value)
|
|
//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> |