androidCnToWechatGrt/pagesOperation/workorder/detail.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='故障报修'></cus-header>
		<div class="box">
			<div class="b_title">
				故障信息
				<div class="b_status" :class="{'djj':dto.status===1,'yjj':dto.status===0}">{{dto.status===0?'已解决':'未解决'}}</div>
			</div>
			<div class="bs_item">
				<div class="left">项目订单号</div>
				<div class="right">{{'PO0098877666'}}</div>
			</div>
			<div class="bs_item">
				<div class="left">报修地点</div>
				<div class="right">{{'长鑫科技集团股份有限公司'}}</div>
			</div>
			<div class="bs_item">
				<div class="left">产品名称</div>
				<div class="right">{{'高温罩'}}</div>
			</div>
			<div class="bs_item">
				<div class="left">产品编号</div>
				<div class="right">{{'GRT9988811'}}</div>
			</div>
			<div class="bs_item">
				<div class="left">故障发生时间</div>
				<div class="right">{{'2025-03-11 13:00'}}</div>
			</div>
			<div class="bs_item">
				<div class="left">故障类型</div>
				<div class="right">{{'类型A'}}</div>
			</div>
			<div class="bs_item">
				<div class="left">报修人员</div>
				<div class="right">{{'王安宇'}}</div>
			</div>
			<div class="bs_item">
				<div class="left">报修时间</div>
				<div class="right">{{'2025-03-12 13:00'}}</div>
			</div>
			<div class="bs_item">
				<div class="left">故障描述</div>
				<div class="right">{{'故障描述故障描述'}}</div>
			</div>
		</div>
		<div class="box">
			<div class="b_title">故障照片</div>
			<div style="padding-top: 24rpx;">
				<u-upload width="180" height="180"
					:fileList="fileList"
					@afterRead="afterRead"
					@delete="deletePic"
					multiple
					:maxCount="5"
				></u-upload>
			</div>
		</div>
		<div class="box">
			<div class="b_title">故障处理</div>
			<div class="b_item">
				<div class="left">问题状态</div>
				<div class="right">
					<u-radio-group v-model="params.aaa" :size="30" :iconSize="30">
						<u-radio :labelSize="26" :label="0">已解决</u-radio>
						<u-radio :labelSize="26" :label="1">未解决</u-radio>
					</u-radio-group>
				</div>
			</div>
			<div class="b_item">
				<div class="left">故障原因</div>
				<div class="right">
					<input type="text" placeholder="请输入故障原因"  placeholder-class="inp_ph" v-model="params.bbb">
				</div>
			</div>
			<div class="b_item">
				<div class="left">维修开始时间</div>
				<div class="right select" @tap="handleSelect(1)">
					<text>{{startDateText}}</text>
					<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
				</div>
			</div>
			<div class="b_item">
				<div class="left">维修结束时间</div>
				<div class="right select" @tap="handleSelect(2)">
					<text>{{endDateText}}</text>
					<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
				</div>
			</div>
			<div class="b_item">
				<div class="left">维修人员</div>
				<div class="right">
					<input type="text" placeholder="请输入维修人员"  placeholder-class="inp_ph" v-model="params.eee">
				</div>
			</div>
			<div class="b_item2">
				<div class="top">维修描述</div>
				<div class="bottom">
					<u--textarea v-model="dto.fff" placeholder="请输入维修描述" placeholder-class="inp_ph2" border="none" height="110"></u--textarea>
				</div>
			</div>
		</div>
		<div class="bottom_btn">
			<div class="btn" @tap="submit">提交</div>
			<!-- <div class="btn" @tap="back">返回</div> -->
		</div>
		<u-datetime-picker :itemHeight="88" :show="show1" v-model="dto.ccc" mode="date" title="维修开始时间"
			@cancel="show1=false" @confirm="e=>confirm(e,1,'ccc','startDateText')" :immediateChange="true" :minDate="minDate" :maxDate="maxDate"></u-datetime-picker>
		<u-datetime-picker :itemHeight="88" :show="show2" v-model="dto.ccc" mode="date" title="维修结束时间"
			@cancel="show2=false" @confirm="e=>confirm(e,2,'ddd','endDateText')" :immediateChange="true" :minDate="minDate" :maxDate="maxDate"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				dto:{
					status:1
				},
				params:{
					aaa:'',
					bbb:'',
					ccc:'',
					ddd:'',
					eee:'',
					fff:''
				},
				fileList:[],
				show1:false,
				show2:false,
				startDateText:'请输入维修开始时间',
				endDateText:'请输入维修结束时间',
				minDate:'',
				maxDate:'',
			}
		},
		mounted() {
			let d = new Date();
			this.minDate = new Date(d.getFullYear()-3,d.getMonth()+1,d.getDate()).getTime();
			this.maxDate = new Date().getTime();
		},
		methods:{
			handleSelect(type){
				this['show'+type] = true;
			},
			confirm(e,type,key,param){
				this[param] = new Date(e.value).Format('yyyy-MM-dd');
				this.params[key] = new Date(e.value).Format('yyyy-MM-dd');
				this['show'+type] = false;
			},
			submit(){
				uni.navigateBack()
			},
			back(){
				uni.navigateBack()
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				lists.map((item) => {
				  this.fileList.push({
					...item,
					status: "uploading",
					message: "上传中",
				  });
				});
				for (let i = 0; i < lists.length; i++) {
				  const result = await this.uploadFilePromise(lists[i].url);
				  let item = this.fileList[fileListLen];
				  this.fileList.splice(
					fileListLen,
					1,
					Object.assign(item, {
					  status: "success",
					  message: "",
					  url: result,
					})
				  );
				  fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
				  let a = uni.uploadFile({
					url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
					filePath: url,
					name: "file",
					formData: {
					  user: "test",
					},
					success: (res) => {
					  setTimeout(() => {
						resolve(res.data.data);
					  }, 1000);
					},
				  });
				});
			},
		}
	}
