LocalLivingServicesUniapp/pages/order/serviceOrder/project.vue

<template>
	<view class="project">
		<view class="top"></view>
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				{{type==0?'修改服务项目':'选择服务项目'}}
			</view>
		</view>
		<view class="content">
			<view class="option" v-for="(item, index) in projectList" :key="index">
				<view class="name">
					<span>{{item.itemName}}</span>
					<u-switch v-model="item.checked" size="50rpx" @change="change(item)"></u-switch>
				</view>
				<view class="price-details" v-if="item.checked">
					<view class="details-wrapper" v-for="(row, rowIndex) in item.serveList" :key="rowIndex">
						<view class="details_item">
							<view class="details_name">
								<span class="label">明细名称</span>
								<u-input v-model="row.name" placeholder="请输入明细名称"  :customStyle="{padding: '0', fontSize: '28rpx'}" />
							</view>
							<view class="details_name">
								<span class="label">项目价格</span>
								<u-input v-model="row.price" type="number" placeholder="请输入价格"  :customStyle="{padding: '0', fontSize: '28rpx'}" />
							</view>
							<view class="action-btns">
								<view class="add" @click="addDetail(item)" v-if="rowIndex === item.serveList.length - 1">
									<image src="/static/icon/icon_plus.png" mode="aspectFit"></image>
									<span>添加</span>
								</view>
								<view class="delete" @click="removeDetail(item, rowIndex)" v-if="item.serveList.length > 1">
									<image src="/static/icon/icon_del.png" mode="aspectFit"></image>
									<span>删除</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_box">
			<view class="customer" @click="back">
				取消
			</view>
			<view class="accept" @click="submit">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkType: '',
				taskId: '',
				orderNo: '',
				productName: '',
				subOrderId: '', //修改用
				projectList: [
					{
						itemName: '车辆维修费',
						checked: false,
						delFlag: '',
						itemMoney: null,
						itemContent: '',
						serveList: [{
							name: '',
							price: '',
							quantity: 1
						}]
					},
					{
						itemName: '喷漆费',
						checked: false,
						delFlag: '',
						itemMoney: null,
						itemContent: '',
						serveList: [{
							name: '',
							price: '',
							quantity: 1
						}]
					},
					{
						itemName: '零配件',
						checked: false,
						delFlag: '',
						itemMoney: null,
						itemContent: '',
						serveList: [{
							name: '',
							price: '',
							quantity: 1
						}]
					},
					{
						itemName: '车辆清洁费',
						checked: false,
						delFlag: '',
						itemMoney: null,
						itemContent: '',
						serveList: [{
							name: '',
							price: '',
							quantity: 1
						}]
					},
					{
						itemName: '其他费用',
						checked: false,
						delFlag: '',
						itemMoney: null,
						itemContent: '',
						serveList: [{
							name: '',
							price: '',
							quantity: 1
						}]
					}
				],
				type: '',
				editId: ''
			}
		},
		methods: {
			//返回
			back() {
				uni.switchTab({
					url: '/pages/order/index'
				})
			},

			//关闭时置空
			change(item) {
				console.log('开关状态变化:', item)
				if (!item.checked) {
					item.itemContent = ''
					item.itemMoney = ''
				} else {
					// 确保选中时有serveList数据
					if (!item.serveList || item.serveList.length === 0) {
						item.serveList = [{
							name: '',
							price: '',
							quantity: 1
						}]
					}
				}
			},
			
			// 添加明细
			addDetail(item) {
				if (!item.serveList) {
					item.serveList = []
				}
				item.serveList.push({
					name: '',
					price: '',
					quantity: item.serveList.length + 1
				})
				console.log('添加明细后:', item.serveList)
			},
			
			// 删除明细
			removeDetail(item, index) {
				if (item.serveList && item.serveList.length > 1) {
					item.serveList.splice(index, 1)
					// 重新排序quantity
					item.serveList.forEach((row, idx) => {
						row.quantity = idx + 1
					})
				}
			},

			// 实时输入时校验（防止用户输入非法字符）
			handleInput(item) {
				if (item.itemMoney) {
					let value = item.itemMoney.toString();
					// 限制整数部分最多8位
					let parts = value.split('.');
					if (parts[0].length > 8) {
						parts[0] = parts[0].slice(0, 8);
					}
					// 限制小数部分最多两位
					if (parts[1]) {
						parts[1] = parts[1].slice(0, 2);
					}
					// 合并整数和小数部分，确保输入的格式符合要求
					item.itemMoney = parts.join('.');
				}
			},
			
			//输入金额
			validateInput(item) {
				if (item.itemMoney && Number(item.itemMoney) <= 0) {
					uni.showToast({
						title: '金额必须大于0',
						icon: 'none'
					});
					item.itemMoney = ''; // 清空或设置为默认最小值
				}
			},
			
			// 计算明细总金额
			calculateTotal(item) {
				if (!item.serveList || item.serveList.length === 0) {
					item.itemMoney = 0
					return
				}
				
				let total = 0
				item.serveList.forEach(row => {
					const price = parseFloat(row.price) || 0
					total += price
				})
				item.itemMoney = total.toFixed(2)
			},
			
			submit() {
				// 计算每个项目的总金额
				this.projectList.forEach(item => {
					this.calculateTotal(item)
				})
				
				let list = []
				this.projectList.forEach(item => {
					if (item.checked) {
						item.delFlag = 0
						// 如果有serveList，生成说明
						if (item.serveList && item.serveList.length > 0) {
							const detailNames = item.serveList.map(row => row.name).filter(name => name).join('、')
							if (detailNames) {
								item.itemContent = detailNames
							}
						}
					} else {
						item.delFlag = 1
						item.itemMoney = 0
					}
					list.push({
						delFlag: item.delFlag,
						itemContent: item.itemContent || '',
						itemMoney: item.itemMoney || 0,
						itemName: item.itemName
					})
				})
				
				console.log('提交数据:', list)
				
				let data = {
					checkType: this.checkType,
					taskId: this.taskId,
					orderNo: this.orderNo,
					orderName: this.productName,
					merchantId: uni.getStorageSync('login_user_info').merchantId,
					id: this.editId,
					serveType: this.checkType < 20 ? '01' : '02',
					addMerchantServiceVoList: list
				}
				
				console.log('最终提交:', data)
				
				this.$http.post("/ts/merchant/addPaidService", data).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '添加成功'
						})
						setTimeout(() => {
							this.back()
						}, 1500)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message || '提交失败'
						})
					}
				}).catch(err => {
					console.error('提交错误:', err)
					uni.showToast({
						icon: 'none',
						title: '网络错误'
					})
				})
			},
			
			//回显
			getChange() {
				this.$http.get("/ts/merchant/servicesDetails?subOrderId=" + this.orderNo).then(res => {
					if (res.data.code == 200) {
						this.editId = res.data.result.id
						const details = res.data.result.serviceDetails || []
						
						// 更新项目列表，保持原有结构
						this.projectList = this.projectList.map(project => {
							const detail = details.find(d => d.itemName === project.itemName)
							if (detail) {
								return {
									...project,
									checked: detail.delFlag == 0,
									delFlag: detail.delFlag,
									itemMoney: detail.itemMoney,
									itemContent: detail.itemContent || '',
									serveList: detail.serveList || [{
										name: detail.itemContent || '',
										price: detail.itemMoney || '',
										quantity: 1
									}]
								}
							}
							return project
						})
						
						console.log('回显数据:', this.projectList)
					}
				}).catch(err => {
					console.error('获取回显数据错误:', err)
				})
			}
		},
		onLoad(options) {
			console.log('页面参数:', options)
			this.checkType = options.checkType || ''
			this.taskId = options.taskId || ''
			this.orderNo = options.orderNo || ''
			this.productName = options.productName || ''
			this.type = options.type || '1'
			if (this.type == 0) {
				this.getChange()
			}
		},
		onShow() {
			// 确保页面显示时数据正确
			console.log('项目列表:', this.projectList)
		}
	}
