232 lines
9.2 KiB
Vue
232 lines
9.2 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<!-- 导航栏 -->
|
||
<view class="navbar">
|
||
<view class="nav-tabs">
|
||
<view class="tab-item active">全部订单</view>
|
||
<!-- <view class="tab-item">只看订单</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索与筛选区 -->
|
||
<view class="search-section">
|
||
<view class="search-box">
|
||
<!-- <text class="search-icon">🔍</text> -->
|
||
|
||
<!-- 选择订单号 -->
|
||
<block v-if="filterType === 'orderNo'">
|
||
<input class="search-input" v-model="queryParams.orderNo" placeholder="请输入订单号" @confirm="handleSearch" />
|
||
</block>
|
||
|
||
<!-- 选择条码 -->
|
||
<block v-else-if="filterType === 'barcode'">
|
||
<input class="search-input" v-model="queryParams.productBarCode" placeholder="请输入条码" @confirm="handleSearch" />
|
||
</block>
|
||
|
||
<!-- 选择支付状态 -->
|
||
<block v-else-if="filterType === 'payStatus'">
|
||
<picker class="search-input picker-input" mode="selector" :range="payStatusOptions" range-key="label" @change="onPayStatusChange">
|
||
<view class="picker-text">
|
||
{{ currentPayStatusLabel || '请选择支付状态' }}
|
||
</view>
|
||
</picker>
|
||
</block>
|
||
|
||
<!-- 重置 -->
|
||
<text class="reset-icon" @click="handleReset">↺</text>
|
||
<!-- 点击弹出下拉单选框选择类型 -->
|
||
<text class="split-icon" @click="showFilterTypeSelector">☰</text>
|
||
</view>
|
||
<view class="filter-btn" @click="handleSearch">
|
||
<!-- <text class="filter-icon">🔍</text> -->
|
||
<text class="filter-text">搜索</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区 -->
|
||
<scroll-view scroll-y class="content" @scrolltolower="loadMore">
|
||
<block v-if="orderList.length > 0">
|
||
<!-- 订单列表：展示 订单号、支付状态、支付金额、支付时间 -->
|
||
<view class="order-item" v-for="(item, index) in orderList" :key="item.id" @click="goToDetail(item)">
|
||
<view class="order-header">
|
||
<text class="order-no">订单号：{{ item.orderNo || '--' }}</text>
|
||
<text :class="['pay-status', item.payStatus === 2 ? 'status-success' : item.payStatus === 3 ? 'status-error' : 'status-warning']">
|
||
{{ getPayStatusText(item.payStatus) }}
|
||
</text>
|
||
</view>
|
||
<view class="order-body">
|
||
<view class="info-row">
|
||
<text class="info-label">支付金额：</text>
|
||
<text class="info-value amount">¥{{ item.payAmount || '0.00' }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">支付时间：</text>
|
||
<text class="info-value">{{ item.payTime || '--' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 暂无数据状态 -->
|
||
<view class="empty-card" v-else>
|
||
<view class="empty-icon-wrapper">
|
||
<view class="empty-icon">📄</view>
|
||
</view>
|
||
<text class="empty-text">暂无数据</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getOrderList } from '@/api/back';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 筛选类型：orderNo(订单号), barcode(条码), payStatus(支付状态)
|
||
filterType: 'orderNo',
|
||
currentPayStatusLabel: '',
|
||
|
||
payStatusOptions: [
|
||
{ label: '未支付', value: 0 },
|
||
{ label: '支付中', value: 1 },
|
||
{ label: '已支付', value: 2 },
|
||
{ label: '支付失败', value: 3 },
|
||
{ label: '已退款', value: 4 }
|
||
],
|
||
|
||
queryParams: {
|
||
storeId: '2', // 门店id必传
|
||
orderNo: '',
|
||
productBarCode: '',
|
||
payStatus: ''
|
||
},
|
||
|
||
orderList: []
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.fetchOrderList();
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
|
||
// 点击split-icon弹出单选下拉框
|
||
showFilterTypeSelector() {
|
||
const types = ['orderNo', 'barcode', 'payStatus'];
|
||
const labels = ['订单号', '条码', '支付状态'];
|
||
const itemList = labels.map((label, i) => (types[i] === this.filterType ? '✓ ' : '') + label);
|
||
uni.showActionSheet({
|
||
itemList,
|
||
success: (res) => {
|
||
this.filterType = types[res.tapIndex];
|
||
// 重置其他参数
|
||
this.queryParams.orderNo = '';
|
||
this.queryParams.productBarCode = '';
|
||
this.queryParams.payStatus = '';
|
||
this.currentPayStatusLabel = '';
|
||
}
|
||
});
|
||
},
|
||
|
||
onPayStatusChange(e) {
|
||
const index = e.detail.value;
|
||
const selectedOption = this.payStatusOptions[index];
|
||
this.currentPayStatusLabel = selectedOption.label;
|
||
this.queryParams.payStatus = selectedOption.value;
|
||
},
|
||
|
||
handleSearch() {
|
||
this.fetchOrderList();
|
||
},
|
||
|
||
handleReset() {
|
||
this.filterType = 'orderNo';
|
||
this.currentPayStatusLabel = '';
|
||
this.queryParams.orderNo = '';
|
||
this.queryParams.productBarCode = '';
|
||
this.queryParams.payStatus = '';
|
||
this.fetchOrderList();
|
||
},
|
||
|
||
getPayStatusText(status) {
|
||
const map = { 0: '未支付', 1: '支付中', 2: '已支付', 3: '支付失败', 4: '已退款' };
|
||
return map[status] ?? '未知状态';
|
||
},
|
||
|
||
// 按照项目要求调取接口
|
||
fetchOrderList() {
|
||
uni.showLoading({ title: '加载中...' });
|
||
|
||
const data = { storeId: this.queryParams.storeId };
|
||
if (this.queryParams.orderNo) data.orderNo = this.queryParams.orderNo;
|
||
if (this.queryParams.productBarCode) data.productBarCode = this.queryParams.productBarCode;
|
||
if (this.queryParams.payStatus !== '') data.payStatus = this.queryParams.payStatus;
|
||
|
||
getOrderList(data).then(res => {
|
||
if (res.code === 200) {
|
||
this.orderList = res.data || [];
|
||
} else {
|
||
uni.showToast({ title: res.msg || '获取失败', icon: 'none' });
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({ title: '网络请求失败', icon: 'none' });
|
||
}).finally(() => {
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
|
||
loadMore() {
|
||
},
|
||
|
||
goToDetail(orderObj) {
|
||
const itemsStr = encodeURIComponent(JSON.stringify(orderObj.orderItems || []));
|
||
uni.navigateTo({
|
||
url: `/package_a/back/backDetail?items=${itemsStr}`
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page-container { width: 100%; min-height: 100vh; background: #f5f5f5; display: flex; flex-direction: column; }
|
||
.navbar { height: 48px; background: #e62318; color: white; display: flex; align-items: center; padding: 0 16px; position: relative; }
|
||
.nav-tabs { flex: 1; display: flex; justify-content: center; }
|
||
.tab-item { font-size: 17px; padding: 0 8px; position: relative; font-weight: bold; }
|
||
.tab-item.active::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 3px; background: white; border-radius: 2px; }
|
||
|
||
.search-section { background: white; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
|
||
.search-box { flex: 1; height: 36px; background: #f5f5f5; border-radius: 6px; border: 1px solid #e5e5e5; display: flex; align-items: center; padding: 0 12px; }
|
||
.search-icon { font-size: 16px; color: #999; margin-right: 8px; }
|
||
.search-input { flex: 1; font-size: 15px; color: #333; background: transparent; border: none; height: 100%; }
|
||
.picker-input { display: flex; align-items: center; }
|
||
.picker-text { line-height: 36px; color: #666; }
|
||
.split-icon { font-size: 18px; color: #666; margin-left: 8px; padding: 4px; display: flex; align-items: center; }
|
||
.reset-icon { font-size: 20px; color: #999; margin-left: 4px; padding: 4px; display: flex; align-items: center; line-height: 1; }
|
||
.filter-btn { height: 36px; background: #e62318; border-radius: 6px; padding: 0 16px; display: flex; align-items: center; gap: 4px; font-size: 15px; color: #fff; }
|
||
.reset-btn { height: 36px; background: #fff; border-radius: 6px; padding: 0 16px; display: flex; align-items: center; font-size: 15px; color: #666; border: 1px solid #ddd; }
|
||
.filter-icon { font-size: 14px; }
|
||
|
||
.content { flex: 1; padding: 12px; box-sizing: border-box; }
|
||
.order-item { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
|
||
.order-header { display: flex; justify-content: space-between; border-bottom: 1px solid #f0f0f0; padding-bottom: 12px; margin-bottom: 12px; }
|
||
.order-no { font-size: 14px; color: #333; font-weight: bold; }
|
||
.pay-status { font-size: 13px; }
|
||
.status-warning { color: #f29c1f; }
|
||
.status-success { color: #52c41a; }
|
||
.status-error { color: #e62318; }
|
||
.order-body { display: flex; flex-direction: column; gap: 8px; }
|
||
.info-row { display: flex; justify-content: space-between; align-items: center; }
|
||
.info-label { font-size: 13px; color: #666; }
|
||
.info-value { font-size: 13px; color: #333; }
|
||
.amount { color: #e62318; font-weight: bold; font-size: 16px; }
|
||
|
||
.empty-card { background: transparent; padding: 100px 0; display: flex; flex-direction: column; align-items: center; }
|
||
.empty-icon-wrapper { width: 80px; height: 80px; background: #e8e8e8; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
|
||
.empty-icon { font-size: 32px; color: #999; }
|
||
.empty-text { font-size: 16px; color: #999; }
|
||
</style> |