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

<template>
	<view :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="finshtype==0">
					<view class="tit">未派工</view>
					<view class="txt">请尽快指派人员进行处理</view>
				</view>
				<view class="flex1" v-if="finshtype>0&&finshtype<3">
					<view class="tit">已派工</view>
					<view class="txt">已指派人员进行处理</view>
				</view>
				<view class="flex1" v-if="finshtype==3">
					<view class="tit">已完成</view>
					<view class="txt">报修订单已完成</view>
				</view>
			</view>
			<view class="wabox peobox">
				<image :src="head" class="head"></image>
				<view class="flex1">
					<view class="peotit mb6">王师傅</view>
					<view class="peotxt">15802340788</view>
				</view>
				<image :src="phone" class="phone" @click="getPhoneFn"></image>
			</view>
			<view class="wabox">
				<view class="chtop flexc">
					<image :src="line"></image>
					<view>巡更详情</view>
					<view class="flex1"></view>
				</view>
				<view class="walist">
					<view class="tit">二号楼1单元904厨房油烟机损坏</view>
					<view class="txt">二号楼1单元904厨房油烟机无法吸烟，请尽快派人上门 维修，谢谢！</view>
					<view class="imgs">
						<image :src="line" class="img"></image>
					</view>
				</view>
			</view>
			<view class="wabox">
				<view class="chtop flexc">
					<image :src="line"></image>
					<view>基础信息</view>
					<view class="flex1"></view>
				</view>
				<view class="walist watxt"><view class="wtit">小区名称</view><view class="wtxt">幸福小区</view></view>
				<view class="walist watxt"><view class="wtit">报修门户</view><view class="wtxt">二号楼1单元904</view></view>
				<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="wtxt">13805680028</view></view>
			</view>
			<view class="wabox" v-if="finshtype>1">
				<view class="chtop flexc">
					<image :src="line"></image>
					<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>
	<pop-up :type="type" @getClose='getClose' :finshtype='finshtype' @getSure="getSure"></pop-up>
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import popUp from "@/work/components/popup/popup.vue"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{popUp},
		data(){
			return{
				line:require('@/work/static/car/line.png'),
				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,
			}
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (e) => {
					this.nvaHeight = Number(e.statusBarHeight)+44;
				}
			})
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#0256FD'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		methods:{
			checkPermi, checkRole,
			getAssignFn(){
				this.type='assign'
			},
			getCheckFn(){
				this.type='assigncheck'
			},
			getOpenFn(){
				
			},
			getBackFn(){
				uni.navigateBack({
					delta:1
				})
			},
			getClose(){
				this.type='';
			},
			getSure(){
				this.type='';
			},
			getPhoneFn(){
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			getPreviewImage(arr,idx){
				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) {
						
					}
				});
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.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;}
}
.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>