rtliveDoctor/pages_user/serviceOrderDetail.vue

<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon"><</text>
			</view>
			<view class="nav-title">服务单详情</view>
			<view class="nav-right">
				<text class="more-icon">...</text>
				<text class="eye-icon">O</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y>
			<view class="detail-section">
				<!-- 服务单标题和已确认标识 -->
				<view class="order-header">
					<view class="order-title-text">服务单</view>
					<view class="confirmed-stamp" v-if="orderDetail.status === 1">已确认</view>
				</view>
				
				<!-- 服务内容 -->
				<view class="service-content">
					<view class="content-title">尊敬的用户: 本次劳务内容:</view>
					
					<!-- 服务表格 -->
					<view class="service-table">
						<view class="table-header">
							<view class="table-cell">具体实施项目</view>
							<view class="table-cell">单场金额</view>
							<view class="table-cell">完成时间</view>
							<view class="table-cell">单位</view>
							<view class="table-cell">数量</view>
							<view class="table-cell">总金额</view>
						</view>
						<view class="table-row" v-for="(item, index) in orderDetail.serviceItems" :key="index">
							<view class="table-cell">{{ item.projectName }}</view>
							<view class="table-cell">{{ item.singleAmount }}</view>
							<view class="table-cell">{{ item.completeTime }}</view>
							<view class="table-cell">{{ item.unit }}</view>
							<view class="table-cell">{{ item.quantity }}</view>
							<view class="table-cell">{{ item.totalAmount }}</view>
						</view>
					</view>
				</view>
				
				<!-- 协议内容 -->
				<view class="agreement-content">
					<view class="agreement-text">
						甲乙双方已签订《服务协议》,乙方实际向甲方提供上述服务,现双方确认该工作已全部完成。乙方确认该笔收入为自己的合理劳动所得,并同意依法纳税,乙方提供银行卡、身份证信息给甲方用于报税,甲方承诺为乙方个人信息保密。
					</view>
					
					<view class="payment-info">
						<view class="payment-text">
							我司将向您支付人民币[{{ orderDetail.totalAmount || '1534' }}]元(大写:{{ orderDetail.amountInWords || '壹仟伍佰叁拾肆元整' }})作为此次劳务报酬(该服务报酬为我司代扣代缴相关税款后的金额),款项将汇入如下账户:
						</view>
						
						<view class="account-info">
							<view class="account-item">
								<text class="account-label">姓名:</text>
								<text class="account-value">{{ orderDetail.accountName || '王小明' }}</text>
							</view>
							<view class="account-item">
								<text class="account-label">开户行:</text>
								<text class="account-value">{{ orderDetail.bankName || '中国农业银行' }}</text>
							</view>
							<view class="account-item">
								<text class="account-label">账号:</text>
								<text class="account-value">{{ orderDetail.accountNumber || '6524012536580258' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 确认选项（仅待确认状态显示） -->
			<view class="confirm-options" v-if="orderDetail.status === 0">
				<view class="option-item">
					<checkbox-group @change="onOptionChange">
						<label class="option-label">
							<checkbox value="promise" :checked="confirmOptions.promise" color="#388BFF" />
							<text class="option-text">承诺上述服务已真实发生;</text>
						</label>
					</checkbox-group>
				</view>
				<view class="option-item">
					<checkbox-group @change="onOptionChange">
						<label class="option-label">
							<checkbox value="lecture" :checked="confirmOptions.lecture" color="#388BFF" />
							<text class="option-text">【适用于提供讲课服务的情形】在提供本次服务之前,已充分悉知和了解讲课内容的材料。</text>
						</label>
					</checkbox-group>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部按钮（仅待确认状态显示） -->
		<view class="bottom-bar" v-if="orderDetail.status === 0">
			<view class="btn btn-cancel" @click="goBack">返回</view>
			<view class="btn btn-confirm" @click="handleConfirm">确认</view>
		</view>
	</view>
</template>

<script>
import { getServiceOrderDetail, confirmServiceOrder } from '@/api-js/serviceOrder'
export default {
	data() {
		return {
			orderId: '',
			orderDetail: {
				status: 0,
				totalAmount: '1534',
				amountInWords: '壹仟伍佰叁拾肆元整',
				accountName: '王小明',
				bankName: '中国农业银行',
				accountNumber: '6524012536580258',
				serviceItems: []
			},
			confirmOptions: {
				promise: false,
				lecture: false
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.orderId = options.id
		}
		if (options.status) {
			this.orderDetail.status = parseInt(options.status)
		}
		this.loadOrderDetail()
	},
	methods: {
		async loadOrderDetail() {
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getServiceOrderDetail({ id: this.orderId })
				uni.hideLoading()
				
				if (res.code === 200 && res.data) {
					this.orderDetail = { ...this.orderDetail, ...res.data }
				} else {
					// 使用示例数据
					this.orderDetail.serviceItems = [
						{ projectName: '病例征集', singleAmount: '111.00', completeTime: '2023年9月12日', unit: '个', quantity: 1, totalAmount: '111.00' },
						{ projectName: '病例征集', singleAmount: '100.00', completeTime: '2023年9月12日', unit: '个', quantity: 1, totalAmount: '100.00' },
						{ projectName: '病例征集', singleAmount: '100.00', completeTime: '2023年9月12日', unit: '个', quantity: 1, totalAmount: '100.00' },
						{ projectName: '病例征集', singleAmount: '1200.00', completeTime: '2023年9月12日', unit: '个', quantity: 1, totalAmount: '1200.00' },
						{ projectName: '病例征集', singleAmount: '23.00', completeTime: '2023年9月12日', unit: '个', quantity: 1, totalAmount: '23.00' }
					]
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载服务单详情失败', e)
				// 使用示例数据
				this.orderDetail.serviceItems = [
					{ projectName: '病例征集', singleAmount: '111.00', completeTime: '2023年9月12日', unit: '个', quantity: 1, totalAmount: '111.00' },
					{ projectName: '病例征集', singleAmount: '100.00', completeTime: '2023年9月12日', unit: '个', quantity: 1, totalAmount: '100.00' },
					{ projectName: '病例征集', singleAmount: '100.00', completeTime: '2023年9月12日', unit: '个', quantity: 1, totalAmount: '100.00' },
					{ projectName: '病例征集', singleAmount: '1200.00', completeTime: '2023年9月12日', unit: '个', quantity: 1, totalAmount: '1200.00' },
					{ projectName: '病例征集', singleAmount: '23.00', completeTime: '2023年9月12日', unit: '个', quantity: 1, totalAmount: '23.00' }
				]
			}
		},
		onOptionChange(e) {
			const values = e.detail.value
			this.confirmOptions.promise = values.includes('promise')
			this.confirmOptions.lecture = values.includes('lecture')
		},
		goBack() {
			uni.navigateBack()
		},
		async handleConfirm() {
			if (!this.confirmOptions.promise) {
				uni.showToast({
					icon: 'none',
					title: '请确认上述服务已真实发生'
				})
				return
			}
			
			try {
				uni.showLoading({ title: '确认中...' })
				const res = await confirmServiceOrder({
					id: this.orderId,
					confirmOptions: this.confirmOptions
				})
				uni.hideLoading()
				
				if (res.code === 200) {
					uni.showToast({
						icon: 'success',
						title: '确认成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg || '确认失败'
					})
				}
			} catch (e) {
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '确认失败'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.nav-left {
		width: 60rpx;
		
		.back-icon {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.nav-right {
		display: flex;
		align-items: center;
		gap: 24rpx;
		width: 60rpx;
		justify-content: flex-end;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
		
		.eye-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

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

.detail-section {
	background: #fff;
	margin: 24rpx;
	border-radius: 16rpx;
	padding: 32rpx;
}

.order-header {
	position: relative;
	text-align: center;
	margin-bottom: 32rpx;
	
	.order-title-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.confirmed-stamp {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%) rotate(-15deg);
		width: 120rpx;
		height: 120rpx;
		border: 4rpx solid rgba(0, 0, 0, 0.1);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.4);
		background: rgba(255, 255, 255, 0.8);
	}
}

.service-content {
	margin-bottom: 32rpx;
	
	.content-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 24rpx;
	}
	
	.service-table {
		border: 1rpx solid #EBEDF0;
		border-radius: 8rpx;
		overflow: hidden;
		overflow-x: auto;
		
		.table-header,
		.table-row {
			display: flex;
			min-width: 1000rpx;
			
			.table-cell {
				flex: 1;
				min-width: 140rpx;
				padding: 16rpx 8rpx;
				font-size: 22rpx;
				text-align: center;
				border-right: 1rpx solid #EBEDF0;
				word-break: break-all;
				
				&:first-child {
					min-width: 200rpx;
				}
				
				&:last-child {
					border-right: none;
				}
			}
		}
		
		.table-header {
			background: #f5f5f5;
			
			.table-cell {
				font-weight: 500;
				color: #333;
			}
		}
		
		.table-row {
			border-top: 1rpx solid #EBEDF0;
			
			.table-cell {
				color: #666;
			}
		}
	}
}

.agreement-content {
	.agreement-text,
	.payment-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.8;
		margin-bottom: 24rpx;
	}
	
	.account-info {
		margin-top: 24rpx;
		
		.account-item {
			margin-bottom: 16rpx;
			font-size: 26rpx;
			
			.account-label {
				color: #666;
			}
			
			.account-value {
				color: #333;
				margin-left: 8rpx;
			}
		}
	}
}

.confirm-options {
	background: #fff;
	margin: 0 24rpx 24rpx;
	border-radius: 16rpx;
	padding: 32rpx;
	
	.option-item {
		margin-bottom: 24rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.option-label {
			display: flex;
			align-items: flex-start;
			
			.option-text {
				flex: 1;
				margin-left: 8rpx;
				font-size: 26rpx;
				color: #333;
				line-height: 1.8;
			}
		}
	}
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 24rpx;
	border-top: 1rpx solid #f0f0f0;
	z-index: 100;
	display: flex;
	gap: 24rpx;
	
	.btn {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		
		&.btn-cancel {
			background: #fff;
			border: 2rpx solid #388BFF;
			color: #388BFF;
		}
		
		&.btn-confirm {
			background: #388BFF;
			color: #fff;
		}
	}
}
</style>