第 4 阶段：订单、交接与账务--1
This commit is contained in:
yml
@@ -0,0 +1,81 @@
|
||||
import { apiClient } from './client'
|
||||
|
||||
export interface Order {
|
||||
id: number
|
||||
order_no: string
|
||||
listing_id: number
|
||||
account_id: number
|
||||
owner_id: number
|
||||
renter_id: number
|
||||
title: string
|
||||
server_region: string
|
||||
login_platform: string
|
||||
rent_start_at?: string
|
||||
rent_end_at?: string
|
||||
rent_hours: number
|
||||
rent_amount: number
|
||||
deposit_amount: number
|
||||
platform_fee: number
|
||||
account_snapshot?: Record<string, unknown>
|
||||
status: string
|
||||
handoff_status: string
|
||||
settlement_status: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface HandoffRecord {
|
||||
id: number
|
||||
order_id: number
|
||||
from_user_id: number
|
||||
to_user_id: number
|
||||
type: string
|
||||
content: string
|
||||
confirmed_by_renter_at?: string
|
||||
confirmed_by_owner_at?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface ApiResponse<T> {
|
||||
code: string
|
||||
message: string
|
||||
data: T
|
||||
}
|
||||
|
||||
export async function createOrder(listingId: number, rentHours: number) {
|
||||
const { data } = await apiClient.post<ApiResponse<Order>>('/orders', {
|
||||
listing_id: listingId,
|
||||
rent_hours: rentHours,
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchOrders() {
|
||||
const { data } = await apiClient.get<ApiResponse<{ items: Order[] }>>('/orders')
|
||||
return data.data.items
|
||||
}
|
||||
|
||||
export async function fetchOrder(id: string | number) {
|
||||
const { data } = await apiClient.get<ApiResponse<Order>>(`/orders/${id}`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function cancelOrder(id: number) {
|
||||
const { data } = await apiClient.post<ApiResponse<{ cancelled: boolean }>>(`/orders/${id}/cancel`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function submitHandoff(id: number, content: string) {
|
||||
const { data } = await apiClient.post<ApiResponse<HandoffRecord>>(`/orders/${id}/handoff`, { content })
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function fetchHandoffRecords(id: string | number) {
|
||||
const { data } = await apiClient.get<ApiResponse<{ items: HandoffRecord[] }>>(`/orders/${id}/handoff-records`)
|
||||
return data.data.items
|
||||
}
|
||||
|
||||
export async function confirmReceive(id: number) {
|
||||
const { data } = await apiClient.post<ApiResponse<{ received: boolean }>>(`/orders/${id}/confirm-receive`)
|
||||
return data.data
|
||||
}
|
||||
@@ -6,6 +6,7 @@ export const useSessionStore = defineStore('session', {
|
||||
state: () => ({
|
||||
token: localStorage.getItem('access_token') || '',
|
||||
refreshToken: localStorage.getItem('refresh_token') || '',
|
||||
userId: Number(localStorage.getItem('user_id') || 0),
|
||||
phone: '',
|
||||
realnameStatus: 'unknown',
|
||||
}),
|
||||
@@ -23,19 +24,25 @@ export const useSessionStore = defineStore('session', {
|
||||
logout() {
|
||||
this.token = ''
|
||||
this.refreshToken = ''
|
||||
this.userId = 0
|
||||
this.phone = ''
|
||||
this.realnameStatus = 'unknown'
|
||||
localStorage.removeItem('access_token')
|
||||
localStorage.removeItem('refresh_token')
|
||||
localStorage.removeItem('user_id')
|
||||
},
|
||||
applySession(user: AuthUser, accessToken: string, refreshToken: string) {
|
||||
this.token = accessToken
|
||||
this.refreshToken = refreshToken
|
||||
this.userId = user.id
|
||||
localStorage.setItem('access_token', accessToken)
|
||||
localStorage.setItem('refresh_token', refreshToken)
|
||||
localStorage.setItem('user_id', String(user.id))
|
||||
this.applyUser(user)
|
||||
},
|
||||
applyUser(user: AuthUser) {
|
||||
this.userId = user.id
|
||||
localStorage.setItem('user_id', String(user.id))
|
||||
this.phone = user.phone
|
||||
this.realnameStatus = user.realname_status
|
||||
},
|
||||
|
||||
@@ -266,6 +266,47 @@ h1 {
|
||||
column-gap: 16px;
|
||||
}
|
||||
|
||||
.order-panel {
|
||||
max-width: 520px;
|
||||
margin-top: 28px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.order-panel p {
|
||||
margin: 0 0 12px;
|
||||
color: #52616f;
|
||||
}
|
||||
|
||||
.order-panel h2 {
|
||||
margin: 0 0 14px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
border-top: 1px solid #e4e7ed;
|
||||
padding: 14px 0;
|
||||
}
|
||||
|
||||
.timeline-item:first-of-type {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.timeline-item strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.timeline-item span {
|
||||
color: #6b7785;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.panel-action {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -1,9 +1,156 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import {
|
||||
cancelOrder,
|
||||
confirmReceive,
|
||||
fetchHandoffRecords,
|
||||
fetchOrder,
|
||||
submitHandoff,
|
||||
type HandoffRecord,
|
||||
type Order,
|
||||
} from '@/api/orders'
|
||||
import { useSessionStore } from '@/stores/session'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const session = useSessionStore()
|
||||
const loading = ref(false)
|
||||
const cancelling = ref(false)
|
||||
const handoffing = ref(false)
|
||||
const confirming = ref(false)
|
||||
const order = ref<Order | null>(null)
|
||||
const handoffRecords = ref<HandoffRecord[]>([])
|
||||
const handoffContent = ref('')
|
||||
|
||||
const isOwner = computed(() => order.value?.owner_id === session.userId)
|
||||
const isRenter = computed(() => order.value?.renter_id === session.userId)
|
||||
|
||||
onMounted(loadOrder)
|
||||
|
||||
async function loadOrder() {
|
||||
loading.value = true
|
||||
try {
|
||||
order.value = await fetchOrder(String(route.params.id))
|
||||
handoffRecords.value = await fetchHandoffRecords(String(route.params.id))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
if (!order.value) return
|
||||
cancelling.value = true
|
||||
try {
|
||||
await cancelOrder(order.value.id)
|
||||
ElMessage.success('订单已取消，账号已释放')
|
||||
await router.push('/orders')
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '取消失败'))
|
||||
} finally {
|
||||
cancelling.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmitHandoff() {
|
||||
if (!order.value) return
|
||||
handoffing.value = true
|
||||
try {
|
||||
await submitHandoff(order.value.id, handoffContent.value)
|
||||
handoffContent.value = ''
|
||||
ElMessage.success('交接说明已提交')
|
||||
await loadOrder()
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '提交交接失败'))
|
||||
} finally {
|
||||
handoffing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleConfirmReceive() {
|
||||
if (!order.value) return
|
||||
confirming.value = true
|
||||
try {
|
||||
await confirmReceive(order.value.id)
|
||||
ElMessage.success('已确认收号，订单进入租赁中')
|
||||
await loadOrder()
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '确认收号失败'))
|
||||
} finally {
|
||||
confirming.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function readError(error: unknown, fallback: string) {
|
||||
if (typeof error === 'object' && error && 'response' in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } }).response
|
||||
return response?.data?.message || fallback
|
||||
}
|
||||
return fallback
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<div class="page-header">
|
||||
<p class="eyebrow">Order Timeline</p>
|
||||
<section class="page" v-loading="loading">
|
||||
<div v-if="order" class="page-header">
|
||||
<p class="eyebrow">{{ order.order_no }}</p>
|
||||
<h1>订单详情</h1>
|
||||
<p>展示状态机时间线、交接记录、归还入口和申诉入口。</p>
|
||||
<p>{{ order.title }} · {{ order.server_region }} / {{ order.login_platform }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="order" class="detail-grid">
|
||||
<div class="metric-card">
|
||||
<span>状态</span>
|
||||
<strong>{{ order.status }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span>交接</span>
|
||||
<strong>{{ order.handoff_status }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span>租金</span>
|
||||
<strong>¥{{ order.rent_amount }}</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span>押金</span>
|
||||
<strong>¥{{ order.deposit_amount }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order" class="order-panel">
|
||||
<p>租期：{{ order.rent_hours }} 小时</p>
|
||||
<p>开始：{{ order.rent_start_at || '未开始' }}</p>
|
||||
<p>结束：{{ order.rent_end_at || '未设置' }}</p>
|
||||
<el-button v-if="order.status === 'pending_handoff'" type="danger" :loading="cancelling" @click="handleCancel">
|
||||
取消订单并释放账号
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="order" class="order-panel">
|
||||
<h2>交接记录</h2>
|
||||
<el-empty v-if="handoffRecords.length === 0" description="暂无交接记录" />
|
||||
<div v-for="record in handoffRecords" :key="record.id" class="timeline-item">
|
||||
<strong>{{ record.type }}</strong>
|
||||
<p>{{ record.content }}</p>
|
||||
<span>{{ record.created_at }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="order && isOwner && order.status === 'pending_handoff' && order.handoff_status === 'pending_owner'" class="order-panel">
|
||||
<h2>提交交接说明</h2>
|
||||
<el-input v-model="handoffContent" type="textarea" :rows="4" placeholder="填写登录方式、注意事项和交接说明" />
|
||||
<el-button class="panel-action" type="primary" :loading="handoffing" @click="handleSubmitHandoff">提交交接</el-button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="order && isRenter && order.status === 'pending_handoff' && order.handoff_status === 'pending_renter_confirm'"
|
||||
class="order-panel"
|
||||
>
|
||||
<h2>确认收号</h2>
|
||||
<p>确认账号可以正常登录后，订单会进入租赁中并重新计算租期结束时间。</p>
|
||||
<el-button type="primary" :loading="confirming" @click="handleConfirmReceive">确认已收到账号</el-button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -1,3 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import { fetchOrders, type Order } from '@/api/orders'
|
||||
|
||||
const loading = ref(false)
|
||||
const orders = ref<Order[]>([])
|
||||
|
||||
onMounted(loadOrders)
|
||||
|
||||
async function loadOrders() {
|
||||
loading.value = true
|
||||
try {
|
||||
orders.value = await fetchOrders()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<div class="page-header">
|
||||
@@ -5,5 +25,21 @@
|
||||
<h1>我的订单</h1>
|
||||
<p>跟踪待交接、租赁中、待归还、申诉中和已完成订单。</p>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="loading" class="table-panel" :data="orders">
|
||||
<el-table-column prop="order_no" label="订单号" min-width="210" />
|
||||
<el-table-column prop="title" label="账号" min-width="180" />
|
||||
<el-table-column prop="rent_hours" label="租期" width="90" />
|
||||
<el-table-column prop="rent_amount" label="租金" width="100" />
|
||||
<el-table-column prop="deposit_amount" label="押金" width="100" />
|
||||
<el-table-column prop="status" label="状态" width="140" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<RouterLink :to="`/orders/${row.id}`">
|
||||
<el-button size="small">详情</el-button>
|
||||
</RouterLink>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import { fetchListing, type Listing } from '@/api/listings'
|
||||
import { createOrder } from '@/api/orders'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const ordering = ref(false)
|
||||
const rentHours = ref(1)
|
||||
const listing = ref<Listing | null>(null)
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -16,6 +21,28 @@ onMounted(async () => {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
async function handleCreateOrder() {
|
||||
if (!listing.value) return
|
||||
ordering.value = true
|
||||
try {
|
||||
const order = await createOrder(listing.value.id, rentHours.value)
|
||||
ElMessage.success('订单已创建，账号已锁定')
|
||||
await router.push(`/orders/${order.id}`)
|
||||
} catch (error) {
|
||||
ElMessage.error(readError(error, '下单失败'))
|
||||
} finally {
|
||||
ordering.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function readError(error: unknown, fallback: string) {
|
||||
if (typeof error === 'object' && error && 'response' in error) {
|
||||
const response = (error as { response?: { data?: { message?: string } } }).response
|
||||
return response?.data?.message || fallback
|
||||
}
|
||||
return fallback
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -44,5 +71,17 @@ onMounted(async () => {
|
||||
<strong>{{ listing.min_rent_hours }}-{{ listing.max_rent_hours }} 小时</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="listing" class="order-panel">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="租用时长">
|
||||
<el-input-number v-model="rentHours" :min="listing.min_rent_hours" :max="listing.max_rent_hours" />
|
||||
</el-form-item>
|
||||
<p>
|
||||
预计租金：¥{{ (listing.price_hourly * rentHours).toFixed(2) }}，押金：¥{{ listing.deposit_amount }}
|
||||
</p>
|
||||
<el-button type="primary" :loading="ordering" @click="handleCreateOrder">立即下单并锁定账号</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user