forked from natuka/web.puabadge.com
147 lines
3.1 KiB
Vue
147 lines
3.1 KiB
Vue
<template>
|
|
<div class="my-order">
|
|
<div class="header" @click="goBack">
|
|
<span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> 我的订单</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="@/assets/badge/null-data.png" alt="暂无数据">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router'
|
|
import * as badgeApi from '@/api/badge'
|
|
import { onMounted, ref } from 'vue'
|
|
const page = ref(1)
|
|
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: 30,
|
|
status: 0,
|
|
}).then(res => {
|
|
if(page.value === 1) {
|
|
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
|
|
})
|
|
}
|
|
const router = useRouter();
|
|
function goBack() {
|
|
router.push('/badge');
|
|
}
|
|
function OrderDetail(id: number) {
|
|
router.push({
|
|
path: '/badge/orderDetail',
|
|
query: {
|
|
id: id,
|
|
},
|
|
})
|
|
}
|
|
function getStatus(status: number) {
|
|
if(status == 1) {
|
|
return '待支付'
|
|
} else if(status == 2) {
|
|
return '已取消'
|
|
} else if(status == 100) {
|
|
return '生产中'
|
|
} else if(status == 200) {
|
|
return '待收货'
|
|
} else if(status == 300) {
|
|
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: 8px;
|
|
padding: 24px 16px;
|
|
}
|
|
|
|
.order-item {
|
|
position: relative;
|
|
width: calc(50% - 4px);
|
|
height: 43vw;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.order-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.order-status {
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: 5px;
|
|
padding: 2px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
background: #bdbdbd;
|
|
opacity: 0.9;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.status-processing {
|
|
background: #bdbdbd;
|
|
}
|
|
|
|
.status-finished {
|
|
background: #8bc34a;
|
|
}
|
|
|
|
.record-image-item-null {
|
|
height: 50vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.record-image-item-null img {
|
|
width: 80vw;
|
|
height: 200px;
|
|
}
|
|
</style> |