127 lines
4.1 KiB
Vue
127 lines
4.1 KiB
Vue
<script setup>
|
||
import {userArtworks} from "@/api/goods/index.js";
|
||
import {authStore} from "@/stores/auth/index.js";
|
||
import xImage from '@/components/x-image/index.vue'
|
||
import {goodStore} from "~/stores/goods/index.js";
|
||
import {ref} from "vue";
|
||
definePageMeta({
|
||
layout: 'default',
|
||
title: '我的',
|
||
i18n: 'menu.profile',
|
||
})
|
||
const {artWorkDetail} = goodStore()
|
||
const myList=ref([])
|
||
const showMyList=ref([])
|
||
const {userInfo}= authStore()
|
||
const groupAndSortByDate=(data)=> {
|
||
if (!Array.isArray(data)) {
|
||
return
|
||
}
|
||
return Object.values(data.reduce((acc, curr) => {
|
||
if (!acc[curr.userCreatedAt]) {
|
||
acc[curr.userCreatedAt] = {
|
||
userCreatedAt: curr.userCreatedAt,
|
||
list: []
|
||
}
|
||
}
|
||
acc[curr.userCreatedAt].list.push(curr)
|
||
return acc;
|
||
}, {})).sort((a, b) => new Date(b.userCreatedAt) - new Date(a.userCreatedAt));
|
||
}
|
||
const initData=async ()=>{
|
||
const res=await userArtworks({})
|
||
if (res.status===0){
|
||
myList.value=res.data.data
|
||
showMyList.value=groupAndSortByDate(myList.value)
|
||
}
|
||
}
|
||
const router = useRouter()
|
||
const localState = ref({
|
||
finished: false,
|
||
refreshing: false,
|
||
showDetail: false,
|
||
showHeight: ''
|
||
})
|
||
initData()
|
||
const goPay=()=>{
|
||
router.push({
|
||
path:'/signature/personal-Info'
|
||
})
|
||
}
|
||
const goDetail=(item)=>{
|
||
router.push({
|
||
path:'/artDetail',
|
||
query:{
|
||
uuid:item.uuid
|
||
}
|
||
})
|
||
}
|
||
const onRefresh = async () => {
|
||
try {
|
||
localState.value.refreshing = true
|
||
localState.value.finished = false
|
||
const { finished } = await getArtworkList(true)
|
||
localState.value.finished = finished
|
||
} finally {
|
||
localState.value.refreshing = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="w-[100vw] bg-[url('@/static/images/3532@2x.png')] bg-cover pt-43px flex-grow-1 flex flex-col">
|
||
<div class="flex items-center px-16px mb-43px">
|
||
<div class="mr-23px">
|
||
<img class="w-57px h-57px" src="@/static/images/5514@2x.png" alt="">
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<div class="text-18px text-#181818">{{userInfo.realName}}</div>
|
||
<div class="text-#575757 text-14px">{{userInfo.telNum}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1 ">
|
||
<div class="border-b-1px border-b-#D3D3D3 px-16px flex">
|
||
<div class="text-#000 text-16px border-b-3 border-b-#2B53AC h-36px">{{$t('home.my_lots')}}</div>
|
||
</div>
|
||
<van-pull-refresh v-model="localState.refreshing"
|
||
:success-text="$t('home.refresh_show')"
|
||
:success-duration="700"
|
||
@refresh="onRefresh">
|
||
<van-list
|
||
:finished-text="$t('home.finished_text')"
|
||
>
|
||
<div class="px-16px pt-14px" v-for="(item,index) of showMyList" >
|
||
<div class="text-#575757 text-14px mb-3px">{{item.userCreatedAt}}</div>
|
||
<div class="flex mb-22px" v-for="(item1,index1) of item.list" @click="goDetail(item1)">
|
||
<div class="flex-shrink-0 mr-10px rounded-4px overflow-hidden">
|
||
<x-image class="w-80px h-80px" :src="item1?.auctionArtworkInfo?.artwork?.hdPic" :preview="false" alt=""/>
|
||
</div>
|
||
<div class="flex flex-col justify-between grow-1">
|
||
<div class="text-#000 text-16px ellipsis line-height-21px">{{item1?.auctionArtworkInfo?.artworkTitle}}</div>
|
||
<div class="flex justify-between">
|
||
<div>
|
||
<div class="text-#575757 text-14px line-height-none mb-5px">{{$t('home.start_price')}}：RMB 1,000</div>
|
||
<div class="text-#B58047 text-14px line-height-none">{{$t('home.close_price')}}：RMB 10,000</div>
|
||
</div>
|
||
<div v-if="[1,3,4].includes(item1.status)" @click.stop="goPay">
|
||
<van-button class="w-73px !h-30px" type="primary"><span class="text-12px">{{$t('art_detail_page.button')}}</span></van-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
</van-pull-refresh>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<style scoped>
|
||
.ellipsis {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
</style>
|