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 { ref } from "vue"

definePageMeta({
  layout: 'default',
  i18n: 'menu.profile',
})

const router = useRouter()
const { userInfo } = authStore()
const showMyList = ref([])
const localState = ref({
  finished: true,
  refreshing: false
})

const groupByDate = (data) => {
  if (!Array.isArray(data)) return []

  return Object.values(data.reduce((acc, curr) => {
    const date = curr.userCreatedAt
    if (!acc[date]) {
      acc[date] = { userCreatedAt: date, list: [] }
    }
    acc[date].list.push(curr)
    return acc
  }, {})).sort((a, b) => new Date(b.userCreatedAt) - new Date(a.userCreatedAt))
}

const fetchData = async () => {
  try {
    const res = await userArtworks({})
    if (res.status === 0) {
      showMyList.value = groupByDate(res.data.data)
    }
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}

const onRefresh = async () => {
  localState.value.refreshing = true
  await fetchData()
  localState.value.refreshing = false
}

const goPay = () => router.push('/signature/protocol')
const goDetail = (item) => router.push({ path: '/artDetail', query: { uuid: item.uuid } })

fetchData()
</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">
      <img class="w-57px h-57px mr-23px" src="@/static/images/5514@2x.png" alt="">
      <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="grow-1 flex flex-col">
      <div class="border-b-1px border-b-#D3D3D3 px-16px">
        <div class="text-#000 text-16px border-b-3 border-b-#2B53AC w-80px h-36px">{{ $t('home.my_lots') }}</div>
      </div>

      <van-pull-refresh
          v-model="localState.refreshing"
          :success-duration="700"
          class="h-full grow-1"
          @refresh="onRefresh"
      >
        <template #success>
          <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
        </template>
        <van-list :finished="localState.finished" :finished-text="$t('home.finished_text')" class="h-full">
          <!-- 空状态 -->
          <div v-if="showMyList?.length < 1" class="flex flex-col items-center pt-100px">
            <img class="w-103px h-88px mb-19px" src="@/static/images/zu5512@2x.png" alt="">
            <div class="text-14px text-#575757">{{$t('profile.text1')}}</div>
            <div class="text-14px text-#575757">{{$t('profile.text2')}}</div>
          </div>

          <!-- 列表内容 -->
          <template v-else>
            <div v-for="group in showMyList" :key="group.userCreatedAt" class="px-16px pt-14px">
              <div class="text-#575757 text-14px mb-3px">{{ group.userCreatedAt }}</div>
              <div
                  v-for="item in group.list"
                  :key="item.uuid"
                  class="flex mb-22px"
                  @click="goDetail(item)"
              >
                <x-image
                    class="w-80px h-80px flex-shrink-0 mr-10px rounded-4px overflow-hidden"
                    :src="item?.auctionArtworkInfo?.artwork?.hdPic"
                    :preview="false"
                />
                <div class="flex flex-col justify-between grow-1">
                  <div class="text-#000 text-16px ellipsis line-height-21px">
                    {{ item?.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>
                    <van-button
                        v-if="[1,3,4].includes(item.status)"
                        class="w-73px !h-30px"
                        type="primary"
                        @click.stop="goPay"
                    >
                      <span class="text-12px">{{ $t('art_detail_page.button') }}</span>
                    </van-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </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>