</script>

<style lang="scss" scoped>
	.project {
		width: 100vw;
		height: 100vh;
		background: #F8F8FA;
		display: flex;
		flex-direction: column;
		
		/*#ifdef APP-PLUS*/
		.top {
			width: 100%;
			height: var(--status-bar-height);
			background: #FFFFFF;
		}
		/*#endif*/
		
		.head {
			width: 100%;
			height: 112rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			position: relative;
			border-bottom: 1px solid #F0F3F5;
			
			.cuIcon-back {
				font-size: 40rpx;
				margin-right: 40rpx;
			}
			
			.case {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 36rpx;
				font-weight: 600;
			}
		}
		
		.content {
			padding: 24rpx;
			overflow-y: auto;
			flex: 1;
			
			.option {
				width: 100%;
				padding: 20rpx 32rpx;
				background: #FFFFFF;
				box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				
				.name {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16rpx;
					font-size: 32rpx;
					font-weight: 500;
				}
				
				.price-details {
					width: 100%;
					margin-top: 20rpx;
					
					.details-wrapper {
						margin-bottom: 24rpx;
						
						&:last-child {
							margin-bottom: 0;
						}
					}
					
					.details_item {
						width: 100%;
						display: flex;
						flex-direction: column;
						gap: 24rpx;
						
						.details_name {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-bottom: 16rpx;
							border-bottom: 1px solid #f0f0f0;
							
							.label {
								font-size: 28rpx;
								color: #333333;
								width: 160rpx;
								flex-shrink: 0;
							}
							
							::v-deep .u-input {
								flex: 1;
								height: 60rpx;
							}
						}
						
						.action-btns {
							display: flex;
							justify-content: flex-end;
							gap: 30rpx;
							padding-top: 10rpx;
							
							.add, .delete {
								display: flex;
								align-items: center;
								padding: 12rpx 24rpx;
								border-radius: 8rpx;
								font-size: 26rpx;
								cursor: pointer;
								
								image {
									width: 28rpx;
									height: 28rpx;
									margin-right: 8rpx;
								}
							}
							
							.add {
								background: #f0f7ff;
								color: #2D88F4;
								border: 1px solid #2D88F4;
							}
							
							.delete {
								background: #fff0f0;
								color: #FF4444;
								border: 1px solid #FF4444;
							}
						}
					}
				}
			}
		}
		
		.btn_box {
			width: 100%;
			height: 109rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 10rpx;
			font-size: 28rpx;
			
			.customer {
				border-radius: 49rpx;
				border: 1px solid #2D88F4;
				width: 324rpx;
				height: 76rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #2D88F4;
			}
			
			.accept {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 324rpx;
				height: 76rpx;
				background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
				border-radius: 49rpx;
				color: #FFFFFF;
			}
		}
	}
</style>