CommunityApp/pages/services/property/detail.vue

<template>
	<view>
<!-- 		<view class="bg-blue padding" style="height: 100rpx;">
			<view class="text-xxl ">
				<text v-if="dataDetail.handleStatus==-1">已撤销</text>
				<text v-else-if="dataDetail.handleStatus==0">待处理</text>
				<text v-else-if="dataDetail.handleStatus==1">已处理</text>
			</view>
			<view class="text-df padding-top-xs">
				<text v-if="dataDetail.handleStatus==-1">当前工单已取消</text>
				<text v-else-if="dataDetail.handleStatus==0">当前工单待处理，请耐心等待</text>
				<text v-else-if="dataDetail.handleStatus==1">当前工单已完成</text>
			</view>
		</view> -->
		
		<view class=" bg-white padding solid-bottom">
			<view class="flex justify-between">
				<view class="text-black">
					<text>工单编号：{{dataDetail.repairNo}}</text>
					<text class="text-blue padding-left-sm" @click="copy(dataDetail.repairNo)">复制</text>
				</view>
				<view class="text-red">
					<text v-if="dataDetail.handleStatus==-1">已撤销</text>
					<text v-else-if="dataDetail.handleStatus==0">待处理</text>
					<text v-else-if="dataDetail.handleStatus==1">已处理</text>
				</view>
			</view>
		</view>
		<u-cell-group>
			<u-cell-item :arrow="false" icon="home" title="所在小区" :value="dataDetail.residentialName"></u-cell-item>
			<u-cell-item :arrow="false" icon="map" title="维修位置" :value="dataDetail.reportPosition"></u-cell-item>
			<u-cell-item :arrow="false" icon="clock" title="创建时间" :value="dataDetail.createTime"></u-cell-item>
			<u-cell-item v-if="dataDetail.handleStatus==1" :arrow="false" icon="clock" title="完成时间" :value="dataDetail.handleTime"></u-cell-item>
		</u-cell-group>
		<view class="cu-card dynamic no-card bg-white" style="padding: 30rpx;">
			<view class="cu-item shadow">
				<view class=" grid flex-sub  col-4 grid-square" >
					<view @click="previewPic(index,picArr)" v-for="(item,index) in picArr" :key="index" class="bg-img" :style="{backgroundImage: 'url(' + item + ')'}">
					</view>
				</view>
			</view>
			<view class="padding-top-20">
				<text>故障描述：</text>
				<text class="content">
					{{dataDetail.reportDetail}}
				</text>
			</view>
		</view>
		
	<!-- 	<view class="margin-top-sm margin-bottom-sm padding bg-white flex" style="box-sizing: border-box;">
			<view class="">
				<text class="">故障描述：</text>
			</view>
			<view class="flex-sub" >
				<text class="">{{dataDetail.reportDetail}}</text>
			</view>
		</view> -->
		
		<view v-if="dataDetail.handleStatus==1&&dataDetail.estimateStatus==1" class="margin-top-sm margin-bottom-sm padding bg-white flex" style="box-sizing: border-box;">
			<view class="">
				<text class="">工单评价：</text>
			</view>
			<view class="flex-sub" >
				<text class="">{{dataDetail.comment}}</text>
			</view>
		</view>
		
		<view  class="footer-fixed   padding-sm bg-white flex justify-end margin-right-30" style="box-sizing: border-box;z-index: 999;padding: 20rpx;">
			<!-- 待处理，取消工单 -->
			<view class="cu-btn sm lineBlue round " v-if="dataDetail.handleStatus==0" @click="cancelItem()">
				取消工单
			</view>
			<!-- 已撤销工单，删除工单 -->
			<view class="cu-btn sm lineBlue round margin-right-20" v-if="dataDetail.handleStatus==-1||dataDetail.handleStatus==1" @click="deleteItem()" >
				删除工单
			</view>
			<!-- v-if="dataDetail.handleStatus==1&&dataDetail.estimateStatus==0" -->
			<!-- 已处理，待评价 -->
			<navigator url="./comment" v-if="dataDetail.handleStatus==1&&dataDetail.estimateStatus==0" class="cu-btn sm bg-blue  round "  >
				写评价
			</navigator>
		</view>
	</view>
</template>
<script>
	var app=getApp()
	var that=this
	export default {
		data() {
			return {
				//报修编号
				id:'',
				content:'',
				dataDetail:{},
				picArr:[]
			}
		},
		onLoad(options) {
			that=this
			this.id=options.id
		},
		onShow() {
			this.fetchDetail()
		},
		methods: {
			previewPic(index,picArr){
				console.log(index);
				uni.previewImage({
					urls:picArr,
					current:index
				})
			},
			copy(data){
				uni.setClipboardData({
					data:data
				})
			},
			fetchDetail(){
				let operation='estateRepair/estateRepairDetail'
				let data={
					id:this.id
				}
				app.globalData.postRequest(data, operation, function (res) {
					app.globalData.dataDetail=res.data.estateRepairDetail
					that.dataDetail=res.data.estateRepairDetail
					that.picArr=that.dataDetail.pic.split(',')
				});
			},
			cancelItem(){
				app.globalData.twoFailHint("确定要取消该工单？",function(){
					//取消状态
					that.dataDetail.handleStatus=-1
					let operation='estateRepair/addEstateRepair'
					app.globalData.postRequest(that.dataDetail, operation, function (res) {
						if (res.data.add_result==true) {
							app.globalData.oneFailHint("取消成功",function(){
								that.fetchDetail()
							});
						}else{
							app.globalData.oneFailHint(res.data.add_result);
						}
					});
				})
			},
			deleteItem(){
				app.globalData.twoFailHint("确定要删除该工单？",function(){
					//删除状态
					that.dataDetail.status=-1
					let operation='estateRepair/addEstateRepair'
					app.globalData.postRequest(that.dataDetail, operation, function (res) {
						if (res.data.add_result==true) {
							app.globalData.oneFailHint("删除成功",function(){
								uni.navigateBack({
									delta:"1"
								})
							});
						}else{
							app.globalData.oneFailHint(res.data.add_result);
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg-blue{
		background-color: #59a5f0;
		color: #FFFFFF;
	}
	
	.lineBlue{
		color: #59a5f0;
		border: 1rpx solid #59a5f0;
	}
</style>