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 { t } = useI18n();
const router = useRouter()
const { userInfo, payment } = 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) {
  }
}

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

const goPay = (item) => {
  payment.value.leftPrice = item.leftCnyPrice
  payment.value.nickName = item.nickName
  payment.value.leftCurrency = item.leftCurrency
  payment.value.buyUid = item.uuid
  payment.value.artworkTitle = item?.auctionArtworkInfo?.artworkTitle
  payment.value.auctionArtworkUuid = item?.auctionArtworkUuid
  if (item.status === 1) {
    router.push('/signature/protocol')
  } else if (item.status === 4) {
    router.push('/payment')
  }
}
const goDetail = (item) => router.push({ path: '/artDetail', query: { uuid: item.uuid } })
const statusLabel = {
  1: t('payment.text4'),
  2: t('payment.text2'),
  4: t('payment.text6'),
}
const backLogin=()=>{
  localStorage.clear()
  router.replace('/login')
}
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 justify-between">
      <div class="flex items-center px-16px">
        <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=" px-16px">
        <van-button plain @click="backLogin" type="primary" size="small" class="w-50px !h-30px">退出</van-button>
      </div>
    </div>

    <!-- 设置选项 -->
    <div class="px-16px mb-20px">
      <van-cell-group inset>
        <!-- 移除语言设置入口 -->
      </van-cell-group>
    </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="flex justify-between">
                    <div class="text-#000 text-16px ellipsis line-height-21px">
                      {{ item?.auctionArtworkInfo?.artworkTitle }}
                    </div>
                    <div class="text-14px text-right text-#3C55B2 ">
                      {{ statusLabel[item.status] }}
                    </div>
                  </div>


                  <div class="flex justify-between">
                    <div>
                      <div class="text-#575757 text-14px line-height-none mb-5px">
                        {{ $t('home.start_price') }}：{{ item.auctionArtworkInfo?.startPriceCurrency }}
                        {{ item.auctionArtworkInfo?.startPrice }}
                      </div>
                      <div class="text-#B58047 text-14px line-height-none">
                        {{ $t('home.close_price') }}：{{ item.baseCurrency }} {{ item.baseMoney }}
                      </div>
                    </div>
                    <van-button v-if="[1, 3, 4].includes(item.status)" class="w-73px !h-30px" type="primary"
                      @click.stop="goPay(item)">
                      <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>