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" v-if="item.checked">
					<span>服务价格</span>
					<span><u-input v-model="item.itemMoney" type="number" @input="handleInput(item)" @blur="validateInput(item)"
							style="width: 260rpx;height: 62rpx;background-color: #f7f8fc;padding: 0rpx 20rpx;margin-right: 16rpx;" />元</span>
				</view>
				<view class="explain" v-if="item.checked">
					<span>服务说明</span>
					<view class="text">
						<textarea v-model="item.itemContent" placeholder="请简要说明收费项目内容" maxlength="100" cols="30" rows="10"
							style="width: 100%;height: 100%;padding: 12rpx 16rpx;font-size: 26rpx;"></textarea>
						<span>{{item.itemContent.length}}/100</span>
					</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: ''
					},
					{
						itemName: '喷漆费',
						checked: false,
						delFlag: '',
						itemMoney: null,
						itemContent: ''
					},
					{
						itemName: '零配件',
						checked: false,
						delFlag: '',
						itemMoney: null,
						itemContent: ''
					},
					{
						itemName: '车辆清洁费',
						checked: false,
						delFlag: '',
						itemMoney: null,
						itemContent: ''
					},
					{
						itemName: '其他费用',
						checked: false,
						delFlag: '',
						itemMoney: null,
						itemContent: ''
					}
				],
				type: '',
				editId: ''
			}
		},
		methods: {

			//返回
			back() {
				// uni.navigateBack();
				// uni.navigateBack({
				// 	delta: 1
				// });
				uni.switchTab({
					url: '/pages/order/index'
				})
			},

			//关闭时置空
			change(item) {
				console.log(item)
				if (!item.checked) {
					item.itemContent = ''
					item.itemMoney = ''
				}
			},
			 // 实时输入时校验（防止用户输入非法字符）
			  handleInput(item) {
			    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 (Number(item.itemMoney) <= 0) {
					uni.showToast({
						title: '金额必须大于0',
						icon: 'none'
					});
					item.itemMoney = ''; // 清空或设置为默认最小值
				}
			},
			submit() {
				
				let list = []
				this.projectList.forEach(item => {
					if (item.checked ) {
						item.delFlag = 0
					} else {
						item.delFlag = 1
						item.itemMoney = 0
					}
					list.push({
						delFlag: item.delFlag,
						itemContent: item.itemContent,
						itemMoney:item.itemMoney ,
						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',
						// id : uni.getStorageSync('login_user_info').id,
						addMerchantServiceVoList: list
					}
					this.$http.post("/ts/merchant/addPaidService", data).then(res => {
						console.log(res)
						if (res.data.code == 200) {
							// this.$emit('upSuccess')
							uni.showToast({
								icon: 'none',
								title: '添加成功'
							})
							this.back()
						}else{
							uni.showToast({
								icon: 'none',
								title: res.data.message
							})
						}
					})
				
			},
			//回显
			getChange() {
				this.$http.get("/ts/merchant/servicesDetails?subOrderId=" + this.orderNo).then(res => {
					if (res.data.code == 200) {

						this.editId = res.data.result.id
						res.data.result.serviceDetails.forEach(item => {
							item.delFlag == 0 ? item.checked = true : item.checked = false
						})
						this.projectList = res.data.result.serviceDetails
					}
				})
			}
		},
		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
			if (this.type == 0) {
				this.getChange()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.project {
		width: 100vw;
		height: 100vh;
		background: #F8F8FA;
		display: flex;
		flex-direction: column;
		// overflow-y: auto;

		/*#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: 0 24rpx;
			overflow-y: auto;
			flex: 1;

			.option {
				width: 100%;
				// height: 86rpx;
				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;
				}

				.price {
					width: 100%;
					height: 78rpx;
					border-bottom: 1px solid #eeeeee;
					display: flex;
					align-items: start;
					justify-content: space-between;

					span {
						display: flex;
						align-items: center;
					}
				}

				.explain {
					margin-top: 16rpx;

					.text {
						width: 100%;
						height: 164rpx;
						background-color: #f7f8fc;
						margin-top: 12rpx;
						position: relative;

						span {
							position: absolute;
							bottom: 12rpx;
							right: 16rpx;
							font-size: 24rpx;
							color: #999999;
						}
					}

				}
			}
		}

		.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;
			}
		}
	}

	::v-deep .custom-switch {
		width: 52rpx;
		/* 自定义宽度 */
		height: 27rpx;
		/* 自定义高度 */

	}

	::v-deep .u-switch__node .node-class {
		width: 25rpx !important;
		/* 自定义按钮大小 */
		height: 25rpx !important;
		/* 自定义按钮大小 */
	}
</style>