huasheng-erp-order-system-applet/pages/order/list.vue

<template>
	<view class="list-page-container">
		<!-- 1. 自定义顶部导航：彻底抹除红框1的原生蓝线 -->
		<view class="custom-nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-icon" @click="goBack">
					<view class="arrow-left"></view>
				</view>
				<text class="nav-title">全部订单</text>
				<view class="placeholder-right"></view>
			</view>
		</view>

		<!-- 2. 分类切换：使用翻译位移，彻底消除红框2残影 -->
		<view class="tabs-fixed">
			<view class="tabs-box">
				<view v-for="(tab, index) in tabs" :key="index" 
					class="tab-item" 
					:class="{active: currentTab === index}"
					@click="switchTab(index)">
					<text class="tab-txt">{{tab}}</text>
				</view>
				<!-- 指示器：只负责位移，不负责显隐，彻底杜绝虚影 -->
				<view class="indicator-track">
					<view class="indicator-bar" :style="{transform: 'translateX(' + (currentTab * 100) + '%)'}">
						<view class="bar-inner"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 3. 固定高度的滚动区：强制启用滚动，解决不能滑动问题 -->
		<scroll-view 
			scroll-y 
			class="order-scroll-view" 
			:style="{ height: scrollHeight }"
			@scrolltolower="onReachEnd"
			:refresher-enabled="false"
			:show-scrollbar="false">
			
			<view class="order-list-inner">
				<view class="order-card" v-for="(item, index) in displayList" :key="index" @click="goDetail(item)">
					<view class="card-head">
						<text class="order-id">单号：{{item.orderNo}}</text>
						<view class="status-badge" :class="item.statusType">{{item.statusName}}</view>
					</view>
					<view class="card-body">
						<view class="model-row" v-for="(model, mIdx) in item.models.slice(0, 2)" :key="mIdx">
							<text class="m-type">{{model.type}}</text>
							<text class="m-spec">{{model.surface}} | {{model.length}}mm</text>
							<text class="m-count">{{model.count}} 支</text>
						</view>
						<view class="more-hint" v-if="item.models.length > 2">
							<text>查看更多 {{item.models.length - 2}} 个型号...</text>
						</view>
						<view class="total-summary">
							<text class="summary-label">共计：</text>
							<text class="summary-val">{{item.models.length}}</text>
							<text class="summary-unit">个型号</text>
							<view class="summary-split"></view>
							<text class="summary-val highlight">{{item.totalCount}}</text>
							<text class="summary-unit">支</text>
						</view>
					</view>
					<view class="card-foot">
						<text class="time">{{item.time}}</text>
						<view class="btns">
							<view class="btn-cancel" v-if="item.status === 1" @click.stop="onCancel(item)">撤销</view>
							<view class="btn-view primary" @click.stop="goDetail(item)">订单详情</view>
						</view>
					</view>
				</view>

				<!-- 加载提示区 -->
				<view class="list-status-info" v-if="displayList.length > 0">
					<view class="loading-wrap" v-if="loading">
						<view class="load-dot"></view><text>排队加载中...</text>
					</view>
					<view class="nomore-wrap" v-if="noMore">
						<text class="nomore-line"></text>
						<text class="nomore-text">已加载全部数据</text>
						<text class="nomore-line"></text>
					</view>
				</view>

				<!-- 缺省态 -->
				<view class="empty-state" v-if="displayList.length === 0 && !loading">
					<image src="https://img.icons8.com/clouds/200/open-box.png" mode="aspectFit"></image>
					<text>暂无订单记录</text>
				</view>
				
				<view class="safe-bottom"></view>
			</view>
		</scroll-view>

		<!-- 底部菜单栏 -->
		<erp-tab-bar active="order"></erp-tab-bar>
	</view>
</template>

