property/user_ui/work/pages/service/warrantydetail.vue

<template>
	<view class="warrbox" :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar title="报修详情" left-icon="left" @clickLeft="getBackFn"  color="#FFFFFF" :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">	
			</uni-nav-bar>
		</view>
		<!-- <image :src="mbg" class="navbg"></image> -->
		<view class="wymain">
			<view class="wytop flexc">
				<image :src="typeimg" class="flex0"></image>
				<view class="flex1" v-if="repairStatus==1">
					<view class="tit">未派工</view>
					<view class="txt">请尽快指派人员进行处理</view>
				</view>
				<view class="flex1" v-if="repairStatus>1&&repairStatus<4">
					<view class="tit">已派工</view>
					<view class="txt">已指派人员进行处理</view>
				</view>
				<view class="flex1" v-if="repairStatus==4">
					<view class="tit">已完成</view>
					<view class="txt">报修订单已完成</view>
				</view>
			</view>
			<view class="wabox peobox" v-if="repairStatus>1">
				<image :src="head" class="head"></image>
				<view class="flex1">
					<view class="peotit mb6">{{datainfo.staffName}}</view>
					<view class="peotxt">{{datainfo.staffPhone}}</view>
				</view>
				<image :src="phone" class="phone" @click="getPhoneFn"></image>
			</view>
			<view class="wabox">
				<view class="chtop flexc">
					<view class="line"></view>
					<view>报修信息</view>
					<view class="flex1"></view>
				</view>
				<view class="walist">
					<view class="tit">{{datainfo.repairTitle}}</view>
					<view class="txt">{{datainfo.repairDetails}}</view>
					<view class="imgs" v-if="phofile&&phofile.length">
						<image :src="baseUrl+ite" class="img" v-for="(ite,idx) in phofile" :key="idx" @click="getPreviewImage(idx,phofile)"></image>
					</view>
				</view>
			</view>
			<view class="wabox">
				<view class="chtop flexc">
					<view class="line"></view>
					<view>基础信息</view>
					<view class="flex1"></view>
				</view>
				<!-- <view class="walist watxt"><view class="wtit">小区名称</view><view class="wtxt">{{datainfo.communityName}}</view></view> -->
				<view class="walist watxt"><view class="wtit">项目</view><view class="wtxt">{{kaType(datainfo.maintenanceCategory,bxlbList)}}</view></view>
				<view class="walist watxt"><view class="wtit">报修门户</view><view class="wtxt">{{datainfo.houseAddress}}</view></view>
				<view class="walist watxt"><view class="wtit">报修时间</view><view class="wtxt">{{datainfo.repairTime}}</view></view>
				<view class="walist watxt"><view class="wtit">联系方式</view><view class="wtxt">{{datainfo.phoneNumber}}</view></view>
			</view>
			<!-- <view class="wabox" v-if="finshtype>1">
				<view class="chtop flexc">
					<view class="line"></view>
					<view>上门信息</view>
					<view class="flex1"></view>
				</view>
				<view class="walist watxt"><view class="wtit">上门时间</view><view class="wtxt">2024-11-12 14:54:21</view></view>
				<view class="walist watxt flexc"><view class="wtit">上门拍照</view>
					<view class="waimgs"><image :src="head" @click="getPreviewImage"></image></view>
				</view>
				<block v-if="finshtype>2">
					<view class="walist watxt"><view class="wtit">结束时间</view><view class="wtxt">2024-11-12 13:27:36</view></view>
					<view class="walist watxt"><view class="wtit">结束拍照</view><view class="waimgs"><image :src="head" @click="getPreviewImage"></image></view></view>
				</block>
				
			</view> -->
		</view>	
		<!-- <view class="rfbtn" @click="getAssignFn" v-if="finshtype==0">去指派</view>
		<view class="rfbtn rfbga" @click="getCheckFn(1)" v-if="finshtype==1">我已上门</view>
		<view class="rfbtn rfbga" @click="getCheckFn(2)" v-if="finshtype==2">我已完成</view> -->
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import {repairDet,repairPut,repairAssign} from "@/api/work/service.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {getDictionaryFn} from "@/api/system/user.js"
	import {selectDictValue} from "@/utils/common.js"
	export default{
		components:{},
		data(){
			return{
				// mbg:require('@/work/static/service/bxbg.png'),
				typeimg:require('@/work/static/service/type.png'),
				head:require('@/work/static/service/head.png'),
				phone:require('@/work/static/service/phone.png'),
				nvaHeight:44,
				backgroundColor: "transparent",
				baseUrl:config.baseUrl,
				type:'',
				finshtype:3,
				datainfo:{},
				phofile:[],
				bxlbList:[],
				repairStatus:'',
			}
		},
		onLoad: function(e) {
			uni.getSystemInfo({
				success: (e) => {
					this.nvaHeight = Number(e.statusBarHeight)+44;
				}
			})
			if(e.id){
				this.id=e.id;
				this.ptype='edit';
				// this.isdisabled=true;
				this.getDetailFn()
			}
			this.init()
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#0256FD'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		methods:{
			checkPermi, checkRole,
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			init(){
				//报修类别
				getDictionaryFn('baoxiutype').then(res=>{
					if(res.code==200){
						this.bxlbList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
			},
			getAssignFn(){
				this.type='assign'
			},
			getCheckFn(){
				this.type='assigncheck'
			},
			getOpenFn(){
				
			},
			getBackFn(){
				uni.navigateBack({
					delta:1
				})
			},
			getClose(){
				this.type='';
			},
			getSure(){
				this.type='';
			},
			getPhoneFn(){
				uni.makePhoneCall({
					phoneNumber: this.datainfo.staffPhone //仅为示例
				});
			},
			getPreviewImage(idx,arr){
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {
						
					},
					fail: function(err) {
						
					}
				});
			},
			getDetailFn(){
				var that=this;
				repairDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						this.repairStatus=res.data.repairStatus;
						if(res.data.repairImages){
							this.phofile=res.data.repairImages.split(',')
						}
						if(res.data.visitPhoto){
							this.visitPhoto=res.data.visitPhoto.split(',')
						}
						if(res.data.completionPhoto){
							this.completionPhoto=res.data.completionPhoto.split(',')
						}
					}
				})
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.warrbox{min-height: 100vh;background: linear-gradient(180deg, #0256FD 0%,#528AF9 60%, rgba(255,255,255,0) 100%) no-repeat;background-size: 100% 722rpx;}
.rfbga{background: #2ACA8E !important;}
.navbg{width: 100%;height: 722rpx;z-index: 0;}
.wymain{z-index: 2;position: relative;padding: 28rpx 18rpx 110rpx;}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.wytop{padding: 0 38rpx;margin-bottom: 40rpx;
	image{width: 88rpx;height: 88rpx;margin-right: 22rpx;}
	.tit{font-size: 28rpx;color: #FFFFFF;font-weight: bold;margin-bottom: 10rpx;}
	.txt{font-size: 24rpx;color: #FFFFFF;font-weight: 500;}
}
.line{width: 14rpx;height: 48rpx;background: #0256FD;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
.wabox{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;padding-top:32rpx;padding-bottom: 4rpx;
	.walist{padding: 0 36rpx;
		.tit{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 18rpx;}
		.txt{font-weight: 500;font-size: 26rpx;line-height: 36rpx;color: #666666;margin-bottom: 28rpx;}
		.waimgs{display: flex;flex-wrap: wrap;justify-content: flex-end;flex: 1;
			image{width: 142rpx;height: 142rpx;border-radius: 20rpx;margin-left: 20rpx;margin-bottom: 10rpx;}
		}
	}
	.watxt{display: flex;margin-bottom: 22rpx;
		.wtit{font-weight: 500;font-size: 26rpx;color: #272727;flex: 0 0 auto;margin-right: 12rpx;}
		.wtxt{font-weight: 500;font-size: 26rpx;color: #666666;flex: 1;text-align: right;}
	}
	.imgs{display: flex;flex-wrap: wrap;
		.img{width: 142rpx;height: 142rpx;margin: 0 24rpx 24rpx 0;display: block;
			&:nth-of-type(4n){margin-right: 0;}
		}
	}
}

.peobox{padding: 30rpx 36rpx 24rpx;display: flex;align-items: center;
		.head{width: 88rpx;height: 88rpx;margin-right: 24rpx;flex: 0 0 auto;}
		.peotit{font-weight: bold;font-size: 26rpx;color: #272727;}
		.peotxt{font-weight: 500;font-size: 26rpx;color: #AAAAAA;}
		.phone{width: 60rpx;height: 60rpx;flex: 0 0 auto;margin-left: 12rpx;}
	}
.chtop{margin-bottom: 24rpx;padding-right: 48rpx;
		image{width: 14rpx;height: 48rpx;margin-right: 20rpx;}
		view{font-weight: bold;font-size: 28rpx;color: #272727;}
		.num{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
}
</style>