androidCnToWechatGrt/pagesInspection/waitOrder/detail.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='工单详情'></cus-header>
		<div class="otitle">报修信息</div>
		<div class="form">
			<div class="item">
				<div class="left">报修时间</div>
				<div class="right">{{order.time}}</div>
			</div>
			<div class="item">
				<div class="left">报修位置</div>
				<div class="right">{{order.place}}</div>
			</div>
			<div class="item">
				<div class="left">报修区域</div>
				<div class="right">{{'公告区域'}}</div>
			</div>
			<div class="item">
				<div class="left">报修类型</div>
				<div class="right">{{order.typename}}</div>
			</div>
			<div class="item">
				<div class="left">联系人</div>
				<div class="right">{{'张浩'}}</div>
			</div>
			<div class="item">
				<div class="left">联系电话</div>
				<div class="right">{{'18799876098'}}</div>
			</div>
			<div class="pre">
				<div class="title">故障描述</div>
				<div class="desc">{{'水龙头一直滴水关不上，请尽快处理！谢谢～'}}</div>
			</div>
		</div>
		<div class="photos">
			<div class="title">照片</div>
			<div class="list">
				<div class="item" v-for="(item,index) in [1,2,3]" :key="index"></div>
			</div>
		</div>
		<div class="otitle" v-if="order.status!==1">维修信息</div>
		<div class="form" v-if="order.status!==1">
			<div class="item">
				<div class="left">紧急程度</div>
				<div class="right">{{'非常紧急'}}</div>
			</div>
			<div class="item">
				<div class="left">维修人员</div>
				<div class="right">{{'张浩'}}</div>
			</div>
			<div class="item">
				<div class="left">联系电话</div>
				<div class="right">{{'18799876098'}}</div>
			</div>
			<div class="item" v-if="order.status==3">
				<div class="left">维修完成时间</div>
				<div class="right">{{'2024-01-08 15:13:45'}}</div>
			</div>
		</div>
		<div class="bottom">
			<div class="btn" v-if="order.status==1" @tap="show = true">指派维修人员</div>
			<div class="btn" v-else @tap="back">返回</div>
		</div>
		<u-popup :show="show" @close="close">
			<div class="popupbox">
				<div class="title">
					指派
					<div class="close"><u-icon name="close" color="#B9C0C8" size="42"></u-icon></div>
				</div>
				<div class="pform">
					<div class="pitem">
						<div class="left">维修人员</div>
						<div class="right" @tap="userShow = true">
							<text v-if="order.repairPerson">{{order.repairPerson}} ></text>
							<div class="tip" v-else>请选择 <u-icon name="arrow-right" color="#B9C0C8" size="26"></u-icon></div>
						</div>
					</div>
					<div class="pitem">
						<div class="left">紧急程度</div>
						<div class="right" @tap="engreShow = true">
							<text v-if="order.engreLevel">{{order.engreLevel}} ></text>
							<div class="tip" v-else>请选择 <u-icon name="arrow-right" color="#B9C0C8" size="26"></u-icon></div>
						</div>
					</div>
				</div>
				<div class="btn" @tap="submit">提交</div>
			</div>
		</u-popup>
		<u-picker :show="userShow" :columns="userColumns" @cancel="userShow=false" @confirm="e=>orderConfirm(e,'repairPerson')"></u-picker>
		<u-picker :show="engreShow" :columns="engreColumns" @cancel="engreShow=false" @confirm="e=>orderConfirm(e,'engreLevel')"></u-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				order:{},
				show:false,
				userShow:false,
				userColumns:[
					['张三','李四','王五']
				],
				engreShow:false,
				engreColumns:[
					['普通','紧急','非常紧急']
				],
			}
		},
		onLoad(option) {
			this.order = JSON.parse(option.order);
		},
		methods:{
			close(){
				this.show = false;
			},
			back(){
				uni.navigateBack();
			},
			orderConfirm(e,type){
				this.order[type] = e.value[0];
				this.userShow = this.engreShow = false;
			},
			submit(){
				this.$showToast('提交成功');
				setTimeout(()=>{
					uni.redirectTo({
						url:'/pagesInspection/waitOrder/index?status=2'
					})
				},1500)
			}
		}
	}
</script>

<style scoped lang="less">
	::v-deep .u-popup__content{
		border-radius: 40rpx 40rpx 0 0 !important;
	}
	.page{
		padding-bottom: 168rpx;
		background: #F4F8FB;
		box-sizing: border-box;
		
		.otitle{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #1D2129;
			line-height: 36rpx;
			margin-top: 40rpx;
			padding-left: 24rpx;
		}
		
		.form{
			width: 100%;
			background: #FFFFFF;
			margin-top: 24rpx;
			.item{
				height: 98rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EDF4FF;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
				}
				.right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #4E5969;
					line-height: 42rpx;
					text-align: right;
				}
			}
			.pre{
				padding: 28rpx 24rpx 56rpx;
				.title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
				}
				.desc{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #4E5969;
					line-height: 42rpx;
					margin-top: 28rpx;
				}
			}
		}
		
		.photos{
			width: 100%;
			padding: 28rpx 30rpx 36rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			background: #FFFFFF;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #1D2129;
				line-height: 42rpx;
			}
			.list{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.item{
					width: calc(100% / 3 - 30rpx);
					height: 220rpx;
					margin-top: 24rpx;
					background: #D8D8D8;
				}
			}
		}
		
		.bottom{
			width: 100%;
			height: 148rpx;
			background: #FFFFFF;
			padding: 20rpx 48rpx 0;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			.btn{
				width: 100%;
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	
		.popupbox{
			width: 100%;
			border-radius: 40rpx 40rpx 0 0;
			padding: 42rpx 24rpx 94rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;
				line-height: 36rpx;
				text-align: center;
				position: relative;
				.close{
					position: absolute;
					right: 0;
					top: 0;
				}
			}
			.pform{
				margin-top: 40rpx;
				.pitem{
					height: 90rpx;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #1D2129;
						line-height: 42rpx;
					}
					.right{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						line-height: 40rpx;
						text-align: right;
						.tip{
							color: #B9C0C8;
							display: flex;
							align-items: center;
						}
					}
				}
			}
			.btn{
				width: calc(100% - 48rpx);
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				margin: 80rpx 24rpx 0;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	}
</style>