117 lines
4.6 KiB
Vue
117 lines
4.6 KiB
Vue
<template>
|
|
<div class="orders-page">
|
|
<div class="table-card">
|
|
<el-table :data="orders" style="width: 100%">
|
|
<el-table-column prop="id" label="ID" width="80" />
|
|
<el-table-column prop="total_amount" label="金额" width="100"><template #default="{ row }">¥{{ row.total_amount }}</template></el-table-column>
|
|
<el-table-column prop="status" label="状态" width="120">
|
|
<template #default="{ row }">
|
|
<el-tag :type="statusType(row.status)">{{ statusText(row.status) }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" min-width="180">
|
|
<template #default="{ row }">{{ formatDate(row.created_at) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200">
|
|
<template #default="{ row }">
|
|
<el-button v-if="row.status === 'pending_confirm'" link type="primary" size="small" @click="confirmOrder(row.id)">{{ $t('supplier.confirmOrder') }}</el-button>
|
|
<el-button v-if="row.status === 'pending_ship'" link type="success" size="small" @click="openShip(row)">{{ $t('supplier.shipOrder') }}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<el-dialog v-model="showShip" :title="$t('supplier.shipOrder')" width="500px">
|
|
<el-form :model="shipForm" label-width="140px">
|
|
<el-form-item :label="$t('order.trackingNumber')"><el-input v-model="shipForm.tracking_number" /></el-form-item>
|
|
<el-form-item :label="$t('supplier.shippingPhoto')"><el-input v-model="shipForm.shipping_photo" placeholder="URL" /></el-form-item>
|
|
<el-form-item :label="$t('supplier.expressPhoto')"><el-input v-model="shipForm.express_photo" placeholder="URL" /></el-form-item>
|
|
<el-form-item :label="$t('supplier.customsPhoto')"><el-input v-model="shipForm.customs_photo" placeholder="URL" /></el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="showShip = false">{{ $t('common.cancel') }}</el-button>
|
|
<el-button type="primary" @click="shipOrder">{{ $t('supplier.shipOrder') }}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { supplierApi } from '../../api'
|
|
|
|
const orders = ref<any[]>([])
|
|
const showShip = ref(false)
|
|
const shipOrderId = ref(0)
|
|
const shipForm = reactive({ tracking_number: '', shipping_photo: '', express_photo: '', customs_photo: '' })
|
|
|
|
const statusMap: Record<string, string> = {
|
|
pending_payment: '待支付', pending_confirm: '待确认', pending_ship: '待发货',
|
|
shipped: '已发货', completed: '已完成', refunding: '退款中', refunded: '已退款', cancelled: '已取消',
|
|
}
|
|
const statusTypeMap: Record<string, string> = {
|
|
pending_payment: 'warning', pending_confirm: 'info', pending_ship: 'info',
|
|
shipped: 'primary', completed: 'success', refunding: 'danger', refunded: 'danger', cancelled: 'info',
|
|
}
|
|
function statusText(s: string) { return statusMap[s] || s }
|
|
function statusType(s: string) { return statusTypeMap[s] || 'info' }
|
|
|
|
function formatDate(date: string) {
|
|
if (!date) return '-'
|
|
const d = new Date(date)
|
|
const year = d.getFullYear()
|
|
const month = String(d.getMonth() + 1).padStart(2, '0')
|
|
const day = String(d.getDate()).padStart(2, '0')
|
|
const hours = String(d.getHours()).padStart(2, '0')
|
|
const minutes = String(d.getMinutes()).padStart(2, '0')
|
|
return `${year}-${month}-${day} ${hours}:${minutes}`
|
|
}
|
|
|
|
async function fetchOrders() {
|
|
try {
|
|
const res: any = await supplierApi.getOrders()
|
|
orders.value = res.data || []
|
|
} catch {
|
|
ElMessage.error('获取订单失败')
|
|
}
|
|
}
|
|
|
|
async function confirmOrder(id: number) {
|
|
try {
|
|
await supplierApi.confirmOrder(id)
|
|
ElMessage.success('订单已确认')
|
|
await fetchOrders()
|
|
} catch {
|
|
ElMessage.error('确认失败')
|
|
}
|
|
}
|
|
|
|
function openShip(row: any) {
|
|
shipOrderId.value = row.id
|
|
showShip.value = true
|
|
}
|
|
|
|
async function shipOrder() {
|
|
if (!shipForm.tracking_number.trim()) {
|
|
ElMessage.warning('请输入快递单号')
|
|
return
|
|
}
|
|
try {
|
|
await supplierApi.shipOrder(shipOrderId.value, shipForm)
|
|
ElMessage.success('发货成功')
|
|
showShip.value = false
|
|
Object.assign(shipForm, { tracking_number: '', shipping_photo: '', express_photo: '', customs_photo: '' })
|
|
await fetchOrders()
|
|
} catch {
|
|
ElMessage.error('发货失败')
|
|
}
|
|
}
|
|
|
|
onMounted(fetchOrders)
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.orders-page { padding: 0; }
|
|
.table-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 20px; }
|
|
</style>
|