<script>
	import ErpTabBar from '@/components/erp-tab-bar/erp-tab-bar.vue';
	export default {
		components: {
			ErpTabBar
		},
		data() {
			return {
				statusBarHeight: 20,
				navBarHeight: 44,
				tabBarHeight: 50, // 对应 100rpx
				currentTab: 0,
				loading: false,
				noMore: false,
				tabs: ['全部', '待审核', '待签批', '生产中', '已完成'],
				allOrders: [
					{ 
						orderNo: 'ORD20240428001', 
						models: [
							{ type: 'TY0019', length: '6000', surface: '阳极氧化', count: '100' },
							{ type: 'TY0018', length: '6000', surface: 'PL坯料', count: '50' }
						],
						totalCount: 150,
						status: 1, statusName: '待审核', statusType: 'pending', time: '2024-04-28 10:20' 
					},
					{ 
						orderNo: 'ORD20240428002', 
						models: [
							{ type: 'TY0020', length: '5800', surface: '粉末喷涂', count: '80' }
						],
						totalCount: 80,
						status: 2, statusName: '待签批', statusType: 'process', time: '2024-04-28 09:15' 
					},
					{ 
						orderNo: 'ORD20240427088', 
						models: [
							{ type: 'TY0018', length: '6000', surface: 'PL坯料', count: '300' }
						],
						totalCount: 300,
						status: 4, statusName: '已完成', statusType: 'finish', time: '2024-04-27 15:40' 
					},
					{ 
						orderNo: 'ORD20240427045', 
						models: [
							{ type: 'TY0021', length: '3000', surface: '电泳涂漆', count: '50' },
							{ type: 'TY0022', length: '4000', surface: '木纹转印', count: '40' },
							{ type: 'TY0023', length: '5000', surface: '氟碳喷涂', count: '30' }
						],
						totalCount: 120,
						status: 3, statusName: '生产中', statusType: 'making', time: '2024-04-27 11:05' 
					}
				],
				displayList: []
			}
		},
		computed: {
			scrollHeight() {
				// 减去状态栏、导航栏、选项卡的高度
				return `calc(100vh - ${this.statusBarHeight + this.navBarHeight + this.tabBarHeight}px)`;
			}
		},
		onLoad(options) {
			const info = uni.getSystemInfoSync();
			this.statusBarHeight = info.statusBarHeight;
			// 修正选项卡高度（单位px）
			this.tabBarHeight = info.windowWidth / 750 * 110; 

			if (options.tab) this.currentTab = parseInt(options.tab);
			this.refresh();
		},
		methods: {
			goBack() { uni.navigateBack(); },
			switchTab(i) { this.currentTab = i; this.refresh(); },
			refresh() { this.displayList = []; this.noMore = false; this.loadData(); },
			onReachEnd() { if (!this.loading && !this.noMore) this.loadData(); },
			loadData() {
				this.loading = true;
				setTimeout(() => {
					let raw = this.currentTab === 0 ? this.allOrders : this.allOrders.filter(o => o.status === this.currentTab);
					this.displayList = [...this.displayList, ...raw];
					this.noMore = true; // 模拟一次性加载完演示数据
					this.loading = false;
				}, 500);
			},
			onCancel(item) {
				uni.showModal({
					title: '确认撤销',
					content: `确认要撤销订单：${item.orderNo} 吗？`,
					confirmColor: '#ff4d4f',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({ title: '撤销中' });
							setTimeout(() => {
								uni.hideLoading();
								uni.showToast({ title: '已撤销' });
								
								// 逻辑修复：修改状态而非移除
								const target = this.allOrders.find(o => o.orderNo === item.orderNo);
								if (target) {
									target.status = 0;
									target.statusName = '已撤销';
									target.statusType = 'expired';
								}
								// 再次过滤刷新当前视图
								this.refresh();
							}, 800);
						}
					}
				});
			},
			goDetail(item) {
				const dataStr = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/order/detail?data=${dataStr}`
				});
			}
		}
	}
</script>

<style scoped>
	/deep/ ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; }
	.list-page-container { width: 100vw; height: 100vh; background: #f8fafc; overflow: hidden; display: flex; flex-direction: column; }
	
	/* 1. 自定义导航栏：解决蓝线红框1 */
	.custom-nav-bar { background: #ffffff; width: 100%; flex-shrink: 0; }
	.nav-content { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 30rpx; }
	.back-icon { width: 60rpx; height: 44px; display: flex; align-items: center; }
	.arrow-left { width: 20rpx; height: 20rpx; border-left: 4rpx solid #333; border-bottom: 4rpx solid #333; transform: rotate(45deg); margin-left: 10rpx; }
	.nav-title { font-size: 34rpx; font-weight: bold; color: #1a1a1a; }
	.placeholder-right { width: 60rpx; }

	/* 2. 选项卡：解决残影红框2 */
	.tabs-fixed { background: #fff; width: 100%; flex-shrink: 0; border-bottom: 1rpx solid #f0f0f0; }
	.tabs-box { height: 110rpx; position: relative; display: flex; width: 100%; }
	.tab-item { flex: 1; display: flex; align-items: center; justify-content: center; z-index: 5; }
	.tab-txt { font-size: 28rpx; color: #888; transition: all 0.2s; }
	.tab-item.active .tab-txt { color: #C1001C; font-weight: bold; font-size: 32rpx; }
	
	/* 指示器轨道：通过位移消除虚影 */
	.indicator-track { position: absolute; bottom: 10rpx; left: 0; width: 100%; height: 6rpx; display: flex; }
	.indicator-bar { width: 20%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
	.bar-inner { width: 40rpx; height: 100%; background: #C1001C; border-radius: 6rpx; }

	/* 3. 滚动区：解决不可滑动问题 */
	.order-scroll-view { width: 100%; }
	.order-list-inner { padding: 30rpx; padding-bottom: 60rpx; }

	.order-card { background: #fff; border-radius: 24rpx; padding: 36rpx; margin-bottom: 30rpx; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.02); }
	.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; }
	.order-id { font-size: 28rpx; color: #1a1a1a; font-weight: bold; }
	.status-badge { font-size: 20rpx; padding: 4rpx 16rpx; border-radius: 8rpx; }
	.status-badge.pending { background: #FFF1F2; color: #C1001C; }
	.status-badge.expired { background: #f5f5f5; color: #999; }
	.status-badge.process { background: #fff7e6; color: #ffa940; }
	.status-badge.making { background: #e6fffb; color: #36cfc9; }
	/* 已撤销样式 */
	.status-badge.expired { background: #f5f5f5; color: #999; }
	.status-badge.finish { background: #f6ffed; color: #52c41a; }

	.card-body { padding: 24rpx 0; border-top: 1rpx dashed #f0f0f0; margin-bottom: 24rpx; }
	.model-row { display: flex; align-items: center; margin-bottom: 12rpx; font-size: 24rpx; }
	.m-type { font-size: 28rpx; font-weight: bold; color: #333; width: 140rpx; }
	.m-spec { color: #888; flex: 1; padding: 0 20rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.m-count { color: #555; width: 100rpx; text-align: right; font-weight: 500; }
	
	.more-hint { padding: 10rpx 0; font-size: 24rpx; color: #999; text-align: center; background: #fafafa; border-radius: 8rpx; margin-bottom: 16rpx; }
	
	.total-summary { 
		display: flex; align-items: center; justify-content: flex-end; 
		padding-top: 20rpx; border-top: 1rpx solid #fafafa;
	}
	.summary-label { font-size: 24rpx; color: #999; }
	.summary-val { font-size: 32rpx; font-weight: bold; color: #333; margin: 0 4rpx; }
	.summary-val.highlight { color: #C1001C; }
	.summary-unit { font-size: 22rpx; color: #999; margin-right: 12rpx; }
	.summary-split { width: 1rpx; height: 20rpx; background: #eee; margin: 0 16rpx; }

	.card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10rpx; }
	.time { font-size: 24rpx; color: #bbb; }
	.btns { display: flex; gap: 16rpx; }
	.btn-cancel, .btn-view { padding: 12rpx 30rpx; border-radius: 30rpx; font-size: 24rpx; }
	.btn-cancel { border: 1rpx solid #ddd; color: #666; }
	.btn-view.primary { background: #C1001C; color: #fff; }

	.list-status-info { padding: 40rpx 0; display: flex; justify-content: center; }
	.nomore-wrap { display: flex; align-items: center; color: #ccc; font-size: 24rpx; }
	.nomore-line { width: 40rpx; height: 1rpx; background: #eee; margin: 0 20rpx; }
	.loading-wrap { color: #999; font-size: 24rpx; display: flex; align-items: center; }
	.load-dot { width: 10rpx; height: 10rpx; background: #C1001C; border-radius: 50%; margin-right: 10rpx; animation: flash 0.6s infinite alternate; }
	@keyframes flash { from { opacity: 0.3; } to { opacity: 1; } }

	.empty-state { display: flex; flex-direction: column; align-items: center; padding-top: 200rpx; color: #bbb; font-size: 28rpx; }
	.empty-state image { width: 220rpx; height: 220rpx; margin-bottom: 30rpx; opacity: 0.6; }
	.safe-bottom { height: 40rpx; }
</style>