mes-app/pages/purchase/detail.uvue

<template>
	<uni-navbar-lite :showRight=false :title="title"></uni-navbar-lite>
	<view class="page-container">
		<scroll-view class="page-content" :scroll-y="true">
			<!-- 订单基本信息 -->
			<view class="section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">订单信息</text>
				</view>
				<view class="info-card">
					<view class="info-row">
						<text class="info-label">采购单编号</text>
						<text class="info-value primary">{{ purchaseCode }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">供应商</text>
						<text class="info-value">{{ vendorName || '-' }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">合同号</text>
						<text class="info-value">{{ contractNumber || '-' }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">总金额</text>
						<text class="info-value warning">{{ totalAmount }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">状态</text>
						<view class="status-badge" :class="'status-' + status">
							{{ statusText }}
						</view>
					</view>
				</view>
			</view>

			<!-- 订单行列表 -->
			<view class="section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">采购明细</text>
					<text class="section-count">共 {{ lineList.length }} 项</text>
				</view>
				<view class="line-list">
					<view v-for="(item, index) in lineList" :key="getLineId(item, index)" class="line-card">
						<view class="line-top">
							<text class="line-index">{{ index + 1 }}</text>
							<view class="line-right">
								<text class="item-name">{{ getItemName(item) }}</text>
								<text class="item-code-tag">{{ getItemCode(item) }}</text>
							</view>
						</view>
						<view class="line-body">
							<view class="line-row">
								<view class="line-cell">
									<text class="line-label">规格</text>
									<text class="line-value">{{ item.specification || '-' }}</text>
								</view>
								<view class="line-cell">
									<text class="line-label">单位</text>
									<text class="line-value">{{ item.measureName || '-' }}</text>
								</view>
							</view>
							<view class="line-row">
								<view class="line-cell">
									<text class="line-label">数量</text>
									<text class="line-value qty">{{ item.quantity || '0' }}</text>
								</view>
								<view class="line-cell">
									<text class="line-label">单价</text>
									<text class="line-value">{{ getPrice(item) }}</text>
								</view>
							</view>
							<view class="line-row">
								<view class="line-cell">
									<text class="line-label">金额</text>
									<text class="line-value amount">{{ getTotalPrice(item) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 备注 -->
			<view class="section" v-if="remark && remark.length > 0">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">备注</text>
				</view>
				<view class="info-card">
					<text class="remark-text">{{ remark }}</text>
				</view>
			</view>

			</scroll-view>
	</view>
</template>

<script setup lang="uts">
	import { ref, computed, onMounted } from 'vue'
	import { getPurchase } from '../../api/purchase/index'

	const purchaseId = ref<string>('')
	
	const purchaseCode = ref<string>('')
	const vendorName = ref<string>('')
	const contractNumber = ref<string>('')
	const totalAmount = ref<string>('')
	const status = ref<string>('')
	const remark = ref<string>('')
	const lineList = ref<any[]>([])

	const title = computed(() => '采购订单详情')

	const statusText = computed(() => {
		switch (status.value) {
			case 'PREPARE': return '草稿'
			case 'CONFIRMED': return '已确认'
			case 'FINISHED': return '已完成'
			case 'CANCEL': return '已取消'
			default: return status.value
		}
	})

	const formatAmount = (val: any): string => {
		if (val == null) return '0.00'
		const num = Number(val)
		if (isNaN(num)) return '0.00'
		return num.toFixed(2)
	}

	const getPrice = (item: any | null): string => {
		if (item == null) return '0.00'
		const jsonItem = item as UTSJSONObject
		return formatAmount(jsonItem['price'])
	}

	const getTotalPrice = (item: any | null): string => {
		if (item == null) return '0.00'
		const jsonItem = item as UTSJSONObject
		return formatAmount(jsonItem['totalPrice'])
	}

	const getItemCode = (item: any | null): string => {
		if (item == null) return ''
		const jsonItem = item as UTSJSONObject
		const val = jsonItem['itemCode']
		return val != null ? val.toString() : ''
	}

	const getItemName = (item: any | null): string => {
		if (item == null) return ''
		const jsonItem = item as UTSJSONObject
		const val = jsonItem['itemName']
		let name = val != null ? val.toString() : ''
		const idx = name.lastIndexOf('(')
		if (idx > 0) {
			name = name.substring(0, idx)
		}
		return name
	}

	const getLineId = (item: any, index: number): string => {
		return `line-${index}`
	}

	const loadDetail = (): void => {
		if (purchaseId.value.length === 0) return
		getPurchase(purchaseId.value).then((response: any) => {
			const res = response as UTSJSONObject
			const data = res['data'] as UTSJSONObject
			
			purchaseCode.value = data['purchaseCode'] != null ? data['purchaseCode'].toString() : ''
			vendorName.value = data['vendorName'] != null ? data['vendorName'].toString() : ''
			contractNumber.value = data['contractNumber'] != null ? data['contractNumber'].toString() : ''
			totalAmount.value = formatAmount(data['totalAmount'])
			status.value = data['status'] != null ? data['status'].toString() : ''
			remark.value = data['remark'] != null ? data['remark'].toString() : ''
			const lines = data['wmItemPurchaseLineList'] as any[]
			if (lines && lines.length > 0) {
				lineList.value = lines
			}
		}).catch((e) => {
			const error = e as UTSError
			uni.showToast({ title: error?.message.toString() || '加载失败', icon: 'none' })
		})
	}

	onMounted(() => {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		
		if (options != null && options.id != null) {
			purchaseId.value = options.id.toString()
			loadDetail()
		}
	})
</script>

<style lang="scss">
	.page-container {
		flex: 1;
		background-color: #e8f0f9;
	}

	.page-content {
		flex: 1;
		padding: 20rpx;
		padding-bottom: 20rpx;
	}

	.section {
		margin-bottom: 20rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.section-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-indicator {
		width: 6rpx;
		height: 32rpx;
		background-color: #007aff;
		border-radius: 3rpx;
		margin-right: 12rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.section-count {
		margin-left: auto;
		font-size: 24rpx;
		color: #999999;
	}

	.info-card {
		background-color: #f8f9fa;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.info-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #e9ecef;

		&:last-child {
			border-bottom: none;
		}
	}

	.info-label {
		font-size: 28rpx;
		color: #666666;
		width: 180rpx;
		flex-shrink: 0;
	}

	.info-value {
		font-size: 28rpx;
		color: #333333;
		flex: 1;

		&.warning {
			color: #faad14;
		}

		&.primary {
			color: #007aff;
			font-weight: bold;
		}
	}

	.status-badge {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 6rpx;

		&.status-PREPARE {
			background-color: #f0f0f0;
			color: #666666;
		}

		&.status-CONFIRMED {
			background-color: #e6f7ff;
			color: #1890ff;
		}

		&.status-FINISHED {
			background-color: #f6ffed;
			color: #52c41a;
		}

		&.status-CANCEL {
			background-color: #fff1f0;
			color: #ff4d4f;
		}
	}

	.line-list {
		display: flex;
		flex-direction: column;
	}

	.line-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 16rpx;
		margin-bottom: 12rpx;
	}

	.line-top {
		flex-direction: row;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.line-index {
		font-size: 40rpx;
		font-weight: 700;
		color: #007aff;
		margin-right: 20rpx;
		width: 60rpx;
		text-align: center;
	}

	.line-right {
		flex-direction: column;
		flex: 1;
	}

	.item-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #1a1a1a;
	}

	.item-code-tag {
		font-size: 20rpx;
		color: #007aff;
		margin-top: 4rpx;
	}

	.line-body {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.line-row {
		display: flex;
		flex-direction: row;
		gap: 12rpx;
	}

	.line-cell {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		padding: 8rpx 12rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
	}

	.line-label {
		font-size: 22rpx;
		color: #999999;
		margin-right: 4rpx;
	}

	.line-value {
		font-size: 24rpx;
		color: #333333;

		&.qty {
			color: #007aff;
		}

		&.amount {
			color: #faad14;
		}
	}

	.remark-text {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.6;
	}
</style>