ece.suwa3d.com/src/views/cartoon/myOrder.vue

<template>
  <div class="my-order">
    <div class="header" @click="goBack">
      <span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> {{ toValueWithout(config.myOrder.messages.title) }}</span>
    </div>
    <div class="order-list" v-if="orders.length > 0">
      <div class="order-item" @click="OrderDetail(item.id)" v-for="item in orders" :key="item.id">
        <img class="order-img" :src="item.path" alt="order1" />
        <span class="order-status status-finished">{{ getStatus(item.status) }}</span>
      </div>
    </div>
    <div v-else class="record-image-item-null">
      <img :src="nullDataImage" :alt="toValueWithout(config.myOrder.messages.noData)">
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import * as badgeApi from '@/api/badge'
import { onMounted, ref } from 'vue'
import { toValueWithout } from '@/lang/utils'
import { cartoonConfig as config } from '@/config/cartoon'
import nullDataImage from '@/assets/badge/null-data.png'

const router = useRouter()
const page = ref(config.myOrder.pagination.initialPage)
const loading = ref(false)
const finished = ref(false)
const orders = ref([])

onMounted(() => {
  getOrder()
})

function getOrder() {
  if(loading.value) return
  loading.value = true
  badgeApi.getMyOrder({
    page: page.value,
    size: config.myOrder.pagination.pageSize,
    status: config.myOrder.pagination.defaultStatus,
  }).then((res: any) => {
    if(page.value === config.myOrder.pagination.initialPage) {
      orders.value = res.list
    } else {
      orders.value.push(...res.list)
    }
    if(res.total <= orders.value.length) {
      finished.value = true
    } else {
      page.value++
    }
  }).finally(() => {
    loading.value = false
  })
}

function goBack() {
  router.push(config.routes.home)
}

function OrderDetail(id: number) {
  router.push({
    path: config.routes.orderDetail,
    query: {
      id: id,
    },
  })
}

function getStatus(status: number) {
  const statusText = config.myOrder.statusText[status]
  if (statusText) {
    return toValueWithout(statusText)
  }
  return ''
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 14px;
  color: #999;
  padding: 16px 16px 0 16px;
}

.back-icon {
  margin-right: 8px;
  color: #222;
  font-size: 16px;
  cursor: pointer;
}

.order-list {
  display: flex;
  flex-wrap: wrap;
  gap: v-bind('config.myOrder.styles.gap + "px"');
  padding: v-bind('config.myOrder.styles.padding.vertical + "px"') v-bind('config.myOrder.styles.padding.horizontal + "px"');
}

.order-item {
  position: relative;
  width: v-bind('config.myOrder.styles.itemWidth');
  height: v-bind('config.myOrder.styles.itemHeight');
  box-shadow: v-bind('config.myOrder.styles.shadow');
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.order-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: v-bind('config.myOrder.styles.borderRadius + "px"');
}

.order-status {
  position: absolute;
  bottom: v-bind('config.myOrder.styles.status.bottom + "px"');
  right: v-bind('config.myOrder.styles.status.right + "px"');
  padding: v-bind('config.myOrder.styles.status.padding.vertical + "px"') v-bind('config.myOrder.styles.status.padding.horizontal + "px"');
  border-radius: v-bind('config.myOrder.styles.status.borderRadius + "px"');
  font-size: v-bind('config.myOrder.styles.status.fontSize + "px"');
  color: v-bind('config.myOrder.statusStyles.default.color');
  background: v-bind('config.myOrder.statusStyles.default.background');
  opacity: v-bind('config.myOrder.statusStyles.default.opacity');
  pointer-events: none;
}

.status-processing {
  background: v-bind('config.myOrder.statusStyles.processing.background');
}

.status-finished {
  background: v-bind('config.myOrder.statusStyles.finished.background');
}

.record-image-item-null {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.record-image-item-null img {
  width: 80vw;
  height: 200px;
}
</style>