You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
529 lines
12 KiB
529 lines
12 KiB
<template>
|
|
<view class="content">
|
|
<!-- 顶部搜索和筛选 -->
|
|
<view class="head flex-sb sticky box-shadow-light">
|
|
<view class="flex" @click="showFilter">
|
|
<view class="mr5">
|
|
<uv-icon v-if="showFilterIcon" name="funnel" size="24" color="#666"></uv-icon>
|
|
</view>
|
|
<view v-if="showFilterText" style="font-size:28rpx">筛选</view>
|
|
<input
|
|
:class="['search-input', searchActive && 'active']"
|
|
maxlength="10"
|
|
type="text"
|
|
confirm-type="search"
|
|
@confirm="onSearch"
|
|
v-model="searchValue"
|
|
@input="onInput"
|
|
placeholder="搜索区域订单"
|
|
/>
|
|
</view>
|
|
<view class="flex status">
|
|
<view :class="[allActive && 'active']" @click="setAllStatus">全部</view>
|
|
<view :class="[pendingActive && 'active']" @click="setPendingStatus">待审核</view>
|
|
<view :class="[approvedActive && 'active']" @click="setApprovedStatus">已通过</view>
|
|
<view :class="[rejectedActive && 'active']" @click="setRejectedStatus">已拒绝</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计信息 -->
|
|
<view class="stats-container">
|
|
<view class="stats-item">
|
|
<view class="stats-number">{{ totalOrders }}</view>
|
|
<view class="stats-label">总订单数</view>
|
|
</view>
|
|
<view class="stats-item">
|
|
<view class="stats-number">{{ pendingOrders }}</view>
|
|
<view class="stats-label">待审核</view>
|
|
</view>
|
|
<view class="stats-item">
|
|
<view class="stats-number">{{ todayOrders }}</view>
|
|
<view class="stats-label">今日订单</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 全部订单列表 -->
|
|
<view v-if="showAllList" class="m20">
|
|
<view v-if="allEmpty" class="re-empty">
|
|
<view>暂无数据</view>
|
|
</view>
|
|
<view v-for="(item, index) in allOrdersList" :key="index" class="b-relative item-card mb20">
|
|
<view class="m10 flex-sb">
|
|
<view class="ellipsis">{{ item.title }}</view>
|
|
<view class="item-time">{{ item.time }}</view>
|
|
</view>
|
|
<view>企业：{{ item.company }}</view>
|
|
<view>区域：{{ item.region }}</view>
|
|
<view>数量：{{ item.quantity }}m³</view>
|
|
<view :class="['item-status', item.status]">{{ getStatusText(item.status) }}</view>
|
|
<view class="item-button" @click="viewOrder(item)">查看</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 待审核订单列表 -->
|
|
<view v-if="showPendingList" class="m20">
|
|
<view v-if="pendingEmpty" class="re-empty">
|
|
<view>暂无数据</view>
|
|
</view>
|
|
<view v-for="(item, index) in pendingOrdersList" :key="index" class="b-relative item-card mb20">
|
|
<view class="m10 flex-sb">
|
|
<view class="ellipsis">{{ item.title }}</view>
|
|
<view class="item-time">{{ item.time }}</view>
|
|
</view>
|
|
<view>企业：{{ item.company }}</view>
|
|
<view>区域：{{ item.region }}</view>
|
|
<view>数量：{{ item.quantity }}m³</view>
|
|
<view class="item-status pending">待审核</view>
|
|
<view class="action-buttons">
|
|
<view class="approve-btn" @click="approveOrder(item)">通过</view>
|
|
<view class="reject-btn" @click="rejectOrder(item)">拒绝</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 已通过订单列表 -->
|
|
<view v-if="showApprovedList" class="m20">
|
|
<view v-if="approvedEmpty" class="re-empty">
|
|
<view>暂无数据</view>
|
|
</view>
|
|
<view v-for="(item, index) in approvedOrdersList" :key="index" class="b-relative item-card mb20">
|
|
<view class="m10 flex-sb">
|
|
<view class="ellipsis">{{ item.title }}</view>
|
|
<view class="item-time">{{ item.time }}</view>
|
|
</view>
|
|
<view>企业：{{ item.company }}</view>
|
|
<view>区域：{{ item.region }}</view>
|
|
<view>数量：{{ item.quantity }}m³</view>
|
|
<view>审核时间：{{ item.approveTime }}</view>
|
|
<view class="item-status approved">已通过</view>
|
|
<view class="item-button" @click="viewOrder(item)">查看</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 已拒绝订单列表 -->
|
|
<view v-if="showRejectedList" class="m20">
|
|
<view v-if="rejectedEmpty" class="re-empty">
|
|
<view>暂无数据</view>
|
|
</view>
|
|
<view v-for="(item, index) in rejectedOrdersList" :key="index" class="b-relative item-card mb20">
|
|
<view class="m10 flex-sb">
|
|
<view class="ellipsis">{{ item.title }}</view>
|
|
<view class="item-time">{{ item.time }}</view>
|
|
</view>
|
|
<view>企业：{{ item.company }}</view>
|
|
<view>区域：{{ item.region }}</view>
|
|
<view>数量：{{ item.quantity }}m³</view>
|
|
<view>拒绝原因：{{ item.rejectReason }}</view>
|
|
<view class="item-status rejected">已拒绝</view>
|
|
<view class="item-button" @click="viewOrder(item)">查看</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'RegionHall',
|
|
data() {
|
|
return {
|
|
showFilterIcon: true,
|
|
showFilterText: true,
|
|
searchActive: false,
|
|
searchValue: '',
|
|
allActive: true,
|
|
pendingActive: false,
|
|
approvedActive: false,
|
|
rejectedActive: false,
|
|
showAllList: true,
|
|
showPendingList: false,
|
|
showApprovedList: false,
|
|
showRejectedList: false,
|
|
allEmpty: false,
|
|
pendingEmpty: false,
|
|
approvedEmpty: false,
|
|
rejectedEmpty: false,
|
|
// 统计数据
|
|
totalOrders: 156,
|
|
pendingOrders: 8,
|
|
todayOrders: 23,
|
|
// 全部订单
|
|
allOrdersList: [
|
|
{
|
|
id: 1,
|
|
title: '雨花区建设项目混凝土需求',
|
|
time: '2024-01-15 08:00',
|
|
company: '长沙建设集团',
|
|
region: '雨花区',
|
|
quantity: '200',
|
|
status: 'approved'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '岳麓区商业中心项目',
|
|
time: '2024-01-15 10:00',
|
|
company: '湖南建工',
|
|
region: '岳麓区',
|
|
quantity: '150',
|
|
status: 'pending'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '开福区住宅项目',
|
|
time: '2024-01-14 14:00',
|
|
company: '中建五局',
|
|
region: '开福区',
|
|
quantity: '300',
|
|
status: 'rejected'
|
|
}
|
|
],
|
|
// 待审核订单
|
|
pendingOrdersList: [
|
|
{
|
|
id: 2,
|
|
title: '岳麓区商业中心项目',
|
|
time: '2024-01-15 10:00',
|
|
company: '湖南建工',
|
|
region: '岳麓区',
|
|
quantity: '150'
|
|
}
|
|
],
|
|
// 已通过订单
|
|
approvedOrdersList: [
|
|
{
|
|
id: 1,
|
|
title: '雨花区建设项目混凝土需求',
|
|
time: '2024-01-15 08:00',
|
|
company: '长沙建设集团',
|
|
region: '雨花区',
|
|
quantity: '200',
|
|
approveTime: '2024-01-15 09:30'
|
|
}
|
|
],
|
|
// 已拒绝订单
|
|
rejectedOrdersList: [
|
|
{
|
|
id: 3,
|
|
title: '开福区住宅项目',
|
|
time: '2024-01-14 14:00',
|
|
company: '中建五局',
|
|
region: '开福区',
|
|
quantity: '300',
|
|
rejectReason: '区域配额已满'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
showFilter() {
|
|
console.log('显示筛选');
|
|
},
|
|
onSearch() {
|
|
console.log('搜索:', this.searchValue);
|
|
},
|
|
onInput() {
|
|
this.searchActive = this.searchValue.length > 0;
|
|
},
|
|
setAllStatus() {
|
|
this.allActive = true;
|
|
this.pendingActive = false;
|
|
this.approvedActive = false;
|
|
this.rejectedActive = false;
|
|
this.showAllList = true;
|
|
this.showPendingList = false;
|
|
this.showApprovedList = false;
|
|
this.showRejectedList = false;
|
|
},
|
|
setPendingStatus() {
|
|
this.allActive = false;
|
|
this.pendingActive = true;
|
|
this.approvedActive = false;
|
|
this.rejectedActive = false;
|
|
this.showAllList = false;
|
|
this.showPendingList = true;
|
|
this.showApprovedList = false;
|
|
this.showRejectedList = false;
|
|
},
|
|
setApprovedStatus() {
|
|
this.allActive = false;
|
|
this.pendingActive = false;
|
|
this.approvedActive = true;
|
|
this.rejectedActive = false;
|
|
this.showAllList = false;
|
|
this.showPendingList = false;
|
|
this.showApprovedList = true;
|
|
this.showRejectedList = false;
|
|
},
|
|
setRejectedStatus() {
|
|
this.allActive = false;
|
|
this.pendingActive = false;
|
|
this.approvedActive = false;
|
|
this.rejectedActive = true;
|
|
this.showAllList = false;
|
|
this.showPendingList = false;
|
|
this.showApprovedList = false;
|
|
this.showRejectedList = true;
|
|
},
|
|
viewOrder(item) {
|
|
uni.navigateTo({
|
|
url: `/pages_order/order/orderDetail?id=${item.id}`
|
|
});
|
|
},
|
|
approveOrder(item) {
|
|
uni.showModal({
|
|
title: '确认通过',
|
|
content: `确定通过订单：${item.title} 吗？`,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.showToast({
|
|
title: '审核通过',
|
|
icon: 'success'
|
|
});
|
|
// 移除待审核列表中的订单
|
|
const index = this.pendingOrdersList.findIndex(order => order.id === item.id);
|
|
if (index > -1) {
|
|
this.pendingOrdersList.splice(index, 1);
|
|
}
|
|
// 更新统计数据
|
|
this.pendingOrders--;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
rejectOrder(item) {
|
|
uni.showModal({
|
|
title: '确认拒绝',
|
|
content: `确定拒绝订单：${item.title} 吗？`,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.showToast({
|
|
title: '已拒绝',
|
|
icon: 'success'
|
|
});
|
|
// 移除待审核列表中的订单
|
|
const index = this.pendingOrdersList.findIndex(order => order.id === item.id);
|
|
if (index > -1) {
|
|
this.pendingOrdersList.splice(index, 1);
|
|
}
|
|
// 更新统计数据
|
|
this.pendingOrders--;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getStatusText(status) {
|
|
switch(status) {
|
|
case 'pending': return '待审核';
|
|
case 'approved': return '已通过';
|
|
case 'rejected': return '已拒绝';
|
|
default: return '未知状态';
|
|
}
|
|
},
|
|
// 供外部调用的方法
|
|
loadPage() {
|
|
console.log('区域管理员订单页面刷新');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
padding: 20rpx;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.head {
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.sticky {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.box-shadow-light {
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-sb {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.mr5 {
|
|
margin-right: 5rpx;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
height: 60rpx;
|
|
padding: 0 20rpx;
|
|
border: 1rpx solid #e0e0e0;
|
|
border-radius: 30rpx;
|
|
margin-left: 20rpx;
|
|
font-size: 28rpx;
|
|
|
|
&.active {
|
|
border-color: #007AFF;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
margin-top: 20rpx;
|
|
gap: 20rpx;
|
|
|
|
view {
|
|
padding: 12rpx 20rpx;
|
|
border-radius: 25rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
background-color: #f8f8f8;
|
|
transition: all 0.3s;
|
|
|
|
&.active {
|
|
color: #007AFF;
|
|
background-color: #e6f3ff;
|
|
border: 1rpx solid #007AFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stats-container {
|
|
display: flex;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
margin: 0 20rpx 20rpx;
|
|
padding: 30rpx 0;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stats-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
.stats-number {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #007AFF;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.stats-label {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.m20 {
|
|
margin: 20rpx;
|
|
}
|
|
|
|
.mb20 {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.m10 {
|
|
margin: 10rpx;
|
|
}
|
|
|
|
.item-card {
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
padding: 20rpx;
|
|
position: relative;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.ellipsis {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.item-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.item-status {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 22rpx;
|
|
color: #fff;
|
|
|
|
&.pending {
|
|
background-color: #ff9500;
|
|
}
|
|
|
|
&.approved {
|
|
background-color: #34c759;
|
|
}
|
|
|
|
&.rejected {
|
|
background-color: #ff3b30;
|
|
}
|
|
}
|
|
|
|
.item-button {
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
right: 20rpx;
|
|
padding: 10rpx 20rpx;
|
|
background-color: #007AFF;
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.action-buttons {
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
right: 20rpx;
|
|
display: flex;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.approve-btn {
|
|
padding: 10rpx 20rpx;
|
|
background-color: #34c759;
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.reject-btn {
|
|
padding: 10rpx 20rpx;
|
|
background-color: #ff3b30;
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.re-empty {
|
|
text-align: center;
|
|
padding: 100rpx 0;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.b-relative {
|
|
position: relative;
|
|
}
|
|
</style>
|