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

<template>
	<view class="order-container">
		<erp-nav-bar title="ERP 下单" :show-back="false" />
		<!-- 0. 全屏加载过渡 -->
		<view class="loading-state-full" v-if="isLoading">
			<view class="loading-anim-box">
				<view class="dot-spinner">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</view>
				<text class="loading-text">正在同步 ERP 数据...</text>
			</view>
		</view>

		<!-- 1. 未登录状态 -->
		<view class="auth-waiting-full" v-else-if="!isLoggedIn">
			<view class="auth-card">
				<image class="auth-icon" src="https://img.icons8.com/color/192/hourglass-sand-top.png" mode="aspectFit">
				</image>
				<text class="auth-title">未登录</text>
				<text class="auth-desc">您还未登录账号，请先登录以后在进行下单操作</text>
				<button class="contact-btn" @click="goToLogin">前往登录</button>
			</view>
		</view>

		<!-- 2. 已登录但未分配授权客户 -->
		<view class="auth-waiting-full" v-else-if="!myInfo.authClientFRowID">
			<view class="auth-card">
				<image class="auth-icon" src="https://img.icons8.com/color/192/hourglass-sand-top.png" mode="aspectFit">
				</image>
				<text class="auth-title">待管理员授权</text>
				<text class="auth-desc">您的账户尚未获得下单权限，请联系管理员核准授权后即可进行下单操作。</text>
				<button class="contact-btn" @click="contactAdmin">联系管理员</button>
			</view>
		</view>

		<!-- 3. 已登录且已分配授权客户：显示下单页面 -->
		<template v-else>
			<scroll-view scroll-y class="order-scroll-list" :show-scrollbar="false" :enhanced="true">
				<view class="list-wrapper">
					<!-- 已选客户信息 -->
					<view class="client-info-bar" v-if="selectedClientName">
						<text class="client-label">下单客户：</text>
						<text class="client-name-text">{{ selectedClientName }}</text>
					</view>

					<!-- 列表头部：仅在有数据时显示 -->
					<view class="list-header" v-if="selectedModels.length > 0">
						<view class="header-left">
							<text class="header-text" v-if="!batchMode">已选型号列表：</text>
							<text class="header-text" v-else>批量修改（{{ selectedIds.length }}/{{ selectedModels.length
							}}）</text>
							<view class="select-all-toggle" v-if="batchMode" @click="toggleSelectAll">
								<text class="select-all-icon" :class="{ checked: isAllSelected }">☐</text>
								<text class="select-all-text">{{ isAllSelected ? '取消全选' : '全选' }}</text>
							</view>
						</view>
						<view class="batch-toggle" :class="{ active: batchMode }" @click="toggleBatchMode">
							<text>{{ batchMode ? '退出' : '批量修改' }}</text>
						</view>
					</view>

					<!-- 1. 列表渲染 (精品化设计) -->
					<view class="model-item-card" v-for="(item, index) in selectedModels" :key="index"
						v-if="selectedModels.length > 0"
						:class="{ 'batch-mode-card': batchMode, 'batch-selected': batchMode && isSelected(item.rowId) }">
						<view class="batch-checkbox" v-if="batchMode" @click.stop="toggleSelect(item.rowId)">
							<view class="checkbox-circle" :class="{ checked: isSelected(item.rowId) }">
								<text class="check-icon" v-if="isSelected(item.rowId)">✓</text>
							</view>
						</view>
						<view class="card-body" @click="batchMode ? toggleSelect(item.rowId) : editItem(index, item)">
							<view class="remove-icon" @click.stop="removeItem(index)">
								<text class="x-icon">×</text>
							</view>
							<view class="card-line">
								<view class="model-info">
									<text class="model-value">{{ item.modelNum }}</text>
								</view>
								<view class="count-tag">
									支数<text class="count-num">{{ item.count }}</text>
								</view>
							</view>
							<view class="card-line secondary">
								<text class="surface-label">表面名称：</text>
								<text class="surface-text">{{ item.surfaceName }}</text>
							</view>
						</view>
					</view>

					<!-- 2. 全屏缺省状态：美化后的引导页 -->
					<view class="empty-state-full" v-else>
						<view class="empty-visual">
							<image class="empty-img" src="https://img.icons8.com/clouds/200/shopping-cart.png"
								mode="aspectFit"></image>
							<view class="empty-bg-glow"></view>
						</view>
						<text class="empty-title">暂无已选型号</text>
						<button class="empty-action-btn" @click="goToAddModel">选型下单</button>
					</view>

					<view class="bottom-safe-space"></view>
				</view>
			</scroll-view>

			<!-- 悬浮添加按钮 (仅在有数据时且非批量模式显示) -->
			<view class="floating-add-btn" @click="goToAddModel" v-if="selectedModels.length > 0 && !batchMode">
				<view class="plus-icon"></view>
			</view>

			<!-- 批量操作栏（批量模式下常驻） -->
			<view class="batch-action-bar" v-if="batchMode">
				<view class="batch-count" v-if="selectedIds.length > 0">已选 {{ selectedIds.length }} 项</view>
				<view class="batch-count placeholder" v-else>请勾选型号</view>
				<view class="batch-btns">
					<button class="batch-btn surface-btn" :disabled="selectedIds.length === 0"
						@click="openBatchSurfacePicker">批量修改表面</button>
					<button class="batch-btn pack-btn" :disabled="selectedIds.length === 0"
						@click="openBatchPackPicker">批量修改包装</button>
				</view>
			</view>

			<!-- 底部支付/下单汇总栏 (仅在有数据时且非批量模式显示) -->
			<view class="footer-summary-bar" v-if="selectedModels.length > 0 && !batchMode">
				<view class="summary-info">
					<text class="count-label">共计：</text>
					<text class="num-highlight">{{ selectedModels.length }}</text>
					<text class="unit">条</text>
					<view class="split-line"></view>
					<text class="num-highlight green">{{ totalCount }}</text>
					<text class="unit">支</text>
				</view>
				<button class="submit-order-btn" :disabled="selectedModels.length === 0"
					@click="submitFinalOrder">立即下单</button>
			</view>
		</template>

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

		<!-- 批量修改 - 表面处理选择弹层 -->
		<view class="custom-picker-mask" v-if="showBatchSurfacePicker" @click="showBatchSurfacePicker = false"
			@touchmove.stop.prevent>
			<view class="picker-popup" @click.stop>
				<view class="popup-header">
					<text class="cancel-text" @click="showBatchSurfacePicker = false">取消</text>
					<text class="popup-title">选择表面处理</text>
					<text class="confirm-text" @click="confirmBatchSurface">确定</text>
				</view>
				<!-- 搜索栏 -->
				<view class="search-bar">
					<view class="search-input-wrap">
						<text class="search-icon">🔍</text>
						<input class="search-input" type="text" v-model="batchSurfaceSearchKey" placeholder="输入名称检索"
							@input="onBatchSurfaceSearch" />
					</view>
				</view>
				<!-- 层级面包屑 -->
				<view class="breadcrumb-bar" v-if="batchSurfaceLevel > 1">
					<text class="back-btn" @click="goBackBatchSurfaceLevel">← 返回</text>
					<text class="breadcrumb-path">{{batchSurfaceBreadcrumbs.map(b => b.label).join(' / ')}}</text>
				</view>
				<!-- 列表区 -->
				<scroll-view scroll-y class="item-list">
					<view class="option-item kind-item" v-for="(item, index) in batchSurfaceKindList" :key="'bsk'+index"
						@click="drillDownBatchSurface(item)">
						<text class="option-text kind-text">{{ item.num }} - {{ item.name }}</text>
						<text class="arrow-right">›</text>
					</view>
					<view class="option-item" v-for="item in batchSurfaceItemList" :key="'bsi'+item.rowId"
						:class="{ active: batchSurfaceId === item.rowId }">
						<text class="option-text" @click="selectBatchSurfaceItem(item)">{{ item.num }} - {{ item.name
						}}</text>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 批量修改 - 包装方式选择弹层 -->
		<view class="custom-picker-mask" v-if="showBatchPackPicker" @click="showBatchPackPicker = false"
			@touchmove.stop.prevent>
			<view class="picker-popup" @click.stop>
				<view class="popup-header">
					<text class="cancel-text" @click="showBatchPackPicker = false">取消</text>
					<text class="popup-title">选择包装方式</text>
					<text class="confirm-text" @click="confirmBatchPack">确定</text>
				</view>
				<view class="search-bar">
					<view class="search-input-wrap">
						<text class="search-icon">🔍</text>
						<input class="search-input" type="text" v-model="batchPackSearchKey" placeholder="输入名称检索"
							@input="onBatchPackSearch" />
					</view>
				</view>
				<scroll-view scroll-y class="item-list" @scrolltolower="loadMorePackBatch">
					<view class="option-item" v-for="item in batchPackList" :key="item.rowId"
						:class="{ active: batchPackId === item.rowId }"
						@click="batchPackId = item.rowId; batchPackName = item.name">
						<text>{{ item.num }} - {{ item.name }}</text>
						<icon type="success_no_circle" size="16" color="#C1001C" v-if="batchPackId === item.rowId">
						</icon>
					</view>
				</scroll-view>
			</view>
		</view>

		<order-confirm-popup :visible="showConfirmPopup" :models="selectedModels" :clientName="confirmClientName"
			:submitting="confirmSubmitting" @confirm="handleConfirmOrder" @close="showConfirmPopup = false" />
	</view>