</script>
<style>
	.inp_ph{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #B9C0C8;
		line-height: 40rpx;
		text-align: right;
	}
	.inp_ph2{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #B9C0C8;
		line-height: 40rpx;
		text-align: left;
	}
</style>
<style scoped lang="less">
	::v-deep .u-radio:last-child{
		margin-left: 93rpx !important;
	}
	::v-deep .u-upload__button .u-icon__icon{
		font-size: 48rpx !important;
	}
	
	.page{
		padding:0 24rpx 168rpx;
		background: #F4F8FB;
		
		.box{
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 36rpx 24rpx;
			
			.b_title{
				padding-left: 16rpx;
				position: relative;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;
				line-height: 32rpx;
				&::before{
					content: '';
					width: 6rpx;
					height: 32rpx;
					background: #2E69EB;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -16rpx;
				}
				.b_status{
					width: 104rpx;
					height: 48rpx;
					border-radius: 6rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					line-height: 48rpx;
					text-align: center;
					position: absolute;
					left: 168rpx;
					top: 50%;
					margin-top: -24rpx;
					&.djj{
						color: #FEA400;
						background: rgba(254,164,0,0.08);
					}
					&.yjj{
						color: #05C17F;
						background: rgba(20,204,140,0.08);
					}
				}
			}
		
			.bs_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 36rpx;
				.left{
					width: 180rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #86909C;
					line-height: 26rpx;
				}
				.right{
					width: calc(100% - 180rpx);
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #1D2129;
					line-height: 26rpx;
					text-align: right;
				}
			}
			
			.b_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECEEF5;
				padding: 24rpx 0;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
				}
				.right{
					input{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						line-height: 40rpx;
						text-align: right;
					}
					&.select{
						display: flex;
						align-items: center;
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #B9C0C8;
							line-height: 40rpx;
						}
						image{
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
			.b_item2{
				.top{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
					padding-top: 24rpx;
				}
				.bottom{
					padding-bottom: 24rpx;
					input{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						line-height: 40rpx;
					}
				}
			}
		}
		
		.bottom_btn{
			width: 100%;
			height: 148rpx;
			padding: 20rpx 48rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			.btn{
				width: 100%;
				height: 88rpx;
				background: #2E69EB;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}
	}
</style>