androidCnToWechatGrt/pagesOperation/repair/index.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='故障报修'></cus-header>
		<div class="boxs">
			<div class="box">
				<div class="box_item">
					<div class="left">项目订单号</div>
					<div class="right select" @tap="handleSelect(1)">
						<text>{{orderNo}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
				<div class="box_item">
					<div class="left">报修地点</div>
					<div class="right select" @tap="handleSelect(2)">
						<text>{{placeText}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
				<div class="box_item">
					<div class="left">产品名称</div>
					<div class="right select" @tap="handleSelect(3)">
						<text>{{productText}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
				<div class="box_item">
					<div class="left">产品编号</div>
					<div class="right select" @tap="handleSelect(4)">
						<text>{{productNo}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
			</div>
			<div class="box">
				<div class="box_item">
					<div class="left">故障发生时间</div>
					<div class="right select" @tap="handleSelect(5)">
						<text>{{dateText}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
				<div class="box_item">
					<div class="left">故障类型</div>
					<div class="right select" @tap="handleSelect(6)">
						<text>{{typeText}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
				<div class="box_item">
					<div class="left">报修人员</div>
					<div class="right">
						<input type="text" placeholder="请输入报修人员"  placeholder-class="inp_ph" v-model="dto.ggg">
					</div>
				</div>
				<div class="box_item2">
					<div class="top">故障描述</div>
					<div class="bottom">
						<u--textarea v-model="dto.hhh" placeholder="故障描述" placeholder-class="inp_ph2" border="none" height="110"></u--textarea>
					</div>
				</div>
			</div>
			<div class="box">
				<div class="box_item2">
					<div class="top">故障照片</div>
					<div class="bottom" style="padding-top: 24rpx;">
						<u-upload width="180" height="180"
							:fileList="fileList"
						    @afterRead="afterRead"
						    @delete="deletePic"
						    multiple
						    :maxCount="5"
						></u-upload>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom_btn">
			<div class="btn" @tap="submit">提交</div>
		</div>
		<u-picker :itemHeight="88" :show="show1" :columns="columns1" keyName="label" title="项目订单号"
			@cancel="show1=false" @confirm="e=>confirm(e,1,'orderNo','aaa')" :immediateChange="true"></u-picker>
		<u-picker :itemHeight="88" :show="show2" :columns="columns2" keyName="label" title="报修地点"
			@cancel="show2=false" @confirm="e=>confirm(e,2,'placeText','bbb')" :immediateChange="true"></u-picker>
		<u-picker :itemHeight="88" :show="show3" :columns="columns3" keyName="label" title="产品名称"
			@cancel="show3=false" @confirm="e=>confirm(e,3,'productText','ccc')" :immediateChange="true"></u-picker>
		<u-picker :itemHeight="88" :show="show4" :columns="columns4" keyName="label" title="产品编号"
			@cancel="show4=false" @confirm="e=>confirm(e,4,'productNo','ddd')" :immediateChange="true"></u-picker>
		<u-datetime-picker :itemHeight="88" :show="show5" v-model="dto.eee" mode="date" title="故障发生时间"
			@cancel="show5=false" @confirm="e=>confirm(e,5)" :immediateChange="true" :minDate="minDate" :maxDate="maxDate"></u-datetime-picker>
		<u-picker :itemHeight="88" :show="show6" :columns="columns6" keyName="label" title="故障类型"
			@cancel="show6=false" @confirm="e=>confirm(e,6,'typeText','fff')" :immediateChange="true"></u-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				dto:{
					aaa:'',
					bbb:'',
					ccc:'',
					ddd:'',
					eee:'',
					fff:'',
					ggg:'',
					hhh:''
				},
				fileList:[],
				orderNo:'请选择项目订单号',
				placeText:'请选择报修地点',
				productText:'请选择产品名称',
				productNo:'请选择产品编号',
				dateText:'请选择故障发生时间',
				typeText:'请选择故障类型',
				show1:false,
				show2:false,
				show3:false,
				show4:false,
				show5:false,
				show6:false,
				columns1:[[
					{value:1,label:'PO20250408001'},
					{value:2,label:'PO20250408002'}
				]],
				columns2:[[
					{value:1,label:'长鑫科技集团股份有限公司'},
					{value:2,label:'峻凌电子(合肥)有限公司'}
				]],
				columns3:[[
					{value:1,label:'产品名称A'},
					{value:2,label:'产品名称B'},
				]],
				columns4:[[
					{value:1,label:'P20250408001'},
					{value:2,label:'P20250408002'},
				]],
				columns6:[[
					{value:1,label:'类型A'},
					{value:2,label:'类型B'},
				]],
				minDate:'',
				maxDate:'',
			}
		},
		onLoad() {
			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,param,key){
				if(type!=5){
					this[param] = e.value[0].label;
					this.dto[key] = e.value[0].value;
				}else{
					this.dateText = new Date(e.value).Format('yyyy-MM-dd');
					this.dto.eee = JSON.parse(JSON.stringify(this.dateText));
				}
				this['show'+type] = false;
			},
			// 删除图片
			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);
					},
				  });
				});
			},
			submit(){
				uni.navigateBack()
			}
		}
	}
</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-bottom: 168rpx;
		background: #F4F8FB;
		
		.boxs{
			padding: 0 24rpx;
			.box{
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20rpx;
				padding: 0 24rpx;
			}
		}
		
		.box_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;
					}
				}
			}
		}
		.box_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>