</template>

<script>
import ErpTabBar from '@/components/erp-tab-bar.vue';
import ErpNavBar from '@/components/erp-nav-bar.vue';
import OrderConfirmPopup from './components/order-confirm-popup.vue';
import { getMyInfo } from '@/api/system/customer.js';
import { listOrderDetail, batchUpdateOrderDetail } from '@/api/erp/orderDetail.js';
import { listColor } from '@/api/erp/color.js';
import { listColorKind } from '@/api/erp/colorKind.js';
import { listPagePack } from '@/api/erp/pack.js';
import { addOrder } from '@/api/erp/order.js';
export default {
	components: { ErpNavBar, ErpTabBar, OrderConfirmPopup },
	data() {
		return {
			isLoggedIn: false,
			isLoading: true, // 初始为加载中
			myInfo: {},
			selectedModels: [],
			selectedClientId: '',
			selectedClientName: '',
			// 批量修改相关
			batchMode: false,
			selectedIds: [],
			// 表面处理选择器
			showBatchSurfacePicker: false,
			batchSurfaceId: '',
			batchSurfaceName: '',
			batchSurfaceSearchKey: '',
			batchSurfaceBreadcrumbs: [],
			batchSurfaceLevel: 1,
			batchSurfaceKindList: [],
			batchSurfaceItemList: [],
			// 包装方式选择器
			showBatchPackPicker: false,
			batchPackList: [],
			batchPackPageNum: 1,
			batchPackHasMore: true,
			batchPackLoading: false,
			batchPackId: '',
			batchPackName: '',
			batchPackSearchKey: '',
			batchPackSearchTimer: null,
			showConfirmPopup: false,
			confirmClientId: '',
			confirmClientName: '',
			confirmSubmitting: false
		}
	},
	computed: {
		totalCount() {
			return this.selectedModels.reduce((sum, item) => sum + parseInt(item.count || 0), 0);
		},
		isAllSelected() {
			return this.selectedModels.length > 0 && this.selectedIds.length === this.selectedModels.length;
		}
	},
	onLoad() {
		// 监听添加型号的事件 - 重新从后端加载
		uni.$on('add_order_item', (data) => {
			this.loadOrderItems(false); // 添加时静默加载，不显示全屏动画
		});
		// 监听修改型号的事件 - 重新从后端加载
		uni.$on('update_order_item', (res) => {
			this.loadOrderItems(false);
		});
	},
	onShow() {
		this.checkLoginStatus();
	},
	onUnload() {
		uni.$off('add_order_item');
		uni.$off('update_order_item');
	},
	methods: {
		/**
		 * 加载已选型号列表（OrderID 为空的草稿）
		 * @Author: Antigravity
		 */
		async loadOrderItems(showFullLoading = true) {
			if (showFullLoading) this.isLoading = true;
			try {
				const res = await listOrderDetail({ orderId: '' });
				this.selectedModels = res.data || [];
			} catch (e) {
				console.error('加载型号列表失败', e);
				uni.showToast({ title: e || '加载型号列表失败', icon: 'none' });
			} finally {
				this.isLoading = false;
			}
		},
		async checkLoginStatus() {
			const token = uni.getStorageSync('token');
			if (!token) {
				this.isLoggedIn = false;
				this.myInfo = {};
				this.selectedClientId = '';
				this.selectedClientName = '';
				this.isLoading = false;
				return;
			}
			try {
				const res = await getMyInfo();
				this.isLoggedIn = true;
				this.myInfo = res.data || {};
				this.loadOrderItems();
			} catch (e) {
				uni.showToast({ title: e || '登录状态校验失败', icon: 'none' });
				uni.removeStorageSync('token');
				uni.removeStorageSync('isLogin');
				this.isLoggedIn = false;
				this.myInfo = {};
				this.selectedClientId = '';
				this.selectedClientName = '';
				this.isLoading = false;
			}
		},
		goToLogin() {
			uni.reLaunch({ url: '/pages/login/index' });
		},
		contactAdmin() { uni.showModal({ title: '联系管理员', content: '管理员电话：138-0000-0000', showCancel: false, confirmColor: '#C1001C' }); },
		goToAddModel() {
			uni.navigateTo({
				url: '/pages/order/add-model/index'
			});
		},
		editItem(index, item) {
			uni.navigateTo({
				url: `/pages/order/edit-model/index?index=${index}&data=${encodeURIComponent(JSON.stringify(item))}`
			});
		},
		removeItem(index) {
			const self = this;
			uni.showModal({
				title: '提示',
				content: '确定移除该型号吗？',
				success: (res) => {
					if (res.confirm) {
						self.selectedModels.splice(index, 1);
					}
				}
			});
		},
		/**
		 * 切换全选 / 取消全选
		 * @Author: Trae
		 */
		toggleSelectAll() {
			if (this.isAllSelected) {
				this.selectedIds = [];
			} else {
				this.selectedIds = this.selectedModels.map(item => item.rowId);
			}
		},
		/**
		 * 切换批量修改模式
		 * @Author: Trae
		 */
		toggleBatchMode() {
			this.batchMode = !this.batchMode;
			if (!this.batchMode) {
				this.selectedIds = [];
			}
		},
		/**
		 * 切换选中状态
		 * @Author: Trae
		 */
		toggleSelect(rowId) {
			const idx = this.selectedIds.indexOf(rowId);
			if (idx > -1) {
				this.selectedIds.splice(idx, 1);
			} else {
				this.selectedIds.push(rowId);
			}
		},
		/**
		 * 判断是否已选中
		 * @Author: Trae
		 */
		isSelected(rowId) {
			return this.selectedIds.indexOf(rowId) > -1;
		},
		/**
		 * 打开批量修改表面处理选择器（二级级联）
		 * @Author: Trae
		 */
		openBatchSurfacePicker() {
			if (this.selectedIds.length === 0) {
				uni.showToast({ title: '请先选择型号', icon: 'none' });
				return;
			}
			this.showBatchSurfacePicker = true;
			this.batchSurfaceId = '';
			this.batchSurfaceName = '';
			this.batchSurfaceSearchKey = '';
			this.batchSurfaceLevel = 1;
			this.batchSurfaceBreadcrumbs = [];
			this.loadBatchSurfaceList('');
		},
		/**
		 * 加载表面处理系列，点击系列后同时加载子系列和具体颜色（批量选择器）
		 * @Author: Trae
		 */
		async loadBatchSurfaceList(parentRowId) {
			try {
				const keyword = (this.batchSurfaceSearchKey || '').trim();
				const kindParams = { name: keyword || undefined };
				if (parentRowId) {
					kindParams.parentRowId = parentRowId;
				}
				const kindRes = await listColorKind(kindParams);
				this.batchSurfaceKindList = kindRes.data || [];
				if (parentRowId) {
					const colorParams = { name: keyword || undefined, parentRowId };
					const colorRes = await listColor(colorParams);
					this.batchSurfaceItemList = colorRes.data || [];
				} else {
					this.batchSurfaceItemList = [];
				}
			} catch (e) {
				uni.showToast({ title: e || '加载表面处理失败', icon: 'none' });
			}
		},
		/**
		 * 表面处理搜索
		 * @Author: Trae
		 */
		onBatchSurfaceSearch() {
			const parentRowId = this.batchSurfaceBreadcrumbs.length > 0
				? this.batchSurfaceBreadcrumbs[this.batchSurfaceBreadcrumbs.length - 1].rowId : '';
			this.loadBatchSurfaceList(parentRowId);
		},
		selectBatchSurfaceItem(item) {
			this.batchSurfaceId = item.rowId;
			this.batchSurfaceName = item.name;
		},
		drillDownBatchSurface(item) {
			this.batchSurfaceBreadcrumbs.push({ rowId: item.rowId, label: item.num });
			this.batchSurfaceId = '';
			this.batchSurfaceName = '';
			this.batchSurfaceLevel++;
			this.loadBatchSurfaceList(item.rowId);
		},
		goBackBatchSurfaceLevel() {
			this.batchSurfaceBreadcrumbs.pop();
			this.batchSurfaceLevel--;
			this.batchSurfaceId = '';
			this.batchSurfaceName = '';
			const parentRowId = this.batchSurfaceBreadcrumbs.length > 0
				? this.batchSurfaceBreadcrumbs[this.batchSurfaceBreadcrumbs.length - 1].rowId : '';
			this.loadBatchSurfaceList(parentRowId);
		},
		/**
		 * 确认批量修改表面处理
		 * @Author: Trae
		 */
		async confirmBatchSurface() {
			if (!this.batchSurfaceId) {
				uni.showToast({ title: '请选择表面处理', icon: 'none' });
				return;
			}
			this.showBatchSurfacePicker = false;
			uni.showLoading({ title: '修改中...', mask: true });
			try {
				await batchUpdateOrderDetail({
					rowIds: this.selectedIds,
					surfaceId: this.batchSurfaceId,
					surfaceName: this.batchSurfaceName
				});
				uni.hideLoading();
				uni.showToast({ title: '修改成功', icon: 'success' });
				this.selectedIds = [];
				this.loadOrderItems(false);
			} catch (e) {
				uni.hideLoading();
				uni.showToast({ title: e || '修改失败', icon: 'none' });
			}
			this.batchSurfaceLevel = 1;
			this.batchSurfaceBreadcrumbs = [];
			this.batchSurfaceId = '';
			this.batchSurfaceName = '';
		},
		/**
		 * 打开批量修改包装方式选择器
		 * @Author: Trae
		 */
		openBatchPackPicker() {
			if (this.selectedIds.length === 0) {
				uni.showToast({ title: '请先选择型号', icon: 'none' });
				return;
			}
			this.showBatchPackPicker = true;
			this.batchPackId = '';
			this.batchPackName = '';
			this.batchPackSearchKey = '';
			this.batchPackPageNum = 1;
			if (this.batchPackList.length === 0) {
				this.loadBatchPackList();
			}
		},
		/**
		 * 加载包装方式列表（批量选择器）
		 * @Author: Trae
		 */
		async loadBatchPackList(pageNum = 1, keyword = '') {
			if (this.batchPackLoading) return;
			this.batchPackLoading = true;
			try {
				const res = await listPagePack({
					pageNum,
					pageSize: 10,
					name: keyword || undefined
				});
				const rows = res.rows || [];
				if (pageNum === 1) {
					this.batchPackList = rows;
				} else {
					this.batchPackList = [...this.batchPackList, ...rows];
				}
				this.batchPackHasMore = rows.length >= 20;
			} catch (e) {
				uni.showToast({ title: e || '加载包装方式失败', icon: 'none' });
			} finally {
				this.batchPackLoading = false;
			}
		},
		/**
		 * 加载更多包装方式列表
		 * @Author: Trae
		 */
		loadMorePackBatch() {
			if (!this.batchPackHasMore || this.batchPackLoading) return;
			this.batchPackPageNum++;
			this.loadBatchPackList(this.batchPackPageNum, this.batchPackSearchKey);
		},
		/**
		 * 包装方式搜索（防抖）
		 * @Author: Trae
		 */
		onBatchPackSearch() {
			if (this.batchPackSearchTimer) clearTimeout(this.batchPackSearchTimer);
			this.batchPackSearchTimer = setTimeout(() => {
				this.batchPackPageNum = 1;
				this.loadBatchPackList(1, this.batchPackSearchKey);
			}, 300);
		},
		/**
		 * 确认批量修改包装方式
		 * @Author: Trae
		 */
		async confirmBatchPack() {
			if (!this.batchPackId) {
				uni.showToast({ title: '请选择包装方式', icon: 'none' });
				return;
			}
			this.showBatchPackPicker = false;
			uni.showLoading({ title: '修改中...', mask: true });
			try {
				await batchUpdateOrderDetail({
					rowIds: this.selectedIds,
					packId: this.batchPackId,
					packName: this.batchPackName
				});
				uni.hideLoading();
				uni.showToast({ title: '修改成功', icon: 'success' });
				this.selectedIds = [];
				this.loadOrderItems(false);
			} catch (e) {
				uni.hideLoading();
				uni.showToast({ title: e || '修改失败', icon: 'none' });
			}
		},
		/**
		 * 提交最终订单 - 选择客户后弹出确认弹窗
		 * @Author: Antigravity
		 */
		async submitFinalOrder() {
			if (this.selectedModels.length === 0) return;

			const clientList = this.myInfo.authClientList || [];
			if (clientList.length === 0) {
				uni.showToast({ title: '暂无授权客户，无法下单', icon: 'none' });
				return;
			}

			// 单个授权客户：直接弹出
			if (clientList.length === 1) {
				this.confirmClientId = clientList[0].rowId;
				this.confirmClientName = clientList[0].name;
				this.showConfirmPopup = true;
				return;
			}

			// 多个授权客户：先选择再弹出
			const clientNames = clientList.map(c => c.name);
			const res = await new Promise((resolve) => {
				uni.showActionSheet({
					itemList: clientNames,
					success: (r) => resolve(r),
					fail: () => resolve(null)
				});
			});
			if (res && res.tapIndex !== undefined) {
				const chosen = clientList[res.tapIndex];
				this.confirmClientId = chosen.rowId;
				this.confirmClientName = chosen.name;
				this.showConfirmPopup = true;
			}
		},
		/**
		 * 确认弹窗回调 - 正式执行下单
		 * @Author: Trae
		 */
		async handleConfirmOrder() {
			this.confirmSubmitting = true;
			uni.showLoading({ title: '正在提交订单', mask: true });
			try {
				const detailIds = this.selectedModels.map(item => item.rowId);
				const submitRes = await addOrder({
					detailIds,
					clientId: this.confirmClientId,
					clientName: this.confirmClientName
				});
				uni.hideLoading();
				this.confirmSubmitting = false;
				this.showConfirmPopup = false;
				const orderId = submitRes.data;
				uni.showToast({ title: '下单成功', icon: 'success' });
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/order/success/index?orderId=' + orderId
					});
				}, 1500);
			} catch (e) {
				uni.hideLoading();
				this.confirmSubmitting = false;
				uni.showToast({ title: e || '下单失败', icon: 'none' });
			}
		}
	}
}
</script>

