liveh5-nuxt/app/pages/profile/index.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">我的拍品</div>
      </div>
      <van-pull-refresh       v-model="localState.refreshing"
                              success-text="刷新成功"
                              :success-duration="700"
                              @refresh="onRefresh">
        <van-list
            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}}{{item1?.auctionArtworkInfo?.artworkTitle}}{{item1?.auctionArtworkInfo?.artworkTitle}}</div>
                <div class="flex justify-between">
                  <div>
                    <div class="text-#575757 text-14px line-height-none mb-5px">起拍价：RMB 1,000</div>
                    <div class="text-#B58047 text-14px line-height-none">成交价：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">去支付</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>