create-koa-boot 1.0.0

package/templates/example/uniapp/pages/demo/detail.vue

@@ -0,0 +1,523 @@
+<template>
+	<view class="detail-page">
+		<!-- 骨架屏 -->
+		<view v-if="loading" class="detail-skeleton">
+			<view class="detail-skeleton__card">
+				<uv-skeleton :loading="true" :animate="true" :title="true" :rows="3" titleWidth="60%"
+					rowsWidth="80%" />
+			</view>
+			<view class="detail-skeleton__card">
+				<uv-skeleton :loading="true" :animate="true" :title="true" :rows="4" titleWidth="40%"
+					rowsWidth="90%" />
+			</view>
+			<view class="detail-skeleton__card">
+				<uv-skeleton :loading="true" :animate="true" :title="true" :rows="2" titleWidth="50%"
+					rowsWidth="70%" />
+			</view>
+		</view>
+
+		<template v-else-if="detail">
+			<!-- 头部状态横幅 -->
+			<view class="detail-header" :style="{ background: headerGradient }">
+				<view class="detail-header__status">
+					<text class="detail-header__status-text">{{ detail.statusName }}</text>
+				</view>
+				<view class="detail-header__amount">¥{{ formatAmount(detail.amount, '') }}</view>
+				<view class="detail-header__meta">
+					<text>{{ detail.orderNo }}</text>
+					<text class="detail-header__dot">·</text>
+					<text>{{ detail.typeName }}</text>
+				</view>
+			</view>
+
+			<!-- 基本信息卡片 -->
+			<view class="detail-card">
+				<view class="detail-card__title">
+					<uv-icon name="file-text" size="18" color="#2979ff" />
+					<text>基本信息</text>
+				</view>
+				<view class="detail-card__grid">
+					<view class="detail-card__cell">
+						<text class="detail-card__label">订单编号</text>
+						<text class="detail-card__value mono">{{ detail.orderNo }}</text>
+					</view>
+					<view class="detail-card__cell">
+						<text class="detail-card__label">订单类型</text>
+						<text class="detail-card__value">{{ detail.typeName }}</text>
+					</view>
+					<view class="detail-card__cell">
+						<text class="detail-card__label">当前状态</text>
+						<text class="detail-card__value" :style="{ color: detail.statusColor, fontWeight: '500' }">
+							{{ detail.statusName }}
+						</text>
+					</view>
+					<view class="detail-card__cell">
+						<text class="detail-card__label">订单总额</text>
+						<text class="detail-card__value detail-card__value--price">¥{{ formatAmount(detail.amount, '') }}</text>
+					</view>
+					<view class="detail-card__cell">
+						<text class="detail-card__label">创建时间</text>
+						<text class="detail-card__value">{{ formatTime(detail.createTime) }}</text>
+					</view>
+					<view class="detail-card__cell">
+						<text class="detail-card__label">最后更新</text>
+						<text class="detail-card__value">{{ formatTime(detail.updateTime) }}</text>
+					</view>
+					<view class="detail-card__cell">
+						<text class="detail-card__label">处理人</text>
+						<text class="detail-card__value">{{ detail.handler }}</text>
+					</view>
+					<view class="detail-card__cell">
+						<text class="detail-card__label">所属仓库</text>
+						<text class="detail-card__value">{{ detail.warehouse }}</text>
+					</view>
+				</view>
+
+				<!-- 标签 -->
+				<view class="detail-card__tags" v-if="detail.tags && detail.tags.length">
+					<text class="detail-card__tag" v-for="tag in detail.tags" :key="tag">{{ tag }}</text>
+				</view>
+
+				<!-- 备注 -->
+				<view class="detail-card__remark" v-if="detail.remark">
+					<uv-icon name="info-circle" size="15" color="#f3a73f" />
+					<text class="detail-card__remark-text">{{ detail.remark }}</text>
+				</view>
+			</view>
+
+			<!-- 货品明细 -->
+			<view class="detail-card">
+				<view class="detail-card__title">
+					<uv-icon name="list" size="18" color="#2979ff" />
+					<text>货品明细（共 {{ detail.items.length }} 项）</text>
+				</view>
+				<view class="detail-table">
+					<view class="detail-table__head">
+						<text class="detail-table__th detail-table__th--name">货品名称</text>
+						<text class="detail-table__th detail-table__th--spec">规格</text>
+						<text class="detail-table__th detail-table__th--qty">数量</text>
+						<text class="detail-table__th detail-table__th--price">单价</text>
+						<text class="detail-table__th detail-table__th--total">小计</text>
+					</view>
+					<view class="detail-table__row" v-for="(row, idx) in detail.items" :key="idx">
+						<text class="detail-table__td detail-table__td--name">{{ row.name }}</text>
+						<text class="detail-table__td detail-table__td--spec">{{ row.spec }}</text>
+						<text class="detail-table__td detail-table__td--qty">×{{ row.qty }} {{ row.unit }}</text>
+						<text class="detail-table__td detail-table__td--price mono">¥{{ row.price.toFixed(2) }}</text>
+						<text class="detail-table__td detail-table__td--total mono">¥{{ (row.qty * row.price).toFixed(2)
+							}}</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 客户信息 -->
+			<view class="detail-card">
+				<view class="detail-card__title">
+					<uv-icon name="account" size="18" color="#2979ff" />
+					<text>客户信息</text>
+				</view>
+				<view class="detail-card__grid detail-card__grid--3col">
+					<view class="detail-card__cell">
+						<text class="detail-card__label">客户名称</text>
+						<text class="detail-card__value">{{ detail.customerName }}</text>
+					</view>
+					<view class="detail-card__cell">
+						<text class="detail-card__label">联系电话</text>
+						<text class="detail-card__value">{{ detail.customerPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+							}}</text>
+					</view>
+					<view class="detail-card__cell">
+						<text class="detail-card__label">收货地址</text>
+						<text class="detail-card__value">{{ detail.customerAddress }}</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 操作日志 -->
+			<view class="detail-card">
+				<view class="detail-card__title">
+					<uv-icon name="clock" size="18" color="#2979ff" />
+					<text>操作日志</text>
+				</view>
+				<view class="timeline">
+					<view class="timeline__item" v-for="(log, idx) in detail.logs" :key="idx">
+						<view class="timeline__dot" :class="{ 'timeline__dot--active': idx === 0 }" />
+						<view class="timeline__content">
+							<view class="timeline__header">
+								<text class="timeline__action">{{ log.action }}</text>
+								<text class="timeline__operator">操作人：{{ log.operator }}</text>
+							</view>
+							<text class="timeline__time">{{ formatTime(log.time) }}</text>
+						</view>
+						<uv-line v-if="idx < detail.logs.length - 1" color="#e8e8e8" />
+					</view>
+				</view>
+			</view>
+
+			<!-- 底部操作区 -->
+			<view class="detail-footer">
+				<uv-button type="default" text="返回列表" @click="handleBack" customStyle="flex:1; margin-right: 16rpx;" />
+				<uv-button v-if="detail.status === 'pending'" type="primary" text="开始处理"
+					@click="handleAction('process')" customStyle="flex:1;" />
+				<uv-button v-if="detail.status === 'processing'" type="success" text="标记完成"
+					@click="handleAction('complete')" customStyle="flex:1;" />
+				<uv-button v-if="detail.status === 'completed'" type="primary" plain text="已归档" disabled
+					customStyle="flex:1;" />
+			</view>
+		</template>
+
+		<!-- 加载失败 -->
+		<view v-else class="detail-error">
+			<uv-empty mode="page" text="订单不存在或已被删除" marginTop="200">
+				<uv-button type="primary" text="返回列表" @click="handleBack" />
+			</uv-empty>
+		</view>
+
+		<view class="safe-area-bottom" style="height: 120rpx;" />
+	</view>
+</template>
+
+<script>
+import { getOrderDetail } from '@/services/mock/index'
+import { formatAmount, formatTime } from '@/utils/index'
+
+export default {
+	data() {
+		return {
+			formatAmount,
+			formatTime,
+			loading: true,
+			detail: null
+		}
+	},
+	computed: {
+		headerGradient() {
+			if (!this.detail) return 'linear-gradient(135deg, #2979ff, #5ba0ff)'
+			const map = {
+				pending: 'linear-gradient(135deg, #f3a73f, #f7c16c)',
+				processing: 'linear-gradient(135deg, #2979ff, #5ba0ff)',
+				completed: 'linear-gradient(135deg, #18bc37, #4cd964)',
+				cancelled: 'linear-gradient(135deg, #999, #bbb)'
+			}
+			return map[this.detail.status] || map.processing
+		}
+	},
+	onLoad(options) {
+		const id = options.id
+		if (id) {
+			this.fetchDetail(id)
+		} else {
+			this.loading = false
+			uni.showToast({ title: '参数错误', icon: 'none' })
+		}
+	},
+	methods: {
+		async fetchDetail(id) {
+			this.loading = true
+			try {
+				const data = await getOrderDetail(id)
+				if (data) {
+					this.detail = data
+				} else {
+					this.detail = null
+				}
+			} catch (e) {
+				this.detail = null
+				uni.showToast({ title: '加载失败', icon: 'none' })
+			} finally {
+				this.loading = false
+			}
+		},
+
+		handleBack() {
+			uni.navigateBack()
+		},
+
+		handleAction(action) {
+			const actionMap = { process: '开始处理', complete: '标记完成' }
+			uni.showModal({
+				title: '操作确认',
+				content: `确定要${actionMap[action]}该订单吗？`,
+				success: (res) => {
+					if (res.confirm) {
+						uni.showToast({ title: '操作成功（演示）', icon: 'success' })
+						// 模拟状态变更
+						setTimeout(() => {
+							if (action === 'process') {
+								this.detail.status = 'processing'
+								this.detail.statusName = '处理中'
+								this.detail.statusColor = '#2979ff'
+							} else if (action === 'complete') {
+								this.detail.status = 'completed'
+								this.detail.statusName = '已完成'
+								this.detail.statusColor = '#18bc37'
+							}
+						}, 300)
+					}
+				}
+			})
+		},
+
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.detail-page {
+	min-height: 100vh;
+	background-color: #f5f6f8;
+}
+
+/* ====== 头部状态横幅 ====== */
+.detail-header {
+	padding: 32rpx 32rpx 36rpx;
+	color: #fff;
+
+	&__status {
+		margin-bottom: 12rpx;
+	}
+
+	&__status-text {
+		font-size: 26rpx;
+		background: rgba(255, 255, 255, 0.25);
+		padding: 4rpx 20rpx;
+		border-radius: 20rpx;
+	}
+
+	&__amount {
+		font-size: 56rpx;
+		font-weight: 700;
+		font-family: 'DIN', 'Helvetica Neue', sans-serif;
+		line-height: 1.3;
+	}
+
+	&__meta {
+		font-size: 24rpx;
+		opacity: 0.85;
+		margin-top: 6rpx;
+	}
+
+	&__dot {
+		margin: 0 10rpx;
+	}
+}
+
+/* ====== 详情卡片 ====== */
+.detail-card {
+	background: #fff;
+	border-radius: 16rpx;
+	margin: 20rpx 24rpx;
+	padding: 24rpx;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
+
+	&__title {
+		display: flex;
+		align-items: center;
+		gap: 10rpx;
+		font-size: 28rpx;
+		font-weight: 600;
+		color: #1a1a1a;
+		margin-bottom: 20rpx;
+		padding-bottom: 16rpx;
+		border-bottom: 1rpx solid #f5f5f5;
+	}
+
+	&__grid {
+		display: flex;
+		flex-wrap: wrap;
+
+		&--3col .detail-card__cell {
+			width: 33.33%;
+		}
+	}
+
+	&__cell {
+		width: 50%;
+		margin-bottom: 20rpx;
+		padding-right: 16rpx;
+		box-sizing: border-box;
+	}
+
+	&__label {
+		display: block;
+		font-size: 22rpx;
+		color: #999;
+		margin-bottom: 6rpx;
+	}
+
+	&__value {
+		display: block;
+		font-size: 26rpx;
+		color: #333;
+		word-break: break-all;
+
+		&--price {
+			color: #dd524d;
+			font-weight: 600;
+			font-family: 'DIN', 'Helvetica Neue', sans-serif;
+		}
+
+		&.mono {
+			font-family: 'Courier New', monospace;
+			font-size: 24rpx;
+		}
+	}
+
+	&__tags {
+		display: flex;
+		gap: 16rpx;
+		margin-top: 8rpx;
+	}
+
+	&__tag {
+		font-size: 22rpx;
+		color: #2979ff;
+		background: rgba(41, 121, 255, 0.06);
+		padding: 4rpx 16rpx;
+		border-radius: 6rpx;
+	}
+
+	&__remark {
+		display: flex;
+		align-items: flex-start;
+		gap: 10rpx;
+		margin-top: 16rpx;
+		padding: 16rpx;
+		background: rgba(243, 167, 63, 0.05);
+		border-radius: 10rpx;
+	}
+
+	&__remark-text {
+		font-size: 24rpx;
+		color: #b08a4f;
+		flex: 1;
+		line-height: 1.5;
+	}
+}
+
+/* ====== 货品表格 ====== */
+.detail-table {
+	&__head {
+		display: flex;
+		background: #f8f9fb;
+		border-radius: 8rpx;
+		padding: 14rpx 12rpx;
+		margin-bottom: 8rpx;
+	}
+
+	&__th {
+		font-size: 22rpx;
+		color: #999;
+		font-weight: 500;
+
+		&--name { flex: 2; }
+		&--spec { flex: 1.5; }
+		&--qty { flex: 1; text-align: center; }
+		&--price { flex: 1; text-align: right; }
+		&--total { flex: 1; text-align: right; }
+	}
+
+	&__row {
+		display: flex;
+		padding: 16rpx 12rpx;
+		border-bottom: 1rpx solid #f5f5f5;
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+
+	&__td {
+		font-size: 24rpx;
+		color: #333;
+
+		&--name { flex: 2; font-weight: 500; }
+		&--spec { flex: 1.5; color: #999; font-size: 22rpx; }
+		&--qty { flex: 1; text-align: center; }
+		&--price { flex: 1; text-align: right; }
+		&--total { flex: 1; text-align: right; color: #dd524d; font-weight: 500; }
+	}
+}
+
+/* ====== 时间轴（操作日志） ====== */
+.timeline {
+	&__item {
+		position: relative;
+		padding-left: 36rpx;
+	}
+
+	&__dot {
+		position: absolute;
+		left: 0;
+		top: 6rpx;
+		width: 16rpx;
+		height: 16rpx;
+		border-radius: 50%;
+		background: #ddd;
+		border: 4rpx solid #f5f5f5;
+
+		&--active {
+			background: #2979ff;
+			border-color: rgba(41, 121, 255, 0.15);
+		}
+	}
+
+	&__content {
+		padding-bottom: 20rpx;
+	}
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 6rpx;
+	}
+
+	&__action {
+		font-size: 26rpx;
+		color: #333;
+		font-weight: 500;
+	}
+
+	&__operator {
+		font-size: 22rpx;
+		color: #999;
+	}
+
+	&__time {
+		font-size: 22rpx;
+		color: #bbb;
+	}
+}
+
+/* ====== 底部操作栏 ====== */
+.detail-footer {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	padding: 16rpx 24rpx;
+	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+	background: #fff;
+	border-top: 1rpx solid #f0f0f0;
+	box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
+}
+
+/* ====== 骨架屏 ====== */
+.detail-skeleton {
+	padding: 24rpx;
+
+	&__card {
+		margin-bottom: 20rpx;
+		padding: 24rpx;
+		background: #fff;
+		border-radius: 16rpx;
+	}
+}
+
+/* ====== 错误状态 ====== */
+.detail-error {
+	min-height: 100vh;
+}
+</style>