<style scoped>
/deep/ ::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.order-container {
	width: 100%;
	height: 100vh;
	background: #f8fafc;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* 授权等待样式保持一致 */
.auth-waiting-full {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 200rpx 40rpx 40rpx;
	background: linear-gradient(180deg, rgba(0, 122, 255, 0.08) 0%, rgba(247, 248, 250, 1) 100%);
}

.auth-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.auth-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 50rpx;
}

.auth-title {
	font-size: 44rpx;
	font-weight: bold;
	color: #1a1a1a;
	margin-bottom: 24rpx;
}

.auth-desc {
	font-size: 28rpx;
	color: #666;
	line-height: 1.8;
	margin-bottom: 80rpx;
	padding: 0 20rpx;
}

.contact-btn {
	width: 360rpx;
	height: 96rpx;
	background: linear-gradient(135deg, #C1001C 0%, #FF4D4F 100%);
	color: #fff;
	border-radius: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
	border: none;
	box-shadow: 0 12rpx 30rpx rgba(193, 0, 28, 0.2);
}

.authorized-btn {
	width: 360rpx;
	height: 96rpx;
	background: #fff;
	color: #C1001C;
	border-radius: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
	border: 2rpx solid #C1001C;
	margin-top: 30rpx;
}

/* 已授权列表页样式 */
.order-container {
	width: 100%;
	height: 100vh;
	background: #f7f8fa;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.order-scroll-list {
	flex: 1;
	height: 0;
}

.list-wrapper {
	padding: 30rpx;
	/* 确保最后一条数据不被底部双层固定栏遮挡：汇总栏130 + 菜单栏110 + 安全区 + 缓冲余量 */
	padding-bottom: calc(280rpx + env(safe-area-inset-bottom));
}

.list-header {
	padding: 10rpx 0 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10rpx;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.header-text {
	font-size: 34rpx;
	font-weight: bold;
	color: #1a1a1a;
	position: relative;
	padding-left: 24rpx;
}

.header-text::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10%;
	height: 80%;
	width: 8rpx;
	background: #C1001C;
	border-radius: 4rpx;
}

.select-all-toggle {
	display: flex;
	align-items: center;
	gap: 6rpx;
	padding: 6rpx 16rpx;
	background: #f5f5f5;
	border-radius: 20rpx;
}

.select-all-icon {
	font-size: 28rpx;
	color: #999;
}

.select-all-icon.checked {
	color: #C1001C;
}

.select-all-text {
	font-size: 22rpx;
	color: #666;
}

/* 型号卡片：大幅升级美化 */
.model-item-card {
	background: #fff;
	border-radius: 24rpx;
	padding: 36rpx;
	margin-bottom: 30rpx;
	position: relative;
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.04);
	border: 1rpx solid rgba(0, 0, 0, 0.02);
	display: flex;
	align-items: stretch;
	transition: border 0.25s, background 0.25s, transform 0.15s;
}

