代码提交

src/views/cartoon/myOrder.vue

@@ -0,0 +1,156 @@
+<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 => {
+    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>
+