designer-hub/packages/app/src/pages/mine/orders/index.vue

<route lang="json">
{ "style": { "navigationBarTitleText": "我的订单", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import Card from '@/components/card.vue'
import PageHelper from '@/components/page-helper.vue'
import { getPointsOrders } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import { PointsOrder } from '../../../core/libs/models'
import { useRouter } from '../../../core/utils/router'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const router = useRouter()

const status = ref({ '0': '待交付', '1': '已完成', '2': '已驳回', '3': '已撤销' })
const handleClick = (order: PointsOrder) => {
  router.push(`/pages/mine/orders/detail/index?id=${order.id}`)
}
</script>
<template>
  <div class="flex-grow flex flex-col gap-4 px-3.5 py-5">
    <PageHelper :request="getPointsOrders" :query="{}" class="flex-grow flex flex-col">
      <template #default="{ source }">
        <div class="flex-grow flex flex-col gap-4">
          <template v-for="(it, i) in source.list" :key="i">
            <div @click="handleClick(it)">
              <Card>
                <div class="flex gap-4">
                  <wd-img
                    width="94"
                    height="94"
                    custom-class="rounded-2xl overflow-hidden"
                    :src="it.orderImgUrl"
                  />
                  <div class="flex flex-col flex-1">
                    <div
                      class="text-black text-base font-normal font-['PingFang_SC'] leading-normal"
                    >
                      {{ it.projectName }}
                    </div>
                    <div
                      class="text-start text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
                    >
                      x{{ it.orderQuantity || 1 }}
                    </div>
                    <div class="flex-1"></div>
                    <div
                      class="text-start text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal"
                    >
                      {{ it.points }}积分
                    </div>
                  </div>
                  <div>
                    <div
                      v-if="it.gainType === 1 && it.orderStatus === '0'"
                      class="w-[58px] h-[26px] bg-[#020202] rounded-[20px] backdrop-blur-[10px] flex items-center justify-center"
                      @click.stop="router.push(`/pages/mine/orders/code/index?id=${it.id}`)"
                    >
                      <div
                        class="text-white text-xs font-normal font-['PingFang_SC'] leading-relaxed"
                      >
                        兑换码
                      </div>
                    </div>
                    <div
                      v-else
                      class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
                    >
                      <!-- 已完成 -->
                      {{ status[it.orderStatus] }}
                    </div>
                  </div>
                </div>
              </Card>
            </div>
          </template>
        </div>
      </template>
    </PageHelper>
  </div>
</template>