.model-item-card.batch-mode-card {
	padding-left: 20rpx;
	gap: 16rpx;
}

.batch-checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 6rpx;
	flex-shrink: 0;
}

.checkbox-circle {
	width: 44rpx;
	height: 44rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: all 0.2s;
}

.checkbox-circle.checked {
	background: #C1001C;
	border-color: #C1001C;
}

.check-icon {
	font-size: 26rpx;
	color: #fff;
	font-weight: bold;
}

.card-body {
	flex: 1;
	min-width: 0;
	position: relative;
}

.remove-icon {
	position: absolute;
	right: -36rpx;
	top: -36rpx;
	width: 50rpx;
	height: 50rpx;
	background: rgba(255, 77, 79, 0.1);
	border-radius: 0 24rpx 0 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}

.x-icon {
	font-size: 32rpx;
	color: #ff4d4f;
	font-weight: bold;
}

.card-line {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.card-line.secondary {
	margin-bottom: 0;
	padding-top: 20rpx;
	border-top: 1rpx dashed #f0f0f0;
}

.model-value {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
	flex: 1;
}

.count-tag {
	background: #FFF1F2;
	color: #C1001C;
	padding: 4rpx 16rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
	font-weight: bold;
}

.count-num {
	font-size: 30rpx;
	margin-left: 8rpx;
}

.surface-label {
	font-size: 26rpx;
	color: #999;
}

.surface-text {
	font-size: 28rpx;
	color: #666;
}

/* 悬浮添加按钮：位置上移避免拥挤 */
.floating-add-btn {
	position: fixed;
	right: 40rpx;
	bottom: calc(260rpx + env(safe-area-inset-bottom) + 40rpx);
	width: 110rpx;
	height: 110rpx;
	background: #C1001C;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12rpx 40rpx rgba(193, 0, 28, 0.4);
	z-index: 100;
	transition: transform 0.2s;
}

.floating-add-btn:active {
	transform: scale(0.9);
}

.plus-icon {
	width: 40rpx;
	height: 4rpx;
	background: #fff;
	border-radius: 2rpx;
	position: relative;
}

.plus-icon::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transform: rotate(90deg);
	border-radius: 2rpx;
}

