chuangte_bike_newxcx/page_shanghu/yunwei/gongdanxq.vue

<template>
	<view class="page">
		<u-navbar title="换电详情" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#000'
			title-size='36' height='44'></u-navbar>
		
		<view class="content">
			<!-- 车辆基本信息卡片 -->
			<view class="card">
				<view class="card-header" @click="btnxq">
					<view class="header-left">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uvEJsaNT3zNm414Zqwk3" mode="aspectFit" style="width: 44rpx; height: 44rpx; margin-right: 16rpx;"></image>
						<text class="title">{{xqobj.deviceVehicleNum || '暂无车牌'}}</text>
					</view>
					<view class="header-right">
						<text>详情</text>
						<u-icon name="arrow-right" size="24" color="#999"></u-icon>
					</view>
				</view>
				<view class="divider"></view>
				<view class="info-grid">
					<view class="grid-item">
						<text class="label">SN码</text>
						<text class="value">{{xqobj.deviceSn || '--'}}</text>
					</view>
					<view class="grid-item">
						<text class="label">MAC</text>
						<text class="value">{{xqobj.deviceMac || '--'}}</text>
					</view>
					<view class="grid-item full-width">
						<text class="label">车型</text>
						<text class="value">{{xqobj.modelName || '--'}}</text>
					</view>
				</view>
			</view>

			<!-- 工单信息卡片 -->
			<view class="card">
				<view class="section-title">工单信息</view>
				<view class="info-list">
					<view class="info-row">
						<text class="label">换电工单</text>
						<text class="value">{{xqobj.no || '--'}}</text>
					</view>
					<view class="info-row">
						<text class="label">生成时间</text>
						<text class="value">{{xqobj.createTime || '--'}}</text>
					</view>
					<view class="info-row">
						<text class="label">创建人</text>
						<text class="value">{{xqobj.createBy || '--'}}</text>
					</view>
					<view class="info-row">
						<text class="label">换电前电量</text>
						<text class="value highlight">{{xqobj.createPower == null ? '--' : xqobj.createPower + '%'}}</text>
					</view>
					<view class="info-row vertical">
						<text class="label">备注</text>
						<view class="value-box">{{xqobj.createRemark || '暂无备注'}}</view>
					</view>
				</view>
			</view>
			
			<!-- 完成信息卡片 -->
			<view class="card" v-if="xqobj.status != 1">
				<view class="section-title">完成信息</view>
				<view class="info-list">
					<view class="info-row">
						<text class="label">接单时间</text>
						<text class="value">{{xqobj.receiveTime || '--'}}</text>
					</view>
					<view class="info-row">
						<text class="label">完成时间</text>
						<text class="value">{{xqobj.finishTime || '--'}}</text>
					</view>
					<view class="info-row">
						<text class="label">换电后电量</text>
						<text class="value highlight">{{xqobj.finishPower == null ? '--' : xqobj.finishPower + '%'}}</text>
					</view>
					<view class="info-row">
						<text class="label">换电人员</text>
						<text class="value">{{xqobj.receiveUserName || '--'}}</text>
					</view>
					<view class="info-row vertical">
						<text class="label">完成备注</text>
						<view class="value-box">{{xqobj.finishRemark || '暂无备注'}}</view>
					</view>
				</view>
			</view>
			
			<view style="height: 180rpx;"></view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="footer-btn-box" v-if="xqobj.status == 2">
			<view class="submit-btn" @click="btnwc">
				确认换电完成
			</view>
		</view>

        <!-- 完成输入备注弹窗 -->
        <view class="modal-mask" v-if="beizhuflag" @click="btnqx"></view>
        <view class="custom-modal" v-if="beizhuflag">
        	<view class="modal-title">完成备注</view>
        	<textarea class="modal-textarea" v-model="finishRemark" placeholder="请输入备注信息..." fixed="true"></textarea>
        	<view class="modal-footer">
        		<view class="btn cancel" @click="btnqx">取消</view>
        		<view class="btn confirm" @click="btnqdwc">确认完成</view>
        	</view>
        </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#F7F7F7",
                },
				hdid:'',
				xqobj:{},
				finishRemark:'',
				beizhuflag:false,
			}
		},
		onLoad(e) {
           this.hdid = e.id
		   this.getxq()
		},
		methods: {
			// 点击跳转到车辆详情
			btnxq(){
				if(!this.xqobj.deviceId) return;
				uni.navigateTo({
					url:'/page_shanghu/guanli/device_detail?id=' + this.xqobj.deviceId
				})
			},
			// 请求换电详情
			getxq() {
				this.$u.get(`/bst/powerWork/${this.hdid}`).then(res => {
					if (res.code == 200) {
						this.xqobj = res.data
					}
				})
			},
			// 点击换电弹出弹窗
			btnwc(){
				this.beizhuflag = true
			},
			// 点击取消换电
			btnqx(){
				this.beizhuflag = false
			},
			//点击确定完成
			btnqdwc(){
				let data = {
					id:this.hdid,
					finishRemark:this.finishRemark
				}
				this.$u.put(`/bst/powerWork/complete`,data).then(res =>{
					if(res.code == 200){
						uni.showToast({
							title: '操作完成',
							icon: 'success',
							duration: 2000
						})
						this.xqobj.status = 3
						this.beizhuflag = false
						this.getxq() // 刷新数据
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}
	
	.page {
		min-height: 100vh;
	}
	
	.content {
		padding: 20rpx 30rpx;
	}

	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
		
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			
			.header-left {
				display: flex;
				align-items: center;
				
				.icon {
					margin-right: 16rpx;
				}
				
				.title {
					font-size: 34rpx;
					font-weight: 600;
					color: #333;
				}
			}
			
			.header-right {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #999;
				
				text {
					margin-right: 6rpx;
				}
			}
		}
		
		.divider {
			height: 1rpx;
			background: #f5f5f5;
			margin-bottom: 24rpx;
		}
		
		.info-grid {
			display: flex;
			flex-wrap: wrap;
			
			.grid-item {
				width: 50%;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				
				&.full-width {
					width: 100%;
					margin-bottom: 0;
				}
				
				.label {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 8rpx;
				}
				
				.value {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}
		
		.section-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 24rpx;
			padding-left: 16rpx;
			border-left: 8rpx solid #4C97E7;
			line-height: 1;
		}
		
		.info-list {
			.info-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				font-size: 28rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				&.vertical {
					flex-direction: column;
					align-items: flex-start;
					
					.label {
						margin-bottom: 12rpx;
					}
					
					.value-box {
						width: 100%;
						background: #F8F9FB;
						padding: 20rpx;
						border-radius: 12rpx;
						color: #333;
						font-size: 28rpx;
						box-sizing: border-box;
					}
				}
				
				.label {
					color: #999;
				}
				
				.value {
					color: #333;
					font-weight: 500;
					
					&.highlight {
						color: #4C97E7;
						font-weight: bold;
					}
				}
			}
		}
	}
	
	.footer-btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 40rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		z-index: 10;
		
		.submit-btn {
			width: 100%;
			height: 88rpx;
			background: #4C97E7;
			border-radius: 44rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			
			&:active {
				opacity: 0.9;
			}
		}
	}

	/* 弹窗通用 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.6);
		z-index: 990;
	}

	/* 备注弹窗 */
	.custom-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 600rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx;
		z-index: 999;
		
		.modal-title {
			font-size: 34rpx;
			font-weight: 600;
			text-align: center;
			margin-bottom: 30rpx;
		}
		
		.modal-textarea {
			width: 100%;
			height: 240rpx;
			background: #F5F7FA;
			border-radius: 12rpx;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}
		
		.modal-footer {
			display: flex;
			gap: 30rpx;
			margin-top: 40rpx;
			
			.btn {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				
				&.cancel {
					background: #F5F7FA;
					color: #666;
				}
				
				&.confirm {
					background: #4C97E7;
					color: #fff;
				}
			}
		}
	}
</style>