rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: order page

Browse Source
This commit is contained in:
Rogee
2025-12-26 09:34:41 +08:00
parent 15a5d94e83
commit 9ebb7e5452
3 changed files with 341 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
frontend/portal/src/views/order/DetailView.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<div class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8">
<!-- Header -->
<div class="flex items-center gap-4 mb-8">
<button @click="$router.back()" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-500 transition-colors">
<i class="pi pi-arrow-left text-lg"></i>
</button>
<div>
<h1 class="text-2xl font-bold text-slate-900">订单详情</h1>
<p class="text-sm text-slate-500">订单号: {{ order.id }}</p>
</div>
<div class="ml-auto">
<span class="px-3 py-1 rounded-full text-sm font-bold bg-green-50 text-green-600 border border-green-100" v-if="order.status === 'completed'">交易成功</span>
<span class="px-3 py-1 rounded-full text-sm font-bold bg-orange-50 text-orange-600 border border-orange-100" v-else-if="order.status === 'unpaid'">待支付</span>
</div>
</div>
<!-- Status Progress (Fixed Alignment) -->
<div class="mb-10 p-8 bg-slate-50 rounded-xl border border-slate-100">
<div class="relative mx-12"> <!-- Added margin for text overflow safety -->
<!-- Background Line -->
<div class="absolute top-4 left-0 w-full h-1 bg-slate-200 -z-0"></div>
<!-- Active Line -->
<div class="absolute top-4 left-0 h-1 bg-green-500 -z-0 transition-all duration-500" :style="{ width: progressWidth }"></div>
<div class="flex justify-between relative z-10">
<!-- Step 1 -->
<div class="flex flex-col items-center gap-2 w-24 -ml-12"> <!-- Fixed width and negative margin to center on point -->
<div class="w-9 h-9 rounded-full bg-green-500 text-white flex items-center justify-center font-bold text-sm border-4 border-slate-50"><i class="pi pi-check"></i></div>
<div class="text-center">
<div class="text-sm font-bold text-slate-900">提交订单</div>
<div class="text-xs text-slate-500 mt-1">{{ order.createTime }}</div>
</div>
</div>
<!-- Step 2 -->
<div class="flex flex-col items-center gap-2 w-24">
<div class="w-9 h-9 rounded-full flex items-center justify-center font-bold text-sm border-4 border-slate-50 transition-colors" :class="order.payTime ? 'bg-green-500 text-white' : 'bg-slate-200 text-slate-500'"><i class="pi pi-wallet"></i></div>
<div class="text-center">
<div class="text-sm font-bold" :class="order.payTime ? 'text-slate-900' : 'text-slate-500'">付款成功</div>
<div class="text-xs text-slate-500 mt-1" v-if="order.payTime">{{ order.payTime }}</div>
</div>
</div>
<!-- Step 3 -->
<div class="flex flex-col items-center gap-2 w-24">
<div class="w-9 h-9 rounded-full flex items-center justify-center font-bold text-sm border-4 border-slate-50 transition-colors" :class="order.status === 'completed' ? 'bg-green-500 text-white' : 'bg-slate-200 text-slate-500'"><i class="pi pi-box"></i></div>
<div class="text-center">
<div class="text-sm font-bold" :class="order.status === 'completed' ? 'text-slate-900' : 'text-slate-500'">{{ order.isVirtual ? '自动发货' : '商家发货' }}</div>
</div>
</div>
<!-- Step 4 -->
<div class="flex flex-col items-center gap-2 w-24 -mr-12">
<div class="w-9 h-9 rounded-full flex items-center justify-center font-bold text-sm border-4 border-slate-50 transition-colors" :class="order.status === 'completed' ? 'bg-green-500 text-white' : 'bg-slate-200 text-slate-500'"><i class="pi pi-thumbs-up"></i></div>
<div class="text-center">
<div class="text-sm font-bold" :class="order.status === 'completed' ? 'text-slate-900' : 'text-slate-500'">交易完成</div>
</div>
</div>
</div>
</div>
</div>
<!-- Info Stack (Single Column Layout) -->
<div class="space-y-8">
<!-- 1. Product Info -->
<div class="border border-slate-200 rounded-lg overflow-hidden">
<div class="bg-slate-50 px-6 py-3 border-b border-slate-200 font-bold text-slate-900 text-lg">商品信息</div>
<div class="p-6 flex flex-col sm:flex-row gap-6">
<img :src="order.cover" class="w-32 h-20 object-cover rounded bg-slate-100 flex-shrink-0">
<div class="flex-1 min-w-0">
<h3 class="font-bold text-slate-900 text-xl mb-2">{{ order.title }}</h3>
<div class="text-base text-slate-500 mb-3">{{ order.sku || '默认规格' }}</div>
<div v-if="order.isVirtual" class="inline-flex items-center px-2.5 py-1 rounded text-sm font-medium bg-blue-50 text-blue-600">虚拟商品</div>
</div>
<div class="text-right sm:text-right text-left">
<div class="font-bold text-slate-900 text-xl">¥ {{ order.price }}</div>
<div class="text-slate-500 text-base mt-1">x {{ order.quantity }}</div>
</div>
</div>
<!-- Price Calculation -->
<div class="border-t border-slate-100 p-6 bg-slate-50/50">
<div class="flex flex-col gap-2 ml-auto max-w-sm">
<div class="flex justify-between text-base text-slate-600">
<span>商品总额</span>
<span>¥ {{ (order.price * order.quantity).toFixed(2) }}</span>
</div>
<div class="flex justify-between text-base text-slate-600">
<span>运费</span>
<span>¥ 0.00</span>
</div>
<div class="flex justify-between text-base text-slate-600">
<span>优惠券</span>
<span class="text-red-600">- ¥ 0.00</span>
</div>
<div class="border-t border-slate-200 my-2 pt-4 flex justify-between items-center">
<span class="font-bold text-slate-900 text-lg">实付金额</span>
<span class="text-3xl font-bold text-red-600">¥ {{ order.amount }}</span>
</div>
</div>
</div>
</div>
<!-- 2. Order Meta Info (Full Width) -->
<div class="bg-white border border-slate-200 rounded-xl p-8 text-base">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<!-- Left Column: Basic Info -->
<div class="space-y-6">
<div>
<h3 class="font-bold text-slate-900 text-lg mb-4 border-l-4 border-primary-500 pl-3">订单信息</h3>
<div class="space-y-3 text-slate-600">
<p>订单编号: <span class="text-slate-900 select-all">{{ order.id }}</span> <button class="text-primary-600 ml-2 hover:underline font-medium">复制</button></p>
<p>创建时间: {{ order.createTime }}</p>
<p v-if="order.payTime">付款时间: {{ order.payTime }}</p>
</div>
</div>
<div v-if="!order.isVirtual">
<h3 class="font-bold text-slate-900 text-lg mb-4 border-l-4 border-primary-500 pl-3">收货信息</h3>
<div class="space-y-2 text-slate-600">
<p class="font-bold text-slate-900 text-lg">张三 138****8888</p>
<p>北京市 朝阳区 建国路88号</p>
</div>
</div>
</div>
<!-- Right Column: Merchant & Actions -->
<div class="space-y-6">
<div>
<h3 class="font-bold text-slate-900 text-lg mb-4 border-l-4 border-primary-500 pl-3">商家信息</h3>
<div class="flex items-center gap-4 p-4 bg-slate-50 rounded-lg">
<img :src="order.tenantAvatar" class="w-12 h-12 rounded-full">
<div>
<div class="font-bold text-slate-900">{{ order.tenantName }}</div>
<button class="text-primary-600 text-sm mt-1 hover:underline">联系商家</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const orderId = route.params.id;
// Mock Data logic based on ID logic or just static for demo
const order = ref({
id: orderId || '82934712',
createTime: '2025-12-24 14:30:00',
payTime: '2025-12-24 14:30:05',
status: 'completed',
isVirtual: true,
cover: 'https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60',
title: '《霸王别姬》全本实录珍藏版',
sku: '高清数字版',
price: 9.90,
quantity: 1,
amount: '9.90',
tenantName: '梅派传人小林',
tenantAvatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Master1'
});
const progressWidth = computed(() => {
if (order.value.status === 'completed') return '100%';
if (order.value.status === 'paid') return '66%';
return '33%';
});
</script>