/* 底部汇总栏：微调间距与样式 */
.footer-summary-bar {
	position: fixed;
	bottom: calc(110rpx + env(safe-area-inset-bottom));
	left: 0;
	width: 100%;
	height: 130rpx;
	background: #fff;
	border-top: 1rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40rpx;
	box-sizing: border-box;
	z-index: 99;
	box-shadow: 0 -10rpx 40rpx rgba(0, 0, 0, 0.05);
}

.summary-info {
	display: flex;
	align-items: center;
}

.count-label {
	font-size: 26rpx;
	color: #999;
}

.num-highlight {
	font-size: 36rpx;
	font-weight: bold;
	color: #1a1a1a;
	margin: 0 4rpx;
}

.num-highlight.green {
	color: #C1001C;
}

.unit {
	font-size: 24rpx;
	color: #999;
	margin-left: 2rpx;
}

.split-line {
	width: 1rpx;
	height: 30rpx;
	background: #eee;
	margin: 0 20rpx;
}

.submit-order-btn {
	width: 220rpx;
	height: 80rpx;
	background: #e0e0e0;
	color: #666;
	font-size: 28rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	margin: 0;
	transition: all 0.3s;
}

.submit-order-btn:not([disabled]) {
	background: #C1001C;
	color: #fff;
	font-weight: bold;
}

/* 全屏缺省页样式 */
.empty-state-full {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 120rpx;
}

.empty-visual {
	position: relative;
	margin-bottom: 40rpx;
	width: 400rpx;
	height: 400rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.empty-img {
	width: 320rpx;
	height: 320rpx;
	z-index: 2;
}

.empty-bg-glow {
	position: absolute;
	width: 240rpx;
	height: 240rpx;
	background: radial-gradient(circle, rgba(193, 0, 28, 0.15) 0%, rgba(248, 250, 252, 0) 70%);
	z-index: 1;
	border-radius: 50%;
}

.empty-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #1a1a1a;
	margin-bottom: 80rpx;
}

.empty-desc {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 60rpx;
	text-align: center;
	padding: 0 80rpx;
	line-height: 1.6;
}

.empty-action-btn {
	width: 320rpx;
	height: 90rpx;
	background: #C1001C;
	color: #fff;
	border-radius: 45rpx;
	font-size: 30rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10rpx 30rpx rgba(193, 0, 28, 0.2);
	border: none;
}

.empty-action-btn:active {
	opacity: 0.8;
	transform: scale(0.96);
}

.bottom-safe-space {
	height: 100rpx;
}

/* 加载动画样式 */
.loading-state-full {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 200rpx;
}

.loading-anim-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dot-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30rpx;
}

