矿机租赁系统代码更新
This commit is contained in:
94
power_leasing/src/views/account/SellerOrders.vue
Normal file
94
power_leasing/src/views/account/SellerOrders.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="orders-page">
|
||||
<h2 class="title">已售出订单</h2>
|
||||
<el-tabs v-model="active" @tab-click="handleTabClick">
|
||||
<el-tab-pane label="订单进行中" name="7">
|
||||
<order-list :items="orders[7]" :show-checkout="false" empty-text="暂无进行中的订单" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="订单已完成" name="8">
|
||||
<order-list :items="orders[8]" :show-checkout="false" empty-text="暂无已完成的订单" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 卖家侧订单列表页(个人中心)
|
||||
* - 与买家 orders.vue 结构一致,接口改为 getOrdersByStatusForSeller
|
||||
* - 标签状态:7 订单进行中;8 订单已完成
|
||||
*/
|
||||
import { getOrdersByStatusForSeller } from '../../api/order'
|
||||
import OrderList from './OrderList.vue'
|
||||
|
||||
export default {
|
||||
name: 'AccountSellerOrders',
|
||||
components: { OrderList },
|
||||
data() {
|
||||
return {
|
||||
active: '7',
|
||||
orders: { 7: [], 8: [] },
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const urlStatus = this.$route && this.$route.query && this.$route.query.status ? String(this.$route.query.status) : null
|
||||
const savedStatus = localStorage.getItem('sellerOrderListActiveTab')
|
||||
const initial = urlStatus || savedStatus || '7'
|
||||
this.active = initial
|
||||
this.fetchOrders(initial)
|
||||
},
|
||||
methods: {
|
||||
handleTabClick(tab) {
|
||||
const name = tab && tab.name ? String(tab.name) : this.active
|
||||
try {
|
||||
localStorage.setItem('sellerOrderListActiveTab', name)
|
||||
} catch (e) {}
|
||||
this.fetchOrders(name)
|
||||
},
|
||||
async fetchOrders(status) {
|
||||
const key = String(status)
|
||||
try {
|
||||
this.loading = true
|
||||
const res = await getOrdersByStatusForSeller({ status: Number(status) })
|
||||
const payload = (res && res.data) != null ? res.data : res
|
||||
const list = Array.isArray(payload)
|
||||
? payload
|
||||
: (Array.isArray(payload && payload.rows) ? payload.rows : [])
|
||||
this.$set(this.orders, key, list)
|
||||
} catch (e) {
|
||||
console.error('获取卖家订单失败', e)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.orders-page { padding: 12px; }
|
||||
.title { margin: 0 0 12px 0; font-weight: 600; color: #2c3e50; }
|
||||
.empty { color: #888; padding: 24px; text-align: center; }
|
||||
.order-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.order-card { border: 1px solid #eee; border-radius: 8px; padding: 0; background: #fff; overflow: hidden; }
|
||||
.order-header { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px; cursor: pointer; position: relative; }
|
||||
.order-header:focus { outline: 2px solid #409eff; outline-offset: -2px; }
|
||||
.order-header.is-open { background: #fafafa; }
|
||||
.header-row { display: flex; gap: 8px; line-height: 1.8; align-items: center; }
|
||||
.chevron { position: absolute; right: 12px; top: 12px; width: 10px; height: 10px; border-right: 2px solid #666; border-bottom: 2px solid #666; transform: rotate(-45deg); transition: transform 0.2s ease; }
|
||||
.chevron.chevron-open { transform: rotate(45deg); }
|
||||
.order-details { border-top: 1px solid #eee; padding: 12px; }
|
||||
.machine-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.machine-card { border: 1px dashed #e2e2e2; border-radius: 6px; padding: 10px; background: #fff; }
|
||||
.row { display: flex; gap: 8px; line-height: 1.8; }
|
||||
.label { color: #666; }
|
||||
.value { color: #333; }
|
||||
.value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; word-break: break-all; }
|
||||
.value.strong { font-weight: 700; color: #e74c3c; }
|
||||
@media (max-width: 960px) {
|
||||
.order-list { grid-template-columns: 1fr; }
|
||||
.order-header { grid-template-columns: 1fr; }
|
||||
.machine-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user