.dot {
	width: 16rpx;
	height: 16rpx;
	background-color: #C1001C;
	border-radius: 50%;
	margin: 0 8rpx;
	animation: dot-pulse 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
	animation-delay: -0.32s;
}

.dot:nth-child(2) {
	animation-delay: -0.16s;
}

@keyframes dot-pulse {

	0%,
	80%,
	100% {
		transform: scale(0);
		opacity: 0.3;
	}

	40% {
		transform: scale(1);
		opacity: 1;
	}
}

.loading-text {
	font-size: 26rpx;
	color: #999;
	letter-spacing: 2rpx;
}

/* 已选客户信息栏 */
.client-info-bar {
	display: flex;
	align-items: center;
	padding: 24rpx 32rpx;
	margin-bottom: 20rpx;
	background: linear-gradient(135deg, #FFF1F2 0%, #FFFFFF 100%);
	border-radius: 16rpx;
	border: 1rpx solid rgba(193, 0, 28, 0.1);
}

.client-label {
	font-size: 26rpx;
	color: #999;
}

.client-name-text {
	font-size: 30rpx;
	font-weight: bold;
	color: #C1001C;
}

/* 批量修改按钮 */
.batch-toggle {
	flex-shrink: 0;
	padding: 8rpx 24rpx;
	background: #C1001C;
	border-radius: 40rpx;
	font-size: 24rpx;
	color: #fff;
	display: flex;
	align-items: center;
}

.batch-selected {
	border-color: #C1001C !important;
	background: #FFF1F2 !important;
}

/* 批量操作栏 */
.batch-action-bar {
	position: fixed;
	bottom: calc(110rpx + env(safe-area-inset-bottom));
	left: 0;
	width: 100%;
	height: 110rpx;
	background: #fff;
	border-top: 1rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	z-index: 100;
	box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.batch-count {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.batch-count.placeholder {
	color: #ccc;
}

.batch-btns {
	display: flex;
	gap: 16rpx;
}

.batch-btn {
	width: auto;
	height: 64rpx;
	padding: 0 28rpx;
	border-radius: 32rpx;
	font-size: 26rpx;
	font-weight: 500;
	display: flex;
	align-items: center;
	border: none;
	line-height: 64rpx;
	transition: opacity 0.2s;
}

.batch-btn[disabled] {
	opacity: 0.4;
}

.surface-btn {
	background: linear-gradient(135deg, #1890FF, #096DD9);
	color: #fff;
}

.pack-btn {
	background: linear-gradient(135deg, #52C41A, #389E0D);
	color: #fff;
}

/* 选择器弹层（参照 edit-model 模式） */
.custom-picker-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1000;
	display: flex;
	align-items: flex-end;
}

.picker-popup {
	width: 100%;
	background: #fff;
	border-radius: 32rpx 32rpx 0 0;
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	animation: slideUp 0.15s ease-out;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.cancel-text,
.confirm-text {
	font-size: 30rpx;
	padding: 10rpx;
}

.confirm-text {
	color: #C1001C;
	font-weight: bold;
}

.item-list {
	max-height: 50vh;
	padding: 0 40rpx;
}

.option-item {
	height: 110rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #f8f8f8;
	font-size: 32rpx;
	color: #333;
}

.option-item.active {
	color: #C1001C;
	font-weight: bold;
}

.kind-item {
	background: #fafbfc;
}

.kind-text {
	color: #556;
}

.option-text {
	flex: 1;
	padding: 10rpx 0;
}

.arrow-right {
	font-size: 56rpx;
	color: #bbb;
	padding: 10rpx 0 10rpx 20rpx;
	font-weight: 300;
}

/* 级联面包屑 */
.breadcrumb-bar {
	display: flex;
	align-items: center;
	padding: 16rpx 40rpx;
	background: #fafafa;
	border-bottom: 1rpx solid #f0f0f0;
}

.back-btn {
	color: #C1001C;
	font-size: 28rpx;
	margin-right: 16rpx;
}

.breadcrumb-path {
	font-size: 28rpx;
	color: #666;
}

/* 搜索栏样式 */
.search-bar {
	padding: 16rpx 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.search-input-wrap {
	display: flex;
	align-items: center;
	background: #f5f6f8;
	border-radius: 32rpx;
	padding: 12rpx 24rpx;
}

.search-icon {
	font-size: 28rpx;
	margin-right: 12rpx;
}

.search-input {
	flex: 1;
	font-size: 26rpx;
	color: #333;
	height: 56rpx